vexplor/frontend/components/numbering-rule/NumberingRuleCard.tsx

"use client";

import React from "react";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
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;
}

export const NumberingRuleCard: React.FC<NumberingRuleCardProps> = ({
  part,
  onUpdate,
  onDelete,
  isPreview = false,
}) => {
  return (
    <Card className="border-border bg-card">
      <CardHeader className="pb-3">
        <div className="flex items-center justify-between">
          <Badge variant="outline" className="text-xs sm:text-sm">
            규칙 {part.order}
          </Badge>
          <Button
            variant="ghost"
            size="icon"
            onClick={onDelete}
            className="text-destructive h-7 w-7 sm:h-8 sm:w-8"
            disabled={isPreview}
          >
            <Trash2 className="h-3 w-3 sm:h-4 sm:w-4" />
          </Button>
        </div>
      </CardHeader>

      <CardContent className="space-y-3 sm:space-y-4">
        <div>
          <Label className="text-xs font-medium sm:text-sm">구분 유형</Label>
          <Select
            value={part.partType}
            onValueChange={(value) => onUpdate({ partType: value as CodePartType })}
            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.generationMethod}
            onValueChange={(value) => onUpdate({ generationMethod: 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.generationMethod === "auto" ? (
          <AutoConfigPanel
            partType={part.partType}
            config={part.autoConfig}
            onChange={(autoConfig) => onUpdate({ autoConfig })}
            isPreview={isPreview}
          />
        ) : (
          <ManualConfigPanel
            config={part.manualConfig}
            onChange={(manualConfig) => onUpdate({ manualConfig })}
            isPreview={isPreview}
          />
        )}
      </CardContent>
    </Card>
  );
};