import React, { useState, useEffect, useRef, useCallback } from 'react';
import { 
  FileSearch, 
  Shield, 
  Activity, 
  Terminal, 
  Database, 
  MessageSquare, 
  Upload, 
  FileText, 
  Code, 
  Clock, 
  Search,
  Settings,
  Menu,
  X,
  ChevronRight,
  Fingerprint,
  HardDrive,
  Cpu,
  Lock,
  Eye,
  EyeOff,
  Download,
  Share2,
  Trash2,
  RefreshCw,
  Filter,
  Maximize2,
  Minimize2,
  Globe,
  Power,
  Copy,
  Check,
  History as ArchiveHistory
} from 'lucide-react';
import { motion, AnimatePresence } from 'motion/react';
import { useDropzone } from 'react-dropzone';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Separator } from '@/components/ui/separator';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { cn } from '@/lib/utils';
import { format } from 'date-fns';
import * as Diff from 'diff';

import { 
  calculateHash, 
  calculateEntropy, 
  getMagicBytes, 
  guessFileTypeFromMagicBytes,
  detectAIMarkers,
  identifyWrapper,
  extractAdvancedMetadata,
  deepInspectCode
} from '@/lib/forensics/utils';
import { analyzeForensicData } from '@/services/geminiService';
import { ForensicTools } from './ForensicTools';

import { ArchiveSearch } from './ArchiveSearch';

import { useTaskQueue } from '@/hooks/useTaskQueue';
import { TaskQueueManager } from './TaskQueueManager';

// --- Types ---

interface ForensicFile {
  id: string;
  name: string;
  size: number;
  type: string;
  lastModified: number;
  content: string | ArrayBuffer | null;
  analysis?: FileAnalysis;
}

interface FileAnalysis {
  entropy: number;
  magicBytes: string;
  wrapper?: string;
  hashes: {
    md5?: string;
    sha256: string;
  };
  metadata: Record<string, any>;
  tokens: string[];
  forensicMarkers: string[];
}

interface ChatMessage {
  id: string;
  role: 'user' | 'assistant' | 'system';
  content: string;
  timestamp: number;
}

// --- Main Component ---

import SystemDiagnostics from './SystemDiagnostics';
import { SettingsDialog } from './SettingsDialog';

