"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,
}) => {
  if (partType === "prefix") {
    return (
      <div>
        <Label className="text-xs font-medium sm:text-sm">접두사</Label>
        <Input
          value={config.prefix || ""}
          onChange={(e) => onChange({ ...config, prefix: e.target.value })}
          placeholder="예: 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>
    );
  }

  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 || 4}
            onChange={(e) =>
              onChange({ ...config, sequenceLength: 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={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"
          />
        </div>
      </div>
    );
  }

  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>
      </div>
    );
  }

  if (partType === "year") {
    return (
      <div>
        <Label className="text-xs font-medium sm:text-sm">연도 형식</Label>
        <Select
          value={config.dateFormat || "YYYY"}
          onValueChange={(value) => onChange({ ...config, dateFormat: value })}
          disabled={isPreview}
        >
          <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="YYYY" className="text-xs sm:text-sm">4자리 (2025)</SelectItem>
            <SelectItem value="YY" className="text-xs sm:text-sm">2자리 (25)</SelectItem>
          </SelectContent>
        </Select>
      </div>
    );
  }

  if (partType === "month") {
    return (
      <div>
        <Label className="text-xs font-medium sm:text-sm">월 형식</Label>
        <p className="mt-1 text-xs text-muted-foreground sm:text-sm">
          현재 월이 2자리 형식(01-12)으로 자동 입력됩니다
        </p>
      </div>
    );
  }

  if (partType === "custom") {
    return (
      <div>
        <Label className="text-xs font-medium sm:text-sm">값</Label>
        <Input
          value={config.value || ""}
          onChange={(e) => onChange({ ...config, value: e.target.value })}
          placeholder="입력값"
          disabled={isPreview}
          className="h-8 text-xs sm:h-10 sm:text-sm"
        />
      </div>
    );
  }

  return null;
};