frontend/src/App.jsx

import React, { useState, useEffect, useRef } from 'react';
import { Play, CheckCircle, XCircle, AlertCircle, Shield, AlertTriangle, FileText, Gavel, Scale } from 'lucide-react';
import { TASK_STRATEGIES, TASK_DESCRIPTIONS } from './tasks';
import './index.css';

const CALIB_MATRIX = {
  HIGH_correct: { val: 1.0 },
  HIGH_wrong:   { val: -0.8 },
  MED_correct:  { val: 0.6 },
  MED_wrong:    { val: -0.2 },
  LOW_correct:  { val: 0.1 },
  LOW_wrong:    { val: 0.0 }
};

const TASK_STEPS_HINT = {
  clean_claim:             'approve_claim + HIGH confidence',
  contradictory_claim:     'deny_claim + MED confidence + Court Panel',
  distribution_shift_claim:'escalate_to_human + LOW confidence',
};

function App() {
  const [task, setTask] = useState('contradictory_claim');
  const [isRunning, setIsRunning] = useState(false);
  const [isDone, setIsDone] = useState(false);
  const [claimText, setClaimText] = useState(null);
  const [history, setHistory] = useState([]);
  const [debate, setDebate] = useState(null);

  const [matrixConf, setMatrixConf] = useState(null);
  const [matrixOutcome, setMatrixOutcome] = useState(null);

  const [reward, setReward] = useState('—');
  const [calib, setCalib] = useState('—');
  const [finalOutcome, setFinalOutcome] = useState(null); // 'correct' | 'wrong'

  const [cursorPos, setCursorPos] = useState({ x: -100, y: -100 });
  const [isHovering, setIsHovering] = useState(false);
  const terminalRef = useRef(null);

  useEffect(() => {
    const h = (e) => setCursorPos({ x: e.clientX, y: e.clientY });
    window.addEventListener('mousemove', h);
    return () => window.removeEventListener('mousemove', h);
  }, []);

  // Auto-scroll terminal
  useEffect(() => {
    if (terminalRef.current) {
      terminalRef.current.scrollTop = terminalRef.current.scrollHeight;
    }
  }, [history]);

  const handleRun = async () => {
    setIsRunning(true);
    setIsDone(false);
    setHistory([]);
    setDebate(null);
    setMatrixConf(null);
    setMatrixOutcome(null);
    setReward('—');
    setCalib('—');
    setFinalOutcome(null);
    setClaimText('resetting');

    try {
      const resetRes = await fetch('/reset', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ task_id: task, seed: 42 })
      });
      if (!resetRes.ok) throw new Error('Reset failed');
      const resetData = await resetRes.json();
      const sessionId = resetData.session_id;
      setClaimText(resetData.observation);

      const actions = TASK_STRATEGIES[task];
      let currentHistory = [];

      for (let i = 0; i < actions.length; i++) {
        const action = actions[i];
        const payload = { ...action };
        if (payload.confidence === undefined || payload.confidence === null) delete payload.confidence;

        const stepRes = await fetch('/step', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ session_id: sessionId, action: payload })
        });
        if (!stepRes.ok) throw new Error('Step failed');
        const stepData = await stepRes.json();

        const r = stepData.reward || 0;
        const rb = stepData.observation?.reward_breakdown || {};
        const c = rb.calibration_score;
        const d = stepData.observation?.debate_transcript;

        currentHistory = [...currentHistory, { ...action, reward: r, calibration: c }];
        setHistory([...currentHistory]);
        setReward(r.toFixed(3));

        if (d) setDebate(d);

        if (action.confidence && c !== undefined && c !== null) {
          setCalib(c);
          setMatrixConf(action.confidence);
          const outcome = c >= 0 ? 'correct' : 'wrong';
          setMatrixOutcome(outcome);
          setFinalOutcome(outcome);
        }

        await new Promise(res => setTimeout(res, action.action_type === 'convene_debate_panel' ? 1000 : 550));
      }
      setIsDone(true);
    } catch (err) {
      console.error(err);
      setClaimText('error');
    } finally {
      setIsRunning(false);
    }
  };

  const getMatrixCellClass = (conf, outcome) => {
    const isActive = matrixConf === conf && matrixOutcome === outcome;
    return `matrix-cell cell-${conf.toLowerCase()}-${outcome}${isActive ? ' active' : ''}`;
  };

  const outcomeLabel = finalOutcome === 'correct' ? '✅ CORRECT' : finalOutcome === 'wrong' ? '❌ WRONG' : null;

  return (
    <>

      <div className={`custom-cursor${isHovering ? ' hovering' : ''}`} style={{ left: cursorPos.x, top: cursorPos.y }} />

      <div className="bg-glow" />

      <div className="bg-glow-2" />



      {/* ── TOP NAV BAR ─────────────────────────────── */}

      <nav className="nav-bar">

        <div className="nav-logo">

          <Scale size={22} color="var(--accent-primary)" />

          <span>ClaimCourt</span>

        </div>

        <div className="nav-links">

          <a href="https://github.com/AniketAslaliya/debateFloor" target="_blank" rel="noreferrer">GitHub</a>

          <a href="https://arxiv.org/abs/2604.12632" target="_blank" rel="noreferrer">CAPO Paper</a>

          <span className="nav-badge">Meta PyTorch × Scaler 2026</span>

        </div>

      </nav>



      {/* ── HERO BANNER ─────────────────────────────── */}

      <section className="hero-section">

        <div className="hero-content">

          <h1 className="hero-title title-gradient">The AI That Knows When It Doesn't Know</h1>

          <p className="hero-sub">

            ClaimCourt trains LLM agents to declare <strong>calibrated confidence</strong> before every insurance decision.

            Overconfident? <span style={{ color: 'var(--error)' }}>Penalised −0.8.</span>&nbsp;

            Wrong but humble? <span style={{ color: 'var(--success)' }}>Rewarded.</span>

          </p>

          <p className="hero-sub" style={{ fontSize: '0.875rem', marginTop: '0.5rem', color: 'var(--text-tertiary)' }}>

            The <strong>Court Panel</strong> (adversarial debate) below is unique — no other OpenEnv environment has it. Watch it unfold.

          </p>

        </div>

      </section>



      {/* ── MAIN APP GRID ───────────────────────────── */}

      <div className="app-container">



        {/* SIDEBAR */}

        <div className="flex flex-col gap-4">



          {/* Control Panel */}

          <div className="glass-panel p-6">

            <h2 className="mb-1" style={{ fontSize: '1.1rem' }}>Run an Episode</h2>

            <p className="text-xs text-secondary mb-4">Pick a task, click Run, watch the agent investigate.</p>



            <div className="select-wrapper mb-3"

              onMouseEnter={() => setIsHovering(true)}

              onMouseLeave={() => setIsHovering(false)}>

              <select

                className="custom-select"

                value={task}

                onChange={e => setTask(e.target.value)}

                disabled={isRunning}

              >

                {Object.keys(TASK_STRATEGIES).map(t => (

                  <option key={t} value={t}>{t.replace(/_/g, ' ')}</option>

                ))}

              </select>

            </div>



            <div className="task-hint mb-4">

              <span className="text-xs text-secondary">{TASK_DESCRIPTIONS[task]}</span>

              <br/>

              <span className="text-xs" style={{ color: 'var(--accent-primary)', marginTop: '0.25rem', display: 'inline-block' }}>

                Expected: {TASK_STEPS_HINT[task]}

              </span>

            </div>



            <button

              className="btn-primary"

              onClick={handleRun}

              disabled={isRunning}

              onMouseEnter={() => setIsHovering(true)}

              onMouseLeave={() => setIsHovering(false)}

            >

              <Play size={18} fill="currentColor" />

              {isRunning ? 'Investigating...' : 'Run Episode'}

            </button>



            {isDone && outcomeLabel && (

              <div className={`outcome-badge mt-4 ${finalOutcome}`}>{outcomeLabel}</div>

            )}

          </div>



          {/* Live Metrics */}

          <div className="glass-panel p-6">

            <h3 className="mb-4 text-secondary font-medium" style={{ fontSize: '0.9rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Live Metrics</h3>

            <div className="metric-row">

              <span className="text-secondary text-sm">Reward</span>

              <span className="metric-val" style={{ color: reward !== '—' && parseFloat(reward) >= 0 ? 'var(--success)' : 'var(--error)' }}>{reward}</span>

            </div>

            <div className="metric-row">

              <span className="text-secondary text-sm">Calibration Score</span>

              <span className="metric-val">{calib}</span>

            </div>

            <div className="metric-row">

              <span className="text-secondary text-sm">Declared Confidence</span>

              <span className={`confidence-badge conf-${(matrixConf || '').toLowerCase()}`}>{matrixConf || '—'}</span>

            </div>

            <div className="metric-row">

              <span className="text-secondary text-sm">Steps taken</span>

              <span className="metric-val">{history.length}</span>

            </div>

          </div>



          {/* Calibration Matrix */}

          <div className="glass-panel p-6">

            <h3 className="mb-1" style={{ fontSize: '0.95rem' }}>3×2 Calibration Matrix</h3>

            <p className="text-xs text-secondary mb-4">The highlighted cell = agent's confidence × outcome.<br/><strong style={{ color: 'var(--error)' }}>HIGH + wrong = −0.8</strong> is the worst possible outcome.</p>



            <div className="matrix-container">

              <div className="matrix-header" style={{ borderRight: '1px solid var(--glass-border)' }}>Confidence</div>

              <div className="matrix-header"><CheckCircle size={13} className="inline mr-1" color="var(--success)"/>Correct</div>

              <div className="matrix-header"><XCircle size={13} className="inline mr-1" color="var(--error)"/>Wrong</div>



              {['HIGH', 'MED', 'LOW'].map(conf => (

                <React.Fragment key={conf}>

                  <div className="matrix-label">{conf}</div>

                  <div className={getMatrixCellClass(conf, 'correct')}>

                    <span className="matrix-value">+{CALIB_MATRIX[`${conf}_correct`].val}</span>

                  </div>

                  <div className={getMatrixCellClass(conf, 'wrong')}>

                    <span className="matrix-value">{CALIB_MATRIX[`${conf}_wrong`].val}</span>

                  </div>

                </React.Fragment>

              ))}

            </div>

          </div>



        </div>



        {/* MAIN CONTENT */}

        <div className="flex flex-col gap-4">



          {/* Claim + Terminal side by side */}

          <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '1rem' }}>



            {/* Claim Details */}

            <div className="glass-panel p-6" style={{ minHeight: '220px' }}>

              <h3 className="mb-3 flex items-center gap-2" style={{ fontSize: '0.95rem' }}>

                <FileText size={16} color="var(--accent-primary)" /> Claim Under Investigation

              </h3>

              {!claimText && (

                <p className="text-secondary text-sm">Select a task and click Run Episode.</p>

              )}

              {claimText === 'resetting' && (

                <p className="text-secondary text-sm pulse-animation">Contacting environment server...</p>

              )}

              {claimText === 'error' && (

                <p style={{ color: 'var(--error)' }} className="text-sm">⚠ Could not reach environment server.</p>

              )}

              {claimText && typeof claimText === 'object' && (

                <div className="text-sm">

                  <div className="claim-id-tag">#{claimText.claim_id} · {claimText.task_id}</div>

                  <p className="mb-1 mt-2"><strong>Claimant:</strong> {claimText.claimant?.name}</p>

                  <p className="mb-1"><strong>Incident:</strong> {claimText.incident?.type} — {claimText.incident?.description?.slice(0, 90)}...</p>

                  <p className="mb-2"><strong>Amount:</strong> ₹{claimText.payout_amount_inr?.toLocaleString('en-IN') || '—'}</p>

                  <p className="font-medium mb-1 text-secondary">Documents ({claimText.documents?.length || 0}):</p>

                  <ul className="claim-docs">

                    {claimText.documents?.slice(0, 3).map(d => (

                      <li key={d.doc_id}><code>{d.doc_id}</code> — {d.content?.slice(0, 60)}...</li>

                    ))}

                  </ul>

                  {claimText.linked_claims?.length > 0 && (

                    <p className="mt-3 flex items-center gap-2" style={{ color: 'var(--error)', fontWeight: 600 }}>

                      <AlertTriangle size={14} /> {claimText.linked_claims.length} linked claims flagged!

                    </p>

                  )}

                </div>

              )}

            </div>



            {/* Terminal */}

            <div className="terminal-window">

              <div className="terminal-header">

                <div className="terminal-dot dot-red" />

                <div className="terminal-dot dot-yellow" />

                <div className="terminal-dot dot-green" />

                <span className="ml-2 text-xs text-secondary" style={{ fontFamily: 'Inter' }}>agent-trace.log</span>

                {isRunning && <span className="ml-2 text-xs pulse-animation" style={{ color: 'var(--accent-primary)' }}>● LIVE</span>}

              </div>

              <div className="terminal-body" ref={terminalRef}>

                {history.length === 0 ? (

                  <div className="text-secondary" style={{ fontStyle: 'italic' }}>Waiting for episode to start...</div>

                ) : (

                  history.map((h, i) => (

                    <div key={i} className="log-entry">

                      <span className="text-secondary">[{String(i + 1).padStart(2, '0')}]</span>{' '}

                      {h.action_type === 'convene_debate_panel'

                        ? <span style={{ color: 'var(--warning)', fontWeight: 700 }}>⚖ {h.action_type}</span>

                        : <span className="log-action">{h.action_type}</span>

                      }

                      {h.confidence && <span style={{ color: '#c4b5fd' }}> [CONF:{h.confidence}]</span>}

                      <br />

                      <span className="text-secondary pl-6" style={{ fontSize: '0.8rem' }}>↳ {h.reasoning}</span>

                      <br />

                      <span className="pl-6" style={{ fontSize: '0.78rem' }}>

                        reward: <span className="log-reward">{h.reward?.toFixed(3)}</span>

                        {h.calibration !== undefined && h.calibration !== null &&

                          <span style={{ color: '#fcd34d' }}> | calib: {h.calibration}</span>

                        }

                      </span>

                    </div>

                  ))

                )}

              </div>

            </div>



          </div>



          {/* ── DEBATE PANEL — hero section ─────────── */}

          <div className={`debate-container glass-panel p-6${debate ? ' debate-active' : ''}`}>

            <div className="debate-header">

              <Gavel size={20} color={debate ? 'var(--warning)' : 'var(--text-tertiary)'} />

              <h2 style={{ fontSize: '1rem' }}>

                {debate

                  ? `⚖ Court Panel Convened — Step ${debate.step_convened}`

                  : 'Multi-Agent Court Panel'}

              </h2>

              {!debate && (

                <span className="text-xs text-secondary ml-2">(appears when agent calls <code>convene_debate_panel</code>)</span>

              )}

            </div>



            {!debate ? (

              <div className="debate-placeholder">

                <p className="text-secondary text-sm">Run <strong>contradictory_claim</strong> to see the Prosecutor vs Defender debate unfold live.</p>

                <div className="debate-preview-grid">

                  <div className="preview-card prosecutor-preview">

                    <strong>Prosecutor</strong>

                    <p>Builds case from discovered fraud signals. Argues for denial.</p>

                  </div>

                  <div className="preview-card defender-preview">

                    <strong>Defender</strong>

                    <p>Argues from document consistency. Assumes innocence.</p>

                  </div>

                </div>

              </div>

            ) : (

              <>

                <div className="debate-grid">

                  <div className="argument-card argument-prosecutor">

                    <div className="argument-header">

                      <span style={{ color: 'var(--error)' }}>⚔ Prosecutor</span>

                      <span className={`strength-badge strength-${(debate.prosecutor_strength || '').toLowerCase()}`}>

                        {debate.prosecutor_strength}

                      </span>

                    </div>

                    <p className="text-sm text-secondary" style={{ lineHeight: '1.65', marginTop: '0.5rem' }}>

                      {debate.prosecutor_argument}

                    </p>

                  </div>

                  <div className="argument-card argument-defender">

                    <div className="argument-header">

                      <span style={{ color: 'var(--success)' }}>🛡 Defender</span>

                      <span className={`strength-badge strength-${(debate.defender_strength || '').toLowerCase()}`}>

                        {debate.defender_strength}

                      </span>

                    </div>

                    <p className="text-sm text-secondary" style={{ lineHeight: '1.65', marginTop: '0.5rem' }}>

                      {debate.defender_argument}

                    </p>

                  </div>

                </div>

                <div className="verdict-box" style={{

                  borderColor: debate.panel_lean === 'prosecution' ? 'var(--error)' : 'var(--success)',

                  color: debate.panel_lean === 'prosecution' ? 'var(--error)' : 'var(--success)',

                  background: debate.panel_lean === 'prosecution' ? 'var(--error-bg)' : 'var(--success-bg)',

                }}>

                  <Gavel size={16} style={{ flexShrink: 0 }} />

                  <span>VERDICT: {debate.panel_verdict}</span>

                </div>

              </>

            )}

          </div>



        </div>

      </div>



      {/* ── FOOTER ──────────────────────────────────── */}

      <footer className="site-footer">

        <span>ClaimCourt · Meta PyTorch × Scaler Hackathon 2026 · Based on <a href="https://arxiv.org/abs/2604.12632" target="_blank" rel="noreferrer">CAPO arXiv:2604.12632</a></span>

        <span>Aniket Aslaliya · Mitali Mehta · Aditya Sharma</span>

      </footer>

    </>
  );
}

export default App;