import React, { useState, useMemo } from 'react';
import { InvestigationCase } from '../../types/forensics';
import { 
  BlockchainNetwork, 
  AddressCluster, 
  OnChainTransaction, 
  PeelingHop, 
  MixerDeanonymization 
} from '../../types/cryptoTracer';
import { 
  TRACER_ADDRESS_CLUSTERS, 
  ONCHAIN_TRANSACTIONS, 
  PEELING_CHAIN_TRACE, 
  MIXER_DEANONYMIZATION_SAMPLE 
} from '../../data/cryptoTracerData';
import { FINCEN_SAR_DATABASE } from '../../data/fincenSarData';
import { FincenSarModal } from '../modals/FincenSarModal';
import { 
  Search, 
  ShieldAlert, 
  GitFork, 
  Layers, 
  Activity, 
  AlertOctagon, 
  ExternalLink, 
  Download, 
  Copy, 
  Check, 
  FileText, 
  Zap, 
  ArrowRight, 
  ArrowUpRight, 
  Lock, 
  CheckCircle2, 
  Scale, 
  RefreshCw,
  Filter,
  DollarSign
} from 'lucide-react';

interface CryptoTracerTabProps {
  currentCase: InvestigationCase;
  onNavigateToWorkbook?: () => void;
  onNavigateToStatutory?: () => void;
}

