import Link from "next/link";
import BrowseHeader from "@/components/BrowseHeader";
import { corpusConcentration } from "@/lib/concentration";

export const dynamic = "force-dynamic";

// Which episodes the palette actually comes from, across every song.
//
// A STATIC segment under app/browse/, like /browse/decisions -- see that file.
//
// This exists because the claim "drawn from a corpus of 300 episodes" was never
// checked against the plans. It is answered here in two units at once, because
// they answer different questions: placements say how much of the RUNTIME an
// episode supplies, clips say how much of the PALETTE it does.

const pc = (v: number) => `${(v * 100).toFixed(1)}%`;

export default async function SourcesPage() {
  const c = await corpusConcentration();

  return (
    <div className="flex h-full flex-col">
      <BrowseHeader
        active="sources"
        crumbs={[{ href: "/browse", label: "songs" }, { label: "sources" }]}
        note={`${c.videos.length} episodes · ${c.builds} plans`}
      />
      <main className="deck-main flex-1 p-4">
        {c.videos.length === 0 ? (
          <p className="text-[12px] text-[var(--color-dim)]">
            No plans under <code className="font-mono">videos/</code>, so nothing to roll up.
          </p>
        ) : (
          <>
            <dl className="mb-4 grid grid-cols-2 gap-x-6 gap-y-1 text-[12px] sm:grid-cols-4">
              <Stat
                label="episodes"
                value={String(c.placements.distinct)}
                note={`over ${c.builds} plans`}
              />
              <Stat
                label="top episode"
                value={pc(c.placements.top1)}
                note="of every note placement"
              />
              <Stat label="top five" value={pc(c.placements.top5)} note="of every note placement" />
              <Stat
                label="cover half"
                value={String(c.placements.half)}
                note={`episodes · HHI ${c.placements.hhi}`}
              />
            </dl>

            <p className="mb-3 max-w-3xl text-[12px] text-[var(--color-dim)]">
              Placements are how much of the finished runtime an episode supplies; clips are how
              much of the palette. One beloved clip used ninety times and ninety clips used once are
              the same placement count and a very different corpus — so both are here, and neither
              is summed with the other.
            </p>

            <table className="w-full border-collapse text-[12px]">
              <thead>
                <tr className="micro">
                  <th className="border-b border-[var(--color-line)] px-2 py-1 text-left">episode</th>
                  <th className="border-b border-[var(--color-line)] px-2 py-1 text-right">placements</th>
                  <th className="border-b border-[var(--color-line)] px-2 py-1 text-right">share</th>
                  <th className="border-b border-[var(--color-line)] px-2 py-1 text-right">clips</th>
                  <th className="border-b border-[var(--color-line)] px-2 py-1 text-left">songs</th>
                  <th className="border-b border-[var(--color-line)] px-2 py-1 text-left">date</th>
                </tr>
              </thead>
              <tbody>
                {c.videos.map((v) => (
                  <tr key={v.video} data-source={v.video}>
                    <td className="border-b border-[var(--color-line)] px-2 py-1">
                      {v.link ? (
                        <a
                          href={v.link}
                          target="_blank"
                          rel="noreferrer"
                          className="text-[var(--color-sel)] underline"
                        >
                          {v.title || v.video}
                        </a>
                      ) : (
                        <span className="text-[var(--color-text)]">{v.title || v.video}</span>
                      )}
                      <span className="num ml-2 text-[11px] text-[var(--color-line)]">{v.video}</span>
                    </td>
                    <td
                      className="num border-b border-[var(--color-line)] px-2 py-1 text-right text-[var(--color-meter)]"
                      data-placements={v.placements}
                    >
                      {v.placements}
                    </td>
                    <td className="num border-b border-[var(--color-line)] px-2 py-1 text-right text-[var(--color-dim)]">
                      {pc(v.placements / (c.placements.total || 1))}
                    </td>
                    <td className="num border-b border-[var(--color-line)] px-2 py-1 text-right text-[var(--color-dim)]">
                      {v.clips}
                    </td>
                    <td className="border-b border-[var(--color-line)] px-2 py-1 text-[var(--color-dim)]">
                      {v.songs.map((s, i) => (
                        <span key={s}>
                          {i > 0 && ", "}
                          <Link href={`/browse/${s}`} className="hover:text-[var(--color-text)]">
                            {s}
                          </Link>
                        </span>
                      ))}
                    </td>
                    <td className="num border-b border-[var(--color-line)] px-2 py-1 text-[var(--color-dim)]">
                      {v.date}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </>
        )}
      </main>
    </div>
  );
}

function Stat({ label, value, note }: { label: string; value: string; note: string }) {
  return (
    <div>
      <dt className="micro">{label}</dt>
      <dd className="num text-[18px] text-[var(--color-meter)]">
        {value} <span className="text-[11px] text-[var(--color-dim)]">{note}</span>
      </dd>
    </div>
  );
}