import { DISCIPLINE_LABELS, RESEARCH_MODE_LABELS } from "@autoscholar/schemas";
import { t } from "@/lib/i18n";

export function SearchFilters({
  q,
  series,
}: {
  q: Record<string, string | undefined>;
  series: Array<{ slug: string; name: string }>;
}) {
  return (
    <search>
      <form
        method="get"
        action="/research"
        className="surface grid gap-3 p-4 md:grid-cols-12"
        aria-label="Search the library"
      >
        <div className="md:col-span-12">
          <label htmlFor="q" className="label mb-1">
            Search
          </label>
          <input
            id="q"
            name="q"
            type="search"
            defaultValue={q.q ?? ""}
            placeholder={t("search.placeholder")}
            className="input"
          />
        </div>
        <div className="md:col-span-3">
          <label htmlFor="discipline" className="label mb-1">
            Discipline
          </label>
          <select id="discipline" name="discipline" defaultValue={q.discipline ?? ""} className="input">
            <option value="">All</option>
            {Object.entries(DISCIPLINE_LABELS).map(([k, v]) => (
              <option key={k} value={k}>
                {v}
              </option>
            ))}
          </select>
        </div>
        <div className="md:col-span-3">
          <label htmlFor="mode" className="label mb-1">
            Methodology
          </label>
          <select id="mode" name="mode" defaultValue={q.mode ?? ""} className="input">
            <option value="">All</option>
            {Object.entries(RESEARCH_MODE_LABELS).map(([k, v]) => (
              <option key={k} value={k}>
                {v}
              </option>
            ))}
          </select>
        </div>
        <div className="md:col-span-2">
          <label htmlFor="series" className="label mb-1">
            Series
          </label>
          <select 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 className="md:col-span-2">
          <label htmlFor="status" className="label mb-1">
            Status
          </label>
          <select 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 className="md:col-span-2">
          <label htmlFor="sort" className="label mb-1">
            Sort
          </label>
          <select id="sort" name="sort" defaultValue={q.sort ?? "date"} className="input">
            <option value="date">Newest</option>
            <option value="relevance">Relevance</option>
            <option value="title">Title</option>
          </select>
        </div>
        <div className="md:col-span-2">
          <label htmlFor="from" className="label mb-1">
            From
          </label>
          <input id="from" name="from" type="date" defaultValue={q.from ?? ""} className="input" />
        </div>
        <div className="md:col-span-2">
          <label htmlFor="to" className="label mb-1">
            To
          </label>
          <input id="to" name="to" type="date" defaultValue={q.to ?? ""} className="input" />
        </div>
        <fieldset className="flex items-end gap-4 md:col-span-4">
          <legend className="label mb-1">Availability</legend>
          <label className="flex items-center gap-2 text-sm">
            <input type="checkbox" name="code" value="1" defaultChecked={q.code === "1"} /> Code
          </label>
          <label className="flex items-center gap-2 text-sm">
            <input type="checkbox" name="data" value="1" defaultChecked={q.data === "1"} /> Data
          </label>
        </fieldset>
        <div className="flex items-end gap-2 md:col-span-4 md:justify-end">
          <a href="/research" className="btn">
            Reset
          </a>
          <button type="submit" className="btn btn-primary">
            Apply
          </button>
        </div>
      </form>
    </search>
  );
}