{{ define "dashboard" }}
{{ template "head" "Dashboard" }}
{{ template "header" true }}
<main class="max-w-6xl mx-auto px-6 py-8">

  <!-- Stat tiles -->
  <section class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-8">
    <div class="border border-slate-800 bg-slate-900/50 px-4 py-3">
      <div class="text-xs uppercase tracking-wide text-slate-400">Artifacts</div>
      <div class="text-2xl font-semibold mt-1">{{ .Stats.TotalArtifacts }}</div>
    </div>
    <div class="border border-slate-800 bg-slate-900/50 px-4 py-3">
      <div class="text-xs uppercase tracking-wide text-slate-400">Views (7d)</div>
      <div class="text-2xl font-semibold mt-1">{{ .Stats.Views7d }}</div>
    </div>
    <div class="border border-slate-800 bg-slate-900/50 px-4 py-3">
      <div class="text-xs uppercase tracking-wide text-slate-400">Views (30d)</div>
      <div class="text-2xl font-semibold mt-1">{{ .Stats.Views30d }}</div>
    </div>
    <div class="border border-slate-800 bg-slate-900/50 px-4 py-3">
      <div class="text-xs uppercase tracking-wide text-slate-400">Storage</div>
      <div class="text-2xl font-semibold mt-1">{{ humanSize .Stats.StorageBytes }}</div>
    </div>
  </section>

  <!-- Publish form -->
  <section class="border border-slate-800 bg-slate-900/50 p-4 mb-8">
    <h2 class="text-lg font-semibold mb-3">Publish</h2>
    <form method="post" action="/api/publish" enctype="multipart/form-data" class="space-y-3" id="publishForm">
      <label for="dropInput"
             id="dropZone"
             class="relative flex flex-col items-center justify-center text-center cursor-pointer
                    border-2 border-dashed border-slate-700 hover:border-slate-400
                    bg-slate-950/50 hover:bg-slate-950
                    transition-[border-color,background-color,transform] duration-150
                    px-6 py-12 text-sm text-slate-400">

        <!-- Empty state -->
        <div class="flex flex-col items-center" data-state="empty">
          <svg class="w-10 h-10 mb-3 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                  d="M7 16a4 4 0 01-.88-7.9A5 5 0 0115.9 6.56 4 4 0 1118 16M8 13l4-4m0 0l4 4m-4-4v10"/>
          </svg>
          <div><span class="text-slate-100 font-medium">Drop HTML file here</span> or click to browse</div>
          <div class="text-xs text-slate-500 mt-1">.html · up to 5 MB</div>
        </div>

        <!-- Ready state (populated after a file is chosen) -->
        <div class="hidden flex-col items-center w-full max-w-md" data-state="ready">
          <div class="relative mb-3">
            <svg class="w-12 h-12 text-slate-100" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                    d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
            </svg>
            <span class="absolute -bottom-1 -right-1 inline-flex items-center justify-center w-5 h-5 bg-slate-100 text-slate-950 text-[10px] font-bold ring-2 ring-slate-900">✓</span>
          </div>
          <div class="flex items-center gap-2">
            <span class="text-xs uppercase tracking-wider text-slate-200 font-semibold">Ready</span>
            <span class="w-1 h-1 bg-slate-700"></span>
            <span class="text-xs text-slate-500" id="dropSize">—</span>
          </div>
          <div class="font-medium text-slate-100 mt-1 truncate max-w-full" id="dropFilename">file.html</div>
          <div class="text-xs text-slate-400 mt-2">
            click to replace ·
            <button type="button" id="dropClear" class="underline hover:text-slate-200">remove</button>
          </div>
        </div>

        <!-- Error state -->
        <div class="hidden flex-col items-center" data-state="error">
          <svg class="w-10 h-10 mb-3 text-slate-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                  d="M12 9v2m0 4h.01M4.93 4.93l14.14 14.14M12 21a9 9 0 110-18 9 9 0 010 18z"/>
          </svg>
          <div class="text-slate-100 font-semibold" id="dropError">
            <span class="uppercase tracking-wider text-xs text-slate-300 mr-2">Error</span>
            <span id="dropErrorMsg">Only .html files are accepted</span>
          </div>
          <div class="text-xs text-slate-500 mt-1">try again</div>
        </div>

        <input id="dropInput" type="file" name="file" accept=".html,text/html" class="sr-only" required>
      </label>
      <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
        <label class="block">
          <span class="block text-xs text-slate-400 mb-1">Custom slug (optional)</span>
          <input type="text" name="slug" pattern="[a-z0-9][a-z0-9-]{2,31}" placeholder="auto"
                 class="w-full bg-slate-950 border border-slate-800 px-3 py-2 text-sm focus:outline-none focus:border-slate-400">
        </label>
        <label class="block">
          <span class="block text-xs text-slate-400 mb-1">Title (optional)</span>
          <input type="text" name="title" placeholder="from &lt;title&gt; if blank"
                 class="w-full bg-slate-950 border border-slate-800 px-3 py-2 text-sm focus:outline-none focus:border-slate-400">
        </label>
        <label class="block">
          <span class="block text-xs text-slate-400 mb-1">Password (optional)</span>
          <input type="password" name="password" autocomplete="new-password"
                 class="w-full bg-slate-950 border border-slate-800 px-3 py-2 text-sm focus:outline-none focus:border-slate-400">
        </label>
        <label class="block">
          <span class="block text-xs text-slate-400 mb-1">Expires</span>
          <select name="expires_in" class="w-full bg-slate-950 border border-slate-800 px-3 py-2 text-sm focus:outline-none focus:border-slate-400">
            <option value="never">never</option>
            <option value="1h">1 hour</option>
            <option value="24h">1 day</option>
            <option value="7d">7 days</option>
            <option value="30d">30 days</option>
          </select>
        </label>
      </div>
      <div class="flex items-center justify-end">
        <button class="bg-slate-100 hover:bg-white text-slate-950 px-4 py-2 font-medium text-sm">Publish</button>
      </div>
    </form>
  </section>

  <script>
    (function () {
      const zone = document.getElementById('dropZone');
      const input = document.getElementById('dropInput');
      const filename = document.getElementById('dropFilename');
      const sizeEl = document.getElementById('dropSize');
      const errorMsg = document.getElementById('dropErrorMsg');
      const clearBtn = document.getElementById('dropClear');
      if (!zone || !input) return;

      const panels = {
        empty: zone.querySelector('[data-state="empty"]'),
        ready: zone.querySelector('[data-state="ready"]'),
        error: zone.querySelector('[data-state="error"]'),
      };

      const READY = ['border-slate-200', '!border-solid', 'bg-slate-400/10'];
      const OVER  = ['border-slate-300', 'bg-slate-400/15', 'scale-[1.01]'];
      const ERROR = ['border-slate-200', 'bg-slate-400/10'];

      function setState(name) {
        for (const key of Object.keys(panels)) {
          const show = key === name;
          panels[key].classList.toggle('hidden', !show);
          panels[key].classList.toggle('flex', show);
        }
        zone.classList.remove(...READY, ...OVER, ...ERROR);
        if (name === 'ready') zone.classList.add(...READY);
        else if (name === 'error') zone.classList.add(...ERROR);
      }

      const prevent = e => { e.preventDefault(); e.stopPropagation(); };
      ['dragenter', 'dragover'].forEach(ev =>
        zone.addEventListener(ev, e => { prevent(e); zone.classList.add(...OVER); }));
      ['dragleave', 'drop'].forEach(ev =>
        zone.addEventListener(ev, e => { prevent(e); zone.classList.remove(...OVER); }));

      zone.addEventListener('drop', e => {
        const f = e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files[0];
        if (!f) return;
        handleFile(f);
      });

      input.addEventListener('change', () => {
        const f = input.files && input.files[0];
        if (f) handleFile(f);
      });

      clearBtn && clearBtn.addEventListener('click', (e) => {
        e.preventDefault();
        e.stopPropagation();
        input.value = '';
        setState('empty');
      });

      function handleFile(f) {
        if (!/\.html?$/i.test(f.name) && f.type !== 'text/html') {
          errorMsg.textContent = `Not an HTML file: ${f.name}`;
          setState('error');
          setTimeout(() => { if (!input.files[0]) setState('empty'); }, 2500);
          return;
        }
        if (f.size > 5 * 1024 * 1024) {
          errorMsg.textContent = `Too large (${fmtSize(f.size)}, max 5 MB)`;
          setState('error');
          return;
        }
        try {
          const dt = new DataTransfer();
          dt.items.add(f);
          input.files = dt.files;
        } catch (_) { /* no-op: input.files already set if via click */ }
        filename.textContent = f.name;
        sizeEl.textContent = fmtSize(f.size);
        setState('ready');
      }

      function fmtSize(n) {
        if (n < 1024) return `${n} B`;
        if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
        return `${(n / (1024 * 1024)).toFixed(1)} MB`;
      }
    })();
  </script>

  {{ if .FlashSlug }}
  <div class="border-l-2 border-slate-100 bg-slate-900 text-slate-100 px-4 py-3 mb-6 text-sm flex items-center justify-between">
    <div>
      <span class="uppercase tracking-wider text-xs font-bold text-slate-300 mr-2">Published</span>
      <code class="bg-slate-950 border border-slate-800 px-2 py-0.5">{{ .BaseURL }}/p/{{ .FlashSlug }}</code>
    </div>
    <button onclick="navigator.clipboard.writeText('{{ .BaseURL }}/p/{{ .FlashSlug }}')"
            class="bg-slate-100 hover:bg-white text-slate-950 px-3 py-1 text-xs font-medium">Copy link</button>
  </div>
  {{ end }}

  <!-- Artifact list -->
  <section class="border border-slate-800 bg-slate-900/30 overflow-hidden">
    <table class="w-full text-sm">
      <thead class="bg-slate-900 text-slate-400 text-xs uppercase tracking-wide">
        <tr>
          <th class="text-left px-4 py-2">Slug</th>
          <th class="text-left px-4 py-2">Title</th>
          <th class="text-right px-4 py-2">Views</th>
          <th class="text-left px-4 py-2">Last viewed</th>
          <th class="text-left px-4 py-2">7-day</th>
          <th class="text-left px-4 py-2">Size</th>
          <th class="text-right px-4 py-2">Actions</th>
        </tr>
      </thead>
      <tbody>
      {{ range .Items }}
        <tr id="row-{{ .Slug }}" class="border-t border-slate-800 hover:bg-slate-900/50">
          <td class="px-4 py-2">
            <a class="font-mono text-slate-100 underline decoration-slate-600 hover:decoration-slate-200" href="/a/{{ .Slug }}">{{ .Slug }}</a>
            {{ if .HasPassword }}<span class="ml-1 text-xs text-slate-400" title="Password-protected">🔒</span>{{ end }}
          </td>
          <td class="px-4 py-2 text-slate-300">{{ if .Title }}{{ .Title }}{{ else }}<span class="text-slate-500">—</span>{{ end }}</td>
          <td class="px-4 py-2 text-right tabular-nums">{{ .ViewCount }}</td>
          <td class="px-4 py-2 text-slate-400">{{ humanTime .LastViewedAt }}</td>
          <td class="px-4 py-2 spark text-slate-200">{{ sparkline .Spark }}</td>
          <td class="px-4 py-2 text-slate-400">{{ humanSize .SizeBytes }}</td>
          <td class="px-4 py-2 text-right whitespace-nowrap">
            <button onclick="navigator.clipboard.writeText('{{ $.BaseURL }}/p/{{ .Slug }}')"
                    class="text-xs px-2 py-1 bg-slate-800 hover:bg-slate-700">Copy</button>
            <a href="/p/{{ .Slug }}" target="_blank" class="text-xs px-2 py-1 bg-slate-800 hover:bg-slate-700">Open</a>
            <button hx-delete="/a/{{ .Slug }}" hx-target="#row-{{ .Slug }}" hx-swap="outerHTML"
                    hx-confirm="Delete {{ .Slug }}? This cannot be undone."
                    class="text-xs px-2 py-1 border border-slate-500 text-slate-200 hover:bg-slate-800">Delete</button>
          </td>
        </tr>
      {{ else }}
        <tr><td colspan="7" class="px-4 py-10 text-center text-slate-500">No artifacts yet. Drop an HTML file above to publish your first one.</td></tr>
      {{ end }}
      </tbody>
    </table>
  </section>
</main>
{{ template "footer" }}
{{ end }}