vexplor/frontend/components/dataflow/node-editor/panels/properties/ExternalDBSourceProperties.tsx

"use client";

/**
 * 외부 DB 소스 노드 속성 편집
 */

import { useEffect, useState } from "react";
import { Database } from "lucide-react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area";
import { useFlowEditorStore } from "@/lib/stores/flowEditorStore";
import type { ExternalDBSourceNodeData } from "@/types/node-editor";

interface ExternalDBSourcePropertiesProps {
  nodeId: string;
  data: ExternalDBSourceNodeData;
}

const DB_TYPE_INFO: Record<string, { label: string; color: string; icon: string }> = {
  postgresql: { label: "PostgreSQL", color: "#336791", icon: "🐘" },
  mysql: { label: "MySQL", color: "#4479A1", icon: "🐬" },
  oracle: { label: "Oracle", color: "#F80000", icon: "🔴" },
  mssql: { label: "MS SQL Server", color: "#CC2927", icon: "🏢" },
  mariadb: { label: "MariaDB", color: "#003545", icon: "🌊" },
};

export function ExternalDBSourceProperties({ nodeId, data }: ExternalDBSourcePropertiesProps) {
  const { updateNode } = useFlowEditorStore();

  const [displayName, setDisplayName] = useState(data.displayName || data.connectionName);
  const [connectionName, setConnectionName] = useState(data.connectionName);
  const [tableName, setTableName] = useState(data.tableName);
  const [schema, setSchema] = useState(data.schema || "");

  const dbInfo =
    data.dbType && DB_TYPE_INFO[data.dbType]
      ? DB_TYPE_INFO[data.dbType]
      : {
          label: data.dbType ? data.dbType.toUpperCase() : "알 수 없음",
          color: "#666",
          icon: "💾",
        };

  useEffect(() => {
    setDisplayName(data.displayName || data.connectionName);
    setConnectionName(data.connectionName);
    setTableName(data.tableName);
    setSchema(data.schema || "");
  }, [data]);

  const handleSave = () => {
    updateNode(nodeId, {
      displayName,
      connectionName,
      tableName,
      schema,
    });
  };

  return (
    <ScrollArea className="h-full">
      <div className="space-y-4 p-4">
        {/* DB 타입 정보 */}
        <div
          className="rounded-lg border-2 p-4"
          style={{
            borderColor: dbInfo.color,
            backgroundColor: `${dbInfo.color}10`,
          }}
        >
          <div className="flex items-center gap-3">
            <div
              className="flex h-12 w-12 items-center justify-center rounded-lg"
              style={{ backgroundColor: dbInfo.color }}
            >
              <span className="text-2xl">{dbInfo.icon}</span>
            </div>
            <div>
              <p className="text-sm font-semibold" style={{ color: dbInfo.color }}>
                {dbInfo.label}
              </p>
              <p className="text-xs text-gray-600">외부 데이터베이스</p>
            </div>
          </div>
        </div>

        {/* 기본 정보 */}
        <div>
          <h3 className="mb-3 text-sm font-semibold">연결 정보</h3>

          <div className="space-y-3">
            <div>
              <Label htmlFor="displayName" className="text-xs">
                표시 이름
              </Label>
              <Input
                id="displayName"
                value={displayName}
                onChange={(e) => setDisplayName(e.target.value)}
                className="mt-1"
                placeholder="노드 표시 이름"
              />
            </div>

            <div>
              <Label htmlFor="connectionName" className="text-xs">
                연결명
              </Label>
              <Input
                id="connectionName"
                value={connectionName}
                onChange={(e) => setConnectionName(e.target.value)}
                className="mt-1"
                placeholder="외부 DB 연결명"
              />
              <p className="mt-1 text-xs text-gray-500">외부 DB 연결 관리에서 설정한 연결명입니다.</p>
            </div>
          </div>
        </div>

        {/* 테이블 정보 */}
        <div>
          <h3 className="mb-3 text-sm font-semibold">테이블 정보</h3>

          <div className="space-y-3">
            <div>
              <Label htmlFor="tableName" className="text-xs">
                테이블명
              </Label>
              <Input
                id="tableName"
                value={tableName}
                onChange={(e) => setTableName(e.target.value)}
                className="mt-1"
                placeholder="데이터를 가져올 테이블"
              />
            </div>

            <div>
              <Label htmlFor="schema" className="text-xs">
                스키마 (선택)
              </Label>
              <Input
                id="schema"
                value={schema}
                onChange={(e) => setSchema(e.target.value)}
                className="mt-1"
                placeholder="스키마명"
              />
            </div>
          </div>
        </div>

        {/* 출력 필드 */}
        {data.outputFields && data.outputFields.length > 0 && (
          <div>
            <h3 className="mb-3 text-sm font-semibold">출력 필드</h3>
            <div className="space-y-1">
              {data.outputFields.map((field, index) => (
                <div
                  key={index}
                  className="flex items-center justify-between rounded border bg-gray-50 px-3 py-2 text-xs"
                >
                  <span className="font-medium">{field.label || field.name}</span>
                  <span className="font-mono text-gray-500">{field.type}</span>
                </div>
              ))}
            </div>
          </div>
        )}

        <Button onClick={handleSave} className="w-full" size="sm">
          적용
        </Button>

        <div className="rounded p-3 text-xs" style={{ backgroundColor: `${dbInfo.color}15`, color: dbInfo.color }}>
          💡 외부 DB 연결은 "외부 DB 연결 관리" 메뉴에서 미리 설정해야 합니다.
        </div>
      </div>
    </ScrollArea>
  );
}