import React, { useState } from 'react';
import { Search, Zap, Layers, Sparkles } from 'lucide-react';

export const MathInspectorTab: React.FC = () => {
  const [selectedParadigm, setSelectedParadigm] = useState<'sparse' | 'dense' | 'learned-sparse' | 'cross-encoder'>('dense');

  return (
    <div className="space-y-5 max-w-5xl">
      {/* Overview Card */}
      <div className="border border-zinc-800 bg-zinc-900/40 p-4 rounded-lg space-y-2.5 font-sans">
        <div className="flex items-center justify-between">
          <h2 className="text-base font-semibold text-zinc-100">
            The Unified Inner-Product Formulation
          </h2>
          <span className="text-[11px] font-mono text-zinc-500">
            Lin et al. (2021)
          </span>
        </div>
        <p className="text-xs text-zinc-400 leading-relaxed">
          Modern information retrieval maps both lexical and neural models to a unified mathematical objective:
          <strong> Maximum Inner Product Search (MIPS)</strong> over vector spaces.
          Sparse, dense, and learned sparse methods differ primarily in dimensionality, sparsity, and indexing data structures.
        </p>

        {/* Math Equation */}
        <div className="p-3 bg-zinc-950 border border-zinc-850 rounded font-mono text-center text-xs text-zinc-200 my-1">
          Score(q, d) = ⟨ E<sub>Q</sub>(q), E<sub>D</sub>(d) ⟩ = ∑<sub>i</sub> E<sub>Q</sub>(q)<sub>i</sub> · E<sub>D</sub>(d)<sub>i</sub>
        </div>
      </div>

      {/* Paradigm Tabs */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-xs">
        <button
          onClick={() => setSelectedParadigm('sparse')}
          className={`p-3 rounded-lg border text-left transition flex items-start space-x-2 cursor-pointer ${
            selectedParadigm === 'sparse'
              ? 'bg-amber-100 dark:bg-amber-500/10 border-amber-400 dark:border-amber-500/50 text-amber-950 dark:text-amber-200 ring-1 ring-amber-400/40 font-semibold dark:font-medium'
              : 'bg-zinc-100/60 dark:bg-zinc-950 border-zinc-300 dark:border-zinc-850 text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200 hover:bg-zinc-200/60 dark:hover:bg-zinc-900'
          }`}
        >
          <Search className={`w-4 h-4 mt-0.5 shrink-0 ${selectedParadigm === 'sparse' ? 'text-amber-700 dark:text-amber-400' : 'text-zinc-400 dark:text-zinc-500'}`} />
          <div>
            <div className="font-semibold">Unsupervised Sparse</div>
            <div className="text-[11px] text-zinc-500 mt-0.5">BM25 / Lucene Postings</div>
          </div>
        </button>

        <button
          onClick={() => setSelectedParadigm('dense')}
          className={`p-3 rounded-lg border text-left transition flex items-start space-x-2 cursor-pointer ${
            selectedParadigm === 'dense'
              ? 'bg-cyan-100 dark:bg-cyan-500/10 border-cyan-400 dark:border-cyan-500/50 text-cyan-950 dark:text-cyan-200 ring-1 ring-cyan-400/40 font-semibold dark:font-medium'
              : 'bg-zinc-100/60 dark:bg-zinc-950 border-zinc-300 dark:border-zinc-850 text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200 hover:bg-zinc-200/60 dark:hover:bg-zinc-900'
          }`}
        >
          <Zap className={`w-4 h-4 mt-0.5 shrink-0 ${selectedParadigm === 'dense' ? 'text-cyan-700 dark:text-cyan-400' : 'text-zinc-400 dark:text-zinc-500'}`} />
          <div>
            <div className="font-semibold">Supervised Dense</div>
            <div className="text-[11px] text-zinc-500 mt-0.5">BGE / Faiss HNSW</div>
          </div>
        </button>

        <button
          onClick={() => setSelectedParadigm('learned-sparse')}
          className={`p-3 rounded-lg border text-left transition flex items-start space-x-2 cursor-pointer ${
            selectedParadigm === 'learned-sparse'
              ? 'bg-purple-100 dark:bg-purple-500/10 border-purple-400 dark:border-purple-500/50 text-purple-950 dark:text-purple-200 ring-1 ring-purple-400/40 font-semibold dark:font-medium'
              : 'bg-zinc-100/60 dark:bg-zinc-950 border-zinc-300 dark:border-zinc-850 text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200 hover:bg-zinc-200/60 dark:hover:bg-zinc-900'
          }`}
        >
          <Layers className={`w-4 h-4 mt-0.5 shrink-0 ${selectedParadigm === 'learned-sparse' ? 'text-purple-700 dark:text-purple-400' : 'text-zinc-400 dark:text-zinc-500'}`} />
          <div>
            <div className="font-semibold">Learned Sparse</div>
            <div className="text-[11px] text-zinc-500 mt-0.5">SPLADE / Lucene Impact</div>
          </div>
        </button>

        <button
          onClick={() => setSelectedParadigm('cross-encoder')}
          className={`p-3 rounded-lg border text-left transition flex items-start space-x-2 cursor-pointer ${
            selectedParadigm === 'cross-encoder'
              ? 'bg-emerald-100 dark:bg-emerald-500/10 border-emerald-400 dark:border-emerald-500/50 text-emerald-950 dark:text-emerald-200 ring-1 ring-emerald-400/40 font-semibold dark:font-medium'
              : 'bg-zinc-100/60 dark:bg-zinc-950 border-zinc-300 dark:border-zinc-850 text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200 hover:bg-zinc-200/60 dark:hover:bg-zinc-900'
          }`}
        >
          <Sparkles className={`w-4 h-4 mt-0.5 shrink-0 ${selectedParadigm === 'cross-encoder' ? 'text-emerald-700 dark:text-emerald-400' : 'text-zinc-400 dark:text-zinc-500'}`} />
          <div>
            <div className="font-semibold">Cross-Encoder</div>
            <div className="text-[11px] text-zinc-500 mt-0.5">RankLLM / Full Attention</div>
          </div>
        </button>
      </div>

      {/* Details Box */}
      <div className="border border-zinc-800 bg-zinc-900/30 p-4.5 rounded-lg space-y-3.5 text-xs font-sans">
        {selectedParadigm === 'sparse' && (
          <div className="space-y-3">
            <h3 className="text-sm font-semibold text-amber-200">
              Unsupervised Sparse Retrieval (BM25)
            </h3>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-2 font-mono text-[11px]">
              <div className="p-2.5 bg-zinc-950 rounded border border-zinc-850">
                <span className="text-zinc-500 block">Dimensionality:</span>
                <span className="text-zinc-200 font-medium">|V| ≈ 30,000+ words</span>
              </div>
              <div className="p-2.5 bg-zinc-950 rounded border border-zinc-850">
                <span className="text-zinc-500 block">Sparsity:</span>
                <span className="text-zinc-200 font-medium">&gt; 99.9% zeros</span>
              </div>
              <div className="p-2.5 bg-zinc-950 rounded border border-zinc-850">
                <span className="text-zinc-500 block">Index Structure:</span>
                <span className="text-zinc-200 font-medium">Inverted Posting Lists (Lucene)</span>
              </div>
            </div>
            <p className="text-zinc-400 leading-relaxed">
              In BM25, query and document vectors lie in high-dimensional lexical vocabulary space.
              Only non-zero entries correspond to tokens present in the document.
              The dot product is evaluated via inverted posting lists without scanning non-matching documents.
            </p>
            <div className="p-2.5 bg-zinc-950 rounded border border-zinc-850 font-mono text-[11px] text-amber-200/90">
              E_Q(q)_i = 1 (if token i ∈ q, else 0)<br />
              E_D(d)_i = IDF(i) · [ TF(i,d)·(k₁+1) / (TF(i,d) + k₁·(1 - b + b·|D|/avgdl)) ]
            </div>
          </div>
        )}

        {selectedParadigm === 'dense' && (
          <div className="space-y-3">
            <h3 className="text-sm font-semibold text-cyan-200">
              Supervised Dense Retrieval (Bi-Encoder)
            </h3>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-2 font-mono text-[11px]">
              <div className="p-2.5 bg-zinc-950 rounded border border-zinc-850">
                <span className="text-zinc-500 block">Dimensionality:</span>
                <span className="text-zinc-200 font-medium">d = 768 continuous floats</span>
              </div>
              <div className="p-2.5 bg-zinc-950 rounded border border-zinc-850">
                <span className="text-zinc-500 block">Sparsity:</span>
                <span className="text-zinc-200 font-medium">0% zeros (fully dense)</span>
              </div>
              <div className="p-2.5 bg-zinc-950 rounded border border-zinc-850">
                <span className="text-zinc-500 block">Index Structure:</span>
                <span className="text-zinc-200 font-medium">HNSW Proximity Graph (Faiss)</span>
              </div>
            </div>
            <p className="text-zinc-400 leading-relaxed">
              Dense retrieval projects text into low-dimensional semantic vector spaces via dual transformers:
              <code className="text-cyan-300 font-mono ml-1">E_Q(q) = Transformer_Q(q)</code> and
              <code className="text-cyan-300 font-mono ml-1">E_D(d) = Transformer_D(d)</code>.
              Because all coordinates are non-zero, inverted lists cannot be used. Instead, approximate nearest neighbor (ANN) search algorithms like
              HNSW traverse multi-layer proximity graphs in logarithmic time.
            </p>
          </div>
        )}

        {selectedParadigm === 'learned-sparse' && (
          <div className="space-y-3">
            <h3 className="text-sm font-semibold text-purple-950 dark:text-purple-200">
              Learned Sparse Representations (SPLADE)
            </h3>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-2 font-mono text-[11px]">
              <div className="p-2.5 bg-zinc-950 rounded border border-zinc-850">
                <span className="text-zinc-500 block">Dimensionality:</span>
                <span className="text-zinc-200 font-medium">|V| = 30,522 (WordPiece Vocab)</span>
              </div>
              <div className="p-2.5 bg-zinc-950 rounded border border-zinc-850">
                <span className="text-zinc-500 block">Sparsity:</span>
                <span className="text-zinc-200 font-medium">~95% zeros (regularized)</span>
              </div>
              <div className="p-2.5 bg-zinc-950 rounded border border-zinc-850">
                <span className="text-zinc-500 block">Index Structure:</span>
                <span className="text-zinc-200 font-medium">Lucene Impact Index</span>
              </div>
            </div>
            <p className="text-zinc-400 leading-relaxed">
              SPLADE combines the efficiency of inverted indexes with deep contextual vocabulary expansion.
              A masked language model predicts non-negative weights over the full vocabulary, expanding terms with synonyms and related concepts.
              In Anserini, floating-point weights are quantized to integers and indexed directly in Lucene as synthetic term frequencies.
            </p>
          </div>
        )}

        {selectedParadigm === 'cross-encoder' && (
          <div className="space-y-3">
            <h3 className="text-sm font-semibold text-emerald-200">
              Cross-Encoder Listwise Reranking (RankLLM / monoT5)
            </h3>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-2 font-mono text-[11px]">
              <div className="p-2.5 bg-zinc-950 rounded border border-zinc-850">
                <span className="text-zinc-500 block">Architecture:</span>
                <span className="text-zinc-200 font-medium">Joint Full Attention (q × d)</span>
              </div>
              <div className="p-2.5 bg-zinc-950 rounded border border-zinc-850">
                <span className="text-zinc-500 block">Complexity:</span>
                <span className="text-zinc-200 font-medium">O((|q| + |d|)² · L) per document</span>
              </div>
              <div className="p-2.5 bg-zinc-950 rounded border border-zinc-850">
                <span className="text-zinc-500 block">Index Structure:</span>
                <span className="text-zinc-200 font-medium">None (2nd-stage reranker on Top-K)</span>
              </div>
            </div>
            <p className="text-zinc-400 leading-relaxed">
              Unlike bi-encoders which compute independent representations, cross-encoders concatenate query and passage
              into a single transformer context. Every token attends directly to every other token, capturing nuanced nuances,
              negation, and syntactic dependencies at higher inference cost.
            </p>
          </div>
        )}
      </div>
    </div>
  );
};