import { Link, createFileRoute } from "@tanstack/react-router";
import { PageHeader, RecordRows } from "@/components/archive-ui";
import { RELATION_LABEL } from "@/lib/archive/labels";
import { useLiveLibrary } from "@/lib/archive/live";

export const Route = createFileRoute("/scholars/$personId")({
  component: PersonPage,
});

function PersonPage() {
  const { personId } = Route.useParams();
  const lib = useLiveLibrary();
  const person = lib.persons.find((item) => item.id === personId);
  if (!person) {
    return (
      <div>
        <PageHeader kicker="Scholars" title="Not in the catalog" lede="I could not find sufficient evidence for this person in the Fayda Archive." />
        <Link to="/submit" className="underline decoration-brass underline-offset-4">
          If you hold a book, recording, or document, submit it for review.
        </Link>
      </div>
    );
  }
  const relations = lib.relations.filter((relation) => relation.fromId === person.id || relation.toId === person.id);
  const works = lib.works.filter(
    (work) => work.authorIds.includes(person.id) || work.speakerIds.includes(person.id) || work.relatedPersonIds.includes(person.id),
  );
  const nameOf = (id: string) =>
    lib.persons.find((item) => item.id === id)?.name ?? lib.works.find((item) => item.id === id)?.title ?? lib.places.find((item) => item.id === id)?.name ?? id;

  return (
    <article>
      <PageHeader kicker={person.roles.join(" · ")} title={person.name} lede={person.summary} />
      {person.nameAr ? (
        <p className="arabic -mt-4 mb-6 text-2xl" dir="rtl" lang="ar">
          {person.nameAr}
        </p>
      ) : null}
      <p className="text-sm text-muted">{person.life}</p>
      {person.epithets.length ? <p className="mt-2 text-sm">Known as {person.epithets.join(", ")}</p> : null}

      <section className="mt-10">
        <h2 className="text-xs tracking-[0.16em] text-brass uppercase">Links</h2>
        <ul className="mt-3 divide-y divide-ink/10 border-y border-ink/10">
          {relations.map((relation) => {
            const other = relation.fromId === person.id ? relation.toId : relation.fromId;
            const personTarget = lib.persons.some((item) => item.id === other);
            const workTarget = lib.works.some((item) => item.id === other);
            return (
              <li key={relation.id} className="py-3 text-sm">
                <span className="text-muted">{RELATION_LABEL[relation.type]} · </span>
                {personTarget ? (
                  <Link to="/scholars/$personId" params={{ personId: other }} className="underline decoration-brass underline-offset-4">
                    {nameOf(other)}
                  </Link>
                ) : workTarget ? (
                  <Link to="/works/$workId" params={{ workId: other }} className="underline decoration-brass underline-offset-4">
                    {nameOf(other)}
                  </Link>
                ) : (
                  <span>{nameOf(other)}</span>
                )}
                {relation.note ? <span className="mt-1 block text-muted">{relation.note}</span> : null}
              </li>
            );
          })}
        </ul>
      </section>

      <section className="mt-10">
        <h2 className="text-xs tracking-[0.16em] text-brass uppercase">Records</h2>
        <div className="mt-3">
          <RecordRows works={works} />
        </div>
      </section>
    </article>
  );
}