import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { ScrollArea } from '@/components/ui/scroll-area';
import { FileSearch, Code, Globe, Terminal, Cpu, Radio, FileText } from 'lucide-react';

export function ForensicTools({ onNavigate }: { onNavigate?: (pageId: string) => void }) {
  return (
    <div className="space-y-4 h-full flex flex-col">
      <Card className="bg-zinc-900 border-zinc-800 flex-1 flex flex-col overflow-hidden">
        <CardHeader className="p-4 border-b border-zinc-800">
          <CardTitle className="text-xs uppercase tracking-widest flex items-center gap-2">
            <FileSearch className="w-4 h-4" />
            Forensic Analysis Modules
          </CardTitle>
        </CardHeader>
        <CardContent className="p-4 flex-1 overflow-y-auto">
          <div className="space-y-3">
            <Button 
              variant="default" 
              className="w-full justify-start gap-3 h-12 bg-primary/20 text-primary hover:bg-primary/30 border border-primary/50"
              onClick={() => onNavigate && onNavigate('dashboard')}
            >
              <FileSearch className="w-5 h-5" />
              <div className="flex flex-col items-start">
                <span className="font-bold uppercase tracking-wider text-xs">Document Analysis</span>
                <span className="text-[9px] opacity-70">Ingest & parse evidence files</span>
              </div>
            </Button>
            
            <div className="grid grid-cols-1 gap-2 pt-4 border-t border-zinc-800">
              <Button 
                variant="outline" 
                className="justify-start gap-3 h-10 border-zinc-700 hover:bg-white/5"
                onClick={() => onNavigate && onNavigate('dashboard')}
              >
                <FileText className="w-4 h-4 text-zinc-400" />
                <span className="text-xs uppercase tracking-wider">Forensic Document MACB</span>
              </Button>
              
              <Button 
                variant="outline" 
                className="justify-start gap-3 h-10 border-zinc-700 hover:bg-white/5"
                onClick={() => onNavigate && onNavigate('dashboard')}
              >
                <Code className="w-4 h-4 text-red-400" />
                <span className="text-xs uppercase tracking-wider">Malicious Code</span>
              </Button>
              
              <Button 
                variant="outline" 
                className="justify-start gap-3 h-10 border-zinc-700 hover:bg-white/5"
                onClick={() => onNavigate && onNavigate('dashboard')}
              >
                <Globe className="w-4 h-4 text-blue-400" />
                <span className="text-xs uppercase tracking-wider">Websites & Artifacts (URL)</span>
              </Button>
              
              <Button 
                variant="outline" 
                className="justify-start gap-3 h-10 border-zinc-700 hover:bg-white/5"
                onClick={() => onNavigate && onNavigate('dashboard')}
              >
                <Terminal className="w-4 h-4 text-green-400" />
                <span className="text-xs uppercase tracking-wider">Source Code Extractor</span>
              </Button>
              
              <Button 
                variant="outline" 
                className="justify-start gap-3 h-10 border-zinc-700 hover:bg-white/5"
                onClick={() => onNavigate && onNavigate('dashboard')}
              >
                <Cpu className="w-4 h-4 text-purple-400" />
                <span className="text-xs uppercase tracking-wider">Syntax Extractor</span>
              </Button>
              
              <Button 
                variant="outline" 
                className="justify-start gap-3 h-10 border-zinc-700 hover:bg-white/5"
                onClick={() => onNavigate && onNavigate('dashboard')}
              >
                <FileSearch className="w-4 h-4 text-yellow-400" />
                <span className="text-xs uppercase tracking-wider">Schematic Extractor</span>
              </Button>

              <Button 
                variant="outline" 
                className="justify-start gap-3 h-10 border-zinc-700 hover:bg-white/5 mt-4 border-l-4 border-l-cyan-500"
                onClick={() => onNavigate && onNavigate('frequency')}
              >
                <Radio className="w-4 h-4 text-cyan-400" />
                <span className="text-xs uppercase tracking-wider font-bold text-cyan-400">Frequency Tuner</span>
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}