'use client';

import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { toast } from 'sonner';

interface ColumnDialogProps {
  isColumnDialogOpen: boolean;
  setIsColumnDialogOpen: (open: boolean) => void;
  editingColumnId: string | null;
  setEditingColumnId: (id: string | null) => void;
  columnName: string;
  setColumnName: (name: string) => void;
  columnKey: string;
  setColumnKey: (key: string) => void;
  textboxColumns: Array<{ id: string; name: string; key: string }>;
  setTextboxColumns: React.Dispatch<React.SetStateAction<Array<{ id: string; name: string; key: string }>>>;
}

export function ColumnDialog({
  isColumnDialogOpen,
  setIsColumnDialogOpen,
  editingColumnId,
  setEditingColumnId,
  columnName,
  setColumnName,
  columnKey,
  setColumnKey,
  textboxColumns,
  setTextboxColumns,
}: ColumnDialogProps) {
  const handleSubmit = () => {
    if (!columnName.trim() || !columnKey.trim()) {
      return toast.error('모든 필드를 입력해주세요');
    }

    if (editingColumnId) {
      // 수정
      setTextboxColumns(prev => prev.map(col =>
        col.id === editingColumnId
          ? { ...col, name: columnName, key: columnKey }
          : col
      ));
      toast.success('컬럼이 수정되었습니다');
    } else {
      // 추가
      setTextboxColumns(prev => [...prev, {
        id: `col-${Date.now()}`,
        name: columnName,
        key: columnKey
      }]);
      toast.success('컬럼이 추가되었습니다');
    }

    setIsColumnDialogOpen(false);
    setEditingColumnId(null);
    setColumnName('');
    setColumnKey('');
  };

  return (
    <Dialog open={isColumnDialogOpen} onOpenChange={(open) => {
      setIsColumnDialogOpen(open);
      if (!open) {
        setEditingColumnId(null);
        setColumnName('');
        setColumnKey('');
      }
    }}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{editingColumnId ? '컬럼 수정' : '컬럼 추가'}</DialogTitle>
          <DialogDescription>
            텍스트박스에 추가할 컬럼 정보를 입력하세요
          </DialogDescription>
        </DialogHeader>
        <div className="space-y-4">
          <div>
            <Label>컬럼명 *</Label>
            <Input
              value={columnName}
              onChange={(e) => setColumnName(e.target.value)}
              placeholder="예: 가로"
            />
          </div>
          <div>
            <Label>컬럼 키 *</Label>
            <Input
              value={columnKey}
              onChange={(e) => setColumnKey(e.target.value)}
              placeholder="예: width"
            />
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => setIsColumnDialogOpen(false)}>취소</Button>
          <Button onClick={handleSubmit}>
            {editingColumnId ? '수정' : '추가'}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}