{% extends "base.html" %}
{% block title %}— {{ defn.filename }}{% endblock %}
{% block content %}

{# ── breadcrumb + header ── #}
<div class="mb-6">
  <div class="flex items-center gap-2 text-sm text-slate-500 mb-2">
    <a href="/datasets" class="hover:underline">Datasets</a>
    <span>›</span>
    <span class="font-mono text-slate-700">{{ defn.file_id }}</span>
  </div>

  <div class="flex flex-wrap items-center gap-3">
    <h1 class="text-2xl font-bold text-slate-900 font-mono">{{ defn.filename }}</h1>

    {# encoding badge #}
    {% set enc_colors = {
      "csv":     "bg-emerald-100 text-emerald-800",
      "json":    "bg-blue-100 text-blue-800",
      "hf-json": "bg-blue-100 text-blue-800",
      "text":    "bg-slate-100 text-slate-700",
      "pickle":  "bg-purple-100 text-purple-800",
      "pandas":  "bg-purple-100 text-purple-800",
    } %}
    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium
                 {{ enc_colors.get(defn.encoding, 'bg-slate-100 text-slate-600') }}">
      {{ defn.encoding }}
    </span>

    {# file status badge #}
    {% if file_exists %}
    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
      ✓ File found
    </span>
    {% else %}
    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-700">
      ✗ File missing
    </span>
    {% endif %}

    {% if file_size is not none %}
    <span class="ml-auto text-sm text-slate-400">
      {{ (file_size / 1024) | round(1) }} KB
    </span>
    {% endif %}
  </div>

  <p class="mt-1 text-xs text-slate-400 font-mono truncate">{{ defn.path }}</p>
</div>

{# ── flash ── #}
<div id="update-flash" class="mb-4"></div>
<div id="retire-flash" class="mb-4"></div>

{# ── metadata + edit grid ── #}
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">

  {# metadata card #}
  <div class="lg:col-span-2 bg-white rounded-lg border border-slate-200 shadow-sm divide-y divide-slate-100">
    <div class="px-6 py-4">
      <h2 class="text-sm font-semibold text-slate-900">Metadata</h2>
    </div>
    <dl class="divide-y divide-slate-50">
      <div class="px-6 py-3 grid grid-cols-3 gap-4">
        <dt class="text-xs font-medium text-slate-500 uppercase tracking-wider pt-0.5">ID</dt>
        <dd class="col-span-2 text-sm font-mono text-slate-900 break-all">{{ defn.file_id }}</dd>
      </div>
      <div class="px-6 py-3 grid grid-cols-3 gap-4">
        <dt class="text-xs font-medium text-slate-500 uppercase tracking-wider pt-0.5">Filename</dt>
        <dd class="col-span-2 text-sm font-mono text-slate-900">{{ defn.filename }}</dd>
      </div>
      <div class="px-6 py-3 grid grid-cols-3 gap-4">
        <dt class="text-xs font-medium text-slate-500 uppercase tracking-wider pt-0.5">Path</dt>
        <dd class="col-span-2 text-sm font-mono text-slate-700 break-all">{{ defn.path }}</dd>
      </div>
      <div class="px-6 py-3 grid grid-cols-3 gap-4">
        <dt class="text-xs font-medium text-slate-500 uppercase tracking-wider pt-0.5">Encoding</dt>
        <dd class="col-span-2 text-sm text-slate-900">{{ defn.encoding }}</dd>
      </div>
      <div class="px-6 py-3 grid grid-cols-3 gap-4">
        <dt class="text-xs font-medium text-slate-500 uppercase tracking-wider pt-0.5">Tags</dt>
        <dd class="col-span-2 flex flex-wrap gap-1">
          {% if defn.tags %}
            {% for tag in defn.tags %}
            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-indigo-50 text-indigo-700 border border-indigo-100">
              {{ tag }}
            </span>
            {% endfor %}
          {% else %}
            <span class="text-sm text-slate-400">—</span>
          {% endif %}
        </dd>
      </div>
      {% if defn.description %}
      <div class="px-6 py-3 grid grid-cols-3 gap-4">
        <dt class="text-xs font-medium text-slate-500 uppercase tracking-wider pt-0.5">Description</dt>
        <dd class="col-span-2 text-sm text-slate-700">{{ defn.description }}</dd>
      </div>
      {% endif %}
      {% if defn.extended_metadata %}
      <div class="px-6 py-3 grid grid-cols-3 gap-4">
        <dt class="text-xs font-medium text-slate-500 uppercase tracking-wider pt-0.5">Extended metadata</dt>
        <dd class="col-span-2">
          <pre class="text-xs font-mono text-slate-700 bg-slate-50 rounded p-2 overflow-auto max-h-40">{{ defn.extended_metadata | tojson(indent=2) }}</pre>
        </dd>
      </div>
      {% endif %}
    </dl>
  </div>

  {# actions + edit card #}
  <div class="space-y-4" x-data="{ editing: false }">

    {# download / retire actions #}
    <div class="bg-white rounded-lg border border-slate-200 shadow-sm px-6 py-4 space-y-3">
      <h2 class="text-sm font-semibold text-slate-900">Actions</h2>
      {% if file_exists %}
      <a href="/datasets/{{ defn.file_id }}/download"
         class="flex items-center justify-center gap-2 w-full px-4 py-2 rounded-lg
                bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium transition-colors">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
             stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round"
                d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 4v11" />
        </svg>
        Download
      </a>
      {% endif %}
      <button @click="editing = !editing"
              class="flex items-center justify-center gap-2 w-full px-4 py-2 rounded-lg
                     border border-slate-300 text-slate-700 text-sm font-medium
                     hover:bg-slate-50 transition-colors">
        <span x-text="editing ? 'Cancel edit' : 'Edit metadata'"></span>
      </button>
      <button hx-post="/datasets/{{ defn.file_id }}/retire"
              hx-target="#retire-flash"
              hx-swap="innerHTML"
              hx-confirm="Retire '{{ defn.file_id }}'? The file will not be deleted."
              class="flex items-center justify-center gap-2 w-full px-4 py-2 rounded-lg
                     border border-red-300 text-red-600 text-sm font-medium
                     hover:bg-red-50 transition-colors">
        Retire dataset
      </button>
    </div>

    {# edit form #}
    <div x-show="editing" x-cloak
         class="bg-white rounded-lg border border-indigo-200 shadow-sm px-6 py-4">
      <h2 class="text-sm font-semibold text-slate-900 mb-4">Edit metadata</h2>
      <form hx-post="/datasets/{{ defn.file_id }}/update"
            hx-target="#update-flash"
            hx-swap="innerHTML"
            class="space-y-4">

        <div>
          <label class="block text-xs font-medium text-slate-600 mb-1">
            ID
          </label>
          <input type="text" name="new_id" value="{{ defn.file_id }}"
                 class="w-full rounded border border-slate-300 px-3 py-1.5
                        text-sm font-mono text-slate-900 focus:outline-none
                        focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
          <p class="mt-1 text-xs text-slate-400">
            Changing the ID may break references in code or configs.
          </p>
        </div>

        <div>
          <label class="block text-xs font-medium text-slate-600 mb-1">
            Tags <span class="font-normal text-slate-400">(comma-separated)</span>
          </label>
          <input type="text" name="tags" value="{{ tags_str }}"
                 placeholder="train, csv, processed"
                 class="w-full rounded border border-slate-300 px-3 py-1.5
                        text-sm text-slate-900 focus:outline-none
                        focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
        </div>

        <div>
          <label class="block text-xs font-medium text-slate-600 mb-1">
            Description
          </label>
          <input type="text" name="description"
                 value="{{ defn.description or '' }}"
                 placeholder="Brief description of this dataset"
                 class="w-full rounded border border-slate-300 px-3 py-1.5
                        text-sm text-slate-900 focus:outline-none
                        focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
        </div>

        <div>
          <label class="block text-xs font-medium text-slate-600 mb-1">
            Extended metadata
            <span class="font-normal text-slate-400">(JSON object)</span>
          </label>
          <textarea name="extended_metadata" rows="4"
                    placeholder='{"source": "...", "version": "1.0"}'
                    class="w-full rounded border border-slate-300 px-3 py-1.5
                           text-xs font-mono text-slate-900 focus:outline-none
                           focus:ring-2 focus:ring-indigo-500 focus:border-transparent">{{ ext_meta_str }}</textarea>
        </div>

        <button type="submit"
                class="w-full px-4 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-700
                       text-white text-sm font-medium transition-colors">
          Save changes
        </button>
      </form>
    </div>

  </div>
</div>

{# ── preview ── #}
{% if preview_type == 'csv' %}
<div class="bg-white rounded-lg border border-slate-200 shadow-sm">
  <div class="px-6 py-4 border-b border-slate-200 flex items-center justify-between">
    <h2 class="text-sm font-semibold text-slate-900">Preview</h2>
    {% if truncated %}
    <span class="text-xs text-amber-600 bg-amber-50 border border-amber-200 px-2 py-0.5 rounded">
      First {{ csv_rows | length }} rows
    </span>
    {% else %}
    <span class="text-xs text-slate-400">{{ csv_rows | length }} rows</span>
    {% endif %}
  </div>
  <div class="overflow-x-auto">
    <table class="min-w-full divide-y divide-slate-100 text-sm">
      {% if csv_headers %}
      <thead class="bg-slate-50">
        <tr>
          {% for col in csv_headers %}
          <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider whitespace-nowrap">
            {{ col }}
          </th>
          {% endfor %}
        </tr>
      </thead>
      {% endif %}
      <tbody class="divide-y divide-slate-100">
        {% for row in csv_rows %}
        <tr class="hover:bg-slate-50">
          {% for cell in row %}
          <td class="px-4 py-2 text-xs font-mono text-slate-700 whitespace-nowrap">{{ cell }}</td>
          {% endfor %}
        </tr>
        {% endfor %}
        {% if not csv_rows %}
        <tr>
          <td class="px-4 py-4 text-sm text-slate-400 text-center">No data rows found.</td>
        </tr>
        {% endif %}
      </tbody>
    </table>
  </div>
  {% if truncated %}
  <div class="px-6 py-3 border-t border-slate-100 text-xs text-slate-400">
    File contains more rows — download to view complete data.
  </div>
  {% endif %}
</div>

{% elif preview_type == 'text' %}
<div class="bg-white rounded-lg border border-slate-200 shadow-sm">
  <div class="px-6 py-4 border-b border-slate-200 flex items-center justify-between">
    <h2 class="text-sm font-semibold text-slate-900">Preview</h2>
    {% if truncated %}
    <span class="text-xs text-amber-600 bg-amber-50 border border-amber-200 px-2 py-0.5 rounded">
      First 50 lines
    </span>
    {% endif %}
  </div>
  <div class="px-6 py-4">
    <pre class="text-xs font-mono text-slate-700 overflow-auto max-h-[65vh] whitespace-pre-wrap leading-relaxed">{{ text_content }}</pre>
  </div>
  {% if truncated %}
  <div class="px-6 py-3 border-t border-slate-100 text-xs text-slate-400">
    File contains more lines — download to view complete content.
  </div>
  {% endif %}
</div>

{% elif preview_type == 'missing' %}
<div class="bg-white rounded-lg border border-slate-200 shadow-sm px-6 py-8 text-center">
  <p class="text-sm text-slate-500 font-medium">File not found on disk</p>
  <p class="text-xs text-slate-400 mt-1 font-mono">{{ defn.path }}/{{ defn.filename }}</p>
</div>

{% elif preview_type == 'error' %}
<div class="bg-white rounded-lg border border-red-200 shadow-sm px-6 py-8 text-center">
  <p class="text-sm text-red-600 font-medium">Could not read file</p>
  {% if preview_error %}
  <p class="text-xs text-slate-400 mt-1 font-mono">{{ preview_error }}</p>
  {% endif %}
</div>

{% else %}
<div class="bg-white rounded-lg border border-slate-200 shadow-sm px-6 py-8 text-center">
  <p class="text-sm text-slate-500">No preview available for this format ({{ defn.encoding }}).</p>
  {% if file_exists %}
  <p class="text-xs text-slate-400 mt-1">Use the download button to open the file.</p>
  {% endif %}
</div>
{% endif %}

{% endblock %}