"use client";

import Link from "next/link";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { StreamActionLog } from "yt-dlp-transcript-common/components/StreamActionLog";
import { formatBytes } from "yt-dlp-transcript-common/lib/format";
import type {
  StorageActionKind,
  StorageRow,
  StorageRowsPayload,
} from "yt-dlp-transcript-common/views/storage";
import { cancelJobAction } from "../../jobs/actions";
import {
  addStorageLocationAction,
  deleteStorageLocationAction,
  editStorageLocationAction,
  mountStorageLocationAction,
  refreshStorageLocationAction,
  repointStorageLocationAction,
} from "../actions";
import { LocationForm } from "./LocationForm";
import { SavedVideosStoreCard } from "./SavedVideosStoreCard";
import { ClipWindowsCard } from "./ClipWindowsCard";

// THE LOCATIONS, ONE CARD EACH, AND WHAT MAY BE DONE TO THEM.
//
// Every judgement on this screen was already made on the server:
// `common/views/storage.ts` decided each row's status, its counts, which of the
// five actions are offered and the sentence explaining each one that is not.
// This file renders that and calls the actions. It contains no rule — which is
// the point of the views layer, and what makes those rules unit-testable
// without a browser.
//
// TYPE-ONLY IMPORTS FROM views/storage. It is a "use client" file: the storage
// controller and `lib/storageVolumes.ts` both import execa, and a value import
// of either would fail `next build` with `node:child_process` in the client
// bundle.
//
// ⚠️ THE RE-POINT PANEL IS NEVER 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 list with the
// location's status flipped from `mounted-elsewhere` to `available`, i.e. with
// the Re-point action no longer offered. A naive `{offered && <Log/>}` would
// therefore delete the log of the run that just succeeded, at the exact moment
// the operator wants to read it. Same shape as StorageStage: a `ranHere` flag
// set inside the trigger keeps the panel mounted, and the now-cleared condition
// is fed to `disabled` so the panel that stayed for its log is not a second Run
// button.

export function StorageLocationsTable({ payload }: { payload: StorageRowsPayload }) {
  const router = useRouter();
  const [adding, setAdding] = useState(false);

  return (
    <div className="flex flex-col gap-4">
      <section
        aria-label="storage locations"
        className="flex flex-col gap-3"
      >
        {payload.rows.length === 0 && (
          <p className="text-sm text-muted-foreground">
            No storage locations yet. A location is a named place a channel&rsquo;s
            media may live — usually a second drive. Add one below, then move a
            channel onto it from its Storage panel.
          </p>
        )}
        {payload.rows.map((row) => (
          <LocationCard key={row.id} row={row} onChanged={() => router.refresh()} />
        ))}
      </section>

      {/* AFTER THE LOCATIONS, BEFORE THE FORM. The store is a thing that lives
          on a location, so it reads after the list of them — and before "Add a
          location", which is the page's trailing affordance. */}
      {payload.savedVideos && (
        <SavedVideosStoreCard store={payload.savedVideos} />
      )}

      {/* THE OTHER CORPUS-WIDE PILE OF BYTES, beside the store and for the same
          reason: it is not a fact about any one location (windows are wherever
          the channels are, on every drive at once) and it is the only control
          that removes one. The total is the rows' own clip figures summed —
          computed here rather than carried on the payload, because it is a
          fold of numbers the payload already has. */}
      <ClipWindowsCard
        clipsBytes={payload.rows.reduce((n, r) => n + r.clipsBytes, 0)}
      />

      <section className="flex flex-col gap-2">
        <h2 className="text-base font-semibold">Add a location</h2>
        {adding ? (
          <LocationForm
            mode="add"
            submit={addStorageLocationAction}
            onDone={() => {
              setAdding(false);
              router.refresh();
            }}
            onCancel={() => setAdding(false)}
          />
        ) : (
          <div>
            {/* The DISCLOSURE, not the submit. `add storage location` is the
                form's own button (LocationForm), and two controls sharing one
                accessible name is a screen reader reading the same sentence
                for two different acts. */}
            <button
              type="button"
              onClick={() => setAdding(true)}
              className="px-3 py-1.5 rounded-md border border-border text-sm font-medium"
            >
              New location
            </button>
          </div>
        )}
      </section>
    </div>
  );
}

function actionOf(row: StorageRow, kind: StorageActionKind) {
  return row.actions.find((a) => a.kind === kind);
}

