import React, { useState } from 'react';
import { FinCENRecord } from '../../types/fincen';
import { FINCEN_SAR_DATABASE } from '../../data/fincenSarData';
import { 
  ShieldAlert, 
  Building2, 
  Calendar, 
  DollarSign, 
  FileText, 
  CheckCircle2, 
  AlertTriangle, 
  ExternalLink, 
  Copy, 
  Check, 
  Code, 
  Search, 
  X,
  Filter,
  Layers,
  ArrowRight
} from 'lucide-react';

interface FincenSarModalProps {
  isOpen: boolean;
  onClose: () => void;
  selectedBsanId?: string | null;
  onTraceAddress?: (address: string) => void;
  onNavigateToCase?: (caseId: string) => void;
}

export const FincenSarModal: React.FC<FincenSarModalProps> = ({
  isOpen,
  onClose,
  selectedBsanId,
  onTraceAddress,
  onNavigateToCase,
}) => {
  const [selectedRecord, setSelectedRecord] = useState<FinCENRecord>(
    () => FINCEN_SAR_DATABASE.find(r => r.bsanId === selectedBsanId) || FINCEN_SAR_DATABASE[0]
  );
  const [searchQuery, setSearchQuery] = useState('');
  const [activeTab, setActiveTab] = useState<'NARRATIVE' | 'XML_PAYLOAD' | 'REGULATORY_OPTIMIZATION'>('NARRATIVE');
  const [copied, setCopied] = useState(false);

  if (!isOpen) return null;

  const filteredRecords = FINCEN_SAR_DATABASE.filter(r => {
    const q = searchQuery.toLowerCase();
    return (
      r.bsanId.toLowerCase().includes(q) ||
      r.filingInstitution.toLowerCase().includes(q) ||
      r.primaryCategory.toLowerCase().includes(q) ||
      r.subjects.some(s => s.name.toLowerCase().includes(q) || s.walletAddresses.some(w => w.toLowerCase().includes(q))) ||
      (r.associatedCaseId && r.associatedCaseId.toLowerCase().includes(q))
    );
  });

  const getStatusBadge = (status: FinCENRecord['fincenStatus']) => {
    switch (status) {
      case 'OFAC_FREEZE_DISPATCHED':
        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 FREEZE EXECUTED</span>;
      case 'TRANSMITTED_TO_LE':
        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">LE TRANSMITTED</span>;
      case '314A_INFO_SHARING':
        return <span className="px-2 py-0.5 rounded text-[10px] font-mono font-bold bg-cyan-950 text-cyan-300 border border-cyan-800">FINCEN § 314(a) MATCH</span>;
      default:
        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">E-FILED ACCEPTED</span>;
    }
  };

  const getTierBadge = (tier: FinCENRecord['optimizationTier']) => {
    switch (tier) {
      case 'TIER_1_CRITICAL_ACTION':
        return <span className="px-2 py-0.5 rounded text-[10px] font-mono font-bold bg-rose-500/20 text-rose-300 border border-rose-500/40">TIER 1 CRITICAL</span>;
      case 'TIER_2_HIGH_PRIORITY':
        return <span className="px-2 py-0.5 rounded text-[10px] font-mono font-bold bg-amber-500/20 text-amber-300 border border-amber-500/40">TIER 2 HIGH</span>;
      default:
        return <span className="px-2 py-0.5 rounded text-[10px] font-mono font-bold bg-slate-800 text-slate-300">TIER 3 ELEVATED</span>;
    }
  };

  const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text);
    setCopied(true);
    setTimeout(() => setCopied(false), 2500);
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/80 backdrop-blur-sm p-4">
      <div className="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-6xl h-[88vh] flex flex-col shadow-2xl overflow-hidden">
        {/* Header */}
        <div className="p-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/80">
          <div className="flex items-center gap-3">
            <div className="p-2 rounded-lg bg-indigo-950/80 border border-indigo-700/60 text-indigo-400">
              <ShieldAlert 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">
                  FINCEN SAR REGISTRY & REGULATORY OPTIMIZATION DATABASE
                </h2>
                <span className="text-[10px] font-mono px-2 py-0.5 rounded bg-indigo-950 text-indigo-300 border border-indigo-800">
                  {FINCEN_SAR_DATABASE.length} CURATED BSA E-FILINGS
                </span>
              </div>
              <p className="text-xs text-slate-400 font-mono">
                Official Form 111 XML 2.0 Suspicious Activity Reports linked to multi-hop crypto tracing & 18 USC § 2339B
              </p>
            </div>
          </div>

          <button
            onClick={onClose}
            className="p-1.5 rounded-lg text-slate-400 hover:text-slate-200 hover:bg-slate-800 transition-all cursor-pointer"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Modal Body Layout */}
        <div className="flex-1 flex overflow-hidden">
          {/* Left Sidebar: SAR Filings List */}
          <div className="w-80 md:w-96 border-r border-slate-800 flex flex-col bg-slate-950/50">
            <div className="p-3 border-b border-slate-800">
              <div className="relative">
                <Search className="w-3.5 h-3.5 absolute left-3 top-2.5 text-slate-500" />
                <input
                  type="text"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  placeholder="Search BSAN, VASP, Wallet, or Case..."
                  className="w-full bg-slate-900 border border-slate-800 rounded-lg pl-8 pr-3 py-1.5 text-xs text-slate-200 placeholder-slate-500 font-mono focus:outline-none focus:border-cyan-500"
                />
              </div>
            </div>

            <div className="flex-1 overflow-y-auto divide-y divide-slate-800/60 p-2 space-y-1">
              {filteredRecords.map((record) => {
                const isSelected = selectedRecord.bsanId === record.bsanId;
                return (
                  <div
                    key={record.bsanId}
                    onClick={() => setSelectedRecord(record)}
                    className={`p-3 rounded-xl cursor-pointer transition-all ${
                      isSelected
                        ? 'bg-slate-800/90 border border-cyan-500/60 shadow-md'
                        : 'bg-slate-900/40 border border-transparent hover:bg-slate-900 hover:border-slate-800'
                    }`}
                  >
                    <div className="flex items-center justify-between mb-1">
                      <span className="text-xs font-mono font-bold text-cyan-400">
                        {record.bsanId}
                      </span>
                      {getTierBadge(record.optimizationTier)}
                    </div>

                    <div className="text-xs font-semibold text-slate-200 truncate">
                      {record.filingInstitution}
                    </div>

                    <div className="flex items-center justify-between mt-2 text-[11px] font-mono text-slate-400">
                      <span className="text-emerald-400 font-bold">
                        ${record.totalAmountUsd.toLocaleString()} USD
                      </span>
                      <span>{record.filingDate}</span>
                    </div>

                    <div className="mt-1 flex items-center justify-between">
                      <span className="text-[10px] font-mono text-slate-400 truncate max-w-[160px]">
                        {record.primaryCategory.replace(/_/g, ' ')}
                      </span>
                      <span className="text-[10px] font-mono font-bold text-indigo-300">
                        Opt. Score: {record.regulatoryOptimizationScore}%
                      </span>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Right Detail Pane */}
          <div className="flex-1 flex flex-col overflow-y-auto p-5 space-y-4 bg-slate-900/40">
            {/* Top Summary Card */}
            <div className="bg-slate-950 border border-slate-800 rounded-xl p-4 space-y-3 shadow">
              <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">
                    <h3 className="text-base font-mono font-bold text-slate-100">
                      {selectedRecord.bsanId}
                    </h3>
                    {getStatusBadge(selectedRecord.fincenStatus)}
                    {getTierBadge(selectedRecord.optimizationTier)}
                  </div>
                  <div className="text-xs font-mono text-slate-400 mt-0.5">
                    Filing Entity: <span className="text-cyan-300 font-bold">{selectedRecord.filingInstitution}</span> ({selectedRecord.institutionType})
                  </div>
                </div>

                <div className="flex items-center gap-2">
                  {selectedRecord.associatedCaseId && onNavigateToCase && (
                    <button
                      onClick={() => {
                        onClose();
                        onNavigateToCase(selectedRecord.associatedCaseId!);
                      }}
                      className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-mono font-bold bg-cyan-950 border border-cyan-700 text-cyan-300 hover:bg-cyan-900 transition-all cursor-pointer"
                    >
                      <span>Open Docket {selectedRecord.associatedCaseId}</span>
                      <ExternalLink className="w-3.5 h-3.5" />
                    </button>
                  )}

                  <button
                    onClick={() => copyToClipboard(selectedRecord.xmlPayloadExcerpt)}
                    className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-mono bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700 transition-all cursor-pointer"
                  >
                    {copied ? <Check className="w-3.5 h-3.5 text-emerald-400" /> : <Copy className="w-3.5 h-3.5" />}
                    <span>{copied ? 'Copied XML' : 'Copy XML 2.0'}</span>
                  </button>
                </div>
              </div>

              {/* Key Metrics Grid */}
              <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-lg border border-slate-800">
                  <span className="text-slate-500 block text-[10px]">TOTAL VALUE INVOLVED</span>
                  <span className="text-sm font-bold text-emerald-400">
                    ${selectedRecord.totalAmountUsd.toLocaleString()} USD
                  </span>
                </div>

                <div className="bg-slate-900 p-2.5 rounded-lg border border-slate-800">
                  <span className="text-slate-500 block text-[10px]">REGULATORY OPT. SCORE</span>
                  <span className="text-sm font-bold text-indigo-400">
                    {selectedRecord.regulatoryOptimizationScore}/100 (Indexed)
                  </span>
                </div>

                <div className="bg-slate-900 p-2.5 rounded-lg border border-slate-800">
                  <span className="text-slate-500 block text-[10px]">FILING DATE & WINDOW</span>
                  <span className="text-slate-200 font-bold">{selectedRecord.filingDate}</span>
                </div>

                <div className="bg-slate-900 p-2.5 rounded-lg border border-slate-800">
                  <span className="text-slate-500 block text-[10px]">INVESTIGATIVE LEAD</span>
                  <span className="text-slate-200 font-bold truncate block">{selectedRecord.assignedTaskforce}</span>
                </div>
              </div>

              {/* Subjects & Crypto Wallets */}
              <div className="bg-slate-900 p-3 rounded-lg border border-slate-800 space-y-2">
                <div className="flex items-center justify-between text-xs font-mono font-bold text-slate-300">
                  <span>REPORTED SUBJECTS & ON-CHAIN REPOSITORIES</span>
                  <span className="text-[10px] text-slate-500 font-normal">Click address to trace on-chain</span>
                </div>

                <div className="space-y-2">
                  {selectedRecord.subjects.map((subject, idx) => (
                    <div key={idx} className="bg-slate-950 p-2.5 rounded border border-slate-800/80 space-y-1.5">
                      <div className="flex items-center justify-between text-xs font-mono">
                        <span className="font-bold text-slate-100">{subject.name}</span>
                        <span className="text-slate-400">{subject.type} • {subject.country}</span>
                      </div>

                      <div className="flex flex-wrap gap-1.5 pt-1">
                        {subject.walletAddresses.map((addr) => (
                          <div
                            key={addr}
                            className="flex items-center gap-1.5 bg-slate-900 hover:bg-cyan-950 border border-slate-800 hover:border-cyan-700 px-2 py-1 rounded text-[11px] font-mono text-cyan-300 transition-all cursor-pointer"
                            onClick={() => {
                              if (onTraceAddress) {
                                onClose();
                                onTraceAddress(addr);
                              }
                            }}
                          >
                            <span className="truncate max-w-[200px]">{addr}</span>
                            <ArrowRight className="w-3 h-3 text-cyan-400 shrink-0" />
                          </div>
                        ))}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* View Switcher Tabs */}
            <div className="flex items-center gap-2 border-b border-slate-800 pb-1">
              <button
                onClick={() => setActiveTab('NARRATIVE')}
                className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-mono font-bold rounded-lg transition-all cursor-pointer ${
                  activeTab === 'NARRATIVE'
                    ? 'bg-cyan-950 border border-cyan-500 text-cyan-300'
                    : 'text-slate-400 hover:text-slate-200'
                }`}
              >
                <FileText className="w-3.5 h-3.5" />
                <span>Part V Narrative Summary</span>
              </button>

              <button
                onClick={() => setActiveTab('REGULATORY_OPTIMIZATION')}
                className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-mono font-bold rounded-lg transition-all cursor-pointer ${
                  activeTab === 'REGULATORY_OPTIMIZATION'
                    ? 'bg-indigo-950 border border-indigo-500 text-indigo-300'
                    : 'text-slate-400 hover:text-slate-200'
                }`}
              >
                <CheckCircle2 className="w-3.5 h-3.5" />
                <span>Regulatory Optimization & Actionable Steps</span>
              </button>

              <button
                onClick={() => setActiveTab('XML_PAYLOAD')}
                className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-mono font-bold rounded-lg transition-all cursor-pointer ${
                  activeTab === 'XML_PAYLOAD'
                    ? 'bg-slate-800 text-slate-100'
                    : 'text-slate-400 hover:text-slate-200'
                }`}
              >
                <Code className="w-3.5 h-3.5" />
                <span>FinCEN Form 111 XML 2.0 Payload</span>
              </button>
            </div>

            {/* Tab Contents */}
            {activeTab === 'NARRATIVE' && (
              <div className="bg-slate-950 border border-slate-800 rounded-xl p-4 font-mono text-xs text-slate-300 leading-relaxed whitespace-pre-wrap">
                {selectedRecord.narrativeSummary}
              </div>
            )}

            {activeTab === 'REGULATORY_OPTIMIZATION' && (
              <div className="space-y-3 bg-slate-950 border border-slate-800 rounded-xl p-4">
                <div className="text-xs font-mono font-bold text-indigo-300 flex items-center gap-2">
                  <CheckCircle2 className="w-4 h-4 text-indigo-400" />
                  <span>ACTIONABLE REGULATORY OPTIMIZATIONS & ENFORCEMENT MEASURES</span>
                </div>

                <div className="space-y-2">
                  {selectedRecord.actionableRecommendations.map((rec, idx) => (
                    <div
                      key={idx}
                      className="flex items-start gap-2.5 p-3 rounded-lg bg-slate-900 border border-slate-800 text-xs font-mono text-slate-200"
                    >
                      <span className="w-5 h-5 rounded-full bg-indigo-950 border border-indigo-700 text-indigo-300 flex items-center justify-center shrink-0 text-[10px] font-bold">
                        {idx + 1}
                      </span>
                      <span className="leading-relaxed">{rec}</span>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {activeTab === 'XML_PAYLOAD' && (
              <div className="bg-slate-950 border border-slate-800 rounded-xl p-4 font-mono text-xs text-cyan-300 overflow-x-auto whitespace-pre">
                {selectedRecord.xmlPayloadExcerpt}
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};