import React from 'react';
import { InvestigationCase, ThreatCategory, ThreatLevel } from '../types/forensics';
import { 
  ShieldAlert, 
  Flame, 
  Search, 
  Filter, 
  Clock, 
  AlertOctagon, 
  ChevronRight, 
  CheckCircle2,
  DollarSign,
  Activity
} from 'lucide-react';

interface CaseListProps {
  cases: InvestigationCase[];
  selectedCaseId: string;
  onSelectCase: (id: string) => void;
  searchQuery: string;
  setSearchQuery: (query: string) => void;
  categoryFilter: string;
  setCategoryFilter: (cat: string) => void;
  threatFilter: string;
  setThreatFilter: (lvl: string) => void;
}

export const CaseList: React.FC<CaseListProps> = ({
  cases,
  selectedCaseId,
  onSelectCase,
  searchQuery,
  setSearchQuery,
  categoryFilter,
  setCategoryFilter,
  threatFilter,
  setThreatFilter,
}) => {
  const filteredCases = cases.filter(c => {
    const matchesSearch = 
      c.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      c.id.toLowerCase().includes(searchQuery.toLowerCase()) ||
      c.entityTarget.primaryAlias.toLowerCase().includes(searchQuery.toLowerCase()) ||
      c.networkTelemetry.claimedGeo.ip.includes(searchQuery) ||
      (c.entityTarget.walletAddress && c.entityTarget.walletAddress.toLowerCase().includes(searchQuery.toLowerCase()));

    const matchesCategory = categoryFilter === 'ALL' || c.category === categoryFilter;
    const matchesThreat = threatFilter === 'ALL' || c.threatLevel === threatFilter;

    return matchesSearch && matchesCategory && matchesThreat;
  });

  const getThreatBadge = (level: ThreatLevel) => {
    switch (level) {
      case 'CRITICAL':
        return <span className="bg-rose-950/80 text-rose-300 border border-rose-700/60 text-[10px] font-mono px-1.5 py-0.5 rounded font-bold">CRITICAL</span>;
      case 'HIGH':
        return <span className="bg-amber-950/80 text-amber-300 border border-amber-700/60 text-[10px] font-mono px-1.5 py-0.5 rounded font-bold">HIGH</span>;
      case 'ELEVATED':
        return <span className="bg-blue-950/80 text-blue-300 border border-blue-700/60 text-[10px] font-mono px-1.5 py-0.5 rounded font-bold">ELEVATED</span>;
      default:
        return <span className="bg-slate-800 text-slate-300 border border-slate-700 text-[10px] font-mono px-1.5 py-0.5 rounded">GUARDED</span>;
    }
  };

  const getTrustScoreColor = (score: number) => {
    if (score < 20) return 'text-rose-400 bg-rose-950/60 border-rose-800/80';
    if (score < 50) return 'text-amber-400 bg-amber-950/60 border-amber-800/80';
    return 'text-emerald-400 bg-emerald-950/60 border-emerald-800/80';
  };

  return (
    <div className="flex flex-col h-full bg-[#0d131f] border-r border-slate-800 text-slate-100 overflow-hidden w-full md:w-80 lg:w-96 shrink-0 select-none">
      {/* Search Bar */}
      <div className="p-3 border-b border-slate-800 bg-slate-900/80 space-y-2 shrink-0">
        <div className="relative">
          <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
          <input
            type="text"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            placeholder="Filter by IP, hash, wallet, alias..."
            className="w-full bg-slate-950 border border-slate-800 pl-9 pr-3 py-1.5 rounded text-xs font-mono text-slate-200 placeholder-slate-500 focus:outline-none focus:border-cyan-500 transition-colors"
          />
          {searchQuery && (
            <button 
              onClick={() => setSearchQuery('')}
              className="absolute right-2.5 top-1/2 -translate-y-1/2 text-slate-500 hover:text-slate-300 text-xs"
            >
              ✕
            </button>
          )}
        </div>

        {/* Filter Pills */}
        <div className="flex items-center gap-1.5 overflow-x-auto pb-1 text-[11px] scrollbar-none">
          <button
            onClick={() => setCategoryFilter('ALL')}
            className={`px-2 py-0.5 rounded font-medium transition-all shrink-0 cursor-pointer ${
              categoryFilter === 'ALL'
                ? 'bg-cyan-500 text-slate-950 font-bold'
                : 'bg-slate-800 text-slate-400 hover:text-slate-200'
            }`}
          >
            All
          </button>
          <button
            onClick={() => setCategoryFilter('COUNTER_TERRORISM')}
            className={`px-2 py-0.5 rounded font-medium transition-all shrink-0 cursor-pointer ${
              categoryFilter === 'COUNTER_TERRORISM'
                ? 'bg-rose-600 text-white font-bold'
                : 'bg-slate-800 text-slate-400 hover:text-slate-200'
            }`}
          >
            Terrorism
          </button>
          <button
            onClick={() => setCategoryFilter('FINANCIAL_FRAUD')}
            className={`px-2 py-0.5 rounded font-medium transition-all shrink-0 cursor-pointer ${
              categoryFilter === 'FINANCIAL_FRAUD'
                ? 'bg-emerald-600 text-white font-bold'
                : 'bg-slate-800 text-slate-400 hover:text-slate-200'
            }`}
          >
            Fraud
          </button>
          <button
            onClick={() => setCategoryFilter('EVASION_NETWORK')}
            className={`px-2 py-0.5 rounded font-medium transition-all shrink-0 cursor-pointer ${
              categoryFilter === 'EVASION_NETWORK'
                ? 'bg-amber-600 text-white font-bold'
                : 'bg-slate-800 text-slate-400 hover:text-slate-200'
            }`}
          >
            Evasion
          </button>
        </div>
      </div>

      {/* Case List Scroll Area */}
      <div className="flex-1 overflow-y-auto divide-y divide-slate-800/60 p-1.5 space-y-1">
        {filteredCases.length === 0 ? (
          <div className="p-6 text-center text-slate-500 text-xs">
            No dockets matching criteria.
          </div>
        ) : (
          filteredCases.map((c) => {
            const isSelected = c.id === selectedCaseId;
            return (
              <div
                key={c.id}
                onClick={() => onSelectCase(c.id)}
                className={`p-3 rounded-lg cursor-pointer transition-all border ${
                  isSelected
                    ? 'bg-slate-800/95 border-cyan-500/80 shadow-md shadow-cyan-950/50'
                    : 'bg-slate-900/40 border-transparent hover:bg-slate-800/50 hover:border-slate-800'
                }`}
              >
                <div className="flex items-center justify-between gap-2 mb-1.5">
                  <div className="flex items-center gap-1.5">
                    <span className="text-[10px] font-mono text-cyan-400 font-semibold">{c.id}</span>
                    {getThreatBadge(c.threatLevel)}
                  </div>

                  <div className={`text-[10px] font-mono px-1.5 py-0.5 rounded border ${getTrustScoreColor(c.compositeTrustScore)}`}>
                    Trust: <span className="font-bold">{c.compositeTrustScore}</span>/100
                  </div>
                </div>

                <div className="font-semibold text-xs text-slate-200 line-clamp-1 mb-1">
                  {c.title}
                </div>

                <div className="flex items-center justify-between text-[11px] text-slate-400 font-mono mt-2">
                  <span className="truncate max-w-[150px]">{c.entityTarget.primaryAlias}</span>
                  <span className="text-slate-500">{c.networkTelemetry.claimedGeo.ip}</span>
                </div>

                {/* Quick tags */}
                <div className="flex flex-wrap items-center gap-1 mt-2">
                  {c.statutoryMatrix.euTcoReg2021_784 && (
                    <span className="text-[9px] font-mono bg-rose-950/60 border border-rose-800/50 text-rose-300 px-1 py-0.2 rounded font-bold">
                      TCO 1-HR
                    </span>
                  )}
                  {c.financialLedger.detectedStructuring && (
                    <span className="text-[9px] font-mono bg-emerald-950/60 border border-emerald-800/50 text-emerald-300 px-1 py-0.2 rounded font-semibold">
                      BSA SMURFING
                    </span>
                  )}
                  {c.networkTelemetry.bgpAnycast.speedOfLightViolation && (
                    <span className="text-[9px] font-mono bg-amber-950/60 border border-amber-800/50 text-amber-300 px-1 py-0.2 rounded">
                      BGP VIOLATION
                    </span>
                  )}
                  {c.statutoryMatrix.gifctTier === 'TIER_1' && (
                    <span className="text-[9px] font-mono bg-indigo-950/60 border border-indigo-800/50 text-indigo-300 px-1 py-0.2 rounded">
                      GIFCT-T1
                    </span>
                  )}
                </div>
              </div>
            );
          })
        )}
      </div>

      {/* Docket Count Footer */}
      <div className="p-2 border-t border-slate-800 bg-slate-900 text-[11px] text-slate-400 font-mono flex justify-between items-center shrink-0">
        <span>Showing {filteredCases.length} of {cases.length} Dockets</span>
        <span className="text-cyan-400 font-bold">SENTINEL-ONLINE</span>
      </div>
    </div>
  );
};