// components/GraphToolbar.tsx

import React, { useState } from 'react';
import { Neo4jGraphData } from '../graphTypes/graphTypes';
import { getNodeStats } from '../graphUtils/graphUtils';
import { 
  ZoomIn, 
  ZoomOut, 
  Maximize2, 
  BarChart3, 
  Search, 
  Filter,
  RefreshCw,
  Download,
  Settings
} from 'lucide-react';

interface GraphToolbarProps {
  graphData: Neo4jGraphData;
  onRefresh?: () => void;
  onExport?: () => void;
  onZoomIn?: () => void;
  onZoomOut?: () => void;
  onFitToScreen?: () => void;
  onSearch?: (query: string) => void;
}

const GraphToolbar: React.FC<GraphToolbarProps> = ({
  graphData,
  onRefresh,
  onExport,
  onZoomIn,
  onZoomOut,
  onFitToScreen,
  onSearch,
}) => {
  const [showStats, setShowStats] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');
  
  const stats = getNodeStats(graphData);

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    if (onSearch && searchQuery.trim()) {
      onSearch(searchQuery.trim());
    }
  };

  return (
    <div className="bg-white border-b border-gray-200 px-4 py-3 rounded-lg mt-4 mx-4">
      <div className="flex items-center justify-between">
        {/* Left section - Graph info */}
        <div className="flex items-center gap-4">
          <div className="flex items-center gap-2">
            <div className="w-3 h-3 bg-blue-500 rounded-full"></div>
            <span className="text-sm font-medium text-gray-700">Kwowledge Graph</span>
          </div>
          
          <div className="flex items-center gap-4 text-sm text-gray-600">
            <span>{stats.totalNodes} nodes</span>
            <span>{stats.totalRelationships} relationships</span>
            <button
              onClick={() => setShowStats(!showStats)}
              className="flex items-center gap-1 hover:text-blue-600 transition-colors"
            >
              <BarChart3 className="w-4 h-4" />
              Stats
            </button>
            <form onSubmit={handleSearch} className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
            <input
              type="text"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              placeholder="Search nodes and relationships..."
              className="max-w-md pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
            />
          </form>
          </div>
        </div>

        {/* Center section - Search */}
        {/* <div className="flex-1 max-w-md mx-4">
          
        </div> */}

        {/* Right section - Actions */}
        <div className="flex items-center gap-2">
          <div className="flex items-center bg-gray-100 rounded-lg p-1">
            <button
              onClick={onZoomOut}
              className="p-1.5 hover:bg-white rounded transition-colors"
              title="Zoom Out"
            >
              <ZoomOut className="w-4 h-4 text-gray-600" />
            </button>
            <button
              onClick={onFitToScreen}
              className="p-1.5 hover:bg-white rounded transition-colors"
              title="Fit to Screen"
            >
              <Maximize2 className="w-4 h-4 text-gray-600" />
            </button>
            <button
              onClick={onZoomIn}
              className="p-1.5 hover:bg-white rounded transition-colors"
              title="Zoom In"
            >
              <ZoomIn className="w-4 h-4 text-gray-600" />
            </button>
          </div>

          <div className="w-px h-6 bg-gray-300 mx-2"></div>

          <button
            onClick={onRefresh}
            className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
            title="Refresh"
          >
            <RefreshCw className="w-4 h-4 text-gray-600" />
          </button>

          <button
            onClick={onExport}
            className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
            title="Export"
          >
            <Download className="w-4 h-4 text-gray-600" />
          </button>

          <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors" title="Settings">
            <Settings className="w-4 h-4 text-gray-600" />
          </button>
        </div>
      </div>

      {/* Stats dropdown */}
      {showStats && (
        <div className="mt-3 bg-gray-50 rounded-lg p-4 border border-gray-200">
          <div className="grid grid-cols-2 gap-4">
            {/* Node Labels */}
            <div>
              <h4 className="font-medium text-gray-700 mb-2 flex items-center gap-2">
                <div className="w-3 h-3 bg-blue-500 rounded-full"></div>
                Node Labels
              </h4>
              <div className="space-y-1">
                {Object.entries(stats.labelCounts).map(([label, count]) => (
                  <div key={label} className="flex justify-between text-sm">
                    <span className="text-gray-600">{label}</span>
                    <span className="font-medium text-gray-900">{count}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Relationship Types */}
            <div>
              <h4 className="font-medium text-gray-700 mb-2 flex items-center gap-2">
                <div className="w-3 h-3 bg-green-500 rounded-full"></div>
                Relationship Types
              </h4>
              <div className="space-y-1">
                {Object.entries(stats.relationshipCounts).map(([type, count]) => (
                  <div key={type} className="flex justify-between text-sm">
                    <span className="text-gray-600">{type}</span>
                    <span className="font-medium text-gray-900">{count}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default GraphToolbar;