"use client";

import React from "react";
import { TableSelector } from "./TableSelector";
import { TableDefinition } from "@/lib/api/dataflow";
import { ExtendedJsonRelationship } from "@/types/dataflowTypes";

interface DataFlowSidebarProps {
  companyCode: string;
  nodes: Array<{ id: string; data: { table: { tableName: string } } }>;
  edges: Array<{ id: string }>;
  tempRelationships: ExtendedJsonRelationship[];
  hasUnsavedChanges: boolean;
  currentDiagramId: number | null;
  currentDiagramCategory: string;
  onTableAdd: (table: TableDefinition) => void;
  onRemoveOrphanedNodes: () => void;
  onClearAll: () => void;
  onOpenSaveModal: () => void;
  getSelectedTableNames: () => string[];
}

export const DataFlowSidebar: React.FC<DataFlowSidebarProps> = ({
  companyCode,
  nodes,
  edges,
  tempRelationships,
  hasUnsavedChanges,
  currentDiagramId,
  currentDiagramCategory,
  onTableAdd,
  onRemoveOrphanedNodes,
  onClearAll,
  onOpenSaveModal,
  getSelectedTableNames,
}) => {
  return (
    <div className="w-80 border-r border-gray-200 bg-white shadow-lg">
      <div className="p-6">
        <h2 className="mb-6 text-xl font-bold text-gray-800">테이블 간 데이터 관계 설정</h2>

        {/* 테이블 선택기 */}
        <TableSelector companyCode={companyCode} onTableAdd={onTableAdd} selectedTables={getSelectedTableNames()} />

        {/* 컨트롤 버튼들 */}
        <div className="space-y-3">
          <button
            onClick={onRemoveOrphanedNodes}
            className="w-full rounded-lg bg-orange-500 p-3 font-medium text-white transition-colors hover:bg-orange-600"
            disabled={nodes.length === 0}
          >
            🧹 고립된 노드 정리
          </button>

          <button
            onClick={onClearAll}
            className="w-full rounded-lg bg-red-500 p-3 font-medium text-white transition-colors hover:bg-red-600"
          >
            🗑️ 전체 삭제
          </button>

          <button
            onClick={onOpenSaveModal}
            className={`w-full rounded-lg bg-green-500 p-3 font-medium text-white transition-colors hover:bg-green-600 ${
              hasUnsavedChanges ? "animate-pulse" : ""
            }`}
          >
            💾 관계도 저장 {tempRelationships.length > 0 && `(${tempRelationships.length})`}
          </button>
        </div>

        {/* 통계 정보 */}
        <div className="mt-6 rounded-lg bg-gray-50 p-4">
          <div className="mb-2 text-sm font-semibold text-gray-700">통계</div>
          <div className="space-y-1 text-sm text-gray-600">
            <div className="flex justify-between">
              <span>테이블 노드:</span>
              <span className="font-medium">{nodes.length}개</span>
            </div>
            <div className="flex justify-between">
              <span>연결:</span>
              <span className="font-medium">{edges.length}개</span>
            </div>
            <div className="flex justify-between">
              <span>메모리 관계:</span>
              <span className="font-medium text-orange-600">{tempRelationships.length}개</span>
            </div>
            <div className="flex justify-between">
              <span>관계도 ID:</span>
              <span className="font-medium">{currentDiagramId || "미설정"}</span>
            </div>
            <div className="flex justify-between">
              <span>연결 종류:</span>
              <span className="font-medium">
                {currentDiagramCategory === "simple-key" && "단순 키값"}
                {currentDiagramCategory === "data-save" && "데이터 저장"}
                {currentDiagramCategory === "external-call" && "외부 호출"}
              </span>
            </div>
            {hasUnsavedChanges && (
              <div className="mt-2 text-xs font-medium text-orange-600">⚠️ 저장되지 않은 변경사항이 있습니다</div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};