"use client";

import { useActionState, useState } from "react";
import { setChannelCadencesAction, type SaveResult } from "../../../scheduler/actions";
import { DurationField } from "../../../components/DurationField";
import {
  FULL_SWEEP_PRESETS,
  SYNC_INTERVAL_PRESETS,
} from "../../../scheduler/intervalPresets";
import { formatCadence } from "./cadence";

// Per-row cadence cell for the scheduler table. Collapsed to two read-only
// chips by default — this page's job is to show every channel's cadence at
// once, and two full editors per row would bury that — expanding to the pair of
// editors on click.
//
// Holds its own state (seeded once from props) so the page's 5s status poll
// can't clobber an in-progress edit: the poll replaces the whole channels array
// and re-renders every row, but rows are keyed by slug so this is re-rendered,
// never remounted, and React discards the recomputed initial value. There must
// be no prop -> state effect here. scheduler.spec.ts guards exactly this.
export function ChannelCadenceEditor({
  slug,
  configuredInterval,
  configuredFullSweep,
  defaultIntervalMinutes,
  defaultFullSweepMinutes,
}: {
  slug: string;
  configuredInterval: number | undefined;
  configuredFullSweep: number | undefined;
  defaultIntervalMinutes: number;
  defaultFullSweepMinutes: number;
}) {
  const [open, setOpen] = useState(false);
  const [state, formAction, pending] = useActionState<
    SaveResult | undefined,
    FormData
  >(setChannelCadencesAction.bind(null, [slug]), undefined);

  if (!open) {
    return (
      <button
        type="button"
        onClick={() => setOpen(true)}
        aria-label={`Edit cadence for ${slug}`}
        className="flex flex-wrap items-center gap-1.5 rounded px-1 py-0.5 text-left hover:bg-muted"
      >
        <Chip label="Auto" value={formatCadence(configuredInterval)} />
        <Chip label="Sweep" value={formatCadence(configuredFullSweep)} />
      </button>
    );
  }

  return (
    <form action={formAction} className="flex flex-col gap-2 min-w-72">
      <DurationField
        name="syncIntervalMinutes"
        label={`Auto-sync interval for ${slug}`}
        hideLabel
        baseUnit="minutes"
        units={["minutes", "hours", "days"]}
        value={configuredInterval}
        presets={SYNC_INTERVAL_PRESETS}
        allowInherit
        allowOff
        offLabel="Off (never auto-sync)"
        inheritValue={defaultIntervalMinutes}
        max={44640}
      />
      {/* Distinct label prefix on purpose: a second control matching
          /Auto-sync interval/ would make the existing row-scoped getByLabel
          queries strict-mode-ambiguous. */}
      <DurationField
        name="fullSweepIntervalMinutes"
        label={`Full sweep interval for ${slug}`}
        hideLabel
        baseUnit="minutes"
        units={["hours", "days"]}
        value={configuredFullSweep}
        presets={FULL_SWEEP_PRESETS}
        allowInherit
        allowOff
        offLabel="Off (never sweep)"
        inheritValue={defaultFullSweepMinutes}
        max={44640}
      />
      {/* One Save for both cadences — a second per-row submit would make
          getByRole("button", { name: "Save" }) ambiguous inside the row. */}
      <div className="flex items-center gap-2">
        <button
          type="submit"
          disabled={pending}
          className="px-2 py-1 rounded-md bg-primary text-primary-foreground text-xs font-medium hover:opacity-90 disabled:opacity-50"
        >
          {pending ? "Saving…" : "Save"}
        </button>
        <button
          type="button"
          onClick={() => setOpen(false)}
          className="px-2 py-1 rounded-md border border-border text-xs hover:bg-muted"
        >
          Close
        </button>
        {state?.ok === true && (
          <span role="status" className="text-xs text-success">
            Saved
          </span>
        )}
        {state?.ok === false && (
          <span role="alert" className="text-xs text-destructive">
            {state.error}
          </span>
        )}
      </div>
    </form>
  );
}

function Chip({ label, value }: { label: string; value: string }) {
  return (
    <span className="rounded-full border border-border bg-card px-2 py-0.5 text-xs whitespace-nowrap">
      <span className="text-muted-foreground">{label} </span>
      <span className="tabular-nums">{value}</span>
    </span>
  );
}