'use client';

import { useState } from 'react';
import SectionHead from '@/components/vyndr/SectionHead';
import GradeBadge from '@/components/vyndr/GradeBadge';
import TerminalInput from '@/components/vyndr/TerminalInput';

// Head-to-head player comparison (§6). Sample data for now — real player
// resolution wires to /api/players/search + game logs in a later pass.
const SAMPLE = {
  a: { name: 'Nikola Jokić', team: 'DEN', rows: { 'L10 PTS': '28.4', 'L10 REB': '12.1', 'L10 AST': '9.8', 'Usage%': '29.1', 'Grade': 'A+' } },
  b: { name: 'Victor Wembanyama', team: 'SA', rows: { 'L10 PTS': '26.9', 'L10 REB': '10.4', 'L10 AST': '4.2', 'Usage%': '31.0', 'Grade': 'A' } },
};
const ROW_KEYS = ['L10 PTS', 'L10 REB', 'L10 AST', 'Usage%', 'Grade'];

const num = (v: string) => parseFloat(v.replace(/[^\d.]/g, ''));

export default function ComparePage() {
  const [a, setA] = useState('Nikola Jokić');
  const [b, setB] = useState('Victor Wembanyama');

  return (
    <section style={{ maxWidth: 860, margin: '0 auto', padding: '28px 16px 96px' }}>
      <SectionHead accent="var(--g-a)">▚ HEAD TO HEAD</SectionHead>
      <h1 className="mono" style={{ fontSize: 28, fontWeight: 800, letterSpacing: '-0.02em', margin: '8px 0 18px' }}>COMPARE</h1>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 20 }}>
        <TerminalInput prompt="›" value={a} onChange={setA} placeholder="Player A" />
        <TerminalInput prompt="›" value={b} onChange={setB} placeholder="Player B" amber />
      </div>

      <div style={{ background: 'var(--bg-1)', border: '1px solid var(--border)', borderRadius: 10, overflow: 'hidden' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 140px 1fr', padding: '14px 16px', background: 'var(--bg-2)', borderBottom: '1px solid var(--border)', alignItems: 'center' }}>
          <div style={{ fontSize: 16, fontWeight: 800, textAlign: 'right' }}>{SAMPLE.a.name} <span className="mono" style={{ fontSize: 11, color: 'var(--text-2)' }}>{SAMPLE.a.team}</span></div>
          <div className="label" style={{ textAlign: 'center' }}>VS</div>
          <div style={{ fontSize: 16, fontWeight: 800 }}>{SAMPLE.b.name} <span className="mono" style={{ fontSize: 11, color: 'var(--text-2)' }}>{SAMPLE.b.team}</span></div>
        </div>
        {ROW_KEYS.map((k) => {
          const av = SAMPLE.a.rows[k as keyof typeof SAMPLE.a.rows];
          const bv = SAMPLE.b.rows[k as keyof typeof SAMPLE.b.rows];
          const isGrade = k === 'Grade';
          const aWins = !isGrade && num(av) >= num(bv);
          const bWins = !isGrade && num(bv) >= num(av);
          return (
            <div key={k} style={{ display: 'grid', gridTemplateColumns: '1fr 140px 1fr', padding: '11px 16px', borderBottom: '1px solid var(--border)', alignItems: 'center' }}>
              <div className="mono" style={{ textAlign: 'right', fontSize: 15, fontWeight: 700, color: aWins ? 'var(--g-a)' : 'var(--text-0)' }}>
                {isGrade ? <GradeBadge grade={av} size="sm" glow /> : av}
              </div>
              <div className="label" style={{ textAlign: 'center' }}>{k}</div>
              <div className="mono" style={{ fontSize: 15, fontWeight: 700, color: bWins ? 'var(--g-a)' : 'var(--text-0)' }}>
                {isGrade ? <GradeBadge grade={bv} size="sm" glow /> : bv}
              </div>
            </div>
          );
        })}
      </div>

      <div className="intel-surface scanlines" style={{ marginTop: 16, borderRadius: 10, padding: '16px 18px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'relative', zIndex: 2 }}>
          <div className="label" style={{ color: 'rgba(232,255,244,.6)', marginBottom: 6 }}>VYNDR VERDICT</div>
          <div className="mono" style={{ fontSize: 14, color: '#e8fff4', lineHeight: 1.6 }}>
            {SAMPLE.a.name} carries the higher floor on scoring, boards, and playmaking — on current form, the edge tilts his way.
          </div>
        </div>
      </div>
    </section>
  );
}
