import { createFileRoute } from "@tanstack/react-router";
import { useMemo, useState } from "react";
import { PageHeader, RecordRows } from "@/components/archive-ui";
import { useLiveLibrary } from "@/lib/archive/live";
import type { AuthorityTier, MaterialType } from "@/lib/archive/types";
import { TYPE_LABEL } from "@/lib/archive/labels";

export const Route = createFileRoute("/library")({
  component: LibraryPage,
});

function LibraryPage() {
  const lib = useLiveLibrary();
  const [tier, setTier] = useState<AuthorityTier | 0>(0);
  const [type, setType] = useState<MaterialType | "">("");
  const [onlyReady, setOnlyReady] = useState(false);
  const works = useMemo(
    () =>
      lib.works.filter((work) => {
        if (tier && work.recordTier !== tier) return false;
        if (type && work.type !== type) return false;
        if (onlyReady && work.processing !== "ready") return false;
        return true;
      }),
    [lib.works, onlyReady, tier, type],
  );

  return (
    <div>
      <PageHeader
        kicker="Library"
        title="The whole shelf"
        lede="Dossiers are indexed. Expected files are listed and excluded from answers until a curator ingests them."
      />
      <div className="mb-6 flex flex-col gap-3 sm:flex-row">
        <label className="block text-sm">
          <span className="mb-1 block text-xs tracking-widest text-brass uppercase">Type</span>
          <select value={type} onChange={(event) => setType(event.target.value as MaterialType | "")} className="min-h-11 w-full border border-ink/20 bg-paper px-3 sm:w-52">
            <option value="">All</option>
            {(Object.keys(TYPE_LABEL) as MaterialType[]).map((item) => (
              <option key={item} value={item}>
                {TYPE_LABEL[item]}
              </option>
            ))}
          </select>
        </label>
        <label className="block text-sm">
          <span className="mb-1 block text-xs tracking-widest text-brass uppercase">Record tier</span>
          <select value={tier} onChange={(event) => setTier(Number(event.target.value) as AuthorityTier | 0)} className="min-h-11 w-full border border-ink/20 bg-paper px-3 sm:w-40">
            <option value={0}>All</option>
            {[1, 2, 3, 4, 5].map((item) => (
              <option key={item} value={item}>
                Tier {item}
              </option>
            ))}
          </select>
        </label>
        <label className="flex min-h-11 items-center gap-2 self-end text-sm">
          <input type="checkbox" checked={onlyReady} onChange={(event) => setOnlyReady(event.target.checked)} className="size-4" />
          Indexed only
        </label>
      </div>
      <RecordRows works={works} />
    </div>
  );
}