import React, { useState, useRef, useCallback, useEffect } from 'react';
import GraphToolbar from './graphComponents/GraphToolbar';
import GraphCanvas from './graphComponents/graphCanvas';
import PropertyInspector from './graphComponents/PropertyInspector';
import ChatInterface from '../ChatInterface';
import { Neo4jGraphData } from './graphUtils/loadGraphData';
import neo4j from 'neo4j-driver';
import { BarChart3, Database, RefreshCw } from 'lucide-react';
import GraphGov from './graphComponents/graphGov';
import DocPdf from './graphComponents/documents/Outputs';
import PDFProcessor from './graphComponents/documents/pdfProcessor';

interface CreateNodeData {
  labels: string[];
  properties: Record<string, any>;
}

// TypeScript interfaces for Neo4j data structures
interface Neo4jNode {
  id: string;
  labels: string[];
  properties: Record<string, any>;
}

interface Neo4jRelationship {
  id: string;
  type: string;
  startNodeId: string;
  endNodeId: string;
  properties: Record<string, any>;
}

// D3 force simulation types
interface D3Node extends Neo4jNode {
  x?: number;
  y?: number;
  fx?: number | null;
  fy?: number | null;
  vx?: number;
  vy?: number;
}

interface D3Link extends Neo4jRelationship {
  source: D3Node | string;
  target: D3Node | string;
}

// Neo4j Connection Configuration
interface Neo4jConfig {
  uri: string;
  username: string;
  password: string;
  database?: string;
}

// Types
interface GraphConfig {
  width: number;
  height: number;
  nodeRadius: number;
  linkDistance: number;
  chargeStrength: number;
  collisionRadius: number;
}

const defaultGraphConfig: GraphConfig = {
  width: 1000,
  height: 700,
  nodeRadius: 25,
  linkDistance: 120,
  chargeStrength: -400,
  collisionRadius: 35,
};

const neo4jColorScheme = {
  nodeColors: {
    Person: '#4C8EDA',
    Company: '#5DBB63',
    Project: '#FFB74D',
    City: '#9C27B0',
    Technology: '#FF5722',
    Department: '#607D8B',
    Family: '#E91E63',
    Control: '#2196F3',
    Enhancement: '#FF9800',
    default: '#008CC1',
  },
};

// Utility functions
const getNodeColor = (labels: string[]): string => {
  const primaryLabel = labels[0];
  return neo4jColorScheme.nodeColors[primaryLabel as keyof typeof neo4jColorScheme.nodeColors] 
    || neo4jColorScheme.nodeColors.default;
};

const getNodeDisplayName = (node: any): string => {
  return node.properties.name 
    || node.properties.title 
    || node.properties.code
    || node.properties.id 
    || node.labels[0] 
    || node.id;
};

const formatPropertyValue = (value: any): string => {
  if (value === null || value === undefined) return '';
  if (typeof value === 'object') return JSON.stringify(value);
  if (typeof value === 'boolean') return value ? 'true' : 'false';
  return String(value);
};

const truncateText = (text: string, maxLength: number = 20): string => {
  if (text.length <= maxLength) return text;
  return text.substring(0, maxLength - 3) + '...';
};

const getNodeStats = (graphData: Neo4jGraphData) => {
  const labelCounts = graphData.nodes.reduce((acc, node) => {
    node.labels.forEach(label => {
      acc[label] = (acc[label] || 0) + 1;
    });
    return acc;
  }, {} as Record<string, number>);

  const relationshipCounts = graphData.relationships.reduce((acc, rel) => {
    acc[rel.type] = (acc[rel.type] || 0) + 1;
    return acc;
  }, {} as Record<string, number>);

  return {
    totalNodes: graphData.nodes.length,
    totalRelationships: graphData.relationships.length,
    labelCounts,
    relationshipCounts,
  };
};

// Main Component
const GraphVisualizer2: React.FC = () => {
  const [extractedData, setExtractedData] = useState({});
  
  return (
    <div className="h-screen bg-gray-100 flex flex-col">
      {/* Main Content */}
      <div className="flex-1 flex overflow-hidden">
        {/* Graph Canvas */}
        <div className="flex-row w-[50%] p-4">
          <div className="h-[100%] bg-white rounded-lg shadow-sm border border-gray-200 overflow-y-auto relative">
            <PDFProcessor extractedData={extractedData}/>
          </div>
          
          {/* <div className="h-[29%] bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden my-2">
            <ChatInterface/>
          </div> */}
        </div>

        
        {/* <GraphGov onITRMClick={loadGraphData}/> */}
        <div className="flex w-[50%] h-[97%] mt-4 rounded-lg mr-4">
          <DocPdf setExtractedData={setExtractedData}/>
        </div>
        
      </div>
    </div>
  );
};

export default GraphVisualizer2;