"use client";

import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Input } from "@/components/ui/input";
import type { PopWorkDetailConfig } from "../types";

interface PopWorkDetailConfigPanelProps {
  config?: PopWorkDetailConfig;
  onChange?: (config: PopWorkDetailConfig) => void;
}

const DEFAULT_PHASE_LABELS: Record<string, string> = {
  PRE: "작업 전",
  IN: "작업 중",
  POST: "작업 후",
};

export function PopWorkDetailConfigPanel({
  config,
  onChange,
}: PopWorkDetailConfigPanelProps) {
  const cfg: PopWorkDetailConfig = {
    showTimer: config?.showTimer ?? true,
    showQuantityInput: config?.showQuantityInput ?? true,
    phaseLabels: config?.phaseLabels ?? { ...DEFAULT_PHASE_LABELS },
  };

  const update = (partial: Partial<PopWorkDetailConfig>) => {
    onChange?.({ ...cfg, ...partial });
  };

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <Label className="text-xs sm:text-sm">타이머 표시</Label>
        <Switch
          checked={cfg.showTimer}
          onCheckedChange={(v) => update({ showTimer: v })}
        />
      </div>

      <div className="flex items-center justify-between">
        <Label className="text-xs sm:text-sm">수량 입력 표시</Label>
        <Switch
          checked={cfg.showQuantityInput}
          onCheckedChange={(v) => update({ showQuantityInput: v })}
        />
      </div>

      <div className="space-y-2">
        <Label className="text-xs sm:text-sm">단계 라벨</Label>
        {(["PRE", "IN", "POST"] as const).map((phase) => (
          <div key={phase} className="flex items-center gap-2">
            <span className="w-12 text-xs font-medium text-muted-foreground">
              {phase}
            </span>
            <Input
              className="h-8 text-xs"
              value={cfg.phaseLabels[phase] ?? DEFAULT_PHASE_LABELS[phase]}
              onChange={(e) =>
                update({
                  phaseLabels: { ...cfg.phaseLabels, [phase]: e.target.value },
                })
              }
            />
          </div>
        ))}
      </div>
    </div>
  );
}