"use client";
import { DISCIPLINE_LABELS, RESEARCH_MODE_LABELS } from "@autoscholar/schemas";
import Link from "next/link";
import { useEffect, useRef, useState } from "react";
import { IconClose, IconFilter, IconSearch } from "./Icons";

type Q = Record<string, string | undefined>;
const FILTER_KEYS = ["discipline", "mode", "series", "status", "from", "to", "code", "data"] as const;

function hrefWithout(q: Q, key: string) {
  const u = new URLSearchParams();
  for (const [k, v] of Object.entries(q)) if (v && k !== key && k !== "page") u.set(k, v);
  const s = u.toString();
  return s ? `/research?${s}` : "/research";
}

function Fields({
  q,
  series,
  idPrefix,
}: {
  q: Q;
  series: Array<{ slug: string; name: string }>;
  idPrefix: string;
}) {
  const id = (s: string) => `${idPrefix}-${s}`;
  return (
    <div className="grid gap-4">
      <div>
        <label htmlFor={id("discipline")} className="label mb-1">
          Discipline
        </label>
        <select id={id("discipline")} name="discipline" defaultValue={q.discipline ?? ""} className="input">
          <option value="">All disciplines</option>
          {Object.entries(DISCIPLINE_LABELS).map(([k, v]) => (
            <option key={k} value={k}>
              {v}
            </option>
          ))}
        </select>
      </div>
      <div>
        <label htmlFor={id("mode")} className="label mb-1">
          Methodology
        </label>
        <select id={id("mode")} name="mode" defaultValue={q.mode ?? ""} className="input">
          <option value="">All methodologies</option>
          {Object.entries(RESEARCH_MODE_LABELS).map(([k, v]) => (
            <option key={k} value={k}>
              {v}
            </option>
          ))}
        </select>
      </div>
      <div className="grid grid-cols-2 gap-3">
        <div>
          <label htmlFor={id("series")} className="label mb-1">
            Series
          </label>
          <select id={id("series")} name="series" defaultValue={q.series ?? ""} className="input">
            <option value="">All</option>
            {series.map((s) => (
              <option key={s.slug} value={s.slug}>
                {s.name}
              </option>
            ))}
          </select>
        </div>
        <div>
          <label htmlFor={id("status")} className="label mb-1">
            Status
          </label>
          <select id={id("status")} name="status" defaultValue={q.status ?? ""} className="input">
            <option value="">Any</option>
            <option value="published">Published</option>
            <option value="corrected">Corrected</option>
            <option value="retracted">Retracted</option>
          </select>
        </div>
      </div>
      <div className="grid grid-cols-2 gap-3">
        <div>
          <label htmlFor={id("from")} className="label mb-1">
            From
          </label>
          <input id={id("from")} name="from" type="date" defaultValue={q.from ?? ""} className="input" />
        </div>
        <div>
          <label htmlFor={id("to")} className="label mb-1">
            To
          </label>
          <input id={id("to")} name="to" type="date" defaultValue={q.to ?? ""} className="input" />
        </div>
      </div>
      <fieldset>
        <legend className="label mb-2">Availability</legend>
        <div className="flex gap-5">
          <label className="flex min-h-10 items-center gap-2 text-sm">
            <input
              type="checkbox"
              name="code"
              value="1"
              defaultChecked={q.code === "1"}
              className="h-4 w-4"
            />{" "}
            Code
          </label>
          <label className="flex min-h-10 items-center gap-2 text-sm">
            <input
              type="checkbox"
              name="data"
              value="1"
              defaultChecked={q.data === "1"}
              className="h-4 w-4"
            />{" "}
            Data
          </label>
        </div>
      </fieldset>
    </div>
  );
}

/** Active-filter chips (applied filters); each chip removes its own filter. */
export function ActiveFilters({ q, series }: { q: Q; series: Array<{ slug: string; name: string }> }) {
  const labels: Array<[string, string]> = [];
  if (q.discipline)
    labels.push(["discipline", (DISCIPLINE_LABELS as Record<string, string>)[q.discipline] ?? q.discipline]);
  if (q.mode) labels.push(["mode", (RESEARCH_MODE_LABELS as Record<string, string>)[q.mode] ?? q.mode]);
  if (q.series) labels.push(["series", series.find((s) => s.slug === q.series)?.name ?? q.series]);
  if (q.status) labels.push(["status", q.status]);
  if (q.from) labels.push(["from", `from ${q.from}`]);
  if (q.to) labels.push(["to", `to ${q.to}`]);
  if (q.code === "1") labels.push(["code", "has code"]);
  if (q.data === "1") labels.push(["data", "has data"]);
  if (labels.length === 0) return null;
  return (
    <ul className="flex flex-wrap items-center gap-2" aria-label="Applied filters">
      {labels.map(([k, l]) => (
        <li key={k}>
          <Link
            href={hrefWithout(q, k)}
            className="chip chip-active no-underline"
            aria-label={`Remove filter ${l}`}
          >
            {l} <IconClose size={12} />
          </Link>
        </li>
      ))}
      <li>
        <Link
          href={q.q ? `/research?q=${encodeURIComponent(q.q)}` : "/research"}
          className="chip no-underline"
        >
          Clear all
        </Link>
      </li>
    </ul>
  );
}

