"use client";

import React from "react";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { Trash2 } from "lucide-react";
import { NumberingRulePart, CodePartType, GenerationMethod, CODE_PART_TYPE_OPTIONS } from "@/types/numbering-rule";
import { AutoConfigPanel } from "./AutoConfigPanel";
import { ManualConfigPanel } from "./ManualConfigPanel";

interface NumberingRuleCardProps {
  part: NumberingRulePart;
  onUpdate: (updates: Partial<NumberingRulePart>) => void;
  onDelete: () => void;
  isPreview?: boolean;
  tableName?: string;
}

export const NumberingRuleCard: React.FC<NumberingRuleCardProps> = ({
  part,
  onUpdate,
  onDelete,
  isPreview = false,
  tableName,
}) => {
  return (
    <div className="config-field flex-1 rounded-[8px] border border-border bg-muted/50 px-3 py-3 sm:px-4 sm:py-4">
      <div className="mb-3 flex items-center justify-between sm:mb-4">
        <Badge variant="outline" className="text-xs sm:text-sm">
          규칙 {part.order}
        </Badge>
        <Button
          variant="destructive"
          size="icon"
          onClick={onDelete}
          className="h-7 w-7 sm:h-8 sm:w-8"
          disabled={isPreview}
          aria-label="규칙 삭제"
        >
          <Trash2 className="h-3 w-3 sm:h-4 sm:w-4" />
        </Button>
      </div>

      <div className="space-y-3 sm:space-y-4">
        <div>
          <Label className="text-xs font-medium sm:text-sm">구분 유형</Label>
          <Select
            value={part.part_type}
            onValueChange={(value) => {
              const newPartType = value as CodePartType;
              // 타입 변경 시 해당 타입의 기본 auto_config 설정
              const defaultAutoConfig: Record<string, any> = {
                sequence: { sequence_length: 3, start_from: 1 },
                number: { number_length: 4, number_value: 1 },
                date: { date_format: "YYYYMMDD" },
                text: { text_value: "CODE" },
                category: { category_key: "", category_mappings: [] },
                reference: { reference_column_name: "" },
              };
              onUpdate({
                part_type: newPartType,
                auto_config: defaultAutoConfig[newPartType] || {}
              });
            }}
            disabled={isPreview}
          >
            <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              {CODE_PART_TYPE_OPTIONS.map((option) => (
                <SelectItem key={option.value} value={option.value} className="text-xs sm:text-sm">
                  {option.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

        <div>
          <Label className="text-xs font-medium sm:text-sm">생성 방식</Label>
          <Select
            value={part.generation_method}
            onValueChange={(value) => onUpdate({ generation_method: value as GenerationMethod })}
            disabled={isPreview}
          >
            <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="auto" className="text-xs sm:text-sm">
                자동 생성
              </SelectItem>
              <SelectItem value="manual" className="text-xs sm:text-sm">
                직접 입력
              </SelectItem>
            </SelectContent>
          </Select>
        </div>

        {part.generation_method === "auto" ? (
          <AutoConfigPanel
            partType={part.part_type}
            config={part.auto_config}
            onChange={(auto_config) => onUpdate({ auto_config })}
            isPreview={isPreview}
            tableName={tableName}
          />
        ) : (
          <ManualConfigPanel
            config={part.manual_config}
            onChange={(manual_config) => onUpdate({ manual_config })}
            isPreview={isPreview}
          />
        )}
      </div>
    </div>
  );
};
