"use client";

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

// Sticky footer bar that appears once rows are selected. Both fields default to
// "Leave unchanged", so sweeps can be retuned across forty channels without
// disturbing anyone's auto-sync — the whole reason this page is the right place
// for a per-channel override on a corpus where one channel wants a weekly sweep
// and everything else wants a daily one.
export function BulkCadenceBar({
  slugs,
  onClear,
  onApplied,
}: {
  slugs: string[];
  onClear: () => void;
  onApplied: () => void;
}) {
  const [state, formAction, pending] = useActionState<
    SaveResult | undefined,
    FormData
  >(async (prev, formData) => {
    const result = await setChannelCadencesAction(slugs, prev, formData);
    if (result.ok) onApplied();
    return result;
  }, undefined);

  return (
    <form
      action={formAction}
      aria-label="bulk cadence"
      className="sticky bottom-0 z-10 flex flex-col gap-3 rounded border border-border bg-card p-3 shadow-lg sm:flex-row sm:flex-wrap sm:items-end motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-2"
    >
      <span className="text-sm font-medium sm:self-center">
        {slugs.length} selected
      </span>
      <DurationField
        name="syncIntervalMinutes"
        label="Bulk auto-sync interval"
        baseUnit="minutes"
        units={["minutes", "hours", "days"]}
        value={undefined}
        presets={SYNC_INTERVAL_PRESETS}
        allowUnchanged
        allowInherit
        allowOff
        offLabel="Off (never auto-sync)"
        max={44640}
        className="sm:w-64"
      />
      <DurationField
        name="fullSweepIntervalMinutes"
        label="Bulk full sweep interval"
        baseUnit="minutes"
        units={["hours", "days"]}
        value={undefined}
        presets={FULL_SWEEP_PRESETS}
        allowUnchanged
        allowInherit
        allowOff
        offLabel="Off (never sweep)"
        max={44640}
        className="sm:w-64"
      />
      <div className="flex items-center gap-2 sm:pb-1">
        <button
          type="submit"
          disabled={pending}
          className="px-3 py-1.5 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:opacity-90 disabled:opacity-50"
        >
          {pending ? "Applying…" : "Apply"}
        </button>
        <button
          type="button"
          onClick={onClear}
          className="px-3 py-1.5 rounded-md border border-border text-sm hover:bg-muted"
        >
          Clear
        </button>
        {state?.ok === true && (
          <span role="status" className="text-sm text-success">
            Applied.
          </span>
        )}
        {state?.ok === false && (
          <span role="alert" className="text-sm text-destructive">
            {state.error}
          </span>
        )}
      </div>
    </form>
  );
}