import type { Metadata } from "next";
import Link from "next/link";
import { getPaths } from "yt-dlp-transcript-common/lib/paths";
import { getSettings } from "yt-dlp-transcript-common/lib/settings";
import { formatBytes } from "yt-dlp-transcript-common/lib/format";
import { listSavedVideos } from "yt-dlp-transcript-common/controller/savedVideoInventory";
import { readSchedulerState } from "yt-dlp-transcript-common/jobs/syncSchedulerState";
import { SavedVideosControls } from "./components/SavedVideosControls";

export const dynamic = "force-dynamic";

export const metadata: Metadata = { title: "Saved videos" };

type ChannelSummary = {
  slug: string;
  count: number;
  bytes: number;
  verified: number;
};

export default async function SavedVideosPage() {
  const paths = getPaths();
  const settings = getSettings();
  const backup = settings.savedVideoBackup;
  // Channels whose drive is not answering are not read (one pointer read per
  // video dir, each of which would wait on it); the page names them.
  const notAnswering: string[] = [];
  const entries = await listSavedVideos({ paths, notAnswering });
  notAnswering.sort();
  const scheduler = await readSchedulerState(paths);

  const byChannel = new Map<string, ChannelSummary>();
  let totalBytes = 0;
  let totalVerified = 0;
  for (const e of entries) {
    const row =
      byChannel.get(e.slug) ??
      { slug: e.slug, count: 0, bytes: 0, verified: 0 };
    row.count += 1;
    row.bytes += e.pointer.bytes;
    if (e.pointer.sha256) {
      row.verified += 1;
      totalVerified += 1;
    }
    byChannel.set(e.slug, row);
    totalBytes += e.pointer.bytes;
  }
  const channels = [...byChannel.values()].sort((a, b) =>
    a.slug.localeCompare(b.slug),
  );
  const lastBackup = scheduler.lastSavedVideoBackupAt
    ? new Date(scheduler.lastSavedVideoBackupAt).toLocaleString()
    : null;

  return (
    <main className="flex flex-col gap-8 p-6 max-w-4xl">
      <header className="flex flex-col gap-1">
        <h1 className="text-xl font-semibold">Saved videos</h1>
        <p className="text-sm text-muted-foreground">
          Set a channel&apos;s keep-latest window and store dir in its settings.
        </p>
      </header>

      <section
        aria-label="store summary"
        className="grid grid-cols-2 sm:grid-cols-4 gap-3"
      >
        <SummaryCard label="Saved videos" value={String(entries.length)} />
        <SummaryCard label="Total size" value={formatBytes(totalBytes)} />
        <SummaryCard label="Channels" value={String(channels.length)} />
        <SummaryCard
          label="With checksum"
          value={`${totalVerified}/${entries.length}`}
        />
      </section>

      <section aria-label="store location" className="flex flex-col gap-1 text-sm">
        <div>
          <span className="text-muted-foreground">Default store dir: </span>
          <span className="font-mono">{paths.savedVideosDir}</span>
        </div>
        <div>
          <span className="text-muted-foreground">Last backup: </span>
          {lastBackup ? (
            <span>{lastBackup}</span>
          ) : (
            <span className="text-muted-foreground">never</span>
          )}
          {backup.enabled && backup.dest && (
            <span className="text-muted-foreground">
              {" "}
              · scheduled every {backup.intervalMinutes} min
            </span>
          )}
        </div>
      </section>

      <section aria-label="per-channel saved videos" className="flex flex-col gap-2">
        <h2 className="text-base font-semibold">By channel</h2>
        {notAnswering.length > 0 && (
          <p
            role="status"
            aria-label="saved videos not read"
            className="rounded border border-destructive/50 bg-destructive/5 px-3 py-2 text-sm text-destructive"
          >
            Not read, because the drive their media is on is not answering:{" "}
            {notAnswering.join(", ")}. Their saved videos are not in the counts
            above until it answers again (see{" "}
            <Link href="/storage" className="underline">
              Storage
            </Link>
            ).
          </p>
        )}
        {channels.length === 0 ? (
          <p className="text-sm text-muted-foreground">
            No saved videos yet. Set a channel&apos;s keep-latest window, then run
            a sync (or <em>Persist kept now</em> from its Cleanup stage).
          </p>
        ) : (
          <table className="text-sm border-collapse">
            <thead>
              <tr className="text-left text-muted-foreground">
                <th className="py-1 pr-6 font-medium">Channel</th>
                <th className="py-1 pr-6 font-medium tabular-nums">Saved</th>
                <th className="py-1 pr-6 font-medium tabular-nums">Size</th>
                <th className="py-1 font-medium tabular-nums">Checksummed</th>
              </tr>
            </thead>
            <tbody>
              {channels.map((c) => (
                <tr
                  key={c.slug}
                  className="border-t border-border"
                >
                  <td className="py-1 pr-6">
                    <Link
                      href={`/channels/${c.slug}`}
                      className="underline hover:no-underline"
                    >
                      {c.slug}
                    </Link>
                  </td>
                  <td className="py-1 pr-6 tabular-nums">{c.count}</td>
                  <td className="py-1 pr-6 tabular-nums">
                    {formatBytes(c.bytes)}
                  </td>
                  <td className="py-1 tabular-nums">
                    {c.verified}/{c.count}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </section>

      <section aria-label="backups" className="flex flex-col gap-2">
        <h2 className="text-base font-semibold">Backups</h2>
        <SavedVideosControls
          enabled={backup.enabled}
          dest={backup.dest}
          intervalMinutes={backup.intervalMinutes}
        />
      </section>
    </main>
  );
}

function SummaryCard({ label, value }: { label: string; value: string }) {
  return (
    <div className="rounded border border-border p-3">
      <div className="text-xs uppercase tracking-wide text-muted-foreground">
        {label}
      </div>
      <div className="text-lg font-semibold tabular-nums mt-0.5">{value}</div>
    </div>
  );
}