{% extends "congress/base.html" %}

{% block title %}Search — Alcove Congress{% endblock %}

{% block page_header %}
<div class="bg-white border-b border-primary-100 px-6 py-4">
  <div class="max-w-5xl mx-auto">
    <h1 class="font-ui font-semibold text-primary-800 text-lg">Legislative Search</h1>
    <p class="font-ui text-sm text-primary-500 mt-0.5">Search bills, statutes, regulations, and committee reports</p>
  </div>
</div>
{% endblock %}

{% block sidebar_filters %}
<div class="px-4 py-4 border-t border-primary-700">
  <p class="font-ui text-xs font-semibold text-primary-500 uppercase tracking-wider mb-3">Filter by source</p>
  <div class="space-y-1.5 font-ui text-sm text-primary-300">
    <label class="flex items-center gap-2 cursor-pointer hover:text-white">
      <input type="checkbox" class="rounded border-primary-600 text-accent bg-primary-800" checked> Bills &amp; Resolutions
    </label>
    <label class="flex items-center gap-2 cursor-pointer hover:text-white">
      <input type="checkbox" class="rounded border-primary-600 text-accent bg-primary-800" checked> U.S. Code
    </label>
    <label class="flex items-center gap-2 cursor-pointer hover:text-white">
      <input type="checkbox" class="rounded border-primary-600 text-accent bg-primary-800" checked> CFR
    </label>
    <label class="flex items-center gap-2 cursor-pointer hover:text-white">
      <input type="checkbox" class="rounded border-primary-600 text-accent bg-primary-800" checked> Committee Reports
    </label>
    <label class="flex items-center gap-2 cursor-pointer hover:text-white">
      <input type="checkbox" class="rounded border-primary-600 text-accent bg-primary-800"> Congressional Record
    </label>
  </div>
</div>
{% endblock %}

{% block content %}

<!-- ── Search form ──────────────────────────────────────────────────── -->
<form class="mb-8" method="GET" action="/search" role="search">
  <label for="q" class="block font-ui text-sm font-medium text-primary-700 mb-2">Search the corpus</label>
  <div class="flex gap-2">
    <div class="relative flex-1">
      <span class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-primary-400" aria-hidden="true">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
        </svg>
      </span>
      <input
        id="q"
        name="q"
        type="search"
        placeholder="e.g. appropriations committee water infrastructure"
        value="{{ query | default('') | e }}"
        autofocus
        class="block w-full pl-9 pr-4 py-2.5 border border-primary-200 rounded-md bg-white font-ui text-sm text-primary-900 placeholder-primary-400 focus:outline-none focus:ring-2 focus:ring-accent focus:border-accent"
        aria-label="Search legislative corpus">
    </div>
    <button
      type="submit"
      class="px-5 py-2.5 bg-accent text-white font-ui text-sm font-medium rounded-md hover:bg-accent-hover focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-1 transition-colors">
      Search
    </button>
  </div>
</form>

{% if doc_count == 0 %}
<!-- ── Empty state ─────────────────────────────────────────────────── -->
<div class="rounded-lg border border-dashed border-primary-200 bg-cream-100 px-8 py-12 text-center" role="status">
  <svg class="mx-auto w-10 h-10 text-primary-300 mb-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/>
  </svg>
  <h2 class="font-ui font-semibold text-primary-700 text-base mb-1">No documents indexed</h2>
  <p class="font-ui text-sm text-primary-500 mb-5">Add legislative documents to your collection to start searching.</p>
  <div class="font-ui text-xs text-primary-400">
    Supports PDF, XML (USLM), TXT, HTML &middot; Drop files below to ingest
  </div>
</div>
{% else %}
<!-- ── Stats bar ───────────────────────────────────────────────────── -->
<div class="flex items-center gap-4 font-ui text-xs text-primary-500 mb-6">
  <span>
    <span class="font-semibold text-primary-700">{{ doc_count | default(0) }}</span> document{% if doc_count != 1 %}s{% endif %} indexed
  </span>
  <span class="text-primary-200">|</span>
  <span>Ready to search</span>
</div>
{% endif %}

<!-- ── Upload zone ─────────────────────────────────────────────────── -->
<div
  id="upload-zone"
  class="flex flex-col items-center justify-center border-2 border-dashed border-primary-200 rounded-lg px-6 py-8 text-center cursor-pointer hover:border-accent hover:bg-cream-100 transition-colors"
  role="button"
  tabindex="0"
  aria-label="Upload documents — drop files here or press Enter to browse"
  aria-describedby="formats-note">
  <svg class="w-8 h-8 text-primary-300 mb-3" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"/>
  </svg>
  <p class="font-ui text-sm font-medium text-primary-600 mb-0.5">Drop files here or click to browse</p>
  <p class="font-ui text-xs text-primary-400" id="formats-note">PDF, XML (USLM), TXT, HTML, Markdown, DOCX</p>
  <input type="file" id="file-input" accept=".txt,.pdf,.xml,.html,.htm,.md,.rst,.docx" multiple hidden aria-label="Choose files to upload">
</div>

<div id="upload-status" class="mt-3 font-ui text-sm text-primary-600 min-h-5" aria-live="polite" aria-atomic="true" aria-busy="false"></div>

<script>
(function () {
  var zone = document.getElementById("upload-zone");
  var input = document.getElementById("file-input");
  var status = document.getElementById("upload-status");

  zone.addEventListener("click", function () { input.click(); });
  zone.addEventListener("keydown", function (e) {
    if (e.key === "Enter" || e.key === " ") { e.preventDefault(); input.click(); }
  });
  zone.addEventListener("dragover", function (e) { e.preventDefault(); zone.classList.add("border-accent", "bg-cream-100"); });
  zone.addEventListener("dragleave", function () { zone.classList.remove("border-accent", "bg-cream-100"); });
  zone.addEventListener("drop", function (e) {
    e.preventDefault();
    zone.classList.remove("border-accent", "bg-cream-100");
    input.files = e.dataTransfer.files;
    uploadFiles(input.files);
  });
  input.addEventListener("change", function () { uploadFiles(input.files); });

  function uploadFiles(files) {
    if (!files.length) return;
    var fd = new FormData();
    for (var i = 0; i < files.length; i++) fd.append("files", files[i]);
    status.textContent = "Uploading\u2026";
    status.setAttribute("aria-busy", "true");
    fetch("/ingest", { method: "POST", body: fd })
      .then(function (r) { return r.ok ? r.json() : r.json().then(function (e) { throw new Error(e.error || "Upload failed"); }); })
      .then(function (data) {
        status.setAttribute("aria-busy", "false");
        var ok = data.filter(function (d) { return d.status !== "skipped"; });
        var sk = data.filter(function (d) { return d.status === "skipped"; });
        var msg = ok.map(function (d) { return d.filename + " \u2014 " + d.chunks + " chunks"; }).join(", ");
        if (sk.length) msg += (msg ? ". " : "") + "Skipped: " + sk.map(function (d) { return d.filename; }).join(", ");
        status.textContent = msg || "No supported files found.";
      })
      .catch(function (e) {
        status.setAttribute("aria-busy", "false");
        status.textContent = e.message || "Upload failed.";
      });
  }
})();
</script>

{% endblock %}