"use client";

import { useId, useState } from "react";
import {
  DURATION_KEEP,
  formatBaseValue,
  formatRate,
  perDayRate,
  splitDuration,
  toBaseUnit,
  unitLabel,
  type DurationUnit,
} from "yt-dlp-transcript-common/lib/duration";
// Its controlled selects sit inside action forms, whose reset they would not
// survive alone (forms/Controlled.tsx).
import { ControlledSelect } from "./forms/Controlled";

// A cadence control: pick a preset, or type an amount and choose a unit.
//
// Every duration in this app is stored as a bare integer in one fixed unit, and
// the forms used to expose that integer directly — so setting a weekly sweep
// meant knowing that 10080 is a week. This renders the same integer as an
// amount + unit pair with the raw value echoed underneath, so nothing is hidden
// from someone who also reads settings.json.
//
// Deliberately built on a native <select> and <input type="number"> rather than
// the (unused) shadcn/Radix Select: Radix renders a <button role="combobox">,
// which breaks Playwright's .selectOption() and would make every cadence spec
// use a different idiom from the rest of the suite. It also copies the shape of
// the hand-rolled fields around it — label > control > hint — so it doesn't
// read as foreign.
//
// THE SUBMITTED VALUE IS A SINGLE HIDDEN INPUT in `baseUnit`. The visible
// controls carry no `name`, so no server-side parser changes: every consumer
// keeps reading a plain integer. The hidden input never emits "" outside the
// explicit inherit mode, because the settings action reads blank as
// "absent — keep what's saved", which would silently discard an edit.

const inputClass = "rounded border border-border bg-card px-2 py-1 text-sm";

export const DURATION_CUSTOM = "custom";
const MODE_INHERIT = "inherit";
const MODE_OFF = "off";
const MODE_UNCHANGED = "unchanged";

export type DurationPreset = { value: string; label: string };

export type DurationFieldProps = {
  /** Form field name — the hidden input that actually posts. */
  name: string;
  /** Unit of the stored integer. */
  baseUnit: DurationUnit;
  /** Units offered in the unit picker. */
  units: DurationUnit[];
  /** Stored value in `baseUnit`; undefined means "inherit". */
  value: number | undefined;
  label: string;
  hint?: React.ReactNode;
  /** Visible label is dropped (table cells); `label` still names the controls. */
  hideLabel?: boolean;
  /** Offer "Default (use global)", which submits "" so the key is cleared. */
  allowInherit?: boolean;
  /** Offer the 0 sentinel. */
  allowOff?: boolean;
  /** Offer "Leave unchanged" (bulk edits), which submits DURATION_KEEP. */
  allowUnchanged?: boolean;
  offLabel?: string;
  inheritLabel?: string;
  /** Shown in the echo line when inheriting, so the effective cadence is visible. */
  inheritValue?: number;
  /** Optional quick picks, values expressed in `baseUnit`. */
  presets?: DurationPreset[];
  min?: number;
  max?: number;
  /** Echo the derived rate: "about 1 full listing fetch per channel per day". */
  rate?: { noun: string; pluralNoun?: string; per?: string };
  className?: string;
};

type Mode = typeof MODE_INHERIT | typeof MODE_OFF | typeof DURATION_CUSTOM | string;

// Map a stored value to the control's initial mode. Read ONCE, as a useState
// initializer — the scheduler page re-renders these rows every 5s from a status
// poll, and re-deriving state from props there would clobber an in-progress
// edit. There is deliberately no prop -> state effect.
function initialMode(
  value: number | undefined,
  presets: DurationPreset[],
  allowInherit: boolean,
  allowOff: boolean,
  allowUnchanged: boolean,
): Mode {
  if (allowUnchanged) return MODE_UNCHANGED;
  if (value === undefined) return allowInherit ? MODE_INHERIT : DURATION_CUSTOM;
  if (value === 0 && allowOff) return MODE_OFF;
  const hit = presets.find((p) => Number(p.value) === value);
  return hit ? hit.value : DURATION_CUSTOM;
}

