import React from 'react';
import { Settings, X } from 'lucide-react';

interface WhaleBlueprintModalProps {
  isOpen: boolean;
  onClose: () => void;
}

export default function WhaleBlueprintModal({ isOpen, onClose }: WhaleBlueprintModalProps) {
  React.useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        onClose();
      }
    };
    if (isOpen) {
      window.addEventListener('keydown', handleKeyDown);
    }
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/85 backdrop-blur-md p-4 sm:p-6 md:p-8 animate-fade-in">
      <div className="bg-slate-900 border border-slate-800/80 rounded-3xl w-full max-w-4xl h-[80vh] flex flex-col overflow-hidden shadow-2xl relative text-slate-350">
        
        {/* Modal Header */}
        <div className="flex justify-between items-center px-6 py-4 bg-slate-950/45 border-b border-slate-800/60">
          <div>
            <h2 className="text-base font-bold bg-gradient-to-r from-sky-400 to-blue-400 bg-clip-text text-transparent flex items-center gap-2">
              <Settings className="w-5 h-5 text-sky-400" /> Whale Satellites - Operational Blueprint
            </h2>
            <p className="text-[10px] text-slate-500 font-mono">System User Manual &amp; Interface Mechanics</p>
          </div>
          <button
            onClick={onClose}
            className="text-slate-400 hover:text-slate-200 bg-slate-950/50 border border-slate-800 hover:border-slate-700 p-2 rounded-xl transition-all cursor-pointer flex items-center justify-center"
            aria-label="Close modal"
          >
            <X className="w-4 h-4" />
          </button>
        </div>

        {/* Modal Body */}
        <div className="flex-1 overflow-y-auto p-6 sm:p-8 space-y-8 text-slate-350 scrollbar-thin">
          
          <div className="border-b border-slate-800/80 pb-3">
            <h3 className="text-base font-bold text-slate-200">Whale Ingestion &amp; Filters</h3>
            <p className="text-xs text-slate-400 mt-1">Operational details of boutique manager tracking and conviction scoring.</p>
          </div>

          {/* Core Mechanics */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="p-4 rounded-xl border border-slate-800/60 bg-slate-950/40 space-y-2">
              <h4 className="text-xs font-bold text-sky-400 uppercase tracking-wider font-mono">1. Boutique Manager Filter</h4>
              <p className="text-xs text-slate-400 leading-relaxed font-sans">
                The universe is restricted to active boutique investment firms holding between $100M and $5B in Assets Under Management (AUM), exhibiting an Active Share exceeding 80%. This excludes large index-trackers and highlights alpha-generating concentrated stock pickers.
              </p>
            </div>
            
            <div className="p-4 rounded-xl border border-slate-800/60 bg-slate-950/40 space-y-2">
              <h4 className="text-xs font-bold text-sky-400 uppercase tracking-wider font-mono">2. Concentration Index (CI)</h4>
              <p className="text-xs text-slate-400 leading-relaxed font-sans">
                Prioritizes portfolios where the top 10 holdings represent more than 50% of the total reported holdings value. This ensures that the positions tracked reflect high-conviction ideas where managers are willing to expose significant capital.
              </p>
            </div>

            <div className="p-4 rounded-xl border border-slate-800/60 bg-slate-950/40 space-y-2">
              <h4 className="text-xs font-bold text-sky-400 uppercase tracking-wider font-mono">3. Velocity of Conviction (VoC)</h4>
              <p className="text-xs text-slate-400 leading-relaxed font-sans">
                Measures the quarterly change in portfolio weighting for each asset. It isolates managers' active additions or liquidations ($\Delta W_i$), sorting the dashboard holdings strictly by positive conviction velocity to find accumulating trends.
              </p>
            </div>

            <div className="p-4 rounded-xl border border-slate-800/60 bg-slate-950/40 space-y-2">
              <h4 className="text-xs font-bold text-sky-400 uppercase tracking-wider font-mono">4. 13F Filing Lag Warning</h4>
              <p className="text-xs text-slate-400 leading-relaxed font-sans">
                Form 13F filings are submitted up to 45 days after the end of the calendar quarter. The system displays these shifts as lagging indicators and overlays them with volume markers to confirm whether the manager is still actively buying.
              </p>
            </div>
          </div>

          {/* Interface Specifications */}
          <div className="space-y-3">
            <h3 className="text-sm font-bold text-slate-200 border-b border-slate-800 pb-2">Interface Layout &amp; Mechanics</h3>
            <div className="text-xs text-slate-400 space-y-3 leading-relaxed">
              <p>
                <strong className="text-sky-400 font-semibold">Whale Profile Cards:</strong> The left sidebar allows selecting the active boutique manager (e.g. Scion Asset Management, Akre Capital, Mairs &amp; Power). Displays their current AUM, Concentration index, and top holdings size.
              </p>
              <p>
                <strong className="text-sky-400 font-semibold">Transactions Ledger:</strong> The right table shows the selected manager's quarterly additions and reductions. Shows security names, tickers, shares held, reported values, portfolio weights, and calculated VoC deltas.
              </p>
              <p>
                <strong className="text-sky-400 font-semibold">DEV_MODE Offline Protection:</strong> When offline, the `/api/whale/screener` endpoint bypasses SEC EDGAR connections and returns stored mock files, indicating isShieldActive: true.
              </p>
            </div>
          </div>

        </div>
      </div>
    </div>
  );
}