"use client";

import React, { useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { CheckCircle, Save } from "lucide-react";

interface SaveRelationshipDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onSave: (relationshipName: string, description?: string) => void;
  actionType: "insert" | "update" | "delete" | "upsert";
  fromTable?: string;
  toTable?: string;
}

/**
 * 💾 관계 저장 다이얼로그
 * - 관계 이름 입력
 * - 설명 입력 (선택사항)
 * - 액션 타입별 제안 이름
 */
const SaveRelationshipDialog: React.FC<SaveRelationshipDialogProps> = ({
  open,
  onOpenChange,
  onSave,
  actionType,
  fromTable,
  toTable,
}) => {
  const [relationshipName, setRelationshipName] = useState("");
  const [description, setDescription] = useState("");

  // 액션 타입별 제안 이름 생성
  const generateSuggestedName = () => {
    if (!fromTable || !toTable) return "";

    const actionMap = {
      insert: "입력",
      update: "수정",
      delete: "삭제",
      upsert: "병합",
    };

    return `${fromTable}_${toTable}_${actionMap[actionType]}`;
  };

  const handleSave = () => {
    if (!relationshipName.trim()) return;

    onSave(relationshipName.trim(), description.trim() || undefined);
    onOpenChange(false);

    // 폼 초기화
    setRelationshipName("");
    setDescription("");
  };

  const handleSuggestName = () => {
    const suggested = generateSuggestedName();
    if (suggested) {
      setRelationshipName(suggested);
    }
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Save className="h-5 w-5" />
            관계 저장
          </DialogTitle>
          <DialogDescription>데이터 연결 관계의 이름과 설명을 입력하세요.</DialogDescription>
        </DialogHeader>

        <div className="space-y-4">
          {/* 관계 이름 */}
          <div className="space-y-2">
            <Label htmlFor="relationshipName">관계 이름 *</Label>
            <div className="flex gap-2">
              <Input
                id="relationshipName"
                placeholder="예: 사용자_주문_입력"
                value={relationshipName}
                onChange={(e) => setRelationshipName(e.target.value)}
                className="flex-1"
              />
              <Button variant="outline" size="sm" onClick={handleSuggestName} disabled={!fromTable || !toTable}>
                제안
              </Button>
            </div>
          </div>

          {/* 설명 (선택사항) */}
          <div className="space-y-2">
            <Label htmlFor="description">설명 (선택사항)</Label>
            <Textarea
              id="description"
              placeholder="이 관계에 대한 설명을 입력하세요..."
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              rows={3}
            />
          </div>

          {/* 정보 요약 */}
          <div className="bg-muted/50 rounded-lg p-3">
            <div className="space-y-1 text-sm">
              <div className="flex justify-between">
                <span className="text-muted-foreground">액션 타입:</span>
                <span className="font-medium">{actionType.toUpperCase()}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-muted-foreground">소스 테이블:</span>
                <span className="font-medium">{fromTable || "미선택"}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-muted-foreground">대상 테이블:</span>
                <span className="font-medium">{toTable || "미선택"}</span>
              </div>
            </div>
          </div>
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            취소
          </Button>
          <Button onClick={handleSave} disabled={!relationshipName.trim()}>
            <CheckCircle className="mr-2 h-4 w-4" />
            저장
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};

export default SaveRelationshipDialog;