function LocationCard({
  row,
  onChanged,
}: {
  row: StorageRow;
  onChanged: () => void;
}) {
  const [editing, setEditing] = useState(false);
  const [note, setNote] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const [ranRepointHere, setRanRepointHere] = useState(false);

  const refresh = actionOf(row, "refresh");
  const repoint = actionOf(row, "repoint");
  const mount = actionOf(row, "mount");
  const edit = actionOf(row, "edit");
  const del = actionOf(row, "delete");

  async function run(fn: () => Promise<{ ok: true; note?: string } | { ok: false; error: string }>) {
    setBusy(true);
    setError(null);
    setNote(null);
    const result = await fn();
    setBusy(false);
    if (result.ok) {
      setNote(result.note ?? null);
      onChanged();
    } else {
      setError(result.error);
    }
  }

  return (
    <article
      aria-label={`storage location: ${row.id}`}
      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">{row.label}</h2>
        <span
          aria-label="location status"
          className={`rounded-full border px-2 py-0.5 text-xs font-medium ${
            row.status === "available"
              ? "border-border bg-muted"
              : "border-destructive/50 bg-destructive/5 text-destructive"
          }`}
        >
          {row.statusLabel}
        </span>
        {row.isDefault && (
          <span className="rounded-full border border-border px-2 py-0.5 text-xs text-muted-foreground">
            default
          </span>
        )}
        {row.autoRepoint && (
          <span className="rounded-full border border-border px-2 py-0.5 text-xs text-muted-foreground">
            auto re-point
          </span>
        )}
      </div>

      <dl className="grid grid-cols-[max-content_1fr] gap-x-4 gap-y-1 text-sm">
        {/* "location path" and "volume identity", NOT "location root" and
            "location identity". The form on this same page labels its fields
            "location root" and "location id", and Playwright's getByLabel is a
            SUBSTRING match resolved against every match: "location root" would
            have been ambiguous with the read-out of the same name, and
            "location id" is contained in "location identity". Filling the form
            targeted this read-only <dd> instead — the first e2e run failed
            exactly there. Two accessible names where one contains the other are
            a trap for a screen reader user for the same reason. */}
        <dt className="text-muted-foreground">Root</dt>
        <dd className="font-mono text-xs break-all" aria-label="location path">
          {row.root}
        </dd>
        <dt className="text-muted-foreground">Volume</dt>
        <dd className="text-xs" aria-label="volume identity">
          {row.kind === "internal"
            ? "the corpus volume"
            : (row.identity ??
              "unknown — nothing here can ask (no findmnt, or a container)")}
        </dd>
        <dt className="text-muted-foreground">Channels</dt>
        {/* THE COUNT AND THE LINK ARE TWO ELEMENTS, not one. `location channels`
            is the read-out's accessible name and the suite asserts its exact
            text; a link folded into it appends "— list them" to that text and
            breaks every caller. The link gets its own `<dd>` on the next row of
            the grid. */}
        <dd aria-label="location channels">{row.channelsText}</dd>
        {row.channels.total > 0 && (
          <>
            <dt className="text-muted-foreground">Browse</dt>
            <dd>
              {/* THE ROW'S OWN LIST, largest first. A summary that cannot be
                  opened is a number the operator has to go and re-derive by
                  hand, which on this page is opening 71 channel pages. */}
              <Link
                href={row.channelsHref}
                aria-label={`list channels on ${row.id}`}
                className="underline hover:text-foreground"
              >
                the {row.channels.total} channel(s) on this location
              </Link>
            </dd>
          </>
        )}
        <dt className="text-muted-foreground">Media</dt>
        <dd aria-label="location media bytes">
          {row.bytesText}
          {/* THE INTERNAL ROW'S BREAKDOWN (release 17): every channel's text
              and clip windows stay on the corpus volume, plus the media of the
              channels in place. A location row's figure is its media tier
              alone, and carries no breakdown. */}
          {row.tiersText && (
            <span
              aria-label="location tier bytes"
              className="block text-xs text-muted-foreground"
            >
              {row.tiersText}
            </span>
          )}
          {/* THE CLIPS SHARE, inside the figure and never beside it as a
              second total: on the internal row (clips/ is never tiered), it is
              already in the number above; what this adds is that some of it is
              a CACHE nothing prunes. Absent when there are none. */}
          {row.clipsText && (
            <span
              aria-label="location clip bytes"
              className="block text-xs text-muted-foreground"
            >
              {row.clipsText}
            </span>
          )}
        </dd>
        <dt className="text-muted-foreground">Free</dt>
        <dd aria-label="location free space">
          {row.freeBytes === undefined ? "—" : formatBytes(row.freeBytes)}
        </dd>
        <dt className="text-muted-foreground">Last probe</dt>
        <dd aria-label="location last probe">{formatAge(row.lastProbeAgeMs)}</dd>
      </dl>

      {row.notAnswering && (
        <p
          role="status"
          aria-label="location not answering"
          className="text-xs rounded border border-destructive/50 bg-destructive/5 px-3 py-2 text-destructive"
        >
          {row.notAnswering}
        </p>
      )}
      {row.warning && (
        <p
          role="status"
          aria-label="location warning"
          className="text-xs rounded border border-border bg-muted px-3 py-2"
        >
          {row.warning}
        </p>
      )}
      {row.busy && (
        <p role="status" className="text-sm rounded border border-border bg-muted px-3 py-2">
          {row.busy}
        </p>
      )}
      {note && (
        <p role="status" aria-label="location result" className="text-sm">
          {note}
        </p>
      )}
      {error && (
        <p role="alert" aria-label="location error" className="text-sm text-destructive">
          {error}
        </p>
      )}

      {row.kind === "internal" ? (
        <p className="text-xs text-muted-foreground" aria-label="internal note">
          {actionOf(row, "edit")?.withheld}
        </p>
      ) : (
      <div className="flex flex-wrap items-center gap-2">
        <button
          type="button"
          aria-label={`refresh ${row.id}`}
          disabled={busy || !refresh?.offered}
          title={refresh?.withheld}
          onClick={() => run(() => refreshStorageLocationAction(row.id))}
          className="px-3 py-1.5 rounded-md border border-border text-sm font-medium disabled:opacity-50"
        >
          {busy ? "Working…" : "Refresh"}
        </button>
        {mount?.offered && (
          <button
            type="button"
            aria-label={`mount ${row.id}`}
            disabled={busy}
            onClick={() => run(() => mountStorageLocationAction(row.id))}
            className="px-3 py-1.5 rounded-md border border-border text-sm font-medium disabled:opacity-50"
          >
            Mount
          </button>
        )}
        <button
          type="button"
          aria-label={`edit ${row.id}`}
          disabled={!edit?.offered}
          title={edit?.withheld}
          onClick={() => setEditing((v) => !v)}
          className="px-3 py-1.5 rounded-md border border-border text-sm font-medium disabled:opacity-50"
        >
          {editing ? "Close" : "Edit"}
        </button>
        <button
          type="button"
          aria-label={`delete ${row.id}`}
          disabled={busy || !del?.offered}
          // The withheld sentence IS the tooltip. A greyed button with no
          // reason is the thing this page exists not to be.
          title={del?.withheld}
          onClick={() => {
            if (!confirm(`Delete the storage location "${row.label}"? No files are moved or deleted.`)) {
              return;
            }
            void run(() => deleteStorageLocationAction(row.id));
          }}
          className="px-3 py-1.5 rounded-md border border-destructive text-destructive text-sm font-medium disabled:opacity-50"
        >
          Delete
        </button>
      </div>
      )}
      {row.kind !== "internal" && del && !del.offered && (
        <p className="text-xs text-muted-foreground" aria-label="delete withheld">
          {del.withheld}
        </p>
      )}

      {row.kind !== "internal" && editing && (
        <LocationForm
          mode="edit"
          initial={{
            id: row.id,
            label: row.label,
            root: row.root,
            autoRepoint: row.autoRepoint,
            isDefault: row.isDefault,
          }}
          submit={(draft) => editStorageLocationAction(row.id, draft)}
          onDone={() => {
            setEditing(false);
            onChanged();
          }}
          onCancel={() => setEditing(false)}
        />
      )}

      {(repoint?.offered || ranRepointHere) && (
        <section className="flex flex-col gap-2 rounded border border-border bg-muted/30 px-3 py-3">
          <h3 className="text-sm font-semibold">Re-point</h3>
          <p className="text-xs text-muted-foreground">
            The volume is mounted at a different place than this location&rsquo;s
            root. Re-pointing rewrites each channel&rsquo;s <code>media</code>{" "}
            symlink and its <code>mediaDir</code>, then the root.{" "}
            <strong>No bytes move</strong> — the media is already there.
          </p>
          <StreamActionLog
            key="repoint-log"
            trigger={() => {
              setRanRepointHere(true);
              return repointStorageLocationAction(row.id, repoint?.newRoot ?? "");
            }}
            cancelAction={cancelJobAction}
            buttonLabel={repoint?.label ?? "Re-point"}
            runningLabel="Re-pointing…"
            label="Re-point"
            disabled={!repoint?.offered}
          />
        </section>
      )}
      {row.kind !== "internal" &&
        repoint &&
        !repoint.offered &&
        !ranRepointHere &&
        row.status !== "available" && (
        <p className="text-xs text-muted-foreground" aria-label="repoint withheld">
          {repoint.withheld}
        </p>
      )}
    </article>
  );
}

// "4 s ago" / "3 m ago". Deliberately coarse: the number is there to say
// whether the row is answering about now or about the last time anybody looked,
// and a second-accurate age of a ten-second memo would be false precision.
function formatAge(ms: number): string {
  if (ms < 1_000) return "just now";
  const s = Math.round(ms / 1000);
  if (s < 90) return `${s} s ago`;
  const m = Math.round(s / 60);
  if (m < 90) return `${m} m ago`;
  return `${Math.round(m / 60)} h ago`;
}