"use client";

import { useActionState } from "react";
import {
  HEALTH_TIMING_BOUNDS,
  HEALTH_TIMING_DEFAULTS,
  HEALTH_TIMING_HINTS,
  type StorageHealthSettings,
} from "yt-dlp-transcript-common/lib/storageHealthTimings";
import { HEALTH_TIMING_FIELDS } from "../lib/healthTimingsForm";
import { saveHealthTimingsAction, type HealthTimingsResult } from "../actions";
import { SeededInput } from "../../components/forms/Field";

// THE DRIVE HEALTH TIMING — `settings.storage.health`, the five numbers the
// editor decides "this drive is mounted and not answering" by
// (lib/storageHealth.ts). The ruling (release 15, slice DT): when a stall is
// misjudged under heavy external-disk churn, the operator tunes these rather
// than the code.
//
// COLLAPSED, AND LAST. The defaults suit a healthy disk and most operators will
// never open it; the locations are what the page is for.
//
// A FIELD LEFT EMPTY IS THE DEFAULT, which is its placeholder. A field holds a
// value only where one was saved, so clearing it goes back to the default (and
// nothing is written for it). The server refuses a value out of range with a
// sentence, rather than storing another number than the one typed.
//
// TEXT INPUTS, NOT `type="number"`: a number input's own validation blocks the
// submit on "3.5" with a browser bubble instead of the sentence the action
// returns, and the action is the one validator.
//
// VALUES FROM THE TIMINGS MODULE ONLY (pure): this is a "use client" file.
//
// Accessible names: "drive health timing" (the block), the five fields'
// (lib/healthTimingsForm.ts), "save timing", "timing saved", "timing error" —
// none contains another (Playwright's getByLabel matches substrings).

export function HealthTimingForm({ stored }: { stored: StorageHealthSettings }) {
  const [state, formAction, pending] = useActionState<
    HealthTimingsResult | undefined,
    FormData
  >(saveHealthTimingsAction, undefined);
  const tuned = HEALTH_TIMING_FIELDS.filter((f) => stored[f.key] !== undefined).length;

  return (
    <details
      aria-label="drive health timing"
      className="rounded-xl border border-border bg-card px-4 py-3"
    >
      <summary className="cursor-pointer text-base font-semibold">
        Drive health timing
        <span className="ml-2 text-sm font-normal text-muted-foreground">
          {tuned === 0 ? "defaults" : `${tuned} changed from the default`}
        </span>
      </summary>
      <div className="mt-3 flex flex-col gap-3">
        <p className="text-sm text-muted-foreground max-w-3xl">
          How the editor decides that a drive is mounted but not answering, and
          stops reading it until it answers again. The defaults suit a disk in
          good health; change them only when a busy drive is being called not
          answering (or a stalled one is not). An empty field is its default.
        </p>
        <form action={formAction} className="flex flex-col gap-3">
          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
            {HEALTH_TIMING_FIELDS.map((f) => {
              const { min, max } = HEALTH_TIMING_BOUNDS[f.key];
              const unit = f.unit ? ` ${f.unit}` : "";
              return (
                <label key={f.key} className="flex flex-col gap-1 text-sm">
                  <span className="font-medium">
                    {f.label}
                    {f.unit && <span className="font-normal text-muted-foreground"> ({f.unit})</span>}
                  </span>
                  <SeededInput
                    state={state}
                    type="text"
                    inputMode="numeric"
                    name={f.key}
                    aria-label={f.ariaLabel}
                    initial={stored[f.key] === undefined ? "" : String(stored[f.key])}
                    placeholder={String(HEALTH_TIMING_DEFAULTS[f.key])}
                    className="rounded border border-border bg-background px-2 py-1 text-sm font-mono tabular-nums"
                  />
                  <span className="text-xs text-muted-foreground">
                    {HEALTH_TIMING_HINTS[f.key]} Default {HEALTH_TIMING_DEFAULTS[f.key]}
                    {unit}; {min}–{max}
                    {unit}.
                  </span>
                </label>
              );
            })}
          </div>
          <div className="flex flex-wrap items-center gap-3">
            <button
              type="submit"
              disabled={pending}
              aria-label="save timing"
              className="px-3 py-1.5 rounded-md border border-border text-sm font-medium disabled:opacity-50"
            >
              {pending ? "Saving…" : "Save timing"}
            </button>
            {state?.ok === true && (
              <span role="status" aria-label="timing saved" className="text-sm">
                {state.note}
              </span>
            )}
            {state?.ok === false && (
              <span
                role="alert"
                aria-label="timing error"
                className="text-sm text-destructive"
              >
                {state.error}
              </span>
            )}
          </div>
        </form>
      </div>
    </details>
  );
}