import Link from "next/link";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "yt-dlp-transcript-common/components/ui/card";
import { Separator } from "yt-dlp-transcript-common/components/ui/separator";
import type { StageId, StageStatus } from "yt-dlp-transcript-common/views/pipeline/stageStatus";

// THE LANDING PANEL.
//
// One panel is open at a time, and this is the one that is open when no stage is
// selected. It is not a summary written by hand: every row is a straight render
// of the `StageStatus` that computeStageStatuses already returns, so a stage's
// summary line is legible here without opening anything and there is no second
// copy of the wording to drift.

const TONE_DOT: Record<StageStatus["tone"], string> = {
  neutral: "bg-transparent border border-border-strong",
  ok: "bg-success",
  attention: "bg-warning",
  danger: "bg-destructive",
  running: "bg-info animate-pulse",
};

export type ChannelEssentials = {
  handling: string;
  platform?: string;
  url?: string;
  cookieMode?: string;
  keepLatest?: number;
};

export function OverviewPanel({
  slug,
  stageOrder,
  stages,
  essentials,
  generatedAt,
  lastSyncedAt,
}: {
  slug: string;
  stageOrder: StageId[];
  stages: Record<StageId, StageStatus>;
  essentials: ChannelEssentials;
  generatedAt: string;
  lastSyncedAt?: string;
}) {
  return (
    <Card aria-label="overview panel" className="gap-4 py-4">
      <CardHeader className="px-4">
        <CardTitle className="text-base">Every stage at a glance</CardTitle>
      </CardHeader>
      <CardContent className="px-4 flex flex-col gap-4">
        <ul className="flex flex-col divide-y divide-border">
          {stageOrder.map((id) => {
            const s = stages[id];
            return (
              <li key={id}>
                <Link
                  href={`/channels/${slug}?stage=${id}`}
                  aria-label={`${s.title} overview row`}
                  className="flex items-baseline gap-3 py-2 -mx-2 px-2 rounded hover:bg-muted"
                >
                  <span
                    aria-hidden="true"
                    className={`inline-block w-2 h-2 rounded-full flex-shrink-0 translate-y-[-1px] ${TONE_DOT[s.tone]}`}
                  />
                  <span
                    className={`text-sm font-medium w-28 flex-shrink-0 ${
                      id === "danger" ? "text-destructive" : ""
                    }`}
                  >
                    {s.title}
                  </span>
                  <span className="text-sm text-muted-foreground min-w-0 flex-1">
                    {s.summary}
                  </span>
                  <span className="flex items-center gap-1.5 flex-shrink-0">
                    {s.running && (
                      <span className="text-[10px] uppercase tracking-wide rounded-full border border-info/30 bg-info-soft text-info px-1.5 py-0.5 leading-none">
                        running
                      </span>
                    )}
                    {s.pending > 0 && (
                      <span
                        aria-label={`${s.title} pending count`}
                        className="text-xs tabular-nums rounded-full border border-warning/30 bg-warning-soft text-warning px-2 py-0.5"
                      >
                        {s.pending.toLocaleString()}
                      </span>
                    )}
                    {s.failed > 0 && (
                      <span
                        aria-label={`${s.title} failed count`}
                        className="text-xs tabular-nums rounded-full border border-destructive/30 bg-destructive-soft text-destructive px-2 py-0.5"
                      >
                        {s.failed.toLocaleString()} failed
                      </span>
                    )}
                  </span>
                </Link>
              </li>
            );
          })}
        </ul>

        <Separator />

        <div className="flex flex-col gap-2">
          <div className="flex items-baseline justify-between gap-3">
            <h3 className="text-[10px] font-mono uppercase tracking-[0.18em] text-muted-foreground">
              Channel
            </h3>
            <Link
              href={`/channels/${slug}?stage=configure`}
              aria-label="edit channel configuration"
              className="text-xs underline text-muted-foreground hover:text-foreground"
            >
              Edit
            </Link>
          </div>
          <dl
            aria-label="channel essentials"
            className="grid grid-cols-[auto_minmax(0,1fr)] gap-x-4 gap-y-1 text-sm"
          >
            <Field label="Handling" value={essentials.handling} />
            <Field label="Platform" value={essentials.platform ?? "—"} />
            <Field
              label="URL"
              value={essentials.url ?? "no URL configured"}
              mono
            />
            <Field
              label="Cookies"
              value={essentials.cookieMode ?? "inherit global"}
            />
            <Field
              label="Keep latest"
              value={
                essentials.keepLatest && essentials.keepLatest > 0
                  ? `${essentials.keepLatest}`
                  : "off"
              }
            />
          </dl>
          <p className="text-xs text-muted-foreground">
            {generatedAt ? (
              <>
                Report generated{" "}
                <time dateTime={generatedAt}>{formatTimestamp(generatedAt)}</time>
                .
              </>
            ) : (
              "No report has been generated for this channel yet."
            )}{" "}
            {lastSyncedAt
              ? `Last synced ${formatTimestamp(lastSyncedAt)}.`
              : "Never synced."}
          </p>
        </div>
      </CardContent>
    </Card>
  );
}

function Field({
  label,
  value,
  mono,
}: {
  label: string;
  value: string;
  mono?: boolean;
}) {
  return (
    <>
      <dt className="text-muted-foreground">{label}</dt>
      <dd className={`min-w-0 truncate ${mono ? "font-mono text-xs" : ""}`}>
        {value}
      </dd>
    </>
  );
}

function formatTimestamp(iso: string): string {
  try {
    return new Date(iso).toLocaleString();
  } catch {
    return iso;
  }
}