export const CryptoTracerTab: React.FC<CryptoTracerTabProps> = ({
  currentCase,
  onNavigateToWorkbook,
  onNavigateToStatutory,
}) => {
  // Active search address
  const [searchAddress, setSearchAddress] = useState<string>(
    TRACER_ADDRESS_CLUSTERS[0].address
  );
  const [selectedChain, setSelectedChain] = useState<BlockchainNetwork | 'ALL'>('ALL');
  const [hopDepth, setHopDepth] = useState<number>(3);
  const [sanctionedOnly, setSanctionedOnly] = useState<boolean>(false);
  const [activeSubView, setActiveSubView] = useState<'FLOW_GRAPH' | 'PEELING_CHAIN' | 'MIXER_DEANONYMIZER' | 'TX_LEDGER'>('FLOW_GRAPH');
  
  // Selected Cluster & Tx
  const [selectedClusterAddress, setSelectedClusterAddress] = useState<string>(TRACER_ADDRESS_CLUSTERS[0].address);
  const [selectedTxHash, setSelectedTxHash] = useState<string | null>(null);
  
  // FinCEN SAR Modal state
  const [isSarModalOpen, setIsSarModalOpen] = useState(false);
  const [sarModalBsanId, setSarModalBsanId] = useState<string | null>(null);
  const [copiedProof, setCopiedProof] = useState(false);

  // Active Cluster Object
  const currentCluster: AddressCluster = useMemo(() => {
    return (
      TRACER_ADDRESS_CLUSTERS.find(c => c.address.toLowerCase() === selectedClusterAddress.toLowerCase()) ||
      TRACER_ADDRESS_CLUSTERS[0]
    );
  }, [selectedClusterAddress]);

  // Filtered Clusters
  const displayedClusters = useMemo(() => {
    return TRACER_ADDRESS_CLUSTERS.filter(c => {
      if (selectedChain !== 'ALL' && c.chain !== selectedChain) return false;
      if (sanctionedOnly && !c.isSanctioned && c.clusterType !== 'MIXER_POOL') return false;
      return true;
    });
  }, [selectedChain, sanctionedOnly]);

  // Filtered Transactions
  const displayedTransactions = useMemo(() => {
    return ONCHAIN_TRANSACTIONS.filter(tx => {
      if (selectedChain !== 'ALL' && tx.chain !== selectedChain) return false;
      return true;
    });
  }, [selectedChain]);

  // Associated FinCEN SARs
  const associatedSars = useMemo(() => {
    return FINCEN_SAR_DATABASE.filter(sar => {
      return (
        sar.associatedCaseId === currentCase.id ||
        sar.subjects.some(s => s.walletAddresses.some(w => w.toLowerCase() === currentCluster.address.toLowerCase()))
      );
    });
  }, [currentCase.id, currentCluster.address]);

  const handleSelectPreset = (addr: string) => {
    setSearchAddress(addr);
    setSelectedClusterAddress(addr);
  };

  const getRiskColor = (score: number) => {
    if (score >= 90) return 'text-rose-400 bg-rose-950/80 border-rose-800';
    if (score >= 70) return 'text-amber-400 bg-amber-950/80 border-amber-800';
    if (score >= 40) return 'text-cyan-400 bg-cyan-950/80 border-cyan-800';
    return 'text-emerald-400 bg-emerald-950/80 border-emerald-800';
  };

  const getClusterTypeBadge = (type: AddressCluster['clusterType']) => {
    switch (type) {
      case 'SANCTIONED_SDN':
        return <span className="px-2 py-0.5 rounded text-[10px] font-mono font-bold bg-rose-950 text-rose-300 border border-rose-800">OFAC SANCTIONED SDN</span>;
      case 'MIXER_POOL':
        return <span className="px-2 py-0.5 rounded text-[10px] font-mono font-bold bg-purple-950 text-purple-300 border border-purple-800">ANONYMIZING MIXER</span>;
      case 'EXCHANGE_VASP':
        return <span className="px-2 py-0.5 rounded text-[10px] font-mono font-bold bg-emerald-950 text-emerald-300 border border-emerald-800">VERIFIED VASP</span>;
      case 'BRIDGE_GATEWAY':
        return <span className="px-2 py-0.5 rounded text-[10px] font-mono font-bold bg-indigo-950 text-indigo-300 border border-indigo-800">CROSS-CHAIN BRIDGE</span>;
      case 'P2P_RAMP':
        return <span className="px-2 py-0.5 rounded text-[10px] font-mono font-bold bg-amber-950 text-amber-300 border border-amber-800">P2P FIAT RAMP</span>;
      default:
        return <span className="px-2 py-0.5 rounded text-[10px] font-mono font-bold bg-slate-800 text-slate-300 border border-slate-700">UNHOSTED WALLET</span>;
    }
  };

  const generateForensicProof = () => {
    const payload = {
      reportType: "SENTINEL_CRYPTO_TRACE_CHAIN_OF_CUSTODY",
      timestamp: new Date().toISOString(),
      targetCluster: currentCluster,
      taintAnalysis: currentCluster.taintScore,
      heuristics: {
        peelingChainHops: PEELING_CHAIN_TRACE.length,
        mixerAnonymityEntropyReduction: MIXER_DEANONYMIZATION_SAMPLE.entropyBits,
        structuringAlertCount: displayedTransactions.filter(t => t.isStructuring).length
      },
      associatedFincenSars: associatedSars.map(s => s.bsanId),
      cryptographicSignature: `0x${Math.random().toString(16).slice(2)}${Math.random().toString(16).slice(2)}`,
      examinerProvenance: "Agent A. Lane (Counter-Terror Taskforce // Sentinel FROI.OS)"
    };
    navigator.clipboard.writeText(JSON.stringify(payload, null, 2));
    setCopiedProof(true);
    setTimeout(() => setCopiedProof(false), 2500);
  };

  return (
    <div className="space-y-4 p-4 text-slate-100">
      {/* Top Banner & Multi-Chain Search Console */}
      <div className="bg-slate-900/90 border border-slate-800 rounded-xl p-4 shadow-md space-y-3">
        <div className="flex flex-wrap items-center justify-between gap-2 border-b border-slate-800 pb-3">
          <div className="flex items-center gap-2">
            <div className="p-2 rounded-lg bg-cyan-950/80 border border-cyan-700/60 text-cyan-400">
              <Zap className="w-5 h-5" />
            </div>
            <div>
              <div className="flex items-center gap-2">
                <h2 className="text-sm font-bold text-slate-100 font-mono tracking-wide">
                  MULTI-CHAIN CRYPTO TRACER & ON-CHAIN HEURISTICS DE-ANONYMIZER
                </h2>
                <span className="text-[10px] font-mono px-2 py-0.5 rounded bg-cyan-950 text-cyan-300 border border-cyan-800">
                  BTC • ETH • TRON • XMR • SOL • BRIDGES
                </span>
              </div>
              <p className="text-xs text-slate-400 font-mono">
                Heuristic cluster decomposition, UTXO peeling chains, zero-knowledge mixer de-anonymization, and FinCEN SAR integration
              </p>
            </div>
          </div>

          {/* Action Buttons */}
          <div className="flex items-center gap-2">
            <button
              onClick={() => {
                setSarModalBsanId(null);
                setIsSarModalOpen(true);
              }}
              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-mono font-bold bg-indigo-950 border border-indigo-700 text-indigo-300 hover:bg-indigo-900 transition-all cursor-pointer shadow"
            >
              <ShieldAlert className="w-3.5 h-3.5" />
              <span>FinCEN SAR Registry ({FINCEN_SAR_DATABASE.length})</span>
            </button>

            {onNavigateToWorkbook && (
              <button
                onClick={onNavigateToWorkbook}
                className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-mono text-cyan-400 hover:text-cyan-300 bg-slate-950 border border-slate-800 hover:border-cyan-800 transition-all cursor-pointer"
              >
                <span>SQL Studio</span>
                <ExternalLink className="w-3.5 h-3.5" />
              </button>
            )}
          </div>
        </div>

        {/* Search Bar & Preset Quick-Select */}
        <div className="space-y-2">
          <div className="flex flex-col md:flex-row items-center gap-2">
            <div className="relative flex-1 w-full">
              <Search className="w-4 h-4 absolute left-3 top-3 text-slate-500" />
              <input
                type="text"
                value={searchAddress}
                onChange={(e) => setSearchAddress(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === 'Enter') {
                    setSelectedClusterAddress(searchAddress.trim());
                  }
                }}
                placeholder="Search Wallet Address, Transaction Hash, or Smart Contract..."
                className="w-full bg-slate-950 border border-slate-800 rounded-xl pl-9 pr-24 py-2.5 text-xs text-cyan-300 font-mono focus:outline-none focus:border-cyan-500"
              />
              <button
                onClick={() => setSelectedClusterAddress(searchAddress.trim())}
                className="absolute right-1.5 top-1.5 px-3 py-1.5 rounded-lg text-xs font-mono font-bold bg-cyan-600 hover:bg-cyan-500 text-slate-950 transition-all cursor-pointer"
              >
                Trace
              </button>
            </div>

            {/* Chain Selector */}
            <div className="flex items-center gap-1.5 w-full md:w-auto">
              <select
                value={selectedChain}
                onChange={(e) => setSelectedChain(e.target.value as any)}
                className="bg-slate-950 border border-slate-800 text-slate-300 text-xs font-mono rounded-xl px-3 py-2.5 focus:outline-none focus:border-cyan-500 cursor-pointer"
              >
                <option value="ALL">All Networks</option>
                <option value="BITCOIN">Bitcoin (BTC)</option>
                <option value="ETHEREUM">Ethereum (ETH / ERC20)</option>
                <option value="TRON">Tron (TRC20 USDT)</option>
                <option value="SOLANA">Solana (SOL)</option>
                <option value="CROSS_CHAIN">Cross-Chain Bridges</option>
              </select>

              {/* Hop Depth Selector */}
              <div className="flex items-center gap-1 bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs font-mono text-slate-300">
                <span className="text-slate-500">Depth:</span>
                <span className="font-bold text-cyan-400">{hopDepth} Hops</span>
              </div>
            </div>
          </div>

          {/* Quick Presets */}
          <div className="flex flex-wrap items-center gap-1.5 pt-1 text-[11px] font-mono">
            <span className="text-slate-500 flex items-center gap-1">
              <Filter className="w-3 h-3" /> Case Presets:
            </span>
            <button
              onClick={() => handleSelectPreset('bc1qa9e8x77r9v34l2k0p8sdg7hydra99x10a2m3p')}
              className="bg-slate-950 hover:bg-slate-800 border border-slate-800 px-2 py-0.5 rounded text-rose-300 cursor-pointer"
            >
              Hydra BTC (SDGT Target)
            </button>
            <button
              onClick={() => handleSelectPreset('0x12D699F109283719283019283019283019283019')}
              className="bg-slate-950 hover:bg-slate-800 border border-slate-800 px-2 py-0.5 rounded text-purple-300 cursor-pointer"
            >
              Tornado.Cash 100 ETH Pool
            </button>
            <button
              onClick={() => handleSelectPreset('0x33F9b8210A88Bce0913Ac2890C3c33214aB07812')}
              className="bg-slate-950 hover:bg-slate-800 border border-slate-800 px-2 py-0.5 rounded text-amber-300 cursor-pointer"
            >
              Titan Syndicate USDC ($14.2M)
            </button>
            <button
              onClick={() => handleSelectPreset('TL88192038102938102938102938102938')}
              className="bg-slate-950 hover:bg-slate-800 border border-slate-800 px-2 py-0.5 rounded text-rose-300 cursor-pointer"
            >
              Al-Quds TRON USDT Gateway
            </button>
            <button
              onClick={() => handleSelectPreset('bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh')}
              className="bg-slate-950 hover:bg-slate-800 border border-slate-800 px-2 py-0.5 rounded text-rose-300 cursor-pointer"
            >
              BlackCat Ransomware BTC
            </button>
          </div>
        </div>
      </div>

      {/* Target Cluster Detail Card */}
      <div className="bg-slate-900/90 border border-slate-800 rounded-xl p-4 shadow space-y-3">
        <div className="flex flex-wrap items-center justify-between gap-2 border-b border-slate-800 pb-3">
          <div>
            <div className="flex items-center gap-2">
              <span className="text-xs font-mono font-bold text-slate-400">ACTIVE TRACER CLUSTER</span>
              {getClusterTypeBadge(currentCluster.clusterType)}
              <span className={`text-[10px] font-mono px-2 py-0.5 rounded border font-bold ${getRiskColor(currentCluster.riskScore)}`}>
                AML RISK: {currentCluster.riskScore}/100
              </span>
            </div>
            <div className="text-sm font-mono font-bold text-cyan-300 break-all mt-1">
              {currentCluster.address}
            </div>
            <div className="text-xs text-slate-300 font-mono mt-0.5">
              Label: <span className="text-slate-100 font-bold">{currentCluster.label}</span> • Jurisdiction: <span className="text-slate-400">{currentCluster.jurisdiction}</span>
            </div>
          </div>

          {/* Quick Actions for Current Cluster */}
          <div className="flex items-center gap-2">
            <button
              onClick={generateForensicProof}
              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-mono bg-slate-950 hover:bg-slate-800 text-slate-200 border border-slate-800 transition-all cursor-pointer"
            >
              {copiedProof ? <Check className="w-3.5 h-3.5 text-emerald-400" /> : <Copy className="w-3.5 h-3.5" />}
              <span>{copiedProof ? 'Proof Copied' : 'Export Forensic Proof'}</span>
            </button>

            {currentCluster.fincenSarRef && (
              <button
                onClick={() => {
                  setSarModalBsanId(currentCluster.fincenSarRef!);
                  setIsSarModalOpen(true);
                }}
                className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-mono font-bold bg-indigo-950 border border-indigo-700 text-indigo-300 hover:bg-indigo-900 transition-all cursor-pointer"
              >
                <FileText className="w-3.5 h-3.5" />
                <span>View {currentCluster.fincenSarRef}</span>
              </button>
            )}
          </div>
        </div>

        {/* Metrics Grid */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-xs font-mono">
          <div className="bg-slate-950 p-2.5 rounded-lg border border-slate-800">
            <span className="text-slate-500 block text-[10px]">CURRENT ON-CHAIN BALANCE</span>
            <span className="text-sm font-bold text-emerald-400">
              {currentCluster.balance.toLocaleString()} {currentCluster.asset}
            </span>
            <span className="text-[10px] text-slate-400 block mt-0.5">
              ≈ ${currentCluster.balanceUsd.toLocaleString()} USD
            </span>
          </div>

          <div className="bg-slate-950 p-2.5 rounded-lg border border-slate-800">
            <span className="text-slate-500 block text-[10px]">AGGREGATE INFLOW VOLUME</span>
            <span className="text-sm font-bold text-cyan-300">
              ${currentCluster.totalReceivedUsd.toLocaleString()} USD
            </span>
            <span className="text-[10px] text-slate-400 block mt-0.5">
              Transactions: {currentCluster.txCount} recorded
            </span>
          </div>

          <div className="bg-slate-950 p-2.5 rounded-lg border border-slate-800">
            <span className="text-slate-500 block text-[10px]">3-MODEL TAINT EXPOSURE</span>
            <div className="flex items-center justify-between text-[11px] font-bold mt-1">
              <span className="text-rose-400">FIFO: {currentCluster.taintScore.fifoPercentage}%</span>
              <span className="text-amber-400">Poison: {currentCluster.taintScore.poisonPercentage}%</span>
            </div>
            <span className="text-[10px] text-slate-400 block mt-0.5">
              Haircut: {currentCluster.taintScore.haircutPercentage}%
            </span>
          </div>

          <div className="bg-slate-950 p-2.5 rounded-lg border border-slate-800">
            <span className="text-slate-500 block text-[10px]">ATTRIBUTED ENTITY / OWNER</span>
            <span className="text-xs font-bold text-slate-200 truncate block mt-1">
              {currentCluster.entityOwner || 'Anonymous / Unhosted'}
            </span>
            <span className="text-[10px] text-slate-500 block mt-0.5">
              {currentCluster.associatedCaseId || 'Non-Docket Target'}
            </span>
          </div>
        </div>

        {/* Tags */}
        <div className="flex flex-wrap gap-1.5 pt-1">
          {currentCluster.tags.map((tag, idx) => (
            <span
              key={idx}
              className="px-2 py-0.5 rounded text-[10px] font-mono bg-slate-950 border border-slate-800 text-slate-300"
            >
              #{tag}
            </span>
          ))}
        </div>
      </div>

      {/* Sub-View Navigation Tabs */}
      <div className="flex items-center gap-2 bg-slate-900/90 border border-slate-800 rounded-xl p-2.5">
        <button
          onClick={() => setActiveSubView('FLOW_GRAPH')}
          className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-mono font-bold transition-all cursor-pointer ${
            activeSubView === 'FLOW_GRAPH'
              ? 'bg-cyan-950 border border-cyan-500 text-cyan-300 shadow'
              : 'text-slate-400 hover:text-slate-200'
          }`}
        >
          <GitFork className="w-3.5 h-3.5 rotate-180" />
          <span>On-Chain Flow Topology</span>
        </button>

        <button
          onClick={() => setActiveSubView('PEELING_CHAIN')}
          className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-mono font-bold transition-all cursor-pointer ${
            activeSubView === 'PEELING_CHAIN'
              ? 'bg-cyan-950 border border-cyan-500 text-cyan-300 shadow'
              : 'text-slate-400 hover:text-slate-200'
          }`}
        >
          <Layers className="w-3.5 h-3.5" />
          <span>UTXO Peeling Chain Analyzer</span>
        </button>

        <button
          onClick={() => setActiveSubView('MIXER_DEANONYMIZER')}
          className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-mono font-bold transition-all cursor-pointer ${
            activeSubView === 'MIXER_DEANONYMIZER'
              ? 'bg-purple-950 border border-purple-500 text-purple-300 shadow'
              : 'text-slate-400 hover:text-slate-200'
          }`}
        >
          <Lock className="w-3.5 h-3.5" />
          <span>Mixer & Zero-Knowledge De-Anonymizer</span>
        </button>

        <button
          onClick={() => setActiveSubView('TX_LEDGER')}
          className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-mono font-bold transition-all cursor-pointer ${
            activeSubView === 'TX_LEDGER'
              ? 'bg-cyan-950 border border-cyan-500 text-cyan-300 shadow'
              : 'text-slate-400 hover:text-slate-200'
          }`}
        >
          <DollarSign className="w-3.5 h-3.5" />
          <span>Raw Transaction Stream ({displayedTransactions.length})</span>
        </button>
      </div>

      {/* Sub-View Content */}
      {activeSubView === 'FLOW_GRAPH' && (
        <div className="bg-slate-900/80 border border-slate-800 rounded-xl p-4 space-y-4">
          <div className="flex items-center justify-between border-b border-slate-800 pb-2">
            <div className="flex items-center gap-2 text-xs font-bold font-mono text-slate-200">
              <GitFork className="w-4 h-4 text-cyan-400 rotate-180" />
              <span>CLUSTER TOPOLOGY & MULTI-HOP ON-CHAIN PATHS</span>
            </div>
            <span className="text-[11px] text-slate-400 font-mono">
              Click any node in the cluster map below to focus and inspect
            </span>
          </div>

          {/* Interactive Cluster Nodes Grid */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
            {displayedClusters.map((cluster) => {
              const isSelected = cluster.address.toLowerCase() === selectedClusterAddress.toLowerCase();
              return (
                <div
                  key={cluster.address}
                  onClick={() => setSelectedClusterAddress(cluster.address)}
                  className={`p-3.5 rounded-xl border transition-all cursor-pointer space-y-2 ${
                    isSelected
                      ? 'bg-slate-800 border-cyan-400 shadow-lg shadow-cyan-950/40 ring-1 ring-cyan-500/50'
                      : 'bg-slate-950/70 border-slate-800 hover:border-slate-700 hover:bg-slate-900'
                  }`}
                >
                  <div className="flex items-center justify-between">
                    <span className="text-[11px] font-mono font-bold text-slate-400">
                      {cluster.chain}
                    </span>
                    {getClusterTypeBadge(cluster.clusterType)}
                  </div>

                  <div className="text-xs font-bold text-slate-100 truncate">
                    {cluster.label}
                  </div>

                  <div className="text-[11px] font-mono text-cyan-300 truncate">
                    {cluster.address}
                  </div>

                  <div className="flex items-center justify-between text-xs font-mono pt-1 border-t border-slate-800/80">
                    <span className="text-emerald-400 font-bold">
                      ${cluster.balanceUsd.toLocaleString()} USD
                    </span>
                    <span className={`text-[10px] font-bold px-1.5 py-0.5 rounded ${getRiskColor(cluster.riskScore)}`}>
                      RISK {cluster.riskScore}
                    </span>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      )}

      {activeSubView === 'PEELING_CHAIN' && (
        <div className="bg-slate-900/80 border border-slate-800 rounded-xl p-4 space-y-4">
          <div className="flex items-center justify-between border-b border-slate-800 pb-2">
            <div className="flex items-center gap-2 text-xs font-bold font-mono text-slate-200">
              <Layers className="w-4 h-4 text-cyan-400" />
              <span>UTXO PEELING CHAIN & DISPERSION ACCUMULATION</span>
            </div>
            <span className="text-[11px] text-amber-400 font-mono font-bold">
              Sub-$10k BSA CTR Evasion Smurfing Detected
            </span>
          </div>

          <div className="space-y-3">
            {PEELING_CHAIN_TRACE.map((hop) => (
              <div
                key={hop.step}
                className="bg-slate-950 border border-slate-800 rounded-xl p-4 space-y-2"
              >
                <div className="flex items-center justify-between text-xs font-mono">
                  <div className="flex items-center gap-2">
                    <span className="px-2 py-0.5 rounded bg-cyan-950 text-cyan-300 font-bold border border-cyan-800">
                      HOP {hop.step}
                    </span>
                    <span className="text-slate-300 font-bold">{hop.txHash}</span>
                  </div>
                  {hop.isStructuringSmurf && (
                    <span className="px-2 py-0.5 rounded text-[10px] font-bold bg-amber-950 text-amber-300 border border-amber-800">
                      STRUCTURING SMURF (&lt;$10k)
                    </span>
                  )}
                </div>

                <div className="grid grid-cols-1 md:grid-cols-3 gap-2 text-xs font-mono pt-1">
                  <div className="bg-slate-900 p-2 rounded border border-slate-800">
                    <span className="text-slate-500 block text-[10px]">PEELED VALUE (EXTRACTION)</span>
                    <span className="text-sm font-bold text-emerald-400">
                      ${hop.peelAmountUsd.toLocaleString()} USD
                    </span>
                    <span className="text-[10px] text-slate-400 truncate block mt-0.5">
                      To: {hop.peelDestinationLabel}
                    </span>
                  </div>

                  <div className="bg-slate-900 p-2 rounded border border-slate-800">
                    <span className="text-slate-500 block text-[10px]">REMAINING CHANGE (NEXT HOP)</span>
                    <span className="text-sm font-bold text-cyan-300">
                      ${hop.changeAmountUsd.toLocaleString()} USD
                    </span>
                    <span className="text-[10px] text-slate-400 block mt-0.5">
                      Accumulated to change output
                    </span>
                  </div>

                  <div className="bg-slate-900 p-2 rounded border border-slate-800">
                    <span className="text-slate-500 block text-[10px]">INPUT ORIGIN ADDRESS</span>
                    <span className="text-xs text-slate-200 truncate block font-bold mt-1">
                      {hop.fromAddress}
                    </span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {activeSubView === 'MIXER_DEANONYMIZER' && (
        <div className="bg-slate-900/80 border border-slate-800 rounded-xl p-4 space-y-4">
          <div className="flex items-center justify-between border-b border-slate-800 pb-2">
            <div className="flex items-center gap-2 text-xs font-bold font-mono text-purple-300">
              <Lock className="w-4 h-4 text-purple-400" />
              <span>ZERO-KNOWLEDGE MIXER HEURISTIC DE-ANONYMIZATION</span>
            </div>
            <span className="text-[11px] text-emerald-400 font-mono font-bold">
              Unmasking Confidence: {MIXER_DEANONYMIZATION_SAMPLE.unmaskingConfidence}%
            </span>
          </div>

          <div className="bg-slate-950 border border-purple-900/60 rounded-xl p-4 space-y-3">
            <div className="flex flex-wrap items-center justify-between gap-2 border-b border-slate-800 pb-3">
              <div>
                <span className="text-xs font-mono font-bold text-purple-300">
                  {MIXER_DEANONYMIZATION_SAMPLE.mixerProtocol} Smart Contract Deposit
                </span>
                <div className="text-xs font-mono text-slate-400 mt-0.5">
                  Pool: {MIXER_DEANONYMIZATION_SAMPLE.poolAddress} ({MIXER_DEANONYMIZATION_SAMPLE.poolAsset})
                </div>
              </div>

              <div className="text-right font-mono text-xs">
                <span className="text-slate-400 block text-[10px]">ENTROPY COLLAPSE</span>
                <span className="text-sm font-bold text-rose-400">
                  {MIXER_DEANONYMIZATION_SAMPLE.entropyBits} bits (Reduced Set: {MIXER_DEANONYMIZATION_SAMPLE.reducedAnonymitySet} of {MIXER_DEANONYMIZATION_SAMPLE.theoreticalAnonymitySet})
                </span>
              </div>
            </div>

            {/* Heuristic Scores */}
            <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-xs font-mono">
              <div className="bg-slate-900 p-2.5 rounded border border-slate-800">
                <span className="text-slate-500 block text-[10px]">TEMPORAL PROXIMITY</span>
                <span className="text-sm font-bold text-cyan-300">
                  {MIXER_DEANONYMIZATION_SAMPLE.heuristicBreakdowns.temporalProximityScore}%
                </span>
              </div>
              <div className="bg-slate-900 p-2.5 rounded border border-slate-800">
                <span className="text-slate-500 block text-[10px]">GAS PRICE FINGERPRINT</span>
                <span className="text-sm font-bold text-cyan-300">
                  {MIXER_DEANONYMIZATION_SAMPLE.heuristicBreakdowns.gasPriceFingerprintMatch}%
                </span>
              </div>
              <div className="bg-slate-900 p-2.5 rounded border border-slate-800">
                <span className="text-slate-500 block text-[10px]">DENOMINATION EXACT MATCH</span>
                <span className="text-sm font-bold text-cyan-300">
                  {MIXER_DEANONYMIZATION_SAMPLE.heuristicBreakdowns.denominationMatch}%
                </span>
              </div>
              <div className="bg-slate-900 p-2.5 rounded border border-slate-800">
                <span className="text-slate-500 block text-[10px]">NONCE PATTERN MATCH</span>
                <span className="text-sm font-bold text-cyan-300">
                  {MIXER_DEANONYMIZATION_SAMPLE.heuristicBreakdowns.noncePatternMatch}%
                </span>
              </div>
            </div>

            {/* Attributed Recipient Node */}
            <div className="bg-slate-900 p-3 rounded-lg border border-purple-800/80 space-y-1 text-xs font-mono">
              <span className="text-[10px] text-purple-300 font-bold block">
                PROBABLE UNMASKED WITHDRAWAL RECIPIENT
              </span>
              <span className="text-slate-100 font-bold break-all">
                {MIXER_DEANONYMIZATION_SAMPLE.probableWithdrawalAddress}
              </span>
              <span className="text-slate-400 text-[11px] block mt-1">
                Linked Transaction Hash: {MIXER_DEANONYMIZATION_SAMPLE.probableWithdrawalTx}
              </span>
            </div>
          </div>
        </div>
      )}

      {activeSubView === 'TX_LEDGER' && (
        <div className="bg-slate-900/80 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 font-mono">
              <DollarSign className="w-4 h-4 text-emerald-400" />
              <span>RAW ON-CHAIN TRANSACTION FEED</span>
            </div>
          </div>

          <div className="overflow-x-auto">
            <table className="w-full text-left text-xs font-mono border-collapse">
              <thead>
                <tr className="bg-slate-950 text-slate-400 border-b border-slate-800">
                  <th className="p-2.5">Tx Hash</th>
                  <th className="p-2.5">Network</th>
                  <th className="p-2.5">Timestamp</th>
                  <th className="p-2.5">From</th>
                  <th className="p-2.5">To</th>
                  <th className="p-2.5">Amount & Asset</th>
                  <th className="p-2.5">Method / Type</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-800/60">
                {displayedTransactions.map((tx) => (
                  <tr key={tx.txHash} className="hover:bg-slate-800/40 text-slate-300">
                    <td className="p-2.5 font-bold text-cyan-400 truncate max-w-[130px]">
                      {tx.txHash}
                    </td>
                    <td className="p-2.5 text-slate-300">{tx.chain}</td>
                    <td className="p-2.5 text-slate-400">{tx.timestamp}</td>
                    <td className="p-2.5 text-slate-300 max-w-[140px] truncate">
                      {tx.fromLabel || tx.fromAddress}
                    </td>
                    <td className="p-2.5 text-slate-300 max-w-[140px] truncate">
                      {tx.toLabel || tx.toAddress}
                    </td>
                    <td className="p-2.5 font-bold text-emerald-300">
                      ${tx.amountUsd.toLocaleString()} ({tx.asset})
                    </td>
                    <td className="p-2.5">
                      <span className="px-2 py-0.5 rounded bg-slate-950 border border-slate-800 text-[10px] text-slate-300">
                        {tx.scriptType}
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {/* FinCEN SAR Modal */}
      <FincenSarModal
        isOpen={isSarModalOpen}
        onClose={() => setIsSarModalOpen(false)}
        selectedBsanId={sarModalBsanId}
        onTraceAddress={(addr) => {
          setSearchAddress(addr);
          setSelectedClusterAddress(addr);
        }}
        onNavigateToCase={(caseId) => {
          if (onNavigateToStatutory) onNavigateToStatutory();
        }}
      />
    </div>
  );
};