import type { Metadata } from "next";
import type { ArchiveManifestEntry } from "yt-dlp-transcript-common/lib/archiveOptions";
import { ArrowDownToLine, FileText, MessagesSquare } from "lucide-react";
import { currentSite } from "../lib/site";
import { readArchiveManifest } from "../lib/archives";
import { isCitedSite } from "yt-dlp-transcript-common/lib/siteSchema";
import { NotOnCitedSite } from "../components/reports/parts";

export const metadata: Metadata = { title: "Downloads" };

function humanBytes(n: number): string {
  if (n <= 0) return "0 B";
  if (n < 1024) return `${n} B`;
  const units = ["KB", "MB", "GB"];
  let v = n / 1024;
  let i = 0;
  while (v >= 1024 && i < units.length - 1) {
    v /= 1024;
    i++;
  }
  return `${v.toFixed(v >= 10 ? 0 : 1)} ${units[i]}`;
}

function countLabel(kind: ArchiveManifestEntry["kind"], n: number): string {
  const noun = kind === "transcripts" ? "transcript" : "chat log";
  return `${n.toLocaleString()} ${noun}${n === 1 ? "" : "s"}`;
}

// A scope slug with no channelTitle (e.g. "rekietalaw-rumble") is humanized into
// a readable heading rather than shown as a raw slug.
function humanizeScope(scope: string): string {
  return scope
    .split(/[-_]/)
    .filter(Boolean)
    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
    .join(" ");
}

// One channel's holdings: the manifest carries transcripts and live chat as
// separate entries that share a scope, so the page groups them back into a
// single record. Counts/bytes sum only the AVAILABLE holdings (an oversize
// bundle with no overflow URL isn't downloadable, so it shouldn't inflate the
// "grab the whole channel" figures).
type ChannelGroup = {
  scope: string;
  title: string;
  entries: ArchiveManifestEntry[];
  videoCount: number;
  bytes: number;
  availableCount: number;
};

const KIND_ORDER: Record<ArchiveManifestEntry["kind"], number> = {
  transcripts: 0,
  "live-chat": 1,
};

function isAvailable(e: ArchiveManifestEntry): boolean {
  return !e.oversize || !!e.url;
}

function groupByChannel(entries: ArchiveManifestEntry[]): ChannelGroup[] {
  const byScope = new Map<string, ChannelGroup>();
  for (const e of entries) {
    let group = byScope.get(e.scope);
    if (!group) {
      group = {
        scope: e.scope,
        title: "",
        entries: [],
        videoCount: 0,
        bytes: 0,
        availableCount: 0,
      };
      byScope.set(e.scope, group);
    }
    group.entries.push(e);
    if (!group.title && e.channelTitle) group.title = e.channelTitle;
    if (isAvailable(e)) {
      group.videoCount += e.videoCount;
      group.bytes += e.bytes;
      group.availableCount += 1;
    }
  }
  const groups = [...byScope.values()];
  for (const g of groups) {
    if (!g.title) {
      g.title = g.scope === "all" ? "Everything" : humanizeScope(g.scope);
    }
    g.entries.sort((a, b) => KIND_ORDER[a.kind] - KIND_ORDER[b.kind]);
  }
  return groups;
}

// One holding within a channel record: a transcript or live-chat bundle. Left is
// the kind (icon + label) over a "call number" subline — the item count and the
// archive filename, in mono. Right is the pull action: a padded download tab
// showing the size, or, for an oversize bundle with no overflow host, the reason
// it isn't served. Both variants share the same row padding so nothing butts the
// card edge.
function HoldingRow({ entry }: { entry: ArchiveManifestEntry }) {
  const Icon = entry.kind === "transcripts" ? FileText : MessagesSquare;
  const kindLabel = entry.kind === "transcripts" ? "Transcripts" : "Live chat";
  const href = entry.url ?? `/archives/${entry.filename}`;

  return (
    <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-3 px-5 py-4">
      <div className="flex min-w-0 items-start gap-3">
        <Icon
          className="mt-0.5 size-4 shrink-0 text-muted-foreground"
          aria-hidden
        />
        <div className="min-w-0">
          <div className="font-medium text-foreground">{kindLabel}</div>
          <div className="truncate font-mono text-xs text-muted-foreground">
            {countLabel(entry.kind, entry.videoCount)} · {entry.filename}
          </div>
        </div>
      </div>

      {isAvailable(entry) ? (
        <a
          href={href}
          download
          className="inline-flex min-h-10 shrink-0 items-center gap-2 rounded-md bg-brand-soft px-3.5 py-2 font-mono text-sm font-medium text-brand-strong transition-colors hover:bg-brand hover:text-brand-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card"
        >
          <ArrowDownToLine className="size-4" aria-hidden />
          {humanBytes(entry.bytes)}
        </a>
      ) : (
        <div className="flex shrink-0 flex-col items-end gap-0.5 text-right">
          <span className="font-mono text-xs font-medium uppercase tracking-[0.12em] text-warning">
            Too large to host
          </span>
          <span className="font-mono text-xs text-muted-foreground">
            {humanBytes(entry.bytes)}
          </span>
        </div>
      )}
    </div>
  );
}

