import { Link, createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { PageHeader } from "@/components/archive-ui";
import { SURAHS } from "@/lib/archive/surahs";

const SLOTS = [
  { id: "w-tafsir-pdf", label: "Arabic PDF", locator: "Page" },
  { id: "w-tafsir-audio", label: "Arabic audio", locator: "Timestamp" },
  { id: "w-tafsir-transcript", label: "Arabic transcript", locator: "Segment" },
  { id: "w-tafsir-en", label: "English translation", locator: "Page" },
];

export const Route = createFileRoute("/tafsir")({
  component: TafsirPage,
});

function TafsirPage() {
  const [index, setIndex] = useState(1);
  const name = SURAHS[index] ?? SURAHS[0];
  return (
    <div>
      <PageHeader
        kicker="Tafsir"
        title="Verse explorer, not yet aligned"
        lede="The four forms of Shaykh Ibrahim’s tafsir are linked: Arabic PDF, Arabic audio, transcript, English translation. Choosing a surah does not create a page or a timestamp."
      />
      <div className="grid gap-8 md:grid-cols-[16rem_1fr]">
        <div className="max-h-[28rem] overflow-y-auto border border-ink/10">
          {SURAHS.map((surah, surahIndex) => (
            <button
              key={surah}
              type="button"
              onClick={() => setIndex(surahIndex)}
              className={`flex min-h-11 w-full items-baseline gap-3 px-3 text-left ${surahIndex === index ? "bg-paper" : ""}`}
            >
              <span className="w-8 text-xs text-brass tabular-nums">{surahIndex + 1}</span>
              <span>{surah}</span>
            </button>
          ))}
        </div>
        <div>
          <p className="text-xs tracking-[0.16em] text-brass uppercase">Surah {index + 1}</p>
          <h2 className="mt-2 text-3xl">{name}</h2>
          <p className="mt-3 text-sm text-muted">Ayah: not aligned. Volume: not ingested.</p>
          <ul className="mt-6 divide-y divide-ink/10 border-y border-ink/10">
            {SLOTS.map((slot) => (
              <li key={slot.id} className="py-4">
                <Link to="/works/$workId" params={{ workId: slot.id }} className="text-lg">
                  {slot.label}
                </Link>
                <p className="text-sm text-muted">
                  {slot.locator}: not ingested. This slot cannot be cited.
                </p>
              </li>
            ))}
          </ul>
          <p className="mt-4 max-w-xl text-sm leading-relaxed text-muted">
            When a recording is transcribed, a passage should be able to point at a surah, an ayah, a PDF page, and a timestamp together. That join is not invented in advance.
          </p>
        </div>
      </div>
    </div>
  );
}