"use client";

import Link from "next/link";
import { useState } from "react";
import { StreamActionLog } from "yt-dlp-transcript-common/components/StreamActionLog";
import { formatBytes } from "yt-dlp-transcript-common/lib/format";
import type { SavedVideosView } from "yt-dlp-transcript-common/views/storage";
import { cancelJobAction } from "../../jobs/actions";
import {
  clearSavedVideosMarkerAction,
  relocateSavedVideosAction,
  resumeSavedVideosRelocationAction,
} from "../actions";

// THE SAVED-VIDEO STORE — the one large thing in the corpus no channel move
// could ever reach.
//
// It gets a card rather than a row in the locations table because it is not a
// location: nothing lives "on" it, it has no volume identity of its own and
// there is nothing to re-point. What it has is a place (in the corpus, or on a
// location) and one verb for changing it.
//
// ⚠️ NO RUN PANEL IS EVER UNMOUNTED BY ITS OWN RESULT. StreamActionLog holds
// its streamed log in React state and calls router.refresh() the instant a run
// ends (plans/FACTS.md) — and that refresh re-renders this card with the store
// on its new location: a different destination list, and for a Resume the very
// marker the button was offered for now gone. The Move panel is therefore
// rendered UNCONDITIONALLY (only its `disabled` changes), and the Resume
// section follows the documented `ranHere` shape — a flag set inside its own
// trigger, so it stays for its log with the now-cleared condition fed to
// `disabled` rather than becoming a second Run button.

export function SavedVideosStoreCard({ store }: { store: SavedVideosView }) {
  const [destId, setDestId] = useState(() => store.destinations[0]?.id ?? "");
  const [ranResumeHere, setRanResumeHere] = useState(false);
  const [note, setNote] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  // DERIVED, not the raw state: a finished move changes the destination list
  // under this card, and a select still naming the location the store is now
  // ON would be offering a no-op.
  const valid = store.destinations.some((d) => d.id === destId);
  const effectiveId = valid ? destId : (store.destinations[0]?.id ?? "");
  const canMove =
    store.busy === null &&
    store.destinations.length > 0 &&
    store.status !== "in-transition" &&
    store.status !== "inconsistent";

  return (
    <article
      aria-label="saved video store"
      className="flex flex-col gap-3 rounded-xl border border-border bg-card px-4 py-3"
    >
      <div className="flex flex-wrap items-center gap-3">
        <h2 className="text-base font-semibold">Saved-video store</h2>
        <span
          aria-label="saved videos status"
          className={`rounded-full border px-2 py-0.5 text-xs font-medium ${
            store.status === "in-place" || store.status === "ok"
              ? "border-border bg-muted"
              : "border-destructive/50 bg-destructive/5 text-destructive"
          }`}
        >
          {store.statusLabel}
        </span>
      </div>

      <p className="text-sm text-muted-foreground max-w-3xl">
        Where persisted source containers live. No channel move reaches it — it
        belongs to the corpus, not to a channel — so it moves on its own, by the
        same mechanism: the copy is verified before the source is touched, and a
        symlink is left behind so{" "}
        <Link href="/saved-videos" className="underline">
          every reader
        </Link>{" "}
        keeps working unchanged.
      </p>

      <dl className="grid grid-cols-[max-content_1fr] gap-x-4 gap-y-1 text-sm">
        <dt className="text-muted-foreground">On</dt>
        <dd aria-label="saved videos location">{store.locationLabel}</dd>
        <dt className="text-muted-foreground">Path</dt>
        <dd className="font-mono text-xs break-all" aria-label="saved videos path">
          {store.at}
          {store.at !== store.dir ? ` (read as ${store.dir})` : ""}
        </dd>
        <dt className="text-muted-foreground">Size</dt>
        <dd aria-label="saved videos bytes">
          {store.status === "unreachable" || store.status === "in-transition"
            ? "—"
            : `${formatBytes(store.bytes)} in ${store.files.toLocaleString()} file(s)`}
        </dd>
      </dl>

      {store.detail && (
        <p
          role="status"
          aria-label="saved videos detail"
          className="text-sm rounded border border-border bg-muted px-3 py-2"
        >
          {store.detail}
        </p>
      )}
      {store.busy && (
        <p role="status" className="text-sm rounded border border-border bg-muted px-3 py-2">
          {store.busy}
        </p>
      )}
      {note && (
        <p role="status" aria-label="saved videos result" className="text-sm">
          {note}
        </p>
      )}
      {error && (
        <p role="alert" aria-label="saved videos error" className="text-sm text-destructive">
          {error}
        </p>
      )}

      <section className="flex flex-col gap-2">
        <label className="flex flex-col gap-1 text-sm max-w-md">
          <span className="font-medium">Move the store to…</span>
          <select
            aria-label="saved videos destination"
            value={effectiveId}
            disabled={!canMove}
            onChange={(e) => setDestId(e.target.value)}
            className="rounded border border-border bg-card px-2 py-1 text-sm"
          >
            {store.destinations.map((d) => (
              <option key={d.id || "internal"} value={d.id}>
                {d.label}
              </option>
            ))}
          </select>
        </label>
        <StreamActionLog
          key="saved-videos-move-log"
          trigger={() => relocateSavedVideosAction(effectiveId)}
          cancelAction={cancelJobAction}
          buttonLabel="Move the store"
          runningLabel="Moving the store…"
          label="Move the store"
          disabled={!canMove}
        />
      </section>

      {/* THE TWO WAYS OUT OF A MARKER WHOSE RUN IS GONE — finish it, or throw
          it away. Offered only when a marker is present AND nothing is running:
          with a live job the marker is not stale, it belongs to that run. */}
      {(store.canResume || ranResumeHere) && (
        <section className="flex flex-col gap-2 rounded border border-destructive/50 bg-destructive/5 px-3 py-2">
          <h3 className="text-sm font-semibold">
            Finish the interrupted move, or clear its marker
          </h3>
          {store.canResume && (
            <p className="text-xs text-muted-foreground">
              <strong>Resume</strong> runs the same move again from where it
              stopped — whatever already copied correctly is not copied twice,
              and the source is not touched until the copy verifies. That is the
              usual answer. <strong>Clear marker</strong> removes the marker file
              and nothing else: no link, no settings, no bytes.
            </p>
          )}
          <div>
            <button
              type="button"
              aria-label="clear saved videos marker"
              disabled={!store.canResume}
              onClick={async () => {
                setError(null);
                setNote(null);
                const r = await clearSavedVideosMarkerAction();
                if (r.ok) setNote(r.note ?? null);
                else setError(r.error);
              }}
              className="px-3 py-1.5 rounded-md border border-destructive text-destructive text-sm font-medium disabled:opacity-50"
            >
              Clear marker
            </button>
          </div>
          <StreamActionLog
            key="saved-videos-resume-log"
            trigger={() => {
              setRanResumeHere(true);
              return resumeSavedVideosRelocationAction();
            }}
            cancelAction={cancelJobAction}
            buttonLabel="Resume move"
            runningLabel="Resuming…"
            label="Resume move"
            disabled={!store.canResume}
          />
        </section>
      )}
    </article>
  );
}