import React, { useState, useEffect } from 'react';
import { FileText, Database, Network, Search, Download, ChevronRight, Eye, Code } from 'lucide-react';
import KnowledgeGraphVisualizer from './knowledge_graph_viz';

interface PDFProcessorProps {
  extractedData: {} ; 
}

const PDFProcessor : React.FC<PDFProcessorProps> = ({extractedData}) => {
  const [activeTab, setActiveTab] = useState('ingestion');
  const [processingStage, setProcessingStage] = useState(0);
  const [isProcessing, setIsProcessing] = useState(false);
  
  const processingStages = [
    { name: "Document Ingestion", status: "completed" },
    { name: "Text Extraction", status: "completed" },
    { name: "Entity Recognition", status: "completed" },
    { name: "Relationship Mapping", status: "completed" },
    { name: "Ontology Creation", status: "completed" }
  ];

  useEffect(() => {
    if (isProcessing) {
      const timer = setInterval(() => {
        setProcessingStage(prev => {
          if (prev >= processingStages.length - 1) {
            setIsProcessing(false);
            return prev;
          }
          return prev + 1;
        });
      }, 1000);
      return () => clearInterval(timer);
    }
  }, [isProcessing, processingStages.length]);

  const startProcessing = () => {
    setProcessingStage(0);
    setIsProcessing(true);
  };

  const TabButton = ({ id, label, icon: Icon, isActive, onClick }) => (
    <button
      onClick={onClick}
      className={`flex items-center px-4 py-2 rounded-lg transition-colors ${
        isActive 
          ? 'bg-blue-600 text-white shadow-lg' 
          : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
      }`}
    >
      <Icon className="w-4 h-4 mr-2" />
      {label}
    </button>
  );

  const EntityCard = ({ entity }) => (
    <div className="bg-white rounded-lg shadow-sm border p-4 hover:shadow-md transition-shadow">
      <div className="flex items-center justify-between mb-2">
        <h3 className="font-semibold text-gray-900">{entity.properties.name}</h3>
        <span className="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs font-medium">
          {entity.type}
        </span>
      </div>
      <p className="text-sm text-gray-600 mb-3">{entity.properties.description}</p>
      {entity.properties.capabilities && (
        <div className="space-y-1">
          <p className="text-xs font-medium text-gray-500">Capabilities:</p>
          <div className="flex flex-wrap gap-1">
            {entity.properties.capabilities.map((capability, idx) => (
              <span key={idx} className="px-2 py-1 bg-green-100 text-green-800 rounded text-xs">
                {capability}
              </span>
            ))}
          </div>
        </div>
      )}
      {entity.properties.components && (
        <div className="space-y-1">
          <p className="text-xs font-medium text-gray-500">Components:</p>
          <div className="flex flex-wrap gap-1">
            {entity.properties.components.map((component, idx) => (
              <span key={idx} className="px-2 py-1 bg-purple-100 text-purple-800 rounded text-xs">
                {component}
              </span>
            ))}
          </div>
        </div>
      )}
    </div>
  );

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
      <div className="max-w-7xl mx-auto p-2">
        {/* Tab Navigation */}
        <div className="flex mb-2">
          <TabButton
            id="ingestion"
            label="Data Ingestion"
            icon={FileText}
            isActive={activeTab === 'ingestion'}
            onClick={() => setActiveTab('ingestion')}
          />
          <TabButton
            id="md"
            label="Markdown"
            icon={Code}
            isActive={activeTab === 'md'}
            onClick={() => setActiveTab('md')}
          />
          <TabButton
            id="txt"
            label="Text"
            icon={Code}
            isActive={activeTab === 'txt'}
            onClick={() => setActiveTab('txt')}
          />
          <TabButton
            id="json"
            label="JSON"
            icon={Code}
            isActive={activeTab === 'json'}
            onClick={() => setActiveTab('json')}
          />
        </div>

        {activeTab === 'ingestion' && (
          <div className="space-y-6">
            <div className="bg-white rounded-xl shadow-lg p-6">
              <KnowledgeGraphVisualizer jsonText={JSON.stringify(extractedData, null, 2)}/>
            </div>


          </div>
        )}

        {activeTab === 'md' && (
          <div className="space-y-6">
            <div className="bg-white rounded-xl shadow-lg p-6">
              <h2 className="text-xl font-semibold mb-4 flex items-center">
                <Code className="w-5 h-5 mr-2 text-teal-600" />
                Markdown
              </h2>
              
              <div className="bg-gray-900 rounded-lg p-4 overflow-x-auto">
                <pre
                  contentEditable
                  suppressContentEditableWarning={true}
                  onBlur={(e) => {
                    try {
                      const parsed = JSON.parse(e.target.textContent);
                      
                    } catch (error) {
                      console.log('Invalid JSON');
                    }
                  }}
                  className="text-green-400 text-sm outline-none"
                >
                  {JSON.stringify(extractedData, null, 2)}
                </pre>
              </div>
            </div>


          </div>
        )}

        {activeTab === 'txt' && (
          <div className="space-y-6">
            <div className="bg-white rounded-xl shadow-lg p-6">
              <h2 className="text-xl font-semibold mb-4 flex items-center">
                <Code className="w-5 h-5 mr-2 text-green-400" />
                JSON
              </h2>
              
              <div className="bg-gray-900 rounded-lg p-4 overflow-x-auto">
                <pre
                  contentEditable
                  suppressContentEditableWarning={true}
                  onBlur={(e) => {
                    try {
                      const parsed = JSON.parse(e.target.textContent);
                      
                    } catch (error) {
                      console.log('Invalid JSON');
                    }
                  }}
                  className="text-green-400 text-sm outline-none"
                >
                  {JSON.stringify(extractedData, null, 2)}
                </pre>
              </div>
            </div>


          </div>
        )}
        
        {activeTab === 'json' && (
          <div className="space-y-6">
            <div className="bg-white rounded-xl shadow-lg p-6">
              <h2 className="text-xl font-semibold mb-4 flex items-center">
                <Code className="w-5 h-5 mr-2 text-green-400" />
                JSON
              </h2>
              
              <div className="bg-gray-900 rounded-lg p-4 overflow-x-auto">
                <pre
                  contentEditable
                  suppressContentEditableWarning={true}
                  onBlur={(e) => {
                    try {
                      const parsed = JSON.parse(e.target.textContent);
                      
                    } catch (error) {
                      console.log('Invalid JSON');
                    }
                  }}
                  className="text-green-400 text-sm outline-none"
                >
                  {JSON.stringify(extractedData, null, 2)}
                </pre>
              </div>
            </div>


          </div>
        )}

      </div>
    </div>
  );
};

export default PDFProcessor;