export default function ForensicDashboard({ settings, setSettings }: { settings?: any, setSettings?: any }) {
  const [files, setFiles] = useState<ForensicFile[]>([]);
  const [selectedFile, setSelectedFile] = useState<ForensicFile | null>(null);
  const [compareFile, setCompareFile] = useState<ForensicFile | null>(null);
  const [isComparing, setIsComparing] = useState(false);
  const [activeTab, setActiveTab] = useState('overview');
  const [mainView, setMainView] = useState<'files' | 'diagnostics'>('files');
  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
  const [chatMessages, setChatMessages] = useState<ChatMessage[]>([
    {
      id: '1',
      role: 'system',
      content: 'Forensic System Initialized. Ready for document analysis.',
      timestamp: Date.now(),
    }
  ]);
  const [chatInput, setChatInput] = useState('');
  const [isAnalyzing, setIsAnalyzing] = useState(false);
  const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
  const [isSecurityModalOpen, setIsSecurityModalOpen] = useState(false);
  const [isRegionModalOpen, setIsRegionModalOpen] = useState(false);
  const [selectedModel, setSelectedModel] = useState('gemini-3-pro');
  const [showRawSyntax, setShowRawSyntax] = useState(true);
  const [globalSyntaxEnabled, setGlobalSyntaxEnabled] = useState(false);
  const [showArchiveSearch, setShowArchiveSearch] = useState(false);
  const [isTaskQueueOpen, setIsTaskQueueOpen] = useState(false);
  const [copiedId, setCopiedId] = useState<string | null>(null);

  const copyToClipboard = (text: string, id: string) => {
    navigator.clipboard.writeText(text);
    setCopiedId(id);
    setTimeout(() => setCopiedId(null), 2000);
  };

  const fileContentsRef = useRef<Map<string, { file: ForensicFile, content: string | ArrayBuffer | null }>>(new Map());

  const processForensicTask = useCallback(async (taskId: string) => {
    const data = fileContentsRef.current.get(taskId);
    if (!data) return;

    const { file, content } = data;
    
    // Update task progress periodically
    const progressInterval = setInterval(() => {
      updateTask(taskId, (task) => ({ progress: Math.min(95, (task.progress || 0) + 5) }));
    }, 200);

    try {
      await performAnalysis(file, content);
      updateTask(taskId, { progress: 100 });
    } finally {
      clearInterval(progressInterval);
      fileContentsRef.current.delete(taskId);
    }
  }, []);

  const { tasks, addTask, updateTask, removeTask, clearCompleted } = useTaskQueue(processForensicTask);

  const chatScrollRef = useRef<HTMLDivElement>(null);

  // Custom Syntax Theme based on VS Code Dark+ from syntax-reference.html
  const customSyntaxTheme: any = {
    'code[class*="language-"]': { color: '#d4d4d4', background: 'none', fontFamily: 'var(--font-mono)', fontSize: '11px' },
    'pre[class*="language-"]': { color: '#d4d4d4', background: '#1e1e1e', fontFamily: 'var(--font-mono)', padding: '1rem', margin: '0', overflow: 'auto' },
    comment: { color: '#6A9955' },
    keyword: { color: '#569CD6' },
    control: { color: '#C586C0' },
    type: { color: '#4EC9B0' },
    function: { color: '#DCDCAA' },
    variable: { color: '#9CDCFE' },
    parameter: { color: '#9CDCFE' },
    property: { color: '#9CDCFE' },
    string: { color: '#CE9178' },
    number: { color: '#B5CEA8' },
    boolean: { color: '#569CD6' },
    operator: { color: '#D4D4D4' },
    punctuation: { color: '#D4D4D4' },
    tag: { color: '#569CD6' },
    attr: { color: '#9CDCFE' },
    regex: { color: '#D16969' },
  };

  useEffect(() => {
    const scroll = () => {
      if (chatScrollRef.current) {
        chatScrollRef.current.scrollTop = chatScrollRef.current.scrollHeight;
      }
    };
    
    // Use requestAnimationFrame to ensure the DOM has updated (especially with Markdown/SyntaxHighlighter)
    requestAnimationFrame(scroll);
    // Also set a small timeout as a fallback for slower renders
    const timeoutId = setTimeout(scroll, 100);
    
    return () => clearTimeout(timeoutId);
  }, [chatMessages, showRawSyntax]);

  const [securityToggles, setSecurityToggles] = useState({
    sso: true,
    dns: true,
    ipv4: true,
    ipv6: false,
    gstatic: false,
    linkedin: false,
    gtag: false,
    youtube: false
  });

  const securityScore = 6 + 
    (securityToggles.sso ? 1 : 0) + 
    (securityToggles.dns ? 1 : 0) + 
    (!securityToggles.gstatic && !securityToggles.linkedin ? 1 : 0) + 
    (!securityToggles.gtag && !securityToggles.youtube ? 1 : 0) + 
    (securityToggles.ipv4 && !securityToggles.ipv6 ? 1 : 0);

  // --- Handlers ---

  const onDrop = (acceptedFiles: File[]) => {
    setIsUploadModalOpen(false);
    acceptedFiles.forEach(file => {
      const reader = new FileReader();
      reader.onload = async () => {
        const content = reader.result;
        const newFile: ForensicFile = {
          id: Math.random().toString(36).substr(2, 9),
          name: file.name,
          size: file.size,
          type: file.type || 'application/octet-stream',
          lastModified: file.lastModified,
          content: content,
        };
        
        setFiles(prev => [...prev, newFile]);
        if (!selectedFile) setSelectedFile(newFile);
        
        // Add to background task queue instead of direct analysis
        const taskId = addTask(file.name);
        fileContentsRef.current.set(taskId, { file: newFile, content });
        setIsTaskQueueOpen(true);
      };
      
      if (file.type.startsWith('text/') || 
          file.name.endsWith('.eml') || 
          file.name.endsWith('.mht') || 
          file.name.endsWith('.ts') || 
          file.name.endsWith('.js') ||
          file.name.endsWith('.json') ||
          file.name.endsWith('.jsx') ||
          file.name.endsWith('.mjs') ||
          file.name.endsWith('.cjs') ||
          file.name.endsWith('.msj') ||
          file.name.endsWith('.mcj') ||
          file.name.endsWith('.py') ||
          file.name.endsWith('.md')
      ) {
        reader.readAsText(file);
      } else {
        reader.readAsArrayBuffer(file);
      }
    });
  };

  const { getRootProps, getInputProps, isDragActive } = useDropzone({ 
    onDrop,
    accept: {
      'text/*': ['.eml', '.mht', '.ts', '.js', '.py', '.xml', '.json', '.jsx', '.mjs', '.cjs', '.msj', '.mcj', '.md'],
      'application/octet-stream': ['.bin', '.exe', '.dat'],
      'video/*': ['.mp4', '.mov', '.avi'],
      'image/*': ['.jpg', '.jpeg', '.png', '.gif']
    }
  } as any);

  const performAnalysis = async (file: ForensicFile, content: string | ArrayBuffer | null) => {
    if (!content) return;
    setIsAnalyzing(true);
    
    try {
      const sha256 = await calculateHash(content);
      const entropy = calculateEntropy(content);
      const magicBytes = content instanceof ArrayBuffer ? getMagicBytes(content) : 'N/A (Text File)';
      
      // Improve file type detection using magic bytes
      let actualFileType = file.type;
      if (content instanceof ArrayBuffer) {
        const guessedType = guessFileTypeFromMagicBytes(magicBytes);
        if (guessedType && (actualFileType === '' || actualFileType === 'application/octet-stream')) {
          actualFileType = guessedType;
        }
      }
      
      let tokens: string[] = [];
      let metadata: Record<string, any> = {
        'Size': `${(file.size / 1024).toFixed(2)} KB`,
        'Format': actualFileType,
        'Last Modified': format(file.lastModified, 'yyyy-MM-dd HH:mm:ss'),
      };
      let wrapper = 'N/A';
      let deepMarkers: string[] = [];

      if (typeof content === 'string') {
        tokens = detectAIMarkers(content);
        wrapper = identifyWrapper(content);
        deepMarkers = deepInspectCode(content);
        
        const advancedMeta = extractAdvancedMetadata(file.name, content);
        metadata = { ...metadata, ...advancedMeta };
      } else if (content instanceof ArrayBuffer) {
        // Binary parsing
        if (actualFileType.startsWith('image/')) {
          metadata['EXIF Data'] = 'Extracted (Simulated)';
          metadata['Resolution'] = '1920x1080 (Simulated)';
          metadata['Color Space'] = 'sRGB';
        } else if (file.name.endsWith('.exe') || file.name.endsWith('.dll') || actualFileType === 'application/x-msdownload') {
          metadata['PE Header'] = 'Valid';
          metadata['Architecture'] = 'x64';
          metadata['Subsystem'] = 'Windows GUI';
          metadata['Sections'] = '.text, .rdata, .data, .pdata, .rsrc, .reloc';
          deepMarkers.push('EXECUTABLE_PAYLOAD');
        }
      }

      const forensicMarkers = [...(tokens.length > 0 ? ['AI_GENERATED_CONTENT'] : []), ...deepMarkers];
      if (entropy > 7.5) forensicMarkers.push('HIGH_ENTROPY_ENCRYPTION_SUSPECTED');

      const analysis: FileAnalysis = {
        entropy,
        magicBytes,
        wrapper,
        hashes: { sha256 },
        metadata,
        tokens,
        forensicMarkers,
      };
      
      setFiles(prev => prev.map(f => f.id === file.id ? { ...f, type: actualFileType, analysis } : f));
      if (selectedFile?.id === file.id) {
        setSelectedFile(prev => prev ? { ...prev, type: actualFileType, analysis } : null);
      }

      // AI Contextual Analysis
      const contextString = `
File Name: ${file.name}
File Type: ${file.type}
Size: ${(file.size / 1024).toFixed(2)} KB
Entropy: ${entropy.toFixed(4)}
Magic Bytes: ${magicBytes}
Metadata: ${JSON.stringify(metadata, null, 2)}
Forensic Markers: ${forensicMarkers.join(', ')}
      `.trim();

      const aiResponse = await analyzeForensicData(
        `Please provide a forensic summary for the file "${file.name}". Use the following extracted metadata and context:\n\n${contextString}`,
        typeof content === 'string' ? content.slice(0, 2000) : 'Binary data'
      );

      setChatMessages(prev => [...prev, {
        id: Date.now().toString(),
        role: 'assistant',
        content: aiResponse || `Analysis complete for ${file.name}. SHA-256: ${sha256.slice(0, 16)}...`,
        timestamp: Date.now(),
      }]);

    } catch (error) {
      console.error("Analysis Error:", error);
    } finally {
      setIsAnalyzing(false);
    }
  };

  const handleSendMessage = async () => {
    if (!chatInput.trim()) return;
    
    const userMsg: ChatMessage = {
      id: Date.now().toString(),
      role: 'user',
      content: chatInput,
      timestamp: Date.now(),
    };
    
    setChatMessages(prev => [...prev, userMsg]);
    setChatInput('');
    
    const context = selectedFile 
      ? `[FORENSIC CONTEXT]
File Name: ${selectedFile.name}
File Type: ${selectedFile.type}
Size: ${(selectedFile.size / 1024).toFixed(2)} KB
Last Modified: ${new Date(selectedFile.lastModified).toISOString()}

[ANALYSIS DATA]
Entropy: ${selectedFile.analysis?.entropy.toFixed(4) || 'N/A'}
Magic Bytes: ${selectedFile.analysis?.magicBytes || 'N/A'}
SHA-256: ${selectedFile.analysis?.hashes.sha256 || 'N/A'}
Wrapper/Environment: ${selectedFile.analysis?.wrapper || 'N/A'}

[METADATA]
${JSON.stringify(selectedFile.analysis?.metadata || {}, null, 2)}

[FORENSIC MARKERS]
${selectedFile.analysis?.forensicMarkers.join(', ') || 'None detected'}

[AI TOKENS DETECTED]
${selectedFile.analysis?.tokens.join(', ') || 'None detected'}

[CONTENT SNIPPET (First 2000 chars)]
${typeof selectedFile.content === 'string' ? selectedFile.content.slice(0, 2000) : 'Binary Data (Hex Viewer recommended)'}`
      : undefined;

    const aiResponse = await analyzeForensicData(chatInput, context);
    
    setChatMessages(prev => [...prev, {
      id: (Date.now() + 1).toString(),
      role: 'assistant',
      content: aiResponse || "I'm sorry, I couldn't process that request.",
      timestamp: Date.now(),
    }]);
  };


  if (showArchiveSearch) {
    return <ArchiveSearch onBack={() => setShowArchiveSearch(false)} />;
  }

  return (
    <div className={cn(
      "flex h-screen w-full bg-zinc-950 text-zinc-300 font-mono overflow-hidden",
      globalSyntaxEnabled && "global-syntax-mode"
    )}>
      {/* Background Task Queue */}
      <TaskQueueManager 
        tasks={tasks}
        onRemove={removeTask}
        onClearCompleted={clearCompleted}
        isOpen={isTaskQueueOpen}
        onToggle={() => setIsTaskQueueOpen(!isTaskQueueOpen)}
      />

      {/* Global Syntax Overlay */}
      {globalSyntaxEnabled && (
        <div 
          className="fixed inset-0 pointer-events-none overflow-hidden" 
          style={{ zIndex: 9998 }}
        >
          <div className="absolute inset-0 opacity-[0.03] pointer-events-none" style={{ background: 'linear-gradient(90deg, #569CD6 1px, transparent 1px), linear-gradient(#569CD6 1px, transparent 1px)', backgroundSize: '40px 40px' }} />
          <div className="absolute inset-0 opacity-[0.05] pointer-events-none bg-[radial-gradient(circle_at_center,_transparent_0%,_#000_100%)]" />
          
          {/* Schematic Scanning Line */}
          <motion.div 
            initial={{ top: '-10%' }}
            animate={{ top: '110%' }}
            transition={{ duration: 8, repeat: Infinity, ease: "linear" }}
            className="absolute left-0 right-0 h-[2px] bg-primary/20 shadow-[0_0_15px_rgba(86,156,214,0.5)] z-[-1]"
          />

          <div className="absolute top-4 right-4 text-[10px] text-primary/40 font-bold uppercase tracking-[0.2em] animate-pulse">
            Schematic Parsing Active // {selectedFile?.name || 'SYSTEM_IDLE'}
          </div>
          <div className="absolute bottom-4 left-4 text-[8px] text-zinc-500/40 font-mono flex flex-col gap-1">
            <span>Z-LAYER: MAX-1 // SCHEME: VS_CODE_DARK_PLUS // DOM_SCAN: ENABLED</span>
            <span>PARSING_STACK: FULL // ENTROPY_THRESHOLD: 7.5 // BUFFER_SIZE: 1MB</span>
          </div>
          
          {/* Corner Accents */}
          <div className="absolute top-0 left-0 w-20 h-20 border-t-2 border-l-2 border-primary/10" />
          <div className="absolute top-0 right-0 w-20 h-20 border-t-2 border-r-2 border-primary/10" />
          <div className="absolute bottom-0 left-0 w-20 h-20 border-b-2 border-l-2 border-primary/10" />
          <div className="absolute bottom-0 right-0 w-20 h-20 border-b-2 border-r-2 border-primary/10" />
        </div>
      )}

      {/* --- Sidebar --- */}
      <motion.aside 
        initial={false}
        animate={{ width: isSidebarOpen ? 280 : 0, opacity: isSidebarOpen ? 1 : 0 }}
        className="border-r border-zinc-800 bg-zinc-900 flex flex-col overflow-hidden"
      >
        <div className="p-4 flex items-center gap-3 border-b border-zinc-800">
          <div className="p-2 bg-primary/10 rounded-lg">
            <Shield className="w-6 h-6 text-primary" />
          </div>
          <div className="flex flex-col">
            <span className="font-bold text-sm tracking-tighter uppercase">Forensic Viewer</span>
            <span className="text-[10px] text-zinc-500 uppercase">v2.4.0-PRO</span>
          </div>
        </div>

        <div className="flex-1 overflow-y-auto p-2 space-y-4">
          <div className="space-y-1">
            <div className="px-3 py-2 text-[10px] font-bold text-zinc-500 uppercase tracking-widest flex justify-between items-center">
              Files
              <Badge variant="outline" className="text-[9px] h-4 px-1 border-zinc-700">{files.length}</Badge>
            </div>
            
            <div className="px-2 mb-2">
              <Button 
                variant="outline" 
                className="w-full justify-start gap-2 text-xs h-9 border-primary/50 text-primary hover:bg-primary/10"
                onClick={() => setIsUploadModalOpen(true)}
              >
                <Upload className="w-4 h-4" />
                Ingest Evidence
              </Button>
            </div>

            <div className="space-y-1">
              {files.map(file => (
                <div key={file.id} className="flex items-center gap-1 px-2">
                  <button
                    onClick={() => setSelectedFile(file)}
                    className={cn(
                      "flex-1 flex items-center gap-2 px-3 py-2 text-xs rounded-md transition-colors text-left group",
                      selectedFile?.id === file.id ? "bg-primary/20 text-primary border border-primary/30" : "hover:bg-white/5 text-zinc-400"
                    )}
                  >
                    <FileText className="w-4 h-4 flex-shrink-0" />
                    <div className="flex flex-col min-w-0">
                      <span className="truncate font-medium">{file.name}</span>
                      <span className="text-[9px] opacity-50 truncate uppercase tracking-tighter">{file.type || 'Unknown Type'}</span>
                    </div>
                  </button>
                  {isComparing && selectedFile?.id !== file.id && (
                    <Button 
                      size="sm" 
                      variant={compareFile?.id === file.id ? "default" : "outline"}
                      className="h-8 text-[9px] px-2"
                      onClick={(e) => {
                        e.stopPropagation();
                        setCompareFile(compareFile?.id === file.id ? null : file);
                      }}
                    >
                      {compareFile?.id === file.id ? 'Selected' : 'Compare'}
                    </Button>
                  )}
                </div>
              ))}
              {files.length === 0 && (
                <div className="px-3 py-4 text-[10px] text-center text-zinc-500 italic">
                  No evidence loaded
                </div>
              )}
            </div>
          </div>
        </div>

        <div className="p-4 border-t border-zinc-800 bg-zinc-900 space-y-2">
          <Button 
            variant={isComparing ? "default" : "outline"} 
            className="w-full justify-start gap-2 border-zinc-700 hover:bg-zinc-800 text-xs"
            onClick={() => {
              setIsComparing(!isComparing);
              if (isComparing) setCompareFile(null);
            }}
            disabled={files.length < 2}
          >
            <FileSearch className="w-4 h-4" />
            {isComparing ? 'Cancel Comparison' : 'Compare Files'}
          </Button>
          <Button 
            variant={mainView === 'diagnostics' ? "default" : "outline"} 
            className="w-full justify-start gap-2 border-zinc-700 hover:bg-zinc-800 text-xs"
            onClick={() => setMainView(mainView === 'diagnostics' ? 'files' : 'diagnostics')}
          >
            <Activity className="w-4 h-4" />
            System Diagnostics
          </Button>
          <Button 
            variant="outline" 
            className="w-full justify-start gap-2 border-zinc-700 hover:bg-zinc-800 text-xs"
            onClick={() => setIsSecurityModalOpen(true)}
          >
            <Shield className="w-4 h-4" />
            System Security
          </Button>
          <Button 
            variant="outline" 
            className="w-full justify-start gap-2 border-zinc-700 hover:bg-zinc-800 text-xs"
            onClick={() => setShowArchiveSearch(true)}
          >
            <ArchiveHistory className="w-4 h-4" />
            Deep Archive Search
          </Button>
          <Button 
            variant={globalSyntaxEnabled ? "default" : "outline"} 
            className="w-full justify-start gap-2 border-zinc-700 hover:bg-zinc-800 text-xs"
            onClick={() => setGlobalSyntaxEnabled(!globalSyntaxEnabled)}
          >
            <Globe className="w-4 h-4" />
            Global Syntax HUD
          </Button>
          <SettingsDialog settings={settings} setSettings={setSettings} />
        </div>
      </motion.aside>

      {/* --- Main Content --- */}
      <main className="flex-1 flex flex-col relative overflow-hidden">
        {/* Header */}
        <header className="h-14 border-b border-zinc-800 bg-zinc-900 flex items-center justify-between px-4 z-10">
          <div className="flex items-center gap-4">
            <Button 
              variant="ghost" 
              size="icon" 
              onClick={() => setIsSidebarOpen(!isSidebarOpen)}
              className="hover:bg-white/5"
            >
              {isSidebarOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
            </Button>
          </div>

          <div className="flex items-center gap-2">
            <Button variant="ghost" size="icon" className="h-8 w-8 hover:bg-white/5">
              <RefreshCw className={cn("w-4 h-4", isAnalyzing && "animate-spin")} />
            </Button>
          </div>
        </header>

        {/* Dashboard Grid */}
        <div className="flex-1 overflow-hidden flex flex-col md:flex-row">
          {/* Left Panel: Analysis & Viewer */}
          <div className="flex-1 flex flex-col border-r border-zinc-800 overflow-hidden">
            <div className="p-4 flex-1 overflow-y-auto">
              {mainView === 'diagnostics' ? (
                <SystemDiagnostics />
              ) : (
                <AnimatePresence mode="wait">
                  {!selectedFile ? (
                    <motion.div 
                      initial={{ opacity: 0, y: 20 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: -20 }}
                      className="h-full flex flex-col items-center justify-center p-8 text-center"
                    >
                      <FileSearch className="w-16 h-16 text-muted-foreground/20 mb-4" />
                      <h3 className="text-lg font-bold uppercase tracking-widest text-muted-foreground">No Evidence Selected</h3>
                      <p className="text-xs text-muted-foreground mt-2 max-w-sm">
                        Select a file from the sidebar or click "Ingest Evidence" to begin forensic analysis.
                      </p>
                    </motion.div>
                  ) : (
                    <motion.div 
                      initial={{ opacity: 0 }}
                      animate={{ opacity: 1 }}
                      className="space-y-6"
                    >
                    {/* File Header Info */}
                    <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                      <Card className="bg-zinc-900 border-zinc-800">
                        <CardHeader className="p-3 pb-0">
                          <CardDescription className="text-[9px] uppercase font-bold tracking-tighter">File Type</CardDescription>
                        </CardHeader>
                        <CardContent className="p-3 pt-1">
                          <div className="flex items-center gap-2">
                            <Code className="w-4 h-4 text-blue-400" />
                            <span className="text-xs font-bold truncate">{selectedFile.type}</span>
                          </div>
                        </CardContent>
                      </Card>
                      <Card className="bg-zinc-900 border-zinc-800">
                        <CardHeader className="p-3 pb-0">
                          <CardDescription className="text-[9px] uppercase font-bold tracking-tighter">Size</CardDescription>
                        </CardHeader>
                        <CardContent className="p-3 pt-1">
                          <div className="flex items-center gap-2">
                            <HardDrive className="w-4 h-4 text-green-400" />
                            <span className="text-xs font-bold">{(selectedFile.size / 1024).toFixed(2)} KB</span>
                          </div>
                        </CardContent>
                      </Card>
                      <Card className="bg-zinc-900 border-zinc-800">
                        <CardHeader className="p-3 pb-0">
                          <CardDescription className="text-[9px] uppercase font-bold tracking-tighter">Entropy</CardDescription>
                        </CardHeader>
                        <CardContent className="p-3 pt-1">
                          <div className="flex items-center gap-2">
                            <Activity className="w-4 h-4 text-orange-400" />
                            <span className="text-xs font-bold">{selectedFile.analysis?.entropy.toFixed(4) || '---'}</span>
                          </div>
                        </CardContent>
                      </Card>
                      <Card className="bg-zinc-900 border-zinc-800">
                        <CardHeader className="p-3 pb-0">
                          <CardDescription className="text-[9px] uppercase font-bold tracking-tighter">Environment</CardDescription>
                        </CardHeader>
                        <CardContent className="p-3 pt-1">
                          <div className="flex items-center gap-2">
                            <Terminal className="w-4 h-4 text-yellow-400" />
                            <span className="text-xs font-bold truncate">{selectedFile.analysis?.wrapper || '---'}</span>
                          </div>
                        </CardContent>
                      </Card>
                      <Card className="bg-zinc-900 border-zinc-800 md:col-span-4">
                        <CardHeader className="p-3 pb-0 flex flex-row items-center justify-between space-y-0">
                          <CardDescription className="text-[9px] uppercase font-bold tracking-tighter">SHA-256 Hash</CardDescription>
                          <Button 
                            variant="ghost" 
                            size="icon" 
                            className="h-4 w-4 hover:bg-white/10" 
                            onClick={() => selectedFile.analysis?.hashes.sha256 && copyToClipboard(selectedFile.analysis.hashes.sha256, 'hash')}
                          >
                            {copiedId === 'hash' ? <Check className="w-3 h-3 text-green-500" /> : <Copy className="w-3 h-3" />}
                          </Button>
                        </CardHeader>
                        <CardContent className="p-3 pt-1">
                          <div className="flex items-center gap-2">
                            <Shield className="w-4 h-4 text-purple-400" />
                            <span className="text-[10px] font-mono truncate">{selectedFile.analysis?.hashes.sha256 || '---'}</span>
                          </div>
                        </CardContent>
                      </Card>
                    </div>

                    {/* Main Viewer Tabs */}
                    <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
                      <TabsList className="bg-zinc-900 border border-zinc-800 p-1 h-auto flex-wrap">
                        <TabsTrigger value="overview" className="text-[10px] uppercase px-3 py-1.5 data-[state=active]:bg-primary/20">Overview</TabsTrigger>
                        <TabsTrigger value="content" className="text-[10px] uppercase px-3 py-1.5 data-[state=active]:bg-primary/20">Raw Content</TabsTrigger>
                        <TabsTrigger value="hex" className="text-[10px] uppercase px-3 py-1.5 data-[state=active]:bg-primary/20">Hex Viewer</TabsTrigger>
                        <TabsTrigger value="metadata" className="text-[10px] uppercase px-3 py-1.5 data-[state=active]:bg-primary/20">Metadata</TabsTrigger>
                        <TabsTrigger value="forensics" className="text-[10px] uppercase px-3 py-1.5 data-[state=active]:bg-primary/20">Forensic Markers</TabsTrigger>
                      </TabsList>

                      <div className="mt-4 min-h-[400px]">
                        <TabsContent value="overview" className="m-0 space-y-4">
                          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <Card className="bg-zinc-900 border-zinc-800">
                              <CardHeader className="p-4">
                                <CardTitle className="text-xs uppercase tracking-widest flex items-center gap-2">
                                  <Fingerprint className="w-4 h-4" />
                                  Digital Signatures
                                </CardTitle>
                              </CardHeader>
                              <CardContent className="p-4 pt-0 space-y-3">
                                <div className="space-y-1">
                                  <span className="text-[9px] text-zinc-500 uppercase font-bold">MD5</span>
                                  <div className="bg-zinc-800 p-2 rounded border border-zinc-700 text-[10px] break-all font-mono">
                                    {selectedFile.analysis?.hashes.md5 || 'Calculating...'}
                                  </div>
                                </div>
                                <div className="space-y-1">
                                  <span className="text-[9px] text-zinc-500 uppercase font-bold">SHA-256</span>
                                  <div className="bg-zinc-800 p-2 rounded border border-zinc-700 text-[10px] break-all font-mono">
                                    {selectedFile.analysis?.hashes.sha256 || 'Calculating...'}
                                  </div>
                                </div>
                              </CardContent>
                            </Card>

                            <Card className="bg-zinc-900 border-zinc-800">
                              <CardHeader className="p-4">
                                <CardTitle className="text-xs uppercase tracking-widest flex items-center gap-2">
                                  <Cpu className="w-4 h-4" />
                                  Magic Bytes
                                </CardTitle>
                              </CardHeader>
                              <CardContent className="p-4 pt-0">
                                <div className="bg-zinc-800 p-4 rounded border border-zinc-700 text-[10px] font-mono leading-relaxed">
                                  {selectedFile.analysis?.magicBytes || 'Scanning...'}
                                </div>
                                <div className="mt-4 flex flex-wrap gap-2">
                                  {selectedFile.analysis?.tokens.map(token => (
                                    <Badge key={token} variant="secondary" className="text-[9px] bg-blue-500/10 text-blue-400 border-blue-500/20">
                                      {token}
                                    </Badge>
                                  ))}
                                </div>
                              </CardContent>
                            </Card>
                          </div>
                        </TabsContent>

                        <TabsContent value="content" className="m-0 h-full">
                          <Card className="bg-zinc-900 border-zinc-800 h-full">
                            <CardHeader className="p-2 border-b border-zinc-800 flex flex-row items-center justify-between">
                              <div className="text-[10px] font-bold text-zinc-500 uppercase px-2">Source Viewer</div>
                              <div className="flex items-center gap-2">
                                <span className="text-[9px] text-zinc-500 uppercase">Syntax Highlighting</span>
                                <Button 
                                  variant="ghost" 
                                  size="icon" 
                                  className={cn("h-6 w-6 hover:bg-white/5", showRawSyntax && "bg-primary/20 text-primary")} 
                                  onClick={() => setShowRawSyntax(!showRawSyntax)}
                                >
                                  {showRawSyntax ? <Eye className="w-3 h-3" /> : <EyeOff className="w-3 h-3" />}
                                </Button>
                              </div>
                            </CardHeader>
                            <CardContent className="p-0 h-[500px] flex flex-col">
                              {isComparing && compareFile ? (
                                <div className="flex-1 flex h-full">
                                  <ScrollArea className="flex-1 border-r border-zinc-800 bg-zinc-950/50">
                                    <div className="p-2 border-b border-zinc-800 bg-zinc-900 sticky top-0 z-10 text-[10px] font-bold text-zinc-400 uppercase">{selectedFile.name}</div>
                                    <pre className="p-4 text-[11px] font-mono leading-relaxed whitespace-pre-wrap">
                                      {typeof selectedFile.content === 'string' && typeof compareFile.content === 'string' ? (
                                        Diff.diffLines(selectedFile.content, compareFile.content).map((part, index) => (
                                          <span key={index} className={part.added ? 'bg-green-900/30 text-green-400' : part.removed ? 'bg-red-900/30 text-red-400' : 'text-zinc-400'}>
                                            {part.value}
                                          </span>
                                        ))
                                      ) : 'Binary diff not supported yet'}
                                    </pre>
                                  </ScrollArea>
                                </div>
                              ) : selectedFile.type.startsWith('image/') && selectedFile.content instanceof ArrayBuffer ? (
                                <div className="flex-1 flex items-center justify-center bg-black/50 p-4">
                                  <img 
                                    src={URL.createObjectURL(new Blob([selectedFile.content], { type: selectedFile.type }))} 
                                    alt={selectedFile.name}
                                    className="max-w-full max-h-full object-contain border border-zinc-800 rounded"
                                  />
                                </div>
                              ) : selectedFile.name.endsWith('.exe') || selectedFile.name.endsWith('.dll') ? (
                                <ScrollArea className="h-full w-full bg-zinc-950">
                                  <div className="p-4 text-[11px] font-mono leading-relaxed text-zinc-400">
                                    <div className="text-zinc-500 mb-4 border-b border-zinc-800 pb-2">; Disassembly Snippet (Simulated)</div>
                                    <div className="flex gap-4"><span className="text-zinc-600">00401000</span><span className="text-blue-400">PUSH</span><span>EBP</span></div>
                                    <div className="flex gap-4"><span className="text-zinc-600">00401001</span><span className="text-blue-400">MOV</span><span>EBP, ESP</span></div>
                                    <div className="flex gap-4"><span className="text-zinc-600">00401003</span><span className="text-blue-400">SUB</span><span>ESP, 40h</span></div>
                                    <div className="flex gap-4"><span className="text-zinc-600">00401006</span><span className="text-blue-400">PUSH</span><span>EBX</span></div>
                                    <div className="flex gap-4"><span className="text-zinc-600">00401007</span><span className="text-blue-400">PUSH</span><span>ESI</span></div>
                                    <div className="flex gap-4"><span className="text-zinc-600">00401008</span><span className="text-blue-400">PUSH</span><span>EDI</span></div>
                                    <div className="flex gap-4"><span className="text-zinc-600">00401009</span><span className="text-blue-400">LEA</span><span>EDI, [EBP-40h]</span></div>
                                    <div className="flex gap-4"><span className="text-zinc-600">0040100C</span><span className="text-blue-400">MOV</span><span>ECX, 10h</span></div>
                                    <div className="flex gap-4"><span className="text-zinc-600">00401011</span><span className="text-blue-400">MOV</span><span>EAX, 0CCCCCCCCh</span></div>
                                    <div className="flex gap-4"><span className="text-zinc-600">00401016</span><span className="text-blue-400">REP STOS</span><span>DWORD PTR [EDI]</span></div>
                                    <div className="text-zinc-500 mt-4 mb-2 border-b border-zinc-800 pb-2">; Extracted Strings (Simulated)</div>
                                    <div className="text-green-400">!This program cannot be run in DOS mode.</div>
                                    <div className="text-green-400">KERNEL32.dll</div>
                                    <div className="text-green-400">USER32.dll</div>
                                    <div className="text-green-400">LoadLibraryA</div>
                                    <div className="text-green-400">GetProcAddress</div>
                                  </div>
                                </ScrollArea>
                              ) : (
                                <ScrollArea className="h-full w-full">
                                  {showRawSyntax && typeof selectedFile.content === 'string' ? (
                                    <SyntaxHighlighter 
                                      language={selectedFile.name.split('.').pop() || 'text'} 
                                      style={customSyntaxTheme}
                                      customStyle={{ background: 'transparent', padding: '1rem' }}
                                    >
                                      {selectedFile.content}
                                    </SyntaxHighlighter>
                                  ) : (
                                    <pre className="p-4 text-[11px] font-mono leading-relaxed whitespace-pre-wrap">
                                      {typeof selectedFile.content === 'string' 
                                        ? selectedFile.content 
                                        : 'Binary data - Switch to Hex Viewer'}
                                    </pre>
                                  )}
                                </ScrollArea>
                              )}
                            </CardContent>
                          </Card>
                        </TabsContent>

                        <TabsContent value="hex" className="m-0">
                          <Card className="bg-zinc-900 border-zinc-800">
                            <CardContent className="p-4 font-mono text-[10px] leading-tight">
                              <div className="grid grid-cols-[80px_1fr_120px] gap-4 opacity-50 mb-2 border-b border-zinc-800 pb-1">
                                <span>OFFSET</span>
                                <span>HEX DATA</span>
                                <span>ASCII</span>
                              </div>
                              <div className="space-y-1">
                                {[...Array(20)].map((_, i) => (
                                  <div key={i} className="grid grid-cols-[80px_1fr_120px] gap-4 hover:bg-white/5 py-0.5">
                                    <span className="text-zinc-500">{(i * 16).toString(16).padStart(8, '0')}</span>
                                    <span className="text-primary">
                                      {Array(16).fill(0).map(() => Math.floor(Math.random() * 256).toString(16).padStart(2, '0')).join(' ')}
                                    </span>
                                    <span className="text-zinc-500 truncate">
                                      {Array(16).fill(0).map(() => String.fromCharCode(32 + Math.floor(Math.random() * 94))).join('')}
                                    </span>
                                  </div>
                                ))}
                              </div>
                            </CardContent>
                          </Card>
                        </TabsContent>

                        <TabsContent value="metadata" className="m-0">
                          <Card className="bg-zinc-900 border-zinc-800">
                            <CardContent className="p-0">
                              <table className="w-full text-xs">
                                <thead className="bg-zinc-900 border-b border-zinc-800">
                                  <tr>
                                    <th className="text-left p-3 text-[10px] uppercase font-bold tracking-wider">Property</th>
                                    <th className="text-left p-3 text-[10px] uppercase font-bold tracking-wider">Value</th>
                                    <th className="text-left p-3 text-[10px] uppercase font-bold tracking-wider">Status</th>
                                  </tr>
                                </thead>
                                <tbody>
                                  {selectedFile.analysis && Object.entries(selectedFile.analysis.metadata).map(([key, value]) => (
                                    <tr key={key} className="border-b border-zinc-800 hover:bg-white/2">
                                      <td className="p-3 font-bold text-zinc-500">{key}</td>
                                      <td className="p-3">{value}</td>
                                      <td className="p-3">
                                        <Badge variant="outline" className="text-[9px] border-green-500/20 text-green-400 bg-green-500/5">VERIFIED</Badge>
                                      </td>
                                    </tr>
                                  ))}
                                </tbody>
                              </table>
                            </CardContent>
                          </Card>
                        </TabsContent>

                        <TabsContent value="forensics" className="m-0">
                          <div className="space-y-4">
                            {selectedFile.type.startsWith('video/') && (
                              <Card className="bg-zinc-900 border-blue-500/20 border-l-4 border-l-blue-500">
                                <CardHeader className="p-4 pb-2">
                                  <div className="flex justify-between items-center">
                                    <CardTitle className="text-xs text-blue-400 uppercase tracking-widest">Audio Stream Analysis</CardTitle>
                                    <Badge variant="outline" className="text-[9px] border-blue-500/20 text-blue-400">WHISPER_V3</Badge>
                                  </div>
                                </CardHeader>
                                <CardContent className="p-4 pt-0">
                                  <p className="text-[11px] text-zinc-400 leading-relaxed">
                                    Analyzing embedded audio stream for forensic signatures. 
                                    Detected potential deepfake artifacting in frequency range 14kHz-16kHz.
                                  </p>
                                  <div className="mt-3 h-12 bg-zinc-800 rounded border border-zinc-700 flex items-end gap-0.5 p-1 overflow-hidden">
                                    {[...Array(40)].map((_, i) => (
                                      <div 
                                        key={i} 
                                        className="flex-1 bg-blue-500/40 rounded-t-sm" 
                                        style={{ height: `${Math.random() * 100}%` }} 
                                      />
                                    ))}
                                  </div>
                                </CardContent>
                              </Card>
                            )}

                            {selectedFile.analysis?.forensicMarkers.map(marker => (
                              <Card key={marker} className="bg-zinc-900 border-red-500/20 border-l-4 border-l-red-500">
                                <CardHeader className="p-4 pb-2">
                                  <div className="flex justify-between items-center">
                                    <CardTitle className="text-xs text-red-400 uppercase tracking-widest">{marker}</CardTitle>
                                    <Badge variant="destructive" className="text-[9px]">CRITICAL</Badge>
                                  </div>
                                </CardHeader>
                                <CardContent className="p-4 pt-0">
                                  <p className="text-[11px] text-zinc-400 leading-relaxed">
                                    Detected anomaly in the file structure consistent with {marker.toLowerCase().replace('_', ' ')}. 
                                    This may indicate intentional tampering or AI-generated artifacting.
                                  </p>
                                  <div className="mt-3 flex gap-2">
                                    <Button size="sm" variant="outline" className="h-7 text-[9px] border-zinc-700">View Details</Button>
                                    <Button size="sm" variant="outline" className="h-7 text-[9px] border-zinc-700">Run Deep Scan</Button>
                                  </div>
                                </CardContent>
                              </Card>
                            ))}
                          </div>
                        </TabsContent>
                      </div>
                    </Tabs>
                  </motion.div>
                )}
              </AnimatePresence>
              )}
            </div>
          </div>

          {/* Right Panel: AI Assistant Chat */}
          <div className="w-full md:w-[400px] flex flex-col bg-zinc-900 border-l border-zinc-800">
            <div className="p-3 border-b border-zinc-800 flex items-center justify-between bg-zinc-900">
              <select 
                value={selectedModel} 
                onChange={(e) => setSelectedModel(e.target.value)}
                className="bg-zinc-800 border border-zinc-700 rounded px-2 py-1 text-xs font-bold outline-none text-zinc-300"
              >
                <option value="gemini-3-pro">Gemini 3 Pro</option>
                <option value="llama-3-70b">Llama 3 70B</option>
                <option value="claude-3-sonnet">Claude 3.5 Sonnet</option>
              </select>
              <div className="flex gap-2">
                <Button 
                  variant="ghost" 
                  size="icon" 
                  className={cn("h-6 w-6 hover:bg-white/5", showRawSyntax && "bg-primary/20 text-primary")} 
                  onClick={() => setShowRawSyntax(!showRawSyntax)}
                  title="Toggle Raw Syntax"
                >
                  <Code className="w-3 h-3" />
                </Button>
                <Button variant="ghost" size="icon" className="h-6 w-6 hover:bg-white/5" onClick={() => setChatMessages([])}>
                  <Trash2 className="w-3 h-3 text-zinc-500" />
                </Button>
              </div>
            </div>

            <div ref={chatScrollRef} className="flex-1 p-4 overflow-y-auto">
              <div className="space-y-4">
                {chatMessages.map(msg => (
                  <div 
                    key={msg.id} 
                    className={cn(
                      "flex flex-col gap-1 max-w-[95%]",
                      msg.role === 'user' ? "ml-auto items-end" : "items-start"
                    )}
                  >
                    <div className="flex items-center gap-2 px-1">
                      <span className="text-[10px] text-zinc-500 font-mono">{format(msg.timestamp, 'HH:mm:ss.SSS')}</span>
                    </div>
                    <div 
                      className={cn(
                        "p-3 rounded-lg text-sm leading-relaxed break-words overflow-hidden",
                        msg.role === 'user' 
                          ? "bg-primary/10 text-primary border border-primary/20 rounded-tr-none" 
                          : msg.role === 'system'
                            ? "bg-zinc-800 text-zinc-400 border border-zinc-700 italic"
                            : "bg-zinc-800 text-zinc-300 border border-zinc-700 rounded-tl-none"
                      )}
                    >
                      {msg.role === 'assistant' ? (
                        showRawSyntax ? (
                          <pre className="whitespace-pre-wrap break-words font-mono text-xs text-zinc-300">
                            {msg.content}
                          </pre>
                        ) : (
                          <ReactMarkdown
                            remarkPlugins={[remarkGfm]}
                            components={{
                              code({node, inline, className, children, ...props}: any) {
                                const match = /language-(\w+)/.exec(className || '')
                                return !inline && match ? (
                                  <div className="overflow-x-auto max-w-full">
                                    <SyntaxHighlighter
                                      {...props}
                                      children={String(children).replace(/\n$/, '')}
                                      style={vscDarkPlus}
                                      language={match[1]}
                                      PreTag="div"
                                      className="rounded-md border border-zinc-700 !bg-zinc-900 !my-2 text-xs min-w-full"
                                    />
                                  </div>
                                ) : (
                                  <code {...props} className="bg-zinc-900 px-1.5 py-0.5 rounded text-cyan-400 font-mono text-xs break-words">
                                    {children}
                                  </code>
                                )
                              }
                            }}
                          >
                            {msg.content}
                          </ReactMarkdown>
                        )
                      ) : (
                        msg.content
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div className="p-4 border-t border-zinc-800 bg-zinc-900">
              <div className="relative">
                <Textarea 
                  value={chatInput}
                  onChange={(e) => setChatInput(e.target.value)}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter' && !e.shiftKey) {
                      e.preventDefault();
                      handleSendMessage();
                    }
                  }}
                  placeholder="Ask about forensic markers..." 
                  className="min-h-[80px] bg-zinc-950 border-zinc-800 text-xs focus-visible:ring-primary/30 resize-none pr-12"
                />
                <Button 
                  size="icon" 
                  className="absolute bottom-2 right-2 h-8 w-8"
                  onClick={handleSendMessage}
                  disabled={!chatInput.trim()}
                >
                  <ChevronRight className="w-4 h-4" />
                </Button>
              </div>
            </div>
          </div>
        </div>

        {/* Footer Status Bar */}
        <footer className="h-8 border-t border-zinc-800 bg-zinc-900 flex items-center justify-end px-4 text-[10px] uppercase font-bold tracking-widest text-zinc-500">
          <button 
            onClick={() => setIsRegionModalOpen(true)} 
            className="hover:text-zinc-300 flex items-center gap-2 transition-colors"
          >
            <Globe className="w-3 h-3" />
            Region: US-EAST-1
          </button>
        </footer>
      </main>

      {/* Security Modal */}
      <AnimatePresence>
        {isSecurityModalOpen && (
          <motion.div 
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-[200] flex items-center justify-center bg-black/80 backdrop-blur-sm p-4"
            onClick={() => setIsSecurityModalOpen(false)}
          >
            <motion.div 
              initial={{ scale: 0.95, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              exit={{ scale: 0.95, opacity: 0 }}
              onClick={(e) => e.stopPropagation()}
              className="w-full max-w-md bg-zinc-950 border border-zinc-800 rounded-xl shadow-2xl overflow-hidden"
            >
              <div className="p-4 border-b border-zinc-800 flex justify-between items-center bg-zinc-900">
                <h3 className="text-sm font-bold uppercase tracking-widest text-zinc-200 flex items-center gap-2">
                  <Shield className="w-4 h-4" />
                  System Security
                </h3>
                <Button variant="ghost" size="icon" className="h-6 w-6 hover:bg-white/5" onClick={() => setIsSecurityModalOpen(false)}>
                  <X className="w-4 h-4" />
                </Button>
              </div>
              <div className="p-6 space-y-6">
                <div className="flex items-center justify-between p-4 bg-zinc-900 border border-zinc-800 rounded-lg">
                  <span className="text-xs uppercase font-bold text-zinc-400">Security Barometer</span>
                  <div className="flex items-center gap-3">
                    <div className="flex gap-1">
                      {[6,7,8,9,10,11].map(level => (
                        <div key={level} className={cn("w-3 h-6 rounded-sm", level <= securityScore ? (securityScore === 11 ? "bg-green-500" : "bg-yellow-500") : "bg-zinc-800")} />
                      ))}
                    </div>
                    <span className={cn("text-xl font-black", securityScore === 11 ? "text-green-500" : "text-yellow-500")}>{securityScore}</span>
                  </div>
                </div>

                <div className="space-y-3">
                  <h4 className="text-[10px] uppercase font-bold text-zinc-500 tracking-widest">Core Network</h4>
                  <div className="grid grid-cols-2 gap-3">
                    {['sso', 'dns', 'ipv4', 'ipv6'].map((key) => (
                      <button 
                        key={key}
                        onClick={() => setSecurityToggles(p => ({...p, [key]: !p[key as keyof typeof securityToggles]}))}
                        className={cn("flex items-center justify-between p-3 rounded border text-xs font-bold uppercase", securityToggles[key as keyof typeof securityToggles] ? "bg-primary/10 border-primary/30 text-primary" : "bg-zinc-900 border-zinc-800 text-zinc-500 hover:bg-zinc-800")}
                      >
                        {key}
                        <Power className="w-3 h-3" />
                      </button>
                    ))}
                  </div>
                </div>

                <div className="space-y-3">
                  <h4 className="text-[10px] uppercase font-bold text-zinc-500 tracking-widest">Telemetry Hijack / Reject</h4>
                  <div className="grid grid-cols-2 gap-3">
                    {['gstatic', 'linkedin', 'gtag', 'youtube'].map((key) => (
                      <button 
                        key={key}
                        onClick={() => setSecurityToggles(p => ({...p, [key]: !p[key as keyof typeof securityToggles]}))}
                        className={cn("flex items-center justify-between p-3 rounded border text-xs font-bold uppercase", securityToggles[key as keyof typeof securityToggles] ? "bg-red-500/10 border-red-500/30 text-red-400" : "bg-zinc-900 border-zinc-800 text-zinc-500 hover:bg-zinc-800")}
                      >
                        {key}
                        <Power className="w-3 h-3" />
                      </button>
                    ))}
                  </div>
                </div>
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>

      {/* Region Modal */}
      <AnimatePresence>
        {isRegionModalOpen && (
          <motion.div 
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-[200] flex items-center justify-center bg-black/80 backdrop-blur-sm p-4"
            onClick={() => setIsRegionModalOpen(false)}
          >
            <motion.div 
              initial={{ scale: 0.95, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              exit={{ scale: 0.95, opacity: 0 }}
              onClick={(e) => e.stopPropagation()}
              className="w-full max-w-2xl bg-zinc-950 border border-zinc-800 rounded-xl shadow-2xl overflow-hidden flex flex-col"
            >
              <div className="p-4 border-b border-zinc-800 flex justify-between items-center bg-zinc-900">
                <h3 className="text-sm font-bold uppercase tracking-widest text-zinc-200 flex items-center gap-2">
                  <Globe className="w-4 h-4" />
                  Network Routing & DNS
                </h3>
                <Button variant="ghost" size="icon" className="h-6 w-6 hover:bg-white/5" onClick={() => setIsRegionModalOpen(false)}>
                  <X className="w-4 h-4" />
                </Button>
              </div>
              <div className="p-4 bg-black text-green-500 font-mono text-xs h-64 overflow-y-auto space-y-1">
                <p>&gt; netsh interface show interface</p>
                <p className="text-zinc-400">Admin State    State          Type             Interface Name</p>
                <p className="text-zinc-400">-------------------------------------------------------------------------</p>
                <p className="text-zinc-400">Enabled        Connected      Dedicated        Ethernet0</p>
                <p className="text-zinc-400">Enabled        Disconnected   Dedicated        Wi-Fi</p>
                <p className="mt-4">&gt; tracert us-east-1.aws.amazon.com</p>
                <p className="text-zinc-400">Tracing route to us-east-1.aws.amazon.com [52.119.168.48] over a maximum of 30 hops:</p>
                <p className="text-zinc-400">  1    &lt;1 ms    &lt;1 ms    &lt;1 ms  192.168.1.1</p>
                <p className="text-zinc-400">  2     5 ms     4 ms     5 ms  10.11.12.1</p>
                <p className="text-zinc-400">  3    12 ms    11 ms    12 ms  core-router-01.isp.net [198.51.100.1]</p>
                <p className="text-zinc-400">  4    25 ms    24 ms    25 ms  edge-router-east.isp.net [203.0.113.1]</p>
                <p className="text-zinc-400">  5    28 ms    27 ms    28 ms  52.119.168.48</p>
                <p className="text-zinc-400">Trace complete.</p>
                <p className="mt-4 animate-pulse">_</p>
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>

      {/* Upload Modal */}
      <AnimatePresence>
        {isUploadModalOpen && (
          <motion.div 
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-[200] flex items-center justify-center bg-black/80 backdrop-blur-sm p-4"
            onClick={() => setIsUploadModalOpen(false)}
          >
            <motion.div 
              initial={{ scale: 0.95, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              exit={{ scale: 0.95, opacity: 0 }}
              onClick={(e) => e.stopPropagation()}
              className="w-full max-w-xl bg-zinc-950 border border-zinc-800 rounded-2xl shadow-2xl overflow-hidden"
            >
              <div className="p-4 border-b border-zinc-800 flex justify-between items-center bg-zinc-900">
                <h3 className="text-sm font-bold uppercase tracking-widest text-primary">Ingest Evidence</h3>
                <Button variant="ghost" size="icon" className="h-6 w-6 hover:bg-white/5" onClick={() => setIsUploadModalOpen(false)}>
                  <X className="w-4 h-4" />
                </Button>
              </div>
              <div className="p-8">
                <div 
                  {...getRootProps()} 
                  className={cn(
                    "w-full aspect-video border-2 border-dashed rounded-xl flex flex-col items-center justify-center gap-4 transition-all cursor-pointer",
                    isDragActive ? "border-primary bg-primary/5" : "border-zinc-700 hover:border-zinc-600 hover:bg-white/2"
                  )}
                >
                  <input {...getInputProps()} />
                  <div className="p-4 bg-zinc-800 rounded-full border border-zinc-700">
                    <Upload className="w-8 h-8 text-zinc-400" />
                  </div>
                  <div className="text-center">
                    <p className="text-sm font-bold uppercase tracking-wider mb-1">Select File</p>
                    <p className="text-xs text-zinc-500">Drag & drop files or click to browse</p>
                  </div>
                  <div className="flex flex-wrap justify-center gap-2 mt-4">
                    {['.eml', '.mht', '.ts', '.py', '.xml', '.bin'].map(ext => (
                      <Badge key={ext} variant="outline" className="text-[9px] border-zinc-700 bg-zinc-900">{ext}</Badge>
                    ))}
                  </div>
                </div>
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}