"use client";

import { useActionState, useState } from "react";
import Link from "next/link";
import {
  saveSettingsAction,
  type SaveResult,
} from "../actions";
import type { SiteSettings } from "yt-dlp-transcript-common/lib/settings";
import {
  DOWNLOAD_FORMAT_LABELS,
  DOWNLOAD_FORMAT_PRESETS,
  SOURCE_VIDEO_QUALITIES,
  SOURCE_VIDEO_QUALITY_LABELS,
} from "yt-dlp-transcript-common/ytdlp/downloadFormat";
import {
  Field,
  SeededInput,
  SeededSelect,
} from "../../components/forms/Field";
import { seedChecked } from "../../lib/formState";
import {
  SocialLinksField,
  toSocialRow,
  type SocialRow,
} from "../../components/SocialLinksField";

type Props = {
  initial: SiteSettings;
};

export function SettingsForm({ initial }: Props) {
  const [state, formAction] = useActionState<SaveResult | undefined, FormData>(
    saveSettingsAction,
    undefined,
  );
  const [social, setSocial] = useState<SocialRow[]>(() =>
    initial.socialLinks.map(toSocialRow),
  );

  return (
    <form action={formAction} className="flex flex-col gap-4 max-w-xl">
      <Field
        label="Admin title"
        name="adminTitle"
        state={state}
        defaultValue={initial.adminTitle}
        required
        hint="Title for this editor's own shell. Public sites get their titles from each site's config."
      />
      <Field
        label="Family hub URL"
        name="homepageUrl"
        state={state}
        defaultValue={initial.homepageUrl}
        type="url"
        hint="Absolute URL of the family hub (e.g. https://archilyzer-hub.pages.dev). Each site that names no hub of its own publishes it in its /site.json and /corpus.json, so the hub can tell its member sites; no page links to it. Leave blank to publish none."
      />
      <Field
        label="Max transcript page bytes"
        name="maxTranscriptPageBytes"
        state={state}
        defaultValue={String(initial.maxTranscriptPageBytes)}
        hint="Bytes per generated transcript page (256 KB – 20 MB). Affects pagination next build."
        type="number"
      />
      <Field
        label="Cookies from browser"
        name="cookiesFromBrowser"
        state={state}
        defaultValue={initial.cookiesFromBrowser}
        hint="Browser spec passed to yt-dlp --cookies-from-browser (e.g. firefox, chrome:Default) for age-restricted, members-only, and private videos. When it is used is set by the cookie mode below. Leave blank for no cookies. Each channel can override both in its Advanced settings."
      />
      <label className="flex flex-col gap-1 text-sm">
        <span className="font-medium">Cookie mode</span>
        <SeededSelect
          state={state}
          name="cookieMode"
          initial={initial.cookieMode}
          className="rounded border border-border bg-card px-2 py-1 text-sm"
        >
          <option value="when-required">
            When required — retry auth/age failures with cookies
          </option>
          <option value="always">
            Always — pass cookies on every yt-dlp invocation
          </option>
          <option value="defer">
            Defer — never in normal runs; collect into "Needs cookies"
          </option>
        </SeededSelect>
        <span className="text-xs text-muted-foreground">
          <strong>When required</strong> (default) runs cookie-free and retries
          only the attempts that fail with an auth/age error.{" "}
          <strong>Always</strong> sends cookies with every invocation
          (enumeration, metadata prefetch, availability probes, downloads) —
          for channels whose listing itself needs auth.{" "}
          <strong>Defer</strong> never uses cookies in normal runs: auth-gated
          videos are excluded from batches and gathered into each
          channel&apos;s &ldquo;Needs cookies&rdquo; bucket, downloaded on
          demand with its &ldquo;Download with cookies&rdquo; button.
        </span>
      </label>
      <Field
        label="Sleep between managed downloads (seconds)"
        name="sleepBetweenDownloadsSeconds"
        state={state}
        defaultValue={String(initial.sleepBetweenDownloadsSeconds)}
        type="number"
        hint="Pause inserted between per-video yt-dlp invocations in managed batch downloads (download-from-playlist, download-missing). 0 disables. Default 10s. Each channel can override this in its Advanced settings."
      />
      <label className="flex flex-col gap-1 text-sm">
        <span className="font-medium">Default download format</span>
        <SeededSelect
          state={state}
          name="downloadFormat"
          initial={initial.downloadFormat}
          className="rounded border border-border bg-card px-2 py-1 text-sm"
        >
          {DOWNLOAD_FORMAT_PRESETS.map((p) => (
            <option key={p} value={p}>
              {DOWNLOAD_FORMAT_LABELS[p]}
            </option>
          ))}
        </SeededSelect>
        <span className="text-xs text-muted-foreground">
          The yt-dlp <code>-f</code> selector for managed downloads.{" "}
          <strong>Auto</strong> picks per-source: Odysee/LBRY downloads its
          full-length <code>original</code> file (its HLS streams are
          CDN-truncated to a few minutes), everything else uses{" "}
          <code>bestaudio/worst</code>. Each channel can override this in its
          Advanced settings, and a single re-download can override it too.
        </span>
      </label>
      <label className="flex flex-col gap-1 text-sm">
        <span className="font-medium">Source video quality</span>
        <SeededSelect
          state={state}
          name="sourceVideoQuality"
          initial={initial.sourceVideoQuality}
          className="rounded border border-border bg-card px-2 py-1 text-sm"
        >
          {SOURCE_VIDEO_QUALITIES.map((q) => (
            <option key={q} value={q}>
              {SOURCE_VIDEO_QUALITY_LABELS[q]}
            </option>
          ))}
        </SeededSelect>
        <span className="text-xs text-muted-foreground">
          What a full persist keeps: &ldquo;Persist source video&rdquo;, a
          whole-recording fetch and &ldquo;Persist kept now&rdquo;.{" "}
          <strong>Original</strong> takes the best video and audio;{" "}
          <strong>720p</strong> takes an H.264 file at most 720p tall (480p
          when there is none), smaller and quick to cut for clips and editing.
          Each channel can override this in its Advanced settings, and a single
          persist can override it too.
        </span>
      </label>
      <Field
        label="Minimum free disk space (GB)"
        name="minFreeDiskGB"
        state={state}
        defaultValue={String(initial.minFreeDiskGB)}
        type="number"
        hint="Downloads are prevented from starting, and a running batch stops launching new videos, when free space on the transcripts directory falls below this floor. Default 5 GB. Set to 0 to disable the gate."
      />
      <Field
        label="Resume margin (GB)"
        name="resumeMarginGB"
        state={state}
        defaultValue={String(initial.resumeMarginGB)}
        type="number"
        hint="Extra headroom above the floor that a disk-stopped pipeline must see before it starts writing again. Without it the first resumed download drops free space back under the floor and the pipeline flaps. Default 2 GB. Set to 0 to resume at the floor."
      />
      {/* THE COLD ROOT USED TO BE A TEXT BOX HERE. It is now a list of named
          locations with an id, a label, a root, an opt-in auto re-point and a
          volume identity — more than a settings field can hold, and edited on
          its own page. The link points at a route that does not exist yet:
          /storage is the next slice. That is deliberate rather than an
          oversight — the field's REPLACEMENT lands with the field's removal, so
          this form never carries an input whose value nothing reads. */}
      <div className="flex flex-col gap-1">
        <span className="text-sm font-medium">Media locations</span>
        <span className="text-xs text-muted-foreground">
          The places a channel&apos;s media can live — the cold drive and
          anything beside it — are named, checked and re-pointed on{" "}
          <Link href="/storage" className="underline">
            Storage
          </Link>
          . Each channel&apos;s own Storage panel still runs the move.
        </span>
      </div>
      <Field
        label="Auto-refresh interval (seconds)"
        name="autoRefreshIntervalSeconds"
        state={state}
        defaultValue={String(initial.autoRefreshIntervalSeconds)}
        type="number"
        hint="How often the editor passively re-fetches the current page so sidebar badges and reports stay live without a manual reload. Pauses automatically while the tab is hidden and refreshes once when you return. Default 5s (range 1–600). Set to 0 to disable."
      />
      <label className="flex items-start gap-2 text-sm">
        <input
          type="checkbox"
          name="inlineTranscribeOnFallback"
          defaultChecked={seedChecked(
            state,
            "inlineTranscribeOnFallback",
            initial.inlineTranscribeOnFallback,
          )}
          className="mt-1"
        />
        <span className="flex flex-col gap-1">
          <span className="font-medium">
            Transcribe immediately after no-subs fallback
          </span>
          <span className="text-xs text-muted-foreground">
            When the managed downloader falls back to audio+whisper for a
            video without captions, run whisper inline instead of leaving
            the audio for the next &ldquo;Transcribe missing&rdquo; pass.
            Off by default so batch downloads finish faster and whisper
            can run in parallel.
          </span>
        </span>
      </label>
      <label className="flex items-start gap-2 text-sm">
        <input
          type="checkbox"
          name="skipLiveDownloads"
          defaultChecked={seedChecked(
            state,
            "skipLiveDownloads",
            initial.skipLiveDownloads,
          )}
          className="mt-1"
        />
        <span className="flex flex-col gap-1">
          <span className="font-medium">
            Skip live and upcoming videos
          </span>
          <span className="text-xs text-muted-foreground">
            Before each managed download, a quick metadata-only pass checks
            whether the video is currently live or scheduled/upcoming and, if
            so, skips it (finished livestream VODs download normally). The skip
            is recorded but not archived, so the next sync retries the video
            once the stream ends. On by default. Each channel can override this
            in its Advanced settings.
          </span>
        </span>
      </label>
      <label className="flex items-start gap-2 text-sm">
        <input
          type="checkbox"
          name="verifyAvailabilityBeforeClean"
          defaultChecked={seedChecked(
            state,
            "verifyAvailabilityBeforeClean",
            initial.verifyAvailabilityBeforeClean,
          )}
          className="mt-1"
        />
        <span className="flex flex-col gap-1">
          <span className="font-medium">
            Check availability before cleaning audio
          </span>
          <span className="text-xs text-muted-foreground">
            Before the transcribed-audio cleanup deletes anything, check each
            video is still available at the source. A video that has been
            removed, made private, or put behind a membership is marked
            &ldquo;do not clean&rdquo; and kept — our copy is now the only copy.
            Anything the check cannot resolve is left alone and retried next
            run. Costs one extra yt-dlp call per channel, plus one per video
            missing from the channel listing. On by default; turn it off for an
            offline setup or channels without a URL, where the check can never
            resolve and cleanup would stop deleting anything.
          </span>
        </span>
      </label>
      <label className="flex items-start gap-2 text-sm">
        <input
          type="checkbox"
          name="buildArchives"
          defaultChecked={seedChecked(
            state,
            "buildArchives",
            initial.buildArchives,
          )}
          className="mt-1"
        />
        <span className="flex flex-col gap-1">
          <span className="font-medium">
            Generate downloadable archive zips on build
          </span>
          <span className="text-xs text-muted-foreground">
            Each site build produces per-channel transcript &amp; live-chat
            archive zips and lists them on the site&apos;s Downloads page. On by
            default. A site can opt out on its own page, and a single build can
            skip them from the Build controls.
          </span>
        </span>
      </label>
      <label className="flex flex-col gap-1 text-sm">
        <span className="font-medium">Archive overflow storage (R2 bucket)</span>
        <SeededInput
          state={state}
          type="text"
          name="archiveStorageBucket"
          initial={initial.archiveStorage?.bucket ?? ""}
          placeholder="my-archives-bucket"
          className="rounded border border-border bg-card px-2 py-1 text-sm"
        />
        <span className="text-xs text-muted-foreground">
          Cloudflare R2 bucket name. Archive zips larger than the Pages 25&nbsp;MB
          per-file cap are uploaded here on deploy (via <code>wrangler</code>)
          instead of being dropped. Leave blank to keep oversize archives
          unavailable.
        </span>
      </label>
      <label className="flex flex-col gap-1 text-sm">
        <span className="font-medium">Archive overflow public URL</span>
        <SeededInput
          state={state}
          type="text"
          name="archiveStoragePublicBaseUrl"
          initial={initial.archiveStorage?.publicBaseUrl ?? ""}
          placeholder="https://archives.example.com"
          className="rounded border border-border bg-card px-2 py-1 text-sm"
        />
        <span className="text-xs text-muted-foreground">
          Public base URL the bucket is served from — a{" "}
          <code>workers.dev</code> proxy (see <code>r2-proxy/</code>), a custom
          domain, or the bucket&rsquo;s <code>r2.dev</code> subdomain. The
          Downloads page links to{" "}
          <code>&lt;base&gt;/&lt;siteId&gt;/archives/&lt;file&gt;.zip</code>.
          Required for overflow uploads to work.
        </span>
      </label>
      <label className="flex flex-col gap-1 text-sm">
        <span className="font-medium">Report refresh debounce</span>
        <SeededSelect
          state={state}
          name="reportDebouncePreset"
          initial={initial.reportDebouncePreset}
          className="rounded border border-border bg-card px-2 py-1 text-sm"
        >
          <option value="fast">Fast — ~1s after activity, no cap</option>
          <option value="balanced">
            Balanced — ~3s after activity, 30s cap
          </option>
          <option value="lazy">Lazy — ~10s after activity, 60s cap</option>
        </SeededSelect>
        <span className="text-xs text-muted-foreground">
          After any action that changes a channel report (download, transcribe,
          cleanup, file edits…), the report is regenerated automatically. This
          controls how long the shared scheduler waits for activity to settle
          before regenerating, so bursts of actions collapse into one pass.
        </span>
      </label>
      <fieldset className="flex flex-col gap-3 border border-border rounded p-3">
        <legend className="px-1 text-sm font-medium">Build pipeline</legend>
        <p className="text-xs text-muted-foreground">
          A single site builds in <code>export/</code>, one at a time on one
          queue. <strong>Build all sites</strong> builds every site at once, each
          in its own container (capped by Max parallel builds), then deploys them
          one by one, whenever a container engine answers, and serially on the
          host when none does. See PUBLISH.md.
        </p>
        <Field
          label="Max parallel builds"
          name="maxParallelBuilds"
          state={state}
          defaultValue={String(initial.buildPipeline.maxParallelBuilds)}
          type="number"
          hint="Cap on concurrent per-site container builds (1–16) when Build all sites runs in containers — whenever a container engine answers."
        />
        <Field
          label="Docker image tag"
          name="dockerImage"
          state={state}
          defaultValue={initial.buildPipeline.dockerImage}
          hint="Tag of the reusable build image, built once and reused for every site."
        />
        <Field
          label="Dockerfile path"
          name="dockerfile"
          state={state}
          defaultValue={initial.buildPipeline.dockerfile}
          hint="Path (relative to the repo root) used to build the image."
        />
      </fieldset>
      <fieldset className="flex flex-col gap-3 border border-border rounded p-3">
        <legend className="px-1 text-sm font-medium">Social links</legend>
        <p className="text-xs text-muted-foreground">
          Default social links shown in every site&apos;s footer. Each site can
          override these from its own page (Sites → a site → Social links).
        </p>
        <SocialLinksField
          value={social}
          onChange={setSocial}
          name="socialLinksJson"
        />
      </fieldset>
      <div className="flex items-center gap-3">
        <button
          type="submit"
          className="px-3 py-2 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:opacity-90"
        >
          Save settings
        </button>
        {state?.ok === true && (
          <span
            role="status"
            className="text-sm text-success"
          >
            Saved.
          </span>
        )}
        {state && state.ok === false && (
          <span
            role="alert"
            className="text-sm text-destructive"
          >
            {state.error}
          </span>
        )}
      </div>
    </form>
  );
}