import React, { useState } from 'react';
import { INITIAL_CASES } from './data/mockCases';
import { InvestigationCase, ThreatLevel } from './types/forensics';
import { Header } from './components/Header';
import { MetricsOverview } from './components/MetricsOverview';
import { CaseList } from './components/CaseList';
import { OverviewTab } from './components/tabs/OverviewTab';
import { NetworkForensicsTab } from './components/tabs/NetworkForensicsTab';
import { ClientLeakageTab } from './components/tabs/ClientLeakageTab';
import { FinancialGraphTab } from './components/tabs/FinancialGraphTab';
import { StatutoryMatrixTab } from './components/tabs/StatutoryMatrixTab';
import { TerminalTab } from './components/tabs/TerminalTab';
import { AiAnalystTab } from './components/tabs/AiAnalystTab';
import { TheoreticalMathTab } from './components/tabs/TheoreticalMathTab';
import { WorkbookDatabaseTab } from './components/tabs/WorkbookDatabaseTab';
import { CryptoTracerTab } from './components/tabs/CryptoTracerTab';
import { AnycastSandboxModal } from './components/modals/AnycastSandboxModal';
import { WebRtcLiveProbeModal } from './components/modals/WebRtcLiveProbeModal';
import { NewCaseModal } from './components/modals/NewCaseModal';
import { ExportDossierModal } from './components/modals/ExportDossierModal';
import { ProvenanceModal } from './components/modals/ProvenanceModal';

import { 
  ShieldAlert, 
  Globe, 
  Cpu, 
  CreditCard, 
  Scale, 
  Terminal as TerminalIcon, 
  Bot,
  Activity,
  Layers,
  Calculator,
  Database
} from 'lucide-react';

