import React from 'react';
import { InvestigationCase } from '../types/forensics';
import { 
  ShieldAlert, 
  DollarSign, 
  Clock, 
  Globe, 
  FileCheck2, 
  Zap, 
  AlertTriangle 
} from 'lucide-react';

interface MetricsOverviewProps {
  cases: InvestigationCase[];
  selectedCategory: string;
  onSelectCategory: (cat: string) => void;
}

export const MetricsOverview: React.FC<MetricsOverviewProps> = ({
  cases,
  selectedCategory,
  onSelectCategory,
}) => {
  const totalVolume = cases.reduce((acc, c) => acc + c.financialLedger.totalVolumeUsd, 0);
  const criticalCount = cases.filter(c => c.threatLevel === 'CRITICAL').length;
  const tcoCount = cases.filter(c => c.statutoryMatrix.euTcoReg2021_784).length;
  const bgpAnomalies = cases.filter(c => c.networkTelemetry.bgpAnycast.speedOfLightViolation).length;
  const gifctCount = cases.filter(c => c.statutoryMatrix.gifctTier !== 'NONE').length;

  return (
    <div className="grid grid-cols-2 md:grid-cols-5 gap-2.5 p-3 bg-slate-900/60 border-b border-slate-800 text-slate-100">
      {/* Metric 1: Active Dockets */}
      <div 
        onClick={() => onSelectCategory('ALL')}
        className={`p-2.5 rounded-lg border transition-all cursor-pointer ${
          selectedCategory === 'ALL'
            ? 'bg-slate-800 border-cyan-500/60 shadow-sm shadow-cyan-500/10'
            : 'bg-slate-900/80 border-slate-800 hover:border-slate-700'
        }`}
      >
        <div className="flex items-center justify-between text-slate-400 text-xs mb-1">
          <span className="font-semibold text-[11px] uppercase tracking-wider">Active Dockets</span>
          <ShieldAlert className="w-4 h-4 text-cyan-400" />
        </div>
        <div className="flex items-baseline gap-2">
          <span className="text-xl font-extrabold font-mono text-cyan-300">{cases.length}</span>
          <span className="text-[10px] text-rose-400 font-mono font-semibold">({criticalCount} Critical)</span>
        </div>
        <div className="text-[10px] text-slate-500 mt-0.5">Counter-Terror & Fraud Queue</div>
      </div>

      {/* Metric 2: Intercepted Illicit Flow */}
      <div 
        onClick={() => onSelectCategory('FINANCIAL_FRAUD')}
        className={`p-2.5 rounded-lg border transition-all cursor-pointer ${
          selectedCategory === 'FINANCIAL_FRAUD'
            ? 'bg-slate-800 border-emerald-500/60 shadow-sm shadow-emerald-500/10'
            : 'bg-slate-900/80 border-slate-800 hover:border-slate-700'
        }`}
      >
        <div className="flex items-center justify-between text-slate-400 text-xs mb-1">
          <span className="font-semibold text-[11px] uppercase tracking-wider">Laundering / Smurfing</span>
          <DollarSign className="w-4 h-4 text-emerald-400" />
        </div>
        <div className="flex items-baseline gap-1">
          <span className="text-xl font-extrabold font-mono text-emerald-300">
            ${(totalVolume / 1000000).toFixed(1)}M
          </span>
          <span className="text-[10px] text-slate-400 font-mono">USD</span>
        </div>
        <div className="text-[10px] text-emerald-400/80 mt-0.5 font-mono">BSA Structuring & Mixers</div>
      </div>

      {/* Metric 3: TCO 1-Hour Removal Trigger */}
      <div 
        onClick={() => onSelectCategory('COUNTER_TERRORISM')}
        className={`p-2.5 rounded-lg border transition-all cursor-pointer ${
          selectedCategory === 'COUNTER_TERRORISM'
            ? 'bg-slate-800 border-rose-500/60 shadow-sm shadow-rose-500/10'
            : 'bg-slate-900/80 border-slate-800 hover:border-slate-700'
        }`}
      >
        <div className="flex items-center justify-between text-slate-400 text-xs mb-1">
          <span className="font-semibold text-[11px] uppercase tracking-wider">EU TCO 1-Hr Mandate</span>
          <Clock className="w-4 h-4 text-rose-400 animate-pulse" />
        </div>
        <div className="flex items-baseline gap-2">
          <span className="text-xl font-extrabold font-mono text-rose-300">{tcoCount}</span>
          <span className="text-[10px] text-rose-400 font-mono bg-rose-950/80 px-1.5 py-0.5 rounded border border-rose-800/60 font-bold">
            1-Hr Active
          </span>
        </div>
        <div className="text-[10px] text-slate-500 mt-0.5">Reg (EU) 2021/784 Orders</div>
      </div>

      {/* Metric 4: BGP Speed-of-Light Anomalies */}
      <div 
        onClick={() => onSelectCategory('EVASION_NETWORK')}
        className={`p-2.5 rounded-lg border transition-all cursor-pointer ${
          selectedCategory === 'EVASION_NETWORK'
            ? 'bg-slate-800 border-amber-500/60 shadow-sm shadow-amber-500/10'
            : 'bg-slate-900/80 border-slate-800 hover:border-slate-700'
        }`}
      >
        <div className="flex items-center justify-between text-slate-400 text-xs mb-1">
          <span className="font-semibold text-[11px] uppercase tracking-wider">BGP Anycast Overrides</span>
          <Globe className="w-4 h-4 text-amber-400" />
        </div>
        <div className="flex items-baseline gap-2">
          <span className="text-xl font-extrabold font-mono text-amber-300">{bgpAnomalies}</span>
          <span className="text-[10px] text-amber-400 font-mono">Proxy Busted</span>
        </div>
        <div className="text-[10px] text-slate-500 mt-0.5 font-mono">t ≥ 2d/(c·⅔) Physics Check</div>
      </div>

      {/* Metric 5: GIFCT Tier-1 Hashes */}
      <div 
        className="p-2.5 rounded-lg border bg-slate-900/80 border-slate-800 hover:border-slate-700 transition-all cursor-pointer col-span-2 md:col-span-1"
      >
        <div className="flex items-center justify-between text-slate-400 text-xs mb-1">
          <span className="font-semibold text-[11px] uppercase tracking-wider">GIFCT Hash Locks</span>
          <FileCheck2 className="w-4 h-4 text-indigo-400" />
        </div>
        <div className="flex items-baseline gap-2">
          <span className="text-xl font-extrabold font-mono text-indigo-300">{gifctCount}</span>
          <span className="text-[10px] text-indigo-400 font-mono font-semibold">Tier 1 & 2</span>
        </div>
        <div className="text-[10px] text-slate-500 mt-0.5 font-mono">Perceptual Media Sync</div>
      </div>
    </div>
  );
};