import type { ScheduleSpec, ScheduleSpecInput } from "@umt/contracts";
import { useState } from "react";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/components/ui/select.tsx";
import { IntervalEditor } from "./interval-editor.tsx";
import { describeSchedule, INTERVAL_PRESETS } from "./labels.ts";

const CUSTOM = "custom";

/**
 * 间隔就地改:常用选项下拉,最后一项"自定义…"切到数字 + 单位输入。
 * cron 调度没有下拉,直接用 IntervalEditor 改表达式。
 */
export function IntervalSelect({
  schedule,
  disabled,
  pending,
  onSave,
  label,
}: {
  schedule: ScheduleSpec;
  disabled?: boolean;
  pending?: boolean;
  onSave: (next: ScheduleSpecInput) => void;
  /** 无障碍名:"<任务名>间隔" */
  label: string;
}) {
  const [custom, setCustom] = useState(false);
  if (schedule.type === "cron" || custom)
    return (
      <IntervalEditor
        schedule={schedule}
        disabled={disabled}
        pending={pending}
        onSave={onSave}
        defaultEditing={custom}
        onClose={() => setCustom(false)}
      />
    );
  const current = String(schedule.everyMs);
  const options = INTERVAL_PRESETS.includes(schedule.everyMs)
    ? INTERVAL_PRESETS
    : [...INTERVAL_PRESETS, schedule.everyMs].sort((a, b) => a - b);
  return (
    <Select
      value={current}
      disabled={disabled || pending}
      onValueChange={(v) => {
        if (v === CUSTOM) setCustom(true);
        else if (v !== current) onSave({ type: "interval", everyMs: Number(v) });
      }}
    >
      <SelectTrigger size="sm" className="h-8 w-32 text-caption" aria-label={label}>
        <SelectValue />
      </SelectTrigger>
      <SelectContent position="popper">
        {options.map((ms) => (
          <SelectItem key={ms} value={String(ms)}>
            {describeSchedule({ type: "interval", everyMs: ms })}
          </SelectItem>
        ))}
        <SelectItem value={CUSTOM}>自定义…</SelectItem>
      </SelectContent>
    </Select>
  );
}