export default function App() {
  const [cases, setCases] = useState<InvestigationCase[]>(INITIAL_CASES);
  const [selectedCaseId, setSelectedCaseId] = useState<string>(INITIAL_CASES[0].id);
  const [activeTab, setActiveTab] = useState<string>('overview');

  // Search & Filter State
  const [searchQuery, setSearchQuery] = useState<string>('');
  const [categoryFilter, setCategoryFilter] = useState<string>('ALL');
  const [threatFilter, setThreatFilter] = useState<string>('ALL');

  // Modals
  const [isAnycastSandboxOpen, setIsAnycastSandboxOpen] = useState(false);
  const [isWebRtcProbeOpen, setIsWebRtcProbeOpen] = useState(false);
  const [isNewCaseModalOpen, setIsNewCaseModalOpen] = useState(false);
  const [isExportModalOpen, setIsExportModalOpen] = useState(false);
  const [isProvenanceModalOpen, setIsProvenanceModalOpen] = useState(false);

  const currentCase = cases.find(c => c.id === selectedCaseId) || cases[0];

  const handleUpdateStatus = (caseId: string, newStatus: any, actionNote: string) => {
    setCases(prev => prev.map(c => {
      if (c.id === caseId) {
        const time = new Date().toISOString().replace('T', ' ').slice(0, 19);
        return {
          ...c,
          status: newStatus,
          updatedDate: new Date().toISOString().slice(0, 10),
          timeline: [
            ...c.timeline,
            { timestamp: time, event: actionNote, actor: 'Supervisor Enclave', severity: 'WARN' }
          ]
        };
      }
      return c;
    }));
  };

  const handleAddNewCase = (newCase: InvestigationCase) => {
    setCases(prev => [newCase, ...prev]);
    setSelectedCaseId(newCase.id);
    setActiveTab('overview');
  };

  const criticalAlertCount = cases.filter(c => c.threatLevel === 'CRITICAL').length;

  return (
    <div className="flex flex-col h-screen w-screen bg-[#090d16] text-slate-100 overflow-hidden font-sans">
      {/* Platform Header */}
      <Header
        activeCaseCount={cases.length}
        criticalAlertCount={criticalAlertCount}
        onOpenNewCaseModal={() => setIsNewCaseModalOpen(true)}
        onOpenAnycastSandbox={() => setIsAnycastSandboxOpen(true)}
        onOpenWebRtcProbe={() => setIsWebRtcProbeOpen(true)}
        onOpenExportModal={() => setIsExportModalOpen(true)}
        onOpenProvenanceModal={() => setIsProvenanceModalOpen(true)}
        activeTab={activeTab}
        setActiveTab={setActiveTab}
      />

      {/* Metrics Bar */}
      <MetricsOverview
        cases={cases}
        selectedCategory={categoryFilter}
        onSelectCategory={(cat) => setCategoryFilter(cat)}
      />

      {/* Main Workspace: Left Docket Sidebar & Right Workstation */}
      <div className="flex flex-1 overflow-hidden">
        {/* Left Docket Navigation */}
        <CaseList
          cases={cases}
          selectedCaseId={selectedCaseId}
          onSelectCase={(id) => setSelectedCaseId(id)}
          searchQuery={searchQuery}
          setSearchQuery={setSearchQuery}
          categoryFilter={categoryFilter}
          setCategoryFilter={setCategoryFilter}
          threatFilter={threatFilter}
          setThreatFilter={setThreatFilter}
        />

        {/* Right Workstation: Deep Dive Forensic Review */}
        <main className="flex-1 flex flex-col bg-[#0b101b] overflow-hidden">
          {/* Workstation Tab Navigation Bar */}
          <nav aria-label="Investigation workstation tabs" className="flex items-center gap-1 px-4 pt-2 bg-[#0e1626] border-b border-slate-800 overflow-x-auto scrollbar-none shrink-0">
            <button
              onClick={() => setActiveTab('overview')}
              className={`flex items-center gap-1.5 px-3.5 py-2 text-xs font-mono font-bold border-b-2 transition-all cursor-pointer shrink-0 ${
                activeTab === 'overview'
                  ? 'border-cyan-400 text-cyan-300 bg-slate-900/60'
                  : 'border-transparent text-slate-400 hover:text-slate-200 hover:bg-slate-900/30'
              }`}
            >
              <ShieldAlert className="w-3.5 h-3.5" />
              <span>Dossier Overview</span>
            </button>

            <button
              onClick={() => setActiveTab('network')}
              className={`flex items-center gap-1.5 px-3.5 py-2 text-xs font-mono font-bold border-b-2 transition-all cursor-pointer shrink-0 ${
                activeTab === 'network'
                  ? 'border-cyan-400 text-cyan-300 bg-slate-900/60'
                  : 'border-transparent text-slate-400 hover:text-slate-200 hover:bg-slate-900/30'
              }`}
            >
              <Globe className="w-3.5 h-3.5" />
              <span>Network & Anycast Triangulation</span>
            </button>

            <button
              onClick={() => setActiveTab('client')}
              className={`flex items-center gap-1.5 px-3.5 py-2 text-xs font-mono font-bold border-b-2 transition-all cursor-pointer shrink-0 ${
                activeTab === 'client'
                  ? 'border-cyan-400 text-cyan-300 bg-slate-900/60'
                  : 'border-transparent text-slate-400 hover:text-slate-200 hover:bg-slate-900/30'
              }`}
            >
              <Cpu className="w-3.5 h-3.5" />
              <span>Client STUN & RF Probes</span>
            </button>

            <button
              onClick={() => setActiveTab('financial')}
              className={`flex items-center gap-1.5 px-3.5 py-2 text-xs font-mono font-bold border-b-2 transition-all cursor-pointer shrink-0 ${
                activeTab === 'financial'
                  ? 'border-cyan-400 text-cyan-300 bg-slate-900/60'
                  : 'border-transparent text-slate-400 hover:text-slate-200 hover:bg-slate-900/30'
              }`}
            >
              <CreditCard className="w-3.5 h-3.5" />
              <span>Financial AML Graph</span>
            </button>

            <button
              onClick={() => setActiveTab('crypto_tracer')}
              className={`flex items-center gap-1.5 px-3.5 py-2 text-xs font-mono font-bold border-b-2 transition-all cursor-pointer shrink-0 ${
                activeTab === 'crypto_tracer'
                  ? 'border-cyan-400 text-cyan-300 bg-slate-900/60'
                  : 'border-transparent text-slate-400 hover:text-slate-200 hover:bg-slate-900/30'
              }`}
            >
              <Activity className="w-3.5 h-3.5 text-cyan-400" />
              <span>Crypto Tracer (UTXO & Mixers)</span>
            </button>

            <button
              onClick={() => setActiveTab('statutory')}
              className={`flex items-center gap-1.5 px-3.5 py-2 text-xs font-mono font-bold border-b-2 transition-all cursor-pointer shrink-0 ${
                activeTab === 'statutory'
                  ? 'border-cyan-400 text-cyan-300 bg-slate-900/60'
                  : 'border-transparent text-slate-400 hover:text-slate-200 hover:bg-slate-900/30'
              }`}
            >
              <Scale className="w-3.5 h-3.5" />
              <span>Statutory Matrix & SAR</span>
            </button>

            <button
              onClick={() => setActiveTab('math')}
              className={`flex items-center gap-1.5 px-3.5 py-2 text-xs font-mono font-bold border-b-2 transition-all cursor-pointer shrink-0 ${
                activeTab === 'math'
                  ? 'border-cyan-400 text-cyan-300 bg-slate-900/60'
                  : 'border-transparent text-slate-400 hover:text-slate-200 hover:bg-slate-900/30'
              }`}
            >
              <Calculator className="w-3.5 h-3.5" />
              <span>Academic AML Math (χ² & Entropy)</span>
            </button>

            <button
              onClick={() => setActiveTab('database')}
              className={`flex items-center gap-1.5 px-3.5 py-2 text-xs font-mono font-bold border-b-2 transition-all cursor-pointer shrink-0 ${
                activeTab === 'database'
                  ? 'border-cyan-400 text-cyan-300 bg-slate-900/60'
                  : 'border-transparent text-slate-400 hover:text-slate-200 hover:bg-slate-900/30'
              }`}
            >
              <Database className="w-3.5 h-3.5 text-cyan-400" />
              <span>Relational Workbook & SQL Studio</span>
            </button>

            <button
              onClick={() => setActiveTab('terminal')}
              className={`flex items-center gap-1.5 px-3.5 py-2 text-xs font-mono font-bold border-b-2 transition-all cursor-pointer shrink-0 ${
                activeTab === 'terminal'
                  ? 'border-cyan-400 text-cyan-300 bg-slate-900/60'
                  : 'border-transparent text-slate-400 hover:text-slate-200 hover:bg-slate-900/30'
              }`}
            >
              <TerminalIcon className="w-3.5 h-3.5" />
              <span>FROI.OS PTY CLI</span>
            </button>

            <button
              onClick={() => setActiveTab('ai_analyst')}
              className={`flex items-center gap-1.5 px-3.5 py-2 text-xs font-mono font-bold border-b-2 transition-all cursor-pointer shrink-0 ${
                activeTab === 'ai_analyst'
                  ? 'border-indigo-400 text-indigo-300 bg-slate-900/60'
                  : 'border-transparent text-indigo-400/80 hover:text-indigo-200 hover:bg-slate-900/30'
              }`}
            >
              <Bot className="w-3.5 h-3.5" />
              <span>Gemini Threat AI</span>
            </button>
          </nav>

          {/* Tab Content Display Area */}
          <div className="flex-1 overflow-y-auto">
            {activeTab === 'overview' && (
              <OverviewTab
                currentCase={currentCase}
                onUpdateStatus={handleUpdateStatus}
                onNavigateToTab={(tabKey) => setActiveTab(tabKey)}
              />
            )}

            {activeTab === 'network' && (
              <NetworkForensicsTab currentCase={currentCase} />
            )}

            {activeTab === 'client' && (
              <ClientLeakageTab currentCase={currentCase} />
            )}

            {activeTab === 'financial' && (
              <FinancialGraphTab
                currentCase={currentCase}
                onNavigateToWorkbook={() => setActiveTab('database')}
              />
            )}

            {activeTab === 'crypto_tracer' && (
              <CryptoTracerTab
                currentCase={currentCase}
                onNavigateToWorkbook={() => setActiveTab('database')}
                onNavigateToStatutory={() => setActiveTab('statutory')}
              />
            )}

            {activeTab === 'statutory' && (
              <StatutoryMatrixTab 
                currentCase={currentCase}
                onTraceAddress={() => setActiveTab('crypto_tracer')}
              />
            )}

            {activeTab === 'math' && (
              <TheoreticalMathTab currentCase={currentCase} />
            )}

            {activeTab === 'database' && (
              <WorkbookDatabaseTab
                allCases={cases}
                currentCase={currentCase}
              />
            )}

            {activeTab === 'terminal' && (
              <div className="p-4">
                <TerminalTab
                  currentCase={currentCase}
                  onUpdateStatus={handleUpdateStatus}
                />
              </div>
            )}

            {activeTab === 'ai_analyst' && (
              <AiAnalystTab currentCase={currentCase} />
            )}
          </div>
        </main>
      </div>

      {/* Modals & Sandboxes */}
      <AnycastSandboxModal
        isOpen={isAnycastSandboxOpen}
        onClose={() => setIsAnycastSandboxOpen(false)}
      />

      <WebRtcLiveProbeModal
        isOpen={isWebRtcProbeOpen}
        onClose={() => setIsWebRtcProbeOpen(false)}
      />

      <NewCaseModal
        isOpen={isNewCaseModalOpen}
        onClose={() => setIsNewCaseModalOpen(false)}
        onAddCase={handleAddNewCase}
      />

      <ExportDossierModal
        isOpen={isExportModalOpen}
        onClose={() => setIsExportModalOpen(false)}
        currentCase={currentCase}
      />

      <ProvenanceModal
        isOpen={isProvenanceModalOpen}
        onClose={() => setIsProvenanceModalOpen(false)}
      />
    </div>
  );
}