"use client";

import { useActionState, useState } from "react";
import { StreamActionLog } from "yt-dlp-transcript-common/components/StreamActionLog";
import { SYNC_INTERVAL_MAX_MINUTES } from "yt-dlp-transcript-common/lib/channelConfig";
import { cancelJobAction } from "../../jobs/actions";
import { DurationField } from "../../components/DurationField";
import {
  backupSavedVideosAction,
  saveSavedVideoBackupAction,
  verifySavedVideoBackupAction,
  type SaveBackupConfigResult,
} from "../backupActions";
import { seedChecked } from "../../lib/formState";

type Props = {
  enabled: boolean;
  dest: string;
  intervalMinutes: number;
};

// Backup config form + run/verify buttons for the Saved Videos page. The
// destination drives all three: with no dest, scheduled and manual backups are
// both disabled.
export function SavedVideosControls({ enabled, dest, intervalMinutes }: Props) {
  const [state, formAction] = useActionState<
    SaveBackupConfigResult | undefined,
    FormData
  >(saveSavedVideoBackupAction, undefined);
  // Track the dest input live so the run/verify buttons enable/disable without a
  // round-trip. Seeded from the saved value.
  const [destInput, setDestInput] = useState(dest);
  const hasDest = destInput.trim() !== "";

  return (
    <div className="flex flex-col gap-4">
      <form
        action={formAction}
        className="flex flex-col gap-3 rounded border border-border p-4 max-w-xl"
        aria-label="backup config"
      >
        <h2 className="text-base font-semibold">Backup configuration</h2>
        {state?.ok === false && (
          <div
            role="alert"
            className="rounded border border-destructive/30 bg-destructive-soft px-3 py-2 text-sm text-destructive"
          >
            {state.error}
          </div>
        )}
        {state?.ok === true && (
          <div
            aria-label="backup config saved"
            className="rounded border border-success/30 bg-success-soft px-3 py-2 text-sm text-success"
          >
            Saved.
          </div>
        )}
        <label className="flex flex-col gap-1 text-sm">
          <span className="font-medium">Backup destination</span>
          <input
            type="text"
            name="backupDest"
            value={destInput}
            onChange={(e) => setDestInput(e.target.value)}
            placeholder="/mnt/backup/saved-videos"
            aria-label="backup destination"
            className="rounded border border-border bg-card px-2 py-1 text-sm font-mono"
          />
          <span className="text-xs text-muted-foreground">
            Local filesystem path (a mounted backup disk) the store is mirrored
            into. The mirror is additive — it never deletes. Blank disables both
            scheduled and manual backups.
          </span>
        </label>
        <label className="flex items-start gap-2 text-sm">
          <input
            type="checkbox"
            name="backupEnabled"
            defaultChecked={seedChecked(state, "backupEnabled", enabled)}
            aria-label="scheduled backup enabled"
            className="mt-1"
          />
          <span className="flex flex-col gap-0.5">
            <span className="font-medium">Scheduled backup</span>
            <span className="text-xs text-muted-foreground">
              When on (and a destination is set), the sync heartbeat runs this
              Storage chore on the cadence below. Manual backups work
              regardless.
            </span>
          </span>
        </label>
        <DurationField
          label="Backup interval"
          name="backupIntervalMinutes"
          baseUnit="minutes"
          units={["hours", "days"]}
          value={intervalMinutes}
          min={1}
          max={SYNC_INTERVAL_MAX_MINUTES}
          rate={{ noun: "backup" }}
          className="max-w-md"
        />
        <div>
          <button
            type="submit"
            className="px-3 py-2 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:opacity-90"
          >
            Save backup config
          </button>
        </div>
      </form>
      <div className="flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:gap-4">
        <StreamActionLog
          trigger={() => backupSavedVideosAction()}
          cancelAction={cancelJobAction}
          buttonLabel="Back up now"
          runningLabel="Backing up…"
          label="Back up saved videos"
          disabled={!hasDest}
        />
        <StreamActionLog
          trigger={() => verifySavedVideoBackupAction()}
          cancelAction={cancelJobAction}
          buttonLabel="Verify backup"
          runningLabel="Verifying…"
          label="Verify saved-video backup"
          disabled={!hasDest}
        />
      </div>
      {!hasDest && (
        <p className="text-xs text-muted-foreground">
          Set a backup destination above and save to enable backups.
        </p>
      )}
    </div>
  );
}