import { Fragment } from "react";
import type {
  MetadataHistoryView,
  MetadataKeyChangeView,
  MetadataValueView,
} from "yt-dlp-transcript-common/views/metadataHistoryView";

// WHAT CHANGED EACH TIME THE METADATA WAS REWRITTEN (release 10 slice N).
//
// Drawn in the page header, beside the Description, because it is about the
// same thing: the video's metadata as the source reports it. One line — how
// often, how lately, by what, and what moved — and the entries behind it,
// newest first. Read-only and server-rendered: the view
// (views/metadataHistoryView.ts) is already folded, so there is no client
// state and no control.

const KIND_NOTE: Record<MetadataKeyChangeView["kind"], string> = {
  changed: "",
  added: " (new)",
  removed: " (gone)",
  counter: "",
};

function Value({ v }: { v: MetadataValueView | null }) {
  if (!v) return <span className="text-muted-foreground">—</span>;
  return (
    <span
      className="whitespace-pre-wrap break-words"
      title={v.truncated ? v.full : undefined}
    >
      {v.text}
    </span>
  );
}

export function MetadataHistoryDetails({ view }: { view: MetadataHistoryView }) {
  return (
    <details className="text-sm" aria-label="metadata history">
      <summary className="cursor-pointer text-muted-foreground hover:text-foreground">
        {view.line}
      </summary>
      <ol className="mt-2 flex flex-col gap-3" aria-label="metadata history entries">
        {view.entries.map((e, i) => (
          <li
            key={`${e.at}-${i}`}
            className="flex flex-col gap-1 rounded border border-border px-3 py-2"
          >
            <div className="text-muted-foreground">
              <span className="tabular-nums">{e.atLabel}</span>
              {` · by ${e.by}`}
              {e.requestedBy ? ` for ${e.requestedBy}` : ""}
              {` · ${e.summary}`}
            </div>
            {e.changes.length > 0 && (
              <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1">
                {e.changes.map((c) => (
                  <Fragment key={`${c.kind}-${c.key}`}>
                    <dt className="font-mono text-xs text-muted-foreground pt-0.5">
                      {c.key}
                      {KIND_NOTE[c.kind]}
                    </dt>
                    <dd className="min-w-0">
                      <Value v={c.from} />
                      <span className="text-muted-foreground"> → </span>
                      <Value v={c.to} />
                    </dd>
                  </Fragment>
                ))}
              </dl>
            )}
            {e.volatile.length > 0 && (
              <div className="text-xs text-muted-foreground">
                Also moved (compared by fingerprint only): {e.volatile.join(", ")}
              </div>
            )}
          </li>
        ))}
      </ol>
    </details>
  );
}