import React, { useState } from 'react';
import { InvestigationCase } from '../../types/forensics';
import { 
  ShieldAlert, 
  User, 
  Globe, 
  CreditCard, 
  FileText, 
  AlertTriangle, 
  CheckCircle2, 
  Clock, 
  Send, 
  Download, 
  Scale, 
  Zap,
  Lock,
  Flame,
  ArrowRight
} from 'lucide-react';

interface OverviewTabProps {
  currentCase: InvestigationCase;
  onUpdateStatus: (caseId: string, newStatus: any, actionNote: string) => void;
  onNavigateToTab: (tabKey: string) => void;
}

export const OverviewTab: React.FC<OverviewTabProps> = ({
  currentCase,
  onUpdateStatus,
  onNavigateToTab,
}) => {
  const [actionSuccess, setActionSuccess] = useState<string | null>(null);

  const handleQuickAction = (actionType: string) => {
    let newStatus = currentCase.status;
    let note = '';

    if (actionType === 'FREEZE') {
      newStatus = 'ASSETS_FROZEN';
      note = 'Emergency Asset Freeze executed on all linked crypto addresses and merchant gateways.';
    } else if (actionType === 'TCO_TAKEDOWN') {
      newStatus = 'TCO_DISPATCHED';
      note = 'EU TCO Regulation (EU) 2021/784 1-Hour mandatory takedown order broadcast to edge CDN.';
    } else if (actionType === 'SAR_FILE') {
      newStatus = 'FLAGGED_SAR';
      note = 'Formal FinCEN Suspicious Activity Report (SAR) narrative dispatched to FIU queue.';
    } else if (actionType === 'RESOLVE') {
      newStatus = 'RESOLVED';
      note = 'Investigation concluded and disposition recorded in chain-of-custody.';
    }

    onUpdateStatus(currentCase.id, newStatus, note);
    setActionSuccess(`Action "${actionType}" successfully applied to ${currentCase.id}`);
    setTimeout(() => setActionSuccess(null), 4000);
  };

  return (
    <div className="space-y-4 p-4 text-slate-100">
      {/* Toast Notification */}
      {actionSuccess && (
        <div className="bg-emerald-950/90 border border-emerald-500 text-emerald-200 px-4 py-2.5 rounded-lg flex items-center justify-between shadow-lg animate-fade-in">
          <div className="flex items-center gap-2 text-xs font-mono">
            <CheckCircle2 className="w-4 h-4 text-emerald-400" />
            <span>{actionSuccess}</span>
          </div>
        </div>
      )}

      {/* Top Banner: Threat Category & Composite Trust Score */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-3">
        {/* Executive Summary Card */}
        <div className="lg:col-span-2 bg-slate-900/80 border border-slate-800 rounded-xl p-4 shadow-md space-y-2">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <span className="text-xs font-mono text-cyan-400 font-bold tracking-wider">{currentCase.id}</span>
              <span className="text-[11px] font-mono px-2 py-0.5 rounded bg-slate-800 text-slate-300 font-medium">
                {currentCase.category.replace('_', ' ')}
              </span>
              <span className="text-[11px] font-mono px-2 py-0.5 rounded bg-rose-950 text-rose-300 border border-rose-800/80 font-bold">
                {currentCase.threatLevel} THREAT
              </span>
            </div>
            <span className="text-xs text-slate-400 font-mono">Status: <strong className="text-cyan-300">{currentCase.status}</strong></span>
          </div>

          <h2 className="text-base font-bold text-slate-100">{currentCase.title}</h2>
          <p className="text-xs text-slate-300 leading-relaxed bg-slate-950/50 p-3 rounded-lg border border-slate-800/80">
            {currentCase.executiveSummary}
          </p>

          <div className="flex flex-wrap items-center justify-between text-xs text-slate-400 pt-1 font-mono">
            <span>Lead: <strong className="text-slate-200">{currentCase.assignedAnalyst}</strong></span>
            <span>Created: {currentCase.createdDate}</span>
            <span>Updated: {currentCase.updatedDate}</span>
          </div>
        </div>

        {/* Composite Trust Score Gauge */}
        <div className="bg-slate-900/80 border border-slate-800 rounded-xl p-4 shadow-md flex flex-col justify-between">
          <div className="flex items-center justify-between text-xs text-slate-400">
            <span className="font-semibold uppercase tracking-wider text-[11px]">Composite Trust Score</span>
            <ShieldAlert className="w-4 h-4 text-rose-400" />
          </div>

          <div className="my-3 text-center">
            <div className="text-4xl font-extrabold font-mono text-rose-400 tracking-tight">
              {currentCase.compositeTrustScore}<span className="text-lg text-slate-500">/100</span>
            </div>
            <div className="text-[11px] font-mono font-bold text-rose-300 uppercase mt-1">
              Critical Risk Anomaly
            </div>
            <div className="w-full bg-slate-950 rounded-full h-2 mt-2 border border-slate-800 overflow-hidden">
              <div 
                className="bg-gradient-to-r from-rose-500 via-amber-500 to-emerald-500 h-full rounded-full transition-all duration-500"
                style={{ width: `${currentCase.compositeTrustScore}%` }}
              />
            </div>
          </div>

          <div className="text-[10px] text-slate-400 space-y-1 font-mono border-t border-slate-800/80 pt-2">
            <div className="flex justify-between">
              <span>BGP Anycast Physics:</span>
              <span className={currentCase.networkTelemetry.bgpAnycast.speedOfLightViolation ? 'text-rose-400 font-bold' : 'text-emerald-400'}>
                {currentCase.networkTelemetry.bgpAnycast.speedOfLightViolation ? 'Speed-of-Light Violation' : 'Nominal'}
              </span>
            </div>
            <div className="flex justify-between">
              <span>TLS / Engine Anomaly:</span>
              <span className={currentCase.networkTelemetry.tlsFingerprint.isKnownEvasionStack ? 'text-rose-400 font-bold' : 'text-emerald-400'}>
                {currentCase.networkTelemetry.tlsFingerprint.isKnownEvasionStack ? 'Known Evasion Stack' : 'Clean'}
              </span>
            </div>
            <div className="flex justify-between">
              <span>BSA Structuring:</span>
              <span className={currentCase.financialLedger.detectedStructuring ? 'text-rose-400 font-bold' : 'text-emerald-400'}>
                {currentCase.financialLedger.detectedStructuring ? 'Smurfing Detected' : 'None'}
              </span>
            </div>
          </div>
        </div>
      </div>

      {/* Target Entity Dossier & Key Attributes */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
        {/* Entity Card */}
        <div className="bg-slate-900/60 border border-slate-800 rounded-xl p-3.5 space-y-2">
          <div className="flex items-center gap-2 text-xs font-semibold text-slate-300 border-b border-slate-800 pb-2">
            <User className="w-4 h-4 text-cyan-400" />
            <span>Target Profile & Identity</span>
          </div>

          <div className="text-xs space-y-1.5 font-mono">
            <div>
              <span className="text-slate-500 block text-[10px]">PRIMARY ALIAS / HANDLE</span>
              <span className="text-cyan-300 font-bold">{currentCase.entityTarget.primaryAlias}</span>
            </div>
            {currentCase.entityTarget.legalName && (
              <div>
                <span className="text-slate-500 block text-[10px]">LEGAL / SUSPECT PROFILE</span>
                <span className="text-slate-200">{currentCase.entityTarget.legalName}</span>
              </div>
            )}
            <div>
              <span className="text-slate-500 block text-[10px]">ENTITY TYPE</span>
              <span className="text-indigo-300 font-semibold">{currentCase.entityTarget.entityType}</span>
            </div>
            {currentCase.entityTarget.associatedEmails.length > 0 && (
              <div>
                <span className="text-slate-500 block text-[10px]">ASSOCIATED EMAILS</span>
                <span className="text-slate-300 text-[11px] break-all">{currentCase.entityTarget.associatedEmails.join(', ')}</span>
              </div>
            )}
          </div>
        </div>

        {/* Network & Physical Egress Card */}
        <div className="bg-slate-900/60 border border-slate-800 rounded-xl p-3.5 space-y-2">
          <div className="flex items-center justify-between text-xs font-semibold text-slate-300 border-b border-slate-800 pb-2">
            <div className="flex items-center gap-2">
              <Globe className="w-4 h-4 text-amber-400" />
              <span>Network & Geolocation</span>
            </div>
            <button 
              onClick={() => onNavigateToTab('network')}
              className="text-[10px] text-cyan-400 hover:underline flex items-center gap-0.5 cursor-pointer"
            >
              Forensics <ArrowRight className="w-3 h-3" />
            </button>
          </div>

          <div className="text-xs space-y-1.5 font-mono">
            <div>
              <span className="text-slate-500 block text-[10px]">CLAIMED IP & GEO</span>
              <span className="text-amber-300">{currentCase.networkTelemetry.claimedGeo.ip}</span>
              <span className="text-slate-400 block text-[11px]">{currentCase.networkTelemetry.claimedGeo.city}, {currentCase.networkTelemetry.claimedGeo.country}</span>
            </div>
            <div>
              <span className="text-slate-500 block text-[10px]">ASN & INFRASTRUCTURE</span>
              <span className="text-slate-200">{currentCase.networkTelemetry.claimedGeo.asn} ({currentCase.networkTelemetry.claimedGeo.isp})</span>
            </div>
            <div>
              <span className="text-slate-500 block text-[10px]">TRUE PHYSICAL TRIANGULATION</span>
              <span className="text-rose-400 font-bold text-[11px] block">{currentCase.networkTelemetry.bgpAnycast.physicalOriginInference}</span>
            </div>
          </div>
        </div>

        {/* Financial Flow Card */}
        <div className="bg-slate-900/60 border border-slate-800 rounded-xl p-3.5 space-y-2">
          <div className="flex items-center justify-between text-xs font-semibold text-slate-300 border-b border-slate-800 pb-2">
            <div className="flex items-center gap-2">
              <CreditCard className="w-4 h-4 text-emerald-400" />
              <span>Financial & Laundering Rails</span>
            </div>
            <button 
              onClick={() => onNavigateToTab('financial')}
              className="text-[10px] text-emerald-400 hover:underline flex items-center gap-0.5 cursor-pointer"
            >
              Trace <ArrowRight className="w-3 h-3" />
            </button>
          </div>

          <div className="text-xs space-y-1.5 font-mono">
            <div>
              <span className="text-slate-500 block text-[10px]">TOTAL INTERCEPTED VOLUME</span>
              <span className="text-emerald-300 font-bold text-sm">
                ${currentCase.financialLedger.totalVolumeUsd.toLocaleString()} USD
              </span>
            </div>
            {currentCase.entityTarget.walletAddress && (
              <div>
                <span className="text-slate-500 block text-[10px]">PRIMARY WALLET</span>
                <span className="text-cyan-300 text-[10px] break-all block">{currentCase.entityTarget.walletAddress}</span>
              </div>
            )}
            <div>
              <span className="text-slate-500 block text-[10px]">SANCTIONS & WATCHLISTS</span>
              <span className={currentCase.financialLedger.sanctionsHits.length > 0 ? 'text-rose-400 font-bold' : 'text-slate-400'}>
                {currentCase.financialLedger.sanctionsHits.join(', ') || 'Clean on initial OFAC query'}
              </span>
            </div>
          </div>
        </div>
      </div>

      {/* Rapid Action Disposition Bar */}
      <div className="bg-slate-900/90 border border-slate-800 rounded-xl p-4 shadow-md space-y-3">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2 text-xs font-bold text-slate-200">
            <Zap className="w-4 h-4 text-cyan-400" />
            <span>OPERATIONAL ENFORCEMENT & DISPOSITION WORKFLOW</span>
          </div>
          <span className="text-[11px] text-slate-400 font-mono">Chain of Custody ID: {currentCase.id}-CUSTODY</span>
        </div>

        <div className="grid grid-cols-2 sm:grid-cols-4 gap-2.5">
          <button
            onClick={() => handleQuickAction('FREEZE')}
            className="flex flex-col items-center justify-center p-3 rounded-lg bg-rose-950/70 hover:bg-rose-900 border border-rose-700/80 text-rose-200 transition-all cursor-pointer group shadow-sm"
          >
            <Lock className="w-5 h-5 text-rose-400 mb-1 group-hover:scale-110 transition-transform" />
            <span className="text-xs font-bold font-mono">Freeze Financial Rails</span>
            <span className="text-[10px] text-rose-300/70">AML / Sanctions Block</span>
          </button>

          <button
            onClick={() => handleQuickAction('TCO_TAKEDOWN')}
            className="flex flex-col items-center justify-center p-3 rounded-lg bg-amber-950/70 hover:bg-amber-900 border border-amber-700/80 text-amber-200 transition-all cursor-pointer group shadow-sm"
          >
            <Flame className="w-5 h-5 text-amber-400 mb-1 group-hover:scale-110 transition-transform" />
            <span className="text-xs font-bold font-mono">TCO 1-Hr Takedown</span>
            <span className="text-[10px] text-amber-300/70">Reg (EU) 2021/784</span>
          </button>

          <button
            onClick={() => handleQuickAction('SAR_FILE')}
            className="flex flex-col items-center justify-center p-3 rounded-lg bg-indigo-950/70 hover:bg-indigo-900 border border-indigo-700/80 text-indigo-200 transition-all cursor-pointer group shadow-sm"
          >
            <FileText className="w-5 h-5 text-indigo-400 mb-1 group-hover:scale-110 transition-transform" />
            <span className="text-xs font-bold font-mono">Generate FinCEN SAR</span>
            <span className="text-[10px] text-indigo-300/70">BSA / FIU Electronic Filing</span>
          </button>

          <button
            onClick={() => handleQuickAction('RESOLVE')}
            className="flex flex-col items-center justify-center p-3 rounded-lg bg-emerald-950/70 hover:bg-emerald-900 border border-emerald-700/80 text-emerald-200 transition-all cursor-pointer group shadow-sm"
          >
            <CheckCircle2 className="w-5 h-5 text-emerald-400 mb-1 group-hover:scale-110 transition-transform" />
            <span className="text-xs font-bold font-mono">Mark Disposed</span>
            <span className="text-[10px] text-emerald-300/70">Archive to Case Vault</span>
          </button>
        </div>
      </div>

      {/* Incident Timeline & Evidence Locker */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
        {/* Timeline */}
        <div className="bg-slate-900/70 border border-slate-800 rounded-xl p-3.5 space-y-3">
          <div className="flex items-center justify-between text-xs font-semibold text-slate-300 border-b border-slate-800 pb-2">
            <div className="flex items-center gap-2">
              <Clock className="w-4 h-4 text-cyan-400" />
              <span>Forensic Incident Timeline</span>
            </div>
            <span className="text-[10px] font-mono text-slate-500">{currentCase.timeline.length} Events</span>
          </div>

          <div className="space-y-2.5 max-h-60 overflow-y-auto pr-1">
            {currentCase.timeline.map((item, idx) => (
              <div key={idx} className="flex items-start gap-2.5 text-xs font-mono">
                <div className={`w-2 h-2 rounded-full mt-1 shrink-0 ${
                  item.severity === 'CRITICAL' ? 'bg-rose-500 animate-pulse' :
                  item.severity === 'WARN' ? 'bg-amber-400' : 'bg-cyan-400'
                }`} />
                <div className="flex-1">
                  <div className="flex items-center justify-between text-[10px] text-slate-400">
                    <span className="font-semibold text-slate-300">{item.timestamp}</span>
                    <span className="text-slate-500">{item.actor}</span>
                  </div>
                  <p className="text-slate-300 text-[11px] mt-0.5">{item.event}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Evidence Locker */}
        <div className="bg-slate-900/70 border border-slate-800 rounded-xl p-3.5 space-y-3">
          <div className="flex items-center justify-between text-xs font-semibold text-slate-300 border-b border-slate-800 pb-2">
            <div className="flex items-center gap-2">
              <FileText className="w-4 h-4 text-indigo-400" />
              <span>Evidence Locker & Hashes</span>
            </div>
            <span className="text-[10px] font-mono text-slate-500">{currentCase.evidenceFiles.length} Artifacts</span>
          </div>

          <div className="space-y-2 max-h-60 overflow-y-auto pr-1">
            {currentCase.evidenceFiles.map((file) => (
              <div key={file.id} className="bg-slate-950/60 border border-slate-800/80 rounded p-2 text-xs font-mono space-y-1">
                <div className="flex items-center justify-between">
                  <span className="font-semibold text-indigo-300">{file.name}</span>
                  <span className="text-[10px] text-slate-400">{file.fileSize} • {file.fileType}</span>
                </div>
                <div className="text-[10px] text-slate-500 break-all">
                  SHA-256: <span className="text-slate-400">{file.sha256Hash}</span>
                </div>
                <div className="flex items-center justify-between text-[10px] pt-0.5">
                  <span className="text-slate-300">{file.summary}</span>
                  {file.gifctMatch && (
                    <span className="bg-rose-950 text-rose-300 border border-rose-800 px-1.5 py-0.5 rounded font-bold shrink-0 ml-2">
                      GIFCT MATCH
                    </span>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};