import React, { useState } from 'react';
import { 
  Calculator, 
  ShieldCheck, 
  CheckCircle2, 
  AlertTriangle, 
  Sun, 
  Search, 
  Database,
  ArrowRight,
  TrendingUp,
  Percent,
  Check,
  Building
} from 'lucide-react';
import { UNIFIED_DOCUMENT_METADATA, CUSIP_PORTFOLIO_DATA, DYREO_ALLOCATION_VECTOR, EXECUTION_TABS } from '../data/unifiedDocumentData';

export const VerificationPanel: React.FC = () => {
  // Simulator state
  const [mockYield, setMockYield] = useState<number>(1000000);
  const [exchangeRatio, setExchangeRatio] = useState<number>(0.0917);
  const [includeTuckerActPool, setIncludeTuckerActPool] = useState<boolean>(false);
  const [cusipSearch, setCusipSearch] = useState<string>('');

  // S-EROI calculator state
  const [solarSolarOutputKwh, setSolarOutputKwh] = useState<number>(365000);
  const [solarLossKwh, setSolarLossKwh] = useState<number>(36500);
  const [capexDollars, setCapexDollars] = useState<number>(380000);
  const [opexDollars, setOpexDollars] = useState<number>(40000);

  const netEnergy = Math.max(0, solarSolarOutputKwh - solarLossKwh);
  const totalCost = capexDollars + opexDollars;
  const calculatedS_EROI = totalCost > 0 ? (netEnergy / totalCost) : 0;
  const isS_EROI_Valid = calculatedS_EROI >= 0.73;

  // Capital calculation
  const basePrincipal = UNIFIED_DOCUMENT_METADATA.seriesAPrincipal + UNIFIED_DOCUMENT_METADATA.seriesBPrincipal;
  const tuckerActAmount = includeTuckerActPool ? 220150000 : 0;
  const currentTotalPrincipal = basePrincipal + tuckerActAmount;
  const calculatedShares = Math.round(basePrincipal * exchangeRatio);

  return (
    <div className="space-y-8 max-w-7xl mx-auto pb-12">
      {/* Top Banner */}
      <div className="bg-gradient-to-r from-emerald-950/60 via-slate-900 to-indigo-950/60 p-6 rounded-xl border border-emerald-500/30">
        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
          <div>
            <div className="flex items-center gap-2">
              <span className="px-2 py-0.5 rounded bg-emerald-500/20 text-emerald-300 font-mono text-xs font-bold border border-emerald-500/30">
                AUDIT ENGINE
              </span>
              <h2 className="text-xl font-bold text-white">
                Interactive Jurisdictional & Mathematical Auditor
              </h2>
            </div>
            <p className="text-slate-300 text-xs sm:text-sm mt-1 max-w-3xl">
              Inspect the cross-dataset harmonization parameters, verify the complete elimination of the Tucker Act judgment pool, compute real-time Merton HJB DYREO daily sweeps, and audit SEC Edgar Form 13F CUSIP holdings.
            </p>
          </div>

          <div className="flex items-center gap-3">
            <div className="p-3 bg-slate-900/90 rounded-lg border border-slate-700 text-right">
              <div className="text-[10px] uppercase font-bold tracking-wider text-slate-400">Harmonized Vector</div>
              <div className="font-mono text-emerald-400 font-bold text-lg">$500,000,000.00</div>
              <div className="text-[10px] text-slate-400">45,850,000 LEU Shs</div>
            </div>
          </div>
        </div>
      </div>

      {/* Grid 1: Tucker Act Harmonization Comparison */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="bg-slate-900/90 border border-slate-800 rounded-xl p-6 space-y-4">
          <div className="flex items-center justify-between">
            <h3 className="font-bold text-slate-100 flex items-center gap-2 text-sm sm:text-base">
              <ShieldCheck className="w-4 h-4 text-emerald-400" />
              <span>Dataset Harmonization & Tucker Act Auditor</span>
            </h3>
            <span className="text-xs px-2 py-0.5 rounded bg-slate-800 text-slate-400 font-mono">
              Live Comparative Test
            </span>
          </div>

          <p className="text-xs text-slate-300 leading-relaxed">
            In unmerged documents, the presence of the $220,150,000.00 Tucker Act Judgment Pool created an asymmetry between the D.C. District Court filings ($500M) and the Baltimore City filings ($720.15M). Removing the Tucker Act pool establishes total symmetry across both venues.
          </p>

          <div className="p-4 bg-slate-950 rounded-lg border border-slate-800 space-y-3">
            <div className="flex items-center justify-between">
              <span className="text-xs text-slate-300 font-medium">Tucker Act Simulation Toggle:</span>
              <button
                onClick={() => setIncludeTuckerActPool(!includeTuckerActPool)}
                className={`text-xs px-3 py-1 rounded-md font-mono transition-colors cursor-pointer ${
                  includeTuckerActPool
                    ? 'bg-amber-600 text-white font-bold'
                    : 'bg-emerald-600/30 text-emerald-300 border border-emerald-500/50 font-bold'
                }`}
              >
                {includeTuckerActPool ? 'UN-HARMONIZED (Tucker Act Added: +$220.15M)' : 'HARMONIZED (Tucker Act Excluded: $0.00)'}
              </button>
            </div>

            <div className="space-y-1.5 pt-2 border-t border-slate-800 text-xs font-mono">
              <div className="flex justify-between text-slate-400">
                <span>Series A 6.625% Notes (917300AA1):</span>
                <span className="text-white">$350,000,000.00</span>
              </div>
              <div className="flex justify-between text-slate-400">
                <span>Series B 6.750% Notes (917300AB9):</span>
                <span className="text-white">$150,000,000.00</span>
              </div>
              <div className="flex justify-between text-slate-400">
                <span>Tucker Act Escrow Pool (28 U.S.C. § 1491):</span>
                <span className={includeTuckerActPool ? 'text-amber-400 font-bold' : 'text-slate-500 line-through'}>
                  {includeTuckerActPool ? '+$220,150,000.00' : '$0.00 (REMOVED)'}
                </span>
              </div>
              <div className="flex justify-between pt-2 border-t border-slate-700 text-sm font-bold">
                <span className="text-slate-200">Resulting Total Capitalization:</span>
                <span className={includeTuckerActPool ? 'text-amber-400' : 'text-emerald-400'}>
                  ${currentTotalPrincipal.toLocaleString('en-US', { minimumFractionDigits: 2 })}
                </span>
              </div>
            </div>

            {!includeTuckerActPool ? (
              <div className="p-2.5 rounded bg-emerald-950/40 border border-emerald-500/30 text-[11px] text-emerald-300 flex items-center gap-2">
                <Check className="w-4 h-4 shrink-0 text-emerald-400" />
                <span>Uniform across BNY Mellon & D.C. Circuit Court filings: strictly $500,000,000.00.</span>
              </div>
            ) : (
              <div className="p-2.5 rounded bg-amber-950/40 border border-amber-500/30 text-[11px] text-amber-300 flex items-center gap-2">
                <AlertTriangle className="w-4 h-4 shrink-0 text-amber-400" />
                <span>Warning: Re-incorporating Tucker Act triggers non-uniformity ($720.15M vs $500M).</span>
              </div>
            )}
          </div>

          <div className="p-3 bg-slate-950 rounded-lg border border-slate-800 text-xs">
            <div className="font-semibold text-slate-200 mb-1">Exchange Conversion Check:</div>
            <div className="font-mono text-indigo-300">
              $500,000,000.00 × {exchangeRatio} = <strong>{calculatedShares.toLocaleString()} Common Shares</strong> of Centrus Energy Corp. (NYSE: LEU)
            </div>
          </div>
        </div>

        {/* DYREO Dynamic Yield Sweep Engine */}
        <div className="bg-slate-900/90 border border-slate-800 rounded-xl p-6 space-y-4">
          <div className="flex items-center justify-between">
            <h3 className="font-bold text-slate-100 flex items-center gap-2 text-sm sm:text-base">
              <TrendingUp className="w-4 h-4 text-indigo-400" />
              <span>DYREO Continuous Sweep Calculator</span>
            </h3>
            <span className="text-xs px-2 py-0.5 rounded bg-indigo-500/20 text-indigo-300 font-mono">
              Merton HJB Policy
            </span>
          </div>

          <p className="text-xs text-slate-300 leading-relaxed">
            Deterministic daily yield distribution vector <span className="font-mono text-indigo-300">D(t) = Y(t) · [0.60, 0.25, 0.10, 0.05]^T</span>. Enter any credited dividend or coupon yield to test the automated disbursement:
          </p>

          <div className="space-y-2">
            <label className="block text-xs font-medium text-slate-300">
              Test Yield Amount Credited ($):
            </label>
            <div className="flex items-center gap-2">
              <input
                type="number"
                min="0"
                step="10000"
                value={mockYield}
                onChange={(e) => setMockYield(Math.max(0, Number(e.target.value)))}
                className="w-full p-2 bg-slate-950 border border-slate-700 rounded-lg font-mono text-sm text-emerald-400 focus:outline-none focus:border-indigo-500"
              />
              <div className="flex gap-1 shrink-0">
                <button
                  onClick={() => setMockYield(500000)}
                  className="px-2 py-1 bg-slate-800 hover:bg-slate-700 text-xs text-slate-300 rounded cursor-pointer"
                >
                  $500k
                </button>
                <button
                  onClick={() => setMockYield(1000000)}
                  className="px-2 py-1 bg-slate-800 hover:bg-slate-700 text-xs text-slate-300 rounded cursor-pointer"
                >
                  $1M
                </button>
                <button
                  onClick={() => setMockYield(5000000)}
                  className="px-2 py-1 bg-slate-800 hover:bg-slate-700 text-xs text-slate-300 rounded cursor-pointer"
                >
                  $5M
                </button>
              </div>
            </div>
          </div>

          <div className="space-y-2 pt-2 border-t border-slate-800">
            {DYREO_ALLOCATION_VECTOR.map((item, idx) => {
              const allocated = (mockYield * item.percentage) / 100;
              return (
                <div key={idx} className="p-2.5 bg-slate-950 rounded-lg border border-slate-800/80 flex items-center justify-between text-xs">
                  <div className="flex items-center gap-2">
                    <span className="font-mono font-bold text-indigo-400 w-10 text-right">{item.percentage}%</span>
                    <span className="text-slate-300 font-medium">{item.category}</span>
                  </div>
                  <div className="font-mono font-bold text-emerald-400">
                    ${allocated.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      {/* Grid 2: Microgrid Physics & CUSIP Explorer */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* 300 Baltimore Rowhomes Microgrid Physics */}
        <div className="bg-slate-900/90 border border-slate-800 rounded-xl p-6 space-y-4">
          <div className="flex items-center justify-between">
            <h3 className="font-bold text-slate-100 flex items-center gap-2 text-sm sm:text-base">
              <Sun className="w-4 h-4 text-amber-400" />
              <span>300 Baltimore Rowhomes Solar Microgrid (S-EROI Validator)</span>
            </h3>
            <span className={`text-xs px-2 py-0.5 rounded font-mono ${isS_EROI_Valid ? 'bg-emerald-500/20 text-emerald-300' : 'bg-red-500/20 text-red-300'}`}>
              {isS_EROI_Valid ? 'QUALIFIED (≥ 0.73 kWh/$)' : 'NON-COMPLIANT'}
            </span>
          </div>

          <p className="text-xs text-slate-300">
            Escrow Sub-Account B mandates that disbursements for photovoltaic & LiFePO4 battery infrastructure satisfy the minimum Social Energy Return threshold:
          </p>

          <div className="grid grid-cols-2 gap-3 text-xs">
            <div>
              <label className="text-slate-400 block mb-1">Solar Output (kWh):</label>
              <input 
                type="number" 
                value={solarSolarOutputKwh} 
                onChange={(e) => setSolarOutputKwh(Number(e.target.value))}
                className="w-full p-1.5 bg-slate-950 border border-slate-700 rounded font-mono text-slate-200"
              />
            </div>
            <div>
              <label className="text-slate-400 block mb-1">Inverter / Line Loss (kWh):</label>
              <input 
                type="number" 
                value={solarLossKwh} 
                onChange={(e) => setSolarLossKwh(Number(e.target.value))}
                className="w-full p-1.5 bg-slate-950 border border-slate-700 rounded font-mono text-slate-200"
              />
            </div>
            <div>
              <label className="text-slate-400 block mb-1">CapEx ($):</label>
              <input 
                type="number" 
                value={capexDollars} 
                onChange={(e) => setCapexDollars(Number(e.target.value))}
                className="w-full p-1.5 bg-slate-950 border border-slate-700 rounded font-mono text-slate-200"
              />
            </div>
            <div>
              <label className="text-slate-400 block mb-1">Lifetime Maint ($):</label>
              <input 
                type="number" 
                value={opexDollars} 
                onChange={(e) => setOpexDollars(Number(e.target.value))}
                className="w-full p-1.5 bg-slate-950 border border-slate-700 rounded font-mono text-slate-200"
              />
            </div>
          </div>

          <div className="p-3 bg-slate-950 rounded-lg border border-slate-800 flex items-center justify-between">
            <span className="text-xs text-slate-400">Calculated S-EROI:</span>
            <div className="flex items-center gap-2">
              <span className={`font-mono font-bold text-base ${isS_EROI_Valid ? 'text-emerald-400' : 'text-red-400'}`}>
                {calculatedS_EROI.toFixed(3)} kWh/$
              </span>
              <span className="text-xs text-slate-500">(Target: ≥ 0.730)</span>
            </div>
          </div>
        </div>

        {/* SEC Form 13F CUSIP Matcher */}
        <div className="bg-slate-900/90 border border-slate-800 rounded-xl p-6 space-y-4">
          <div className="flex items-center justify-between">
            <h3 className="font-bold text-slate-100 flex items-center gap-2 text-sm sm:text-base">
              <Database className="w-4 h-4 text-indigo-400" />
              <span>SEC Form 13F Institutional CUSIP Explorer</span>
            </h3>
            <span className="text-xs text-slate-400 font-mono">File No. 28-1235</span>
          </div>

          <div className="relative">
            <Search className="w-3.5 h-3.5 text-slate-400 absolute left-2.5 top-1/2 -translate-y-1/2" />
            <input
              type="text"
              value={cusipSearch}
              onChange={(e) => setCusipSearch(e.target.value)}
              placeholder="Search CUSIP (e.g. 917300AA1) or Issuer..."
              className="w-full pl-8 pr-3 py-1.5 text-xs bg-slate-950 border border-slate-700 rounded-lg text-slate-200"
            />
          </div>

          <div className="space-y-2 max-h-56 overflow-y-auto pr-1">
            {CUSIP_PORTFOLIO_DATA.filter(item => 
              item.cusip.toLowerCase().includes(cusipSearch.toLowerCase()) ||
              item.issuer.toLowerCase().includes(cusipSearch.toLowerCase())
            ).map((item, idx) => (
              <div key={idx} className="p-2.5 bg-slate-950 rounded-lg border border-slate-800 flex items-center justify-between text-xs">
                <div>
                  <div className="font-medium text-white">{item.issuer}</div>
                  <div className="text-[10px] text-slate-400 font-mono">CUSIP: {item.cusip} | {item.titleOfClass}</div>
                </div>
                <div className="text-right">
                  <div className="font-mono text-emerald-400 font-semibold">{item.sharesOrPrincipal}</div>
                  <div className="text-[10px] text-indigo-400 font-sans">{item.discretion}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};