export function DurationField({
  name,
  baseUnit,
  units,
  value,
  label,
  hint,
  hideLabel,
  allowInherit = false,
  allowOff = false,
  allowUnchanged = false,
  offLabel = "Off",
  inheritLabel = "Default (use global)",
  inheritValue,
  presets = [],
  min = 1,
  max = 44640,
  rate,
  className,
}: DurationFieldProps) {
  const reactId = useId();
  const errorId = `${reactId}-error`;
  const [mode, setMode] = useState<Mode>(() =>
    initialMode(value, presets, allowInherit, allowOff, allowUnchanged),
  );
  // Seeded from the stored value so switching to "Custom…" starts from what is
  // already configured rather than an empty box. splitDuration is what keeps a
  // hand-set 137 showing as "137 minutes" instead of rounding to "2 hours".
  const seed = splitDuration(value && value > 0 ? value : min, units, baseUnit);
  const [unit, setUnit] = useState<DurationUnit>(() => seed.unit);
  const [amount, setAmount] = useState(() => String(seed.amount));

  const hasModeSelect =
    allowInherit || allowOff || allowUnchanged || presets.length > 0;
  const isCustom = mode === DURATION_CUSTOM || !hasModeSelect;
  const isInherit = mode === MODE_INHERIT;
  const isOff = mode === MODE_OFF;
  const isUnchanged = mode === MODE_UNCHANGED;

  const parsedAmount = Number.parseInt(amount, 10);
  const amountValid = Number.isFinite(parsedAmount) && parsedAmount > 0;
  const customBase = amountValid
    ? toBaseUnit(parsedAmount, unit, baseUnit)
    : (value ?? min);
  const outOfRange = amountValid && (customBase < min || customBase > max);

  // What actually posts. "" only in inherit mode; otherwise always a concrete
  // integer, so a blank box can't be read as "keep the old value".
  let submitted: string;
  if (isUnchanged) submitted = DURATION_KEEP;
  else if (isInherit) submitted = "";
  else if (isOff) submitted = "0";
  else if (isCustom) submitted = String(customBase);
  else submitted = mode;

  const effective = isInherit
    ? inheritValue
    : Number.parseInt(submitted, 10) || 0;

  // The unit currently displayed may be the base unit even when it isn't
  // offered (a hand-set 137 on an hours/days field), so it has to be listed or
  // the <select> would silently snap to another value.
  const unitOptions = units.includes(unit) ? units : [unit, ...units];

  return (
    <div className={`flex flex-col gap-1 text-sm ${className ?? ""}`}>
      {!hideLabel && <span className="font-medium">{label}</span>}
      <div className="flex flex-wrap items-center gap-2">
        {hasModeSelect && (
          <ControlledSelect
            aria-label={label}
            value={mode}
            onChange={(e) => setMode(e.target.value)}
            className={inputClass}
          >
            {allowUnchanged && (
              <option value={MODE_UNCHANGED}>Leave unchanged</option>
            )}
            {allowInherit && (
              <option value={MODE_INHERIT}>{inheritLabel}</option>
            )}
            {allowOff && <option value={MODE_OFF}>{offLabel}</option>}
            {presets.map((p) => (
              <option key={p.value} value={p.value}>
                {p.label}
              </option>
            ))}
            <option value={DURATION_CUSTOM}>Custom…</option>
          </ControlledSelect>
        )}
        {isCustom && (
          <>
            <input
              type="number"
              inputMode="numeric"
              aria-label={`${label} amount`}
              aria-invalid={outOfRange || !amountValid ? true : undefined}
              aria-describedby={outOfRange ? errorId : undefined}
              value={amount}
              onChange={(e) => setAmount(e.target.value)}
              min={1}
              className={`${inputClass} w-24`}
            />
            <ControlledSelect
              aria-label={`${label} unit`}
              value={unit}
              onChange={(e) => setUnit(e.target.value as DurationUnit)}
              className={inputClass}
            >
              {unitOptions.map((u) => (
                <option key={u} value={u}>
                  {unitLabel(u, parsedAmount || 2)}
                </option>
              ))}
            </ControlledSelect>
          </>
        )}
      </div>
      <input type="hidden" name={name} value={submitted} />
      {hint && <span className="text-xs text-muted-foreground">{hint}</span>}
      <span
        aria-live="polite"
        className="text-xs text-muted-foreground tabular-nums"
      >
        {echoLine({ isUnchanged, isInherit, isOff, effective, baseUnit, rate })}
      </span>
      {outOfRange && (
        <span id={errorId} role="alert" className="text-xs text-destructive">
          Must be between {formatBaseValue(min, baseUnit)} and{" "}
          {formatBaseValue(max, baseUnit)}.
        </span>
      )}
    </div>
  );
}

// The live restatement under the control: the raw stored number (so it stays
// legible against settings.json) plus the derived rate, which is the number an
// operator actually reasons about when judging rate-limit risk. Rendered from
// the same value the hidden input posts, so it can never disagree with it.
function echoLine({
  isUnchanged,
  isInherit,
  isOff,
  effective,
  baseUnit,
  rate,
}: {
  isUnchanged: boolean;
  isInherit: boolean;
  isOff: boolean;
  effective: number | undefined;
  baseUnit: DurationUnit;
  rate?: { noun: string; pluralNoun?: string; per?: string };
}): string {
  if (isUnchanged) return "Left as each channel has it.";
  if (isOff || effective === 0) return "Off — never runs.";
  if (isInherit) {
    return effective === undefined
      ? "Uses the global default."
      : `Uses the global default — every ${formatBaseValue(effective, baseUnit)}.`;
  }
  if (effective === undefined) return "";
  const head = `Every ${formatBaseValue(effective, baseUnit)}`;
  if (!rate) return `${head}.`;
  const perDay = perDayRate(effective, baseUnit);
  const noun =
    perDay === 1 ? rate.noun : (rate.pluralNoun ?? `${rate.noun}s`);
  const per = rate.per ? ` per ${rate.per}` : "";
  return `${head} · about ${formatRate(perDay)} ${noun}${per} per day`;
}