/**
 * LibraryFilters — search bar + sort on every width; facet sidebar on desktop, bottom-sheet on mobile with an
 * active-filter count. Plain GET form so it works without JavaScript.
 */
export function LibraryFilters({
  q,
  series,
  total,
}: {
  q: Q;
  series: Array<{ slug: string; name: string }>;
  total: number;
}) {
  const [open, setOpen] = useState(false);
  const active = FILTER_KEYS.filter((k) => q[k]).length;
  const sheet = useRef<HTMLDivElement>(null);
  useEffect(() => {
    if (!open) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    sheet.current?.querySelector<HTMLElement>("select,input,button")?.focus();
    const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false);
    document.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = prev;
      document.removeEventListener("keydown", onKey);
    };
  }, [open]);
  const hidden = (prefix: string) => (
    <>
      {q.q && <input type="hidden" name="q" value={q.q} />}
      {q.sort && <input type="hidden" name="sort" value={q.sort} />}
      <span className="sr-only">{prefix}</span>
    </>
  );
  return (
    <search>
      {/* search + sort row */}
      <form
        method="get"
        action="/research"
        className="flex flex-col gap-2 sm:flex-row sm:items-center"
        aria-label="Search the library"
      >
        {FILTER_KEYS.map((k) => q[k] && <input key={k} type="hidden" name={k} value={q[k]} />)}
        <div className="relative flex-1">
          <label htmlFor="q" className="sr-only">
            Search
          </label>
          <IconSearch
            size={18}
            className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 subtle"
          />
          <input
            id="q"
            name="q"
            type="search"
            defaultValue={q.q ?? ""}
            placeholder="Search titles, abstracts, keywords or paper IDs"
            className="input pl-10"
            enterKeyHint="search"
          />
        </div>
        <div className="flex gap-2">
          <label htmlFor="sort" className="sr-only">
            Sort
          </label>
          <select
            id="sort"
            name="sort"
            defaultValue={q.sort ?? "date"}
            className="input w-auto min-w-[8.5rem]"
          >
            <option value="date">Newest first</option>
            <option value="relevance">Most relevant</option>
            <option value="title">Title A–Z</option>
          </select>
          <button type="submit" className="btn btn-primary">
            Search
          </button>
          <button
            type="button"
            className="btn lg:hidden"
            aria-expanded={open}
            aria-controls="filter-sheet"
            onClick={() => setOpen(true)}
          >
            <IconFilter size={16} /> Filters
            {active > 0 && (
              <span
                className="ml-1 grid h-5 min-w-5 place-items-center rounded-full px-1 text-[11px]"
                style={{ background: "var(--accent)", color: "var(--accent-fg)" }}
              >
                {active}
              </span>
            )}
          </button>
        </div>
      </form>
      <div className="mt-3 flex flex-wrap items-center justify-between gap-3">
        <ActiveFilters q={q} series={series} />
        <p className="muted text-sm" aria-live="polite">
          {total === 0 ? "No results" : `${total} ${total === 1 ? "paper" : "papers"}`}
          {q.q ? ` for “${q.q}”` : ""}
        </p>
      </div>

      {/* mobile bottom sheet */}
      {open && (
        <>
          <button
            type="button"
            className="drawer-backdrop lg:hidden"
            aria-label="Close filters"
            onClick={() => setOpen(false)}
          />
          <div
            ref={sheet}
            id="filter-sheet"
            role="dialog"
            aria-modal="true"
            aria-label="Filters"
            className="sheet-panel lg:hidden"
          >
            <div className="sheet-handle" aria-hidden="true" />
            <div className="flex items-center justify-between">
              <p className="title-3">Filters</p>
              <button
                type="button"
                className="btn-icon"
                aria-label="Close filters"
                onClick={() => setOpen(false)}
              >
                <IconClose />
              </button>
            </div>
            <form method="get" action="/research" className="mt-4" aria-label="Filter the library (mobile)">
              {hidden("Filters")}
              <Fields q={q} series={series} idPrefix="sheet" />
              <div className="sticky bottom-0 mt-5 flex gap-2 bg-[var(--bg)] pt-3">
                <button type="submit" className="btn btn-primary flex-1">
                  Show results
                </button>
                <Link href={q.q ? `/research?q=${encodeURIComponent(q.q)}` : "/research"} className="btn">
                  Reset
                </Link>
              </div>
            </form>
          </div>
        </>
      )}
    </search>
  );
}

/** Desktop facet sidebar (plain GET form). Rendered in the library's left column. */
export function FilterSidebar({ q, series }: { q: Q; series: Array<{ slug: string; name: string }> }) {
  return (
    <form
      method="get"
      action="/research"
      className="surface-flat sticky top-[calc(var(--header-h)+1rem)] p-5"
      aria-label="Filter the library"
      id="filter-sidebar"
    >
      {q.q && <input type="hidden" name="q" value={q.q} />}
      {q.sort && <input type="hidden" name="sort" value={q.sort} />}
      <p className="label mb-4">Refine</p>
      <Fields q={q} series={series} idPrefix="side" />
      <div className="mt-5 flex gap-2">
        <button type="submit" className="btn btn-primary flex-1">
          Apply
        </button>
        <Link href={q.q ? `/research?q=${encodeURIComponent(q.q)}` : "/research"} className="btn">
          Reset
        </Link>
      </div>
    </form>
  );
}