"use client";

import React from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { CodePartType, DATE_FORMAT_OPTIONS } from "@/types/numbering-rule";

interface AutoConfigPanelProps {
  partType: CodePartType;
  config?: any;
  onChange: (config: any) => void;
  isPreview?: boolean;
}

export const AutoConfigPanel: React.FC<AutoConfigPanelProps> = ({
  partType,
  config = {},
  onChange,
  isPreview = false,
}) => {
  // 1. 순번 (자동 증가)
  if (partType === "sequence") {
    return (
      <div className="space-y-3 sm:space-y-4">
        <div>
          <Label className="text-xs font-medium sm:text-sm">순번 자릿수</Label>
          <Input
            type="number"
            min={1}
            max={10}
            value={config.sequenceLength || 3}
            onChange={(e) =>
              onChange({ ...config, sequenceLength: parseInt(e.target.value) || 3 })
            }
            disabled={isPreview}
            className="h-8 text-xs sm:h-10 sm:text-sm"
          />
          <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
            예: 3 → 001, 4 → 0001
          </p>
        </div>
        <div>
          <Label className="text-xs font-medium sm:text-sm">시작 번호</Label>
          <Input
            type="number"
            min={1}
            value={config.startFrom || 1}
            onChange={(e) =>
              onChange({ ...config, startFrom: parseInt(e.target.value) || 1 })
            }
            disabled={isPreview}
            className="h-8 text-xs sm:h-10 sm:text-sm"
          />
          <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
            순번이 시작될 번호
          </p>
        </div>
      </div>
    );
  }

  // 2. 숫자 (고정 자릿수)
  if (partType === "number") {
    return (
      <div className="space-y-3 sm:space-y-4">
        <div>
          <Label className="text-xs font-medium sm:text-sm">숫자 자릿수</Label>
          <Input
            type="number"
            min={1}
            max={10}
            value={config.numberLength || 4}
            onChange={(e) =>
              onChange({ ...config, numberLength: parseInt(e.target.value) || 4 })
            }
            disabled={isPreview}
            className="h-8 text-xs sm:h-10 sm:text-sm"
          />
          <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
            예: 4 → 0001, 5 → 00001
          </p>
        </div>
        <div>
          <Label className="text-xs font-medium sm:text-sm">숫자 값</Label>
          <Input
            type="number"
            min={0}
            value={config.numberValue || 0}
            onChange={(e) =>
              onChange({ ...config, numberValue: parseInt(e.target.value) || 0 })
            }
            disabled={isPreview}
            className="h-8 text-xs sm:h-10 sm:text-sm"
          />
          <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
            고정으로 사용할 숫자
          </p>
        </div>
      </div>
    );
  }

  // 3. 날짜
  if (partType === "date") {
    return (
      <div>
        <Label className="text-xs font-medium sm:text-sm">날짜 형식</Label>
        <Select
          value={config.dateFormat || "YYYYMMDD"}
          onValueChange={(value) => onChange({ ...config, dateFormat: value })}
          disabled={isPreview}
        >
          <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {DATE_FORMAT_OPTIONS.map((option) => (
              <SelectItem key={option.value} value={option.value} className="text-xs sm:text-sm">
                {option.label} ({option.example})
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
          현재 날짜가 자동으로 입력됩니다
        </p>
      </div>
    );
  }

  // 4. 문자
  if (partType === "text") {
    return (
      <div>
        <Label className="text-xs font-medium sm:text-sm">텍스트 값</Label>
        <Input
          value={config.textValue || ""}
          onChange={(e) => onChange({ ...config, textValue: e.target.value })}
          placeholder="예: PRJ, CODE, PROD"
          disabled={isPreview}
          className="h-8 text-xs sm:h-10 sm:text-sm"
        />
        <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
          고정으로 사용할 텍스트 또는 코드
        </p>
      </div>
    );
  }

  return null;
};