import { useRuleStore } from "@/stores/ruleStore";
import { Input } from "@/components/ui/input";
import { NumberInput } from "@/components/ui/number-input";
import { SegmentedControl } from "@/components/ui/segmented-control";
import { Checkbox } from "@/components/ui/checkbox";
import type { NumberingConfig as NumberingConfigType } from "@/types/rules";

const numberModes = [
  { value: "None", label: "None" },
  { value: "Prefix", label: "Prefix" },
  { value: "Suffix", label: "Suffix" },
  { value: "Both", label: "Both" },
  { value: "Insert", label: "Insert" },
] as const;

const bases = [
  { value: "Decimal", label: "Dec" },
  { value: "Hex", label: "Hex" },
  { value: "Octal", label: "Oct" },
  { value: "Binary", label: "Bin" },
  { value: "Alpha", label: "Alpha" },
  { value: "Roman", label: "Roman" },
] as const;

export function NumberingConfig({ ruleId }: { ruleId: string }) {
  const rule = useRuleStore((s) => s.pipeline.find((r) => r.id === ruleId))?.config as NumberingConfigType | undefined;
  const updateRule = useRuleStore((s) => s.updateRule);
  if (!rule) return null;
  const update = (changes: Partial<NumberingConfigType>) => updateRule(ruleId, changes);

  return (
    <div className="flex flex-col gap-3 text-sm">
      <div className="flex flex-col gap-1">
        <span className="text-xs text-muted-foreground">Position</span>
        <SegmentedControl value={rule.mode} onChange={(m) => update({ mode: m })} options={numberModes} />
      </div>
      <div className="grid grid-cols-4 gap-2">
        <label className="flex flex-col gap-1">
          <span className="text-xs text-muted-foreground">Start</span>
          <NumberInput value={rule.start} onChange={(v) => update({ start: v })} />
        </label>
        <label className="flex flex-col gap-1">
          <span className="text-xs text-muted-foreground">Step</span>
          <NumberInput value={rule.increment} onChange={(v) => update({ increment: v })} min={1} />
        </label>
        <label className="flex flex-col gap-1">
          <span className="text-xs text-muted-foreground">Padding</span>
          <NumberInput value={rule.padding} onChange={(v) => update({ padding: v })} min={1} />
        </label>
        <label className="flex flex-col gap-1">
          <span className="text-xs text-muted-foreground">Separator</span>
          <Input value={rule.separator} onChange={(e) => update({ separator: e.target.value })} className="h-8 text-xs font-mono" />
        </label>
      </div>
      <div className="flex flex-col gap-1">
        <span className="text-xs text-muted-foreground">Base</span>
        <SegmentedControl value={rule.base} onChange={(b) => update({ base: b })} options={bases} size="sm" />
      </div>
      <label className="flex flex-col gap-1">
        <span className="text-xs text-muted-foreground">Custom format (overrides base)</span>
        <Input
          value={rule.custom_format || ""}
          onChange={(e) => update({ custom_format: e.target.value || null })}
          placeholder="e.g. {n:03}"
          className="h-8 text-xs font-mono"
        />
      </label>
      <div className="flex items-center gap-4 flex-wrap">
        <label className="flex items-center gap-1.5 cursor-pointer text-xs">
          <Checkbox checked={rule.per_folder} onCheckedChange={(c) => update({ per_folder: !!c })} />
          Per folder
        </label>
        <label className="flex items-center gap-1.5 cursor-pointer text-xs">
          <Checkbox checked={rule.reverse} onCheckedChange={(c) => update({ reverse: !!c })} />
          Reverse order
        </label>
      </div>
    </div>
  );
}