// A channel rendered as a catalog record: a masthead (title + summed holdings)
// over its bundles, hairline-divided. The load-in stagger is a single quiet
// accent; it yields to prefers-reduced-motion (see globals.css .record-rise).
function ChannelRecord({
  group,
  index,
}: {
  group: ChannelGroup;
  index: number;
}) {
  const meta =
    group.availableCount > 0
      ? `${group.videoCount.toLocaleString()} video${group.videoCount === 1 ? "" : "s"} · ${humanBytes(group.bytes)}`
      : "Unavailable";

  return (
    <article
      className="record-rise overflow-hidden rounded-lg border border-border bg-card"
      style={{ animationDelay: `${index * 60}ms` }}
    >
      <header className="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 border-b border-border px-5 py-4">
        <h3 className="font-display text-lg font-semibold leading-tight text-foreground">
          {group.title}
        </h3>
        <p className="font-mono text-xs text-muted-foreground">{meta}</p>
      </header>
      <div className="divide-y divide-border">
        {group.entries.map((e) => (
          <HoldingRow key={e.filename} entry={e} />
        ))}
      </div>
    </article>
  );
}

export default function DownloadsPage() {
  const site = currentSite();
  if (isCitedSite(site)) return <NotOnCitedSite title="Downloads" />;
  const manifest = readArchiveManifest();
  const entries = manifest?.entries ?? [];

  if (entries.length === 0) {
    return (
      <div className="mx-auto flex max-w-2xl flex-col gap-3">
        <h1 className="font-display text-2xl font-semibold text-foreground">
          Downloads
        </h1>
        <p className="text-sm text-muted-foreground">
          No archives have been published for this site yet. Once a build with
          archive generation runs, the transcript and live-chat download bundles
          appear here.
        </p>
      </div>
    );
  }

  const groups = groupByChannel(entries);
  const available = entries.filter(isAvailable);
  const channelCount = groups.filter((g) => g.availableCount > 0).length;
  const bundleCount = available.length;
  const totalBytes = available.reduce((n, e) => n + e.bytes, 0);

  return (
    <div className="mx-auto flex max-w-3xl flex-col gap-8">
      <header className="flex flex-col gap-3 border-b border-border pb-6">
        <p className="font-mono text-xs uppercase tracking-[0.18em] text-brand">
          Archive · {site.headerTitle}
        </p>
        <h1 className="font-display text-3xl font-semibold leading-tight text-foreground">
          Take the whole channel with you
        </h1>
        <p className="max-w-prose text-sm text-muted-foreground">
          Every transcript and live-chat log on this site, bundled per channel as{" "}
          <code className="font-mono">.zip</code> files. Each bundle holds the
          compact cues JSON per video plus a channel manifest — grab a whole
          channel at once.
        </p>
        <p className="font-mono text-xs text-muted-foreground/80">
          {channelCount} channel{channelCount === 1 ? "" : "s"} · {bundleCount}{" "}
          bundle{bundleCount === 1 ? "" : "s"} · {humanBytes(totalBytes)} total
        </p>
      </header>

      <section className="flex flex-col gap-4">
        {groups.map((g, i) => (
          <ChannelRecord key={g.scope} group={g} index={i} />
        ))}
      </section>

      <p className="text-xs text-muted-foreground/70">
        Archives refresh on every site build. Transcripts and live chat are
        packaged separately; channels with no captured live chat have no
        live-chat bundle.
      </p>
    </div>
  );
}