ERP-node/frontend/components/dataflow/SaveDiagramModal.tsx

"use client";

import React, { useState, useEffect } from "react";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { JsonRelationship } from "@/lib/api/dataflow";

interface SaveDiagramModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSave: (diagramName: string) => void;
  relationships: JsonRelationship[];
  defaultName?: string;
  isLoading?: boolean;
}

const SaveDiagramModal: React.FC<SaveDiagramModalProps> = ({
  isOpen,
  onClose,
  onSave,
  relationships,
  defaultName = "",
  isLoading = false,
}) => {
  const [diagramName, setDiagramName] = useState(defaultName);
  const [nameError, setNameError] = useState("");

  // defaultName이 변경될 때마다 diagramName 업데이트
  useEffect(() => {
    setDiagramName(defaultName);
  }, [defaultName]);

  const handleSave = () => {
    const trimmedName = diagramName.trim();

    if (!trimmedName) {
      setNameError("관계도 이름을 입력해주세요.");
      return;
    }

    if (trimmedName.length < 2) {
      setNameError("관계도 이름은 2글자 이상이어야 합니다.");
      return;
    }

    if (trimmedName.length > 100) {
      setNameError("관계도 이름은 100글자를 초과할 수 없습니다.");
      return;
    }

    setNameError("");
    onSave(trimmedName);
  };

  const handleClose = () => {
    if (!isLoading) {
      setDiagramName(defaultName);
      setNameError("");
      onClose();
    }
  };

  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" && !isLoading) {
      handleSave();
    }
  };

  // 관련된 테이블 목록 추출
  const connectedTables = Array.from(
    new Set([...relationships.map((rel) => rel.fromTable), ...relationships.map((rel) => rel.toTable)]),
  ).sort();

  return (
    <Dialog open={isOpen} onOpenChange={handleClose}>
      <DialogContent className="max-h-[80vh] max-w-2xl overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="text-lg font-semibold">📊 관계도 저장</DialogTitle>
        </DialogHeader>

        <div className="space-y-6">
          {/* 관계도 이름 입력 */}
          <div className="space-y-2">
            <Label htmlFor="diagram-name" className="text-sm font-medium">
              관계도 이름 *
            </Label>
            <Input
              id="diagram-name"
              value={diagramName}
              onChange={(e) => {
                setDiagramName(e.target.value);
                if (nameError) setNameError("");
              }}
              onKeyPress={handleKeyPress}
              placeholder="예: 사용자-부서 관계도"
              disabled={isLoading}
              className={nameError ? "border-red-500 focus:border-red-500" : ""}
            />
            {nameError && <p className="text-sm text-red-600">{nameError}</p>}
          </div>

          {/* 관계 요약 정보 */}
          <div className="grid grid-cols-3 gap-4 rounded-lg bg-gray-50 p-4">
            <div className="text-center">
              <div className="text-2xl font-bold text-blue-600">{relationships.length}</div>
              <div className="text-sm text-gray-600">관계 수</div>
            </div>
            <div className="text-center">
              <div className="text-2xl font-bold text-green-600">{connectedTables.length}</div>
              <div className="text-sm text-gray-600">연결된 테이블</div>
            </div>
            <div className="text-center">
              <div className="text-2xl font-bold text-purple-600">
                {relationships.reduce((sum, rel) => sum + rel.fromColumns.length, 0)}
              </div>
              <div className="text-sm text-gray-600">연결된 컬럼</div>
            </div>
          </div>

          {/* 연결된 테이블 목록 */}
          {connectedTables.length > 0 && (
            <Card>
              <CardHeader>
                <CardTitle className="text-sm">연결된 테이블</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="flex flex-wrap gap-2">
                  {connectedTables.map((table) => (
                    <Badge key={table} variant="outline" className="text-xs">
                      📋 {table}
                    </Badge>
                  ))}
                </div>
              </CardContent>
            </Card>
          )}

          {/* 관계 목록 미리보기 */}
          {relationships.length > 0 && (
            <Card>
              <CardHeader>
                <CardTitle className="text-sm">관계 목록</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="max-h-60 space-y-3 overflow-y-auto">
                  {relationships.map((relationship, index) => (
                    <div
                      key={relationship.id || index}
                      className="flex items-center justify-between rounded-lg border bg-white p-3 hover:bg-gray-50"
                    >
                      <div className="flex-1">
                        <div className="flex items-center gap-2 text-sm">
                          <Badge variant="secondary" className="text-xs">
                            {relationship.connectionType || "simple-key"}
                          </Badge>
                          <span className="font-medium">
                            {relationship.relationshipName || `${relationship.fromTable} → ${relationship.toTable}`}
                          </span>
                        </div>
                        <div className="mt-1 text-xs text-gray-600">
                          {relationship.fromColumns.join(", ")} → {relationship.toColumns.join(", ")}
                        </div>
                      </div>
                      <Badge variant="outline" className="text-xs">
                        {relationship.connectionType}
                      </Badge>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          )}

          {/* 관계가 없는 경우 안내 */}
          {relationships.length === 0 && (
            <div className="py-8 text-center text-gray-500">
              <div className="mb-2 text-4xl">📭</div>
              <div className="text-sm">생성된 관계가 없습니다.</div>
              <div className="mt-1 text-xs text-gray-400">테이블을 추가하고 컬럼을 연결해서 관계를 생성해보세요.</div>
            </div>
          )}
        </div>

        <DialogFooter className="flex gap-2">
          <Button variant="outline" onClick={handleClose} disabled={isLoading}>
            취소
          </Button>
          <Button
            onClick={handleSave}
            disabled={isLoading || relationships.length === 0}
            className="bg-blue-600 hover:bg-blue-700"
          >
            {isLoading ? (
              <div className="flex items-center gap-2">
                <div className="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent"></div>
                저장 중...
              </div>
            ) : (
              "💾 저장하기"
            )}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};

export default SaveDiagramModal;