'use client';

import React, { useState, useMemo } from 'react';
import { useSandboxStore, InsiderTrade, CongressTrade, WhaleTrade } from '@/lib/store';
import { calculateRollingZScore, detectInsiderClusters, coupleBayesianRebound } from '@/lib/math/statistics';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, ReferenceLine } from 'recharts';
import 'katex/dist/katex.min.css';
import { BlockMath, InlineMath } from 'react-katex';
import {
  Shield, User, ArrowDownRight, ArrowUpRight, DollarSign, Calendar, Landmark,
  ChevronDown, ChevronUp, Search, Radio, Building2, AlertTriangle, Layers, Percent
} from 'lucide-react';

export default function InsiderDemo() {
  const {
    insiderTrades,
    congressTrades,
    whaleTrades,
    insiderVolumes,
    priorProbability
  } = useSandboxStore();

  // Component local UI states
  const [activeSegment, setActiveSegment] = useState<'executives' | 'congress' | 'whales'>('executives');
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedTicker, setSelectedTicker] = useState<string | null>(null);
  
  const [scanning, setScanning] = useState(false);
  const [scanResults, setScanResults] = useState<{
    ticker: string;
    zScore: number;
    clusterCount: number;
    multiplier: number;
    isAnomaly: boolean;
    coupledRebound: number;
  }[] | null>(null);

  const [showMathAccordion, setShowMathAccordion] = useState(false);

  // Run Global Flow Scan
  const handleGlobalFlowScan = () => {
    setScanning(true);
    setTimeout(() => {
      const results = Object.keys(insiderVolumes).map((ticker) => {
        const volumes = insiderVolumes[ticker];
        const zResult = calculateRollingZScore(volumes);
        
        // Filter trades for this ticker to detect clusters
        const tickerTrades = insiderTrades.filter(t => t.ticker === ticker);
        const clusterResult = detectInsiderClusters(tickerTrades);
        
        // Bayesian coupling
        const coupled = coupleBayesianRebound(priorProbability, zResult.latest);

        return {
          ticker,
          zScore: parseFloat(zResult.latest.toFixed(2)),
          clusterCount: clusterResult.count,
          multiplier: parseFloat(clusterResult.multiplier.toFixed(2)),
          isAnomaly: zResult.isAnomaly || clusterResult.isCluster,
          coupledRebound: coupled,
        };
      });

      // Sort anomalies to the top
      results.sort((a, b) => (b.isAnomaly ? 1 : 0) - (a.isAnomaly ? 1 : 0) || b.zScore - a.zScore);
      
      setScanResults(results);
      setScanning(false);
    }, 1000);
  };

  // Perform Ticker Lookup
  const handleTickerLookup = (e: React.FormEvent) => {
    e.preventDefault();
    const query = searchQuery.trim().toUpperCase();
    if (query) {
      setSelectedTicker(query);
    } else {
      setSelectedTicker(null);
    }
  };

  // Compute stats for selected ticker
  const tickerStats = useMemo(() => {
    if (!selectedTicker) return null;
    
    const volumes = insiderVolumes[selectedTicker] || [5000, 4800, 5200, 6000, 4500, 5000]; // fallback
    const zResult = calculateRollingZScore(volumes);
    
    const tickerTrades = insiderTrades.filter(t => t.ticker === selectedTicker);
    const clusterResult = detectInsiderClusters(tickerTrades);
    const coupled = coupleBayesianRebound(priorProbability, zResult.latest);

    return {
      zScore: zResult.latest,
      isAnomaly: zResult.isAnomaly,
      clusterCount: clusterResult.count,
      isCluster: clusterResult.isCluster,
      multiplier: clusterResult.multiplier,
      coupledRebound: coupled,
      volumes,
    };
  }, [selectedTicker, insiderVolumes, insiderTrades, priorProbability]);

  // Volumes chart data for selected ticker
  const volumeChartData = useMemo(() => {
    if (!tickerStats || !selectedTicker) return [];
    return tickerStats.volumes.map((vol, idx) => ({
      month: `M-${tickerStats.volumes.length - idx - 1}`,
      'Volumen (Shares)': vol,
    }));
  }, [tickerStats, selectedTicker]);

  return (
    <div className="bg-slate-900/60 backdrop-blur-md border border-slate-800 rounded-2xl p-6 text-slate-100 shadow-xl relative overflow-hidden">
      <div className="absolute top-0 right-0 w-32 h-32 bg-purple-500/10 rounded-full blur-3xl -z-10" />

      {/* Header */}
      <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4 border-b border-slate-800 pb-4 mb-6">
        <div>
          <span className="text-purple-400 text-xs font-semibold uppercase tracking-wider">Element 3</span>
          <h2 className="text-2xl font-bold bg-gradient-to-r from-purple-400 to-indigo-200 bg-clip-text text-transparent">
            Institutional & Insider Flow Tracker
          </h2>
        </div>
        <div className="bg-slate-900 border border-slate-800 rounded-xl px-4 py-2 flex items-center gap-3">
          <Shield className="text-purple-400 w-5 h-5" />
          <div>
            <p className="text-slate-400 text-xs">Bayesianische Kopplung</p>
            <p className="font-mono text-sm font-bold text-purple-400">
              Prior Rebound: {(priorProbability * 100).toFixed(0)}%
            </p>
          </div>
        </div>
      </div>

      {/* SECTION 1: Dual-Query Actions */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <div className="p-4 rounded-xl border border-slate-800 bg-slate-950/30 flex flex-col justify-between gap-4">
          <div className="space-y-1">
            <h4 className="text-sm font-semibold text-slate-300">Global Flow Outlier Scan</h4>
            <p className="text-xs text-slate-400">Filtert den Markt nach statistisch signifikanten Kaufvolumina (Z-Score &gt; 2.0) und konzertierten Käufen (Insider-Cluster).</p>
          </div>
          <button
            onClick={handleGlobalFlowScan}
            disabled={scanning}
            className="w-full bg-gradient-to-r from-purple-500 to-indigo-500 hover:from-purple-600 hover:to-indigo-600 disabled:from-purple-900 text-white font-bold py-2.5 px-4 rounded-xl transition-all shadow-lg shadow-purple-500/10 flex items-center justify-center gap-2"
          >
            <Radio className={`w-4 h-4 ${scanning ? 'animate-pulse' : ''}`} />
            <span>{scanning ? 'Scanne Transaktionen...' : 'Global Flow Scan starten'}</span>
          </button>
        </div>

        <div className="p-4 rounded-xl border border-slate-800 bg-slate-950/30 flex flex-col justify-between gap-4">
          <div className="space-y-1">
            <h4 className="text-sm font-semibold text-slate-300">Ticker Lookup (Einzelauswertung)</h4>
            <p className="text-xs text-slate-400">Gezielte Abfrage von Insider-Z-Scores und Bayesianischen Kopplungs-Updates (z.B. PLTR, RACE, AMZN, AAPL).</p>
          </div>
          <form onSubmit={handleTickerLookup} className="flex gap-2">
            <input
              type="text"
              required
              placeholder="z.B. PLTR"
              className="bg-slate-950 border border-slate-800 rounded-lg p-2.5 flex-1 text-slate-100 font-mono text-sm uppercase focus:outline-none focus:border-purple-500"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
            />
            <button
              type="submit"
              className="bg-slate-800 hover:bg-slate-700 text-purple-400 hover:text-purple-300 font-bold px-4 py-2 border border-slate-700 rounded-lg transition-colors text-sm"
            >
              Lookup
            </button>
          </form>
        </div>
      </div>

      {/* Ticker Stats / Lookup Section */}
      {selectedTicker && tickerStats && (
        <div className="p-5 rounded-2xl border border-purple-500/30 bg-purple-500/5 grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6 animate-fade-in">
          <div className="space-y-3">
            <div className="flex justify-between items-center border-b border-slate-800 pb-2">
              <h3 className="font-mono font-bold text-lg text-slate-100">{selectedTicker} Einzelauswertung</h3>
              {tickerStats.isAnomaly && <span className="px-2 py-0.5 rounded bg-purple-500/20 text-purple-300 text-[10px] font-bold border border-purple-500/30 animate-pulse">FLOW OUTLIER</span>}
            </div>
            
            <div className="space-y-2 text-xs">
              <div className="flex justify-between font-mono">
                <span className="text-slate-400">Volumetrischer Z-Score:</span>
                <span className={`font-bold ${tickerStats.isAnomaly ? 'text-purple-400' : 'text-slate-300'}`}>
                  Z = {tickerStats.zScore.toFixed(2)}
                </span>
              </div>
              <div className="flex justify-between font-mono">
                <span className="text-slate-400">Konzertiertes Cluster (14 Tage):</span>
                <span className={`font-bold ${tickerStats.isCluster ? 'text-emerald-400' : 'text-slate-400'}`}>
                  {tickerStats.isCluster ? `JA (${tickerStats.clusterCount} Insiders)` : `NEIN (${tickerStats.clusterCount})`}
                </span>
              </div>
              {tickerStats.isCluster && (
                <div className="flex justify-between font-mono text-emerald-400">
                  <span>Cluster Exponent-Multiplikator:</span>
                  <span>x{tickerStats.multiplier.toFixed(2)}</span>
                </div>
              )}
              <div className="flex justify-between font-mono border-t border-slate-800/80 pt-2 text-sm">
                <span className="text-slate-300">Gekoppelte Rebound-Wahrsch.:</span>
                <span className="text-purple-400 font-bold flex items-center gap-1">
                  <Percent className="w-3.5 h-3.5" />
                  {(tickerStats.coupledRebound * 100).toFixed(0)}%
                </span>
              </div>
            </div>
          </div>

          {/* Volume chart */}
          <div className="lg:col-span-2 h-44 w-full">
            <div className="text-[10px] text-slate-400 mb-1 text-center font-mono font-semibold">Insider Handelsvolumen (24 Monate Baseline)</div>
            <ResponsiveContainer width="100%" height="90%">
              <BarChart data={volumeChartData}>
                <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" />
                <XAxis dataKey="month" stroke="#64748b" fontSize={9} />
                <YAxis stroke="#64748b" fontSize={9} />
                <Tooltip contentStyle={{ backgroundColor: '#0f172a', borderColor: '#334155', borderRadius: '8px' }} />
                <Bar dataKey="Volumen (Shares)" fill="#8b5cf6" radius={[3, 3, 0, 0]} />
              </BarChart>
            </ResponsiveContainer>
          </div>
        </div>
      )}

      {/* Global Scan Outlier List */}
      {scanResults && (
        <div className="p-5 rounded-2xl border border-slate-800 bg-slate-950/20 mb-6 space-y-3 animate-fade-in">
          <h3 className="text-sm font-bold text-slate-200 uppercase tracking-wider">Ergebnisse des Global Flow Scans</h3>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            {scanResults.map((res) => (
              <div
                key={res.ticker}
                onClick={() => setSelectedTicker(res.ticker)}
                className={`p-3 rounded-xl border cursor-pointer hover:bg-slate-900/60 transition-colors ${res.isAnomaly ? 'border-purple-500/40 bg-purple-500/5' : 'border-slate-850 bg-slate-900/40'}`}
              >
                <div className="flex justify-between items-center">
                  <span className="font-mono font-bold text-slate-200">{res.ticker}</span>
                  {res.isAnomaly && <span className="w-2.5 h-2.5 rounded-full bg-purple-500 animate-pulse" />}
                </div>
                <div className="text-[10px] text-slate-400 mt-2 space-y-1">
                  <div>Z-Score: <span className="font-mono text-slate-300 font-bold">{res.zScore}</span></div>
                  <div>Cluster: <span className="font-mono text-slate-300">{res.clusterCount} Traders</span></div>
                  <div>Rebound: <span className="font-mono text-purple-400 font-bold">{Math.round(res.coupledRebound * 100)}%</span></div>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* SECTION 2: Smart Money Segment Tabs */}
      <div className="space-y-4">
        <div className="flex bg-slate-950/80 p-1 rounded-xl border border-slate-800/80 max-w-md">
          <button
            onClick={() => setActiveSegment('executives')}
            className={`flex-1 py-2 rounded-lg text-xs font-semibold font-sans transition-all flex items-center justify-center gap-1.5 ${activeSegment === 'executives' ? 'bg-purple-500 text-white font-bold' : 'text-slate-400 hover:text-slate-200'}`}
          >
            <User className="w-3.5 h-3.5" /> Vorstände (Form 4)
          </button>
          <button
            onClick={() => setActiveSegment('congress')}
            className={`flex-1 py-2 rounded-lg text-xs font-semibold font-sans transition-all flex items-center justify-center gap-1.5 ${activeSegment === 'congress' ? 'bg-purple-500 text-white font-bold' : 'text-slate-400 hover:text-slate-200'}`}
          >
            <Landmark className="w-3.5 h-3.5" /> Kongress (Stock Act)
          </button>
          <button
            onClick={() => setActiveSegment('whales')}
            className={`flex-1 py-2 rounded-lg text-xs font-semibold font-sans transition-all flex items-center justify-center gap-1.5 ${activeSegment === 'whales' ? 'bg-purple-500 text-white font-bold' : 'text-slate-400 hover:text-slate-200'}`}
          >
            <Building2 className="w-3.5 h-3.5" /> Whales (13F Filings)
          </button>
        </div>

        {/* Ledger displays */}
        <div className="border border-slate-800 rounded-xl overflow-hidden bg-slate-950/40">
          {activeSegment === 'executives' && (
            <table className="w-full border-collapse text-left text-xs">
              <thead>
                <tr className="border-b border-slate-800 text-slate-400 font-semibold bg-slate-900/40">
                  <th className="p-3">Ticker</th>
                  <th className="p-3">Insider Name</th>
                  <th className="p-3">Position</th>
                  <th className="p-3">Transaktion</th>
                  <th className="p-3 font-mono">Stücke</th>
                  <th className="p-3 text-right">Wert ($)</th>
                </tr>
              </thead>
              <tbody>
                {insiderTrades.map((t) => {
                  const isBuy = t.type === 'BUY';
                  return (
                    <tr key={t.id} className="border-b border-slate-850/50 hover:bg-slate-850/10 transition-colors">
                      <td className="p-3 font-bold font-mono text-purple-400">{t.ticker}</td>
                      <td className="p-3 text-slate-200 font-semibold">{t.insiderName}</td>
                      <td className="p-3 text-slate-400">{t.relation}</td>
                      <td className="p-3">
                        <span className={`px-1.5 py-0.5 rounded text-[9px] font-bold ${isBuy ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' : 'bg-rose-500/10 text-rose-400 border border-rose-500/20'}`}>
                          {isBuy ? 'KAUF' : 'VERKAUF'}
                        </span>
                      </td>
                      <td className="p-3 font-mono text-slate-300">{t.shares.toLocaleString()}</td>
                      <td className={`p-3 font-mono text-right font-bold ${isBuy ? 'text-emerald-400' : 'text-rose-400'}`}>
                        ${t.value.toLocaleString()}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          )}

          {activeSegment === 'congress' && (
            <div className="space-y-4">
              <div className="p-3 bg-amber-500/10 border-b border-slate-800 text-xs text-amber-400 flex items-start gap-2.5">
                <AlertTriangle className="w-5 h-5 shrink-0" />
                <div>
                  <span className="font-bold">U.S. Congress Stock Act Offenlegungslags:</span> Abgeordnete müssen Käufe innerhalb von 30 bis 45 Tagen offenlegen. Der Alpha-Lag in der Tabelle visualisiert diese Meldeverzögerung. Käufe können verzögert eingepreist sein.
                </div>
              </div>
              <table className="w-full border-collapse text-left text-xs">
                <thead>
                  <tr className="border-b border-slate-800 text-slate-400 font-semibold bg-slate-900/40">
                    <th className="p-3">Ticker</th>
                    <th className="p-3">Abgeordneter</th>
                    <th className="p-3">Kammer</th>
                    <th className="p-3">Transaktion</th>
                    <th className="p-3">Volumen-Spanne</th>
                    <th className="p-3 font-mono">Handelsdatum</th>
                    <th className="p-3 font-mono">Meldedatum</th>
                    <th className="p-3 text-right">Alpha-Lag (Tage)</th>
                  </tr>
                </thead>
                <tbody>
                  {congressTrades.map((c) => {
                    const isBuy = c.type === 'BUY';
                    return (
                      <tr key={c.id} className="border-b border-slate-850/50 hover:bg-slate-850/10 transition-colors">
                        <td className="p-3 font-bold font-mono text-purple-400">{c.ticker}</td>
                        <td className="p-3 text-slate-200 font-semibold">{c.representative}</td>
                        <td className="p-3 text-slate-400">{c.chamber}</td>
                        <td className="p-3">
                          <span className={`px-1.5 py-0.5 rounded text-[9px] font-bold ${isBuy ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' : 'bg-rose-500/10 text-rose-400 border border-rose-500/20'}`}>
                            {isBuy ? 'KAUF' : 'VERKAUF'}
                          </span>
                        </td>
                        <td className="p-3 text-slate-300 font-mono">{c.valueRange}</td>
                        <td className="p-3 font-mono text-slate-400">{c.transactionDate}</td>
                        <td className="p-3 font-mono text-slate-400">{c.filingDate}</td>
                        <td className="p-3 font-mono text-right text-amber-400 font-bold">{c.lagDays} Tage</td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          )}

          {activeSegment === 'whales' && (
            <table className="w-full border-collapse text-left text-xs">
              <thead>
                <tr className="border-b border-slate-800 text-slate-400 font-semibold bg-slate-900/40">
                  <th className="p-3">Ticker</th>
                  <th className="p-3">Institution (13F Filers)</th>
                  <th className="p-3">Art</th>
                  <th className="p-3 font-mono">Gehandelte Anteile</th>
                  <th className="p-3 font-mono">Aktueller Bestand</th>
                  <th className="p-3 font-mono">Meldedatum</th>
                  <th className="p-3 text-right">Geschätzter Wert ($)</th>
                </tr>
              </thead>
              <tbody>
                {whaleTrades.map((w) => {
                  const isBuy = w.type === 'BUY' || w.type === 'NEW';
                  return (
                    <tr key={w.id} className="border-b border-slate-850/50 hover:bg-slate-850/10 transition-colors">
                      <td className="p-3 font-bold font-mono text-purple-400">{w.ticker}</td>
                      <td className="p-3 text-slate-200 font-semibold">{w.institution}</td>
                      <td className="p-3">
                        <span className={`px-1.5 py-0.5 rounded text-[9px] font-bold ${isBuy ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' : 'bg-rose-500/10 text-rose-400 border border-rose-500/20'}`}>
                          {w.type}
                        </span>
                      </td>
                      <td className="p-3 font-mono text-slate-300">{w.sharesTraded.toLocaleString()}</td>
                      <td className="p-3 font-mono text-slate-400">{w.sharesHeld.toLocaleString()}</td>
                      <td className="p-3 font-mono text-slate-400">{w.filingDate}</td>
                      <td className={`p-3 font-mono text-right font-bold ${isBuy ? 'text-emerald-400' : 'text-rose-400'}`}>
                        ${w.estimatedValue.toLocaleString()}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          )}
        </div>
      </div>

      {/* SECTION 3: Mathematical LaTeX Accordion */}
      <div className="border-t border-slate-850 pt-4 mt-6">
        <button
          onClick={() => setShowMathAccordion(!showMathAccordion)}
          className="flex items-center gap-1.5 text-xs text-slate-400 hover:text-purple-400 transition-colors focus:outline-none"
        >
          <span>{showMathAccordion ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}</span>
          <span className="font-semibold uppercase tracking-wider">Mathematische Formulierung (Z-Score &amp; Bayesianische Kopplung)</span>
        </button>

        {showMathAccordion && (
          <div className="mt-4 p-4 rounded-xl border border-slate-850 bg-slate-950/40 text-xs text-slate-300 space-y-4">
            <div>
              <h4 className="font-bold text-purple-400 mb-1">1. Volumetrischer Z-Score (Statistische Signifikanz)</h4>
              <p className="mb-2">
                Der Z-Score gibt an, um wie viele Standardabweichungen das aktuelle Transaktionsvolumen <InlineMath math="X_t" /> vom historischen Durchschnitt <InlineMath math="\mu" /> abweicht:
              </p>
              <div className="py-2 overflow-x-auto text-slate-200">
                <BlockMath math="Z = \frac{X_t - \mu}{\sigma}" />
              </div>
              <p className="text-slate-400">
                Ein Z-Score &gt; 2.0 wird als Ausreißer (Anomaly Trigger) eingestuft, was einer Wahrscheinlichkeit von unter 2.27% für einen zufälligen Anstieg entspricht (einseitiger Test bei Normalverteilung).
              </p>
            </div>

            <div className="border-t border-slate-900 pt-3">
              <h4 className="font-bold text-purple-400 mb-1">2. Bayesianische Kopplung (Rebound-Wahrscheinlichkeit)</h4>
              <p className="mb-2">
                Wir verknüpfen den Preisdrop-Sentiment (Element 2) mit den Insider-Z-Scores (Element 3), um die A-Posteriori-Wahrscheinlichkeit eines echten Rebounds zu ermitteln:
              </p>
              <div className="py-2 overflow-x-auto text-slate-200">
                <BlockMath math="P(R|Z) = \frac{P(Z|R) \cdot P(R)}{P(Z|R) \cdot P(R) + P(Z|\neg R) \cdot (1 - P(R))}" />
              </div>
              <p className="text-slate-400">
                wobei <InlineMath math="P(R)" /> die Prior-Wahrscheinlichkeit ist. Ist der Z-Score hoch (Käufe), steigt die Likelihood <InlineMath math="P(Z|R)" /> stark an und maximiert den Rebound-Erwartungswert.
              </p>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}