// VibraMatch — Log Match flow + Match Detail (the ELO delta moment)

// ═══════════════════════════════════════════════════════════════
// Log Match — form step (group pre-selected)
// Layout mirrors src/app/matches/log-match.tsx but redesigned.
// ═══════════════════════════════════════════════════════════════
function LogMatch() {
  const sets = [[6,3],[4,6],[7,5]];
  return (
    <div className="vm-scroll" style={{ height: '100%', background: 'var(--bg)' }}>
      {/* Modal header */}
      <div style={{
        padding: '14px 20px 12px',
        display: 'flex', alignItems: 'center', gap: 8,
        borderBottom: '1px solid var(--line)',
      }}>
        <IconButton icon={<I.back size={20}/>} variant="ghost" size={36}/>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="vm-h3" style={{ fontSize: 18 }}>Log match</div>
          <div className="vm-sm" style={{ fontSize: 12, marginTop: -1 }}>Tuesday crew</div>
        </div>
        <IconButton icon={<I.close size={18}/>} variant="ghost" size={36}/>
      </div>

      {/* Team A */}
      <div style={{ padding: '20px 20px 8px' }}>
        <div className="vm-xs" style={{ color: 'var(--ink-3)', marginBottom: 10 }}>YOUR TEAM</div>

        {/* Submitter row */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 12,
          padding: '10px 14px', background: 'var(--lime-soft)',
          borderRadius: 'var(--r-md)', marginBottom: 8,
        }}>
          <Avatar name={ME.username} size={36}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14.5, fontWeight: 700 }}>{ME.username} <span style={{ color: 'var(--ink-3)', fontWeight: 500 }}>(you)</span></div>
            <div className="vm-sm" style={{ fontSize: 12 }}>ELO {ME.elo}</div>
          </div>
          <I.check size={18} sw={2.4} style={{ color: 'var(--success)' }}/>
        </div>

        {/* Partner picker — filled */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 12,
          padding: '10px 14px', background: 'var(--surface)', border: '1px solid var(--line)',
          borderRadius: 'var(--r-md)',
        }}>
          <Avatar name="Marta R" size={36}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14.5, fontWeight: 700 }}>Marta R.</div>
            <div className="vm-sm" style={{ fontSize: 12 }}>ELO 1402 · partner</div>
          </div>
          <I.chevDown size={18} sw={2.2} style={{ color: 'var(--ink-3)' }}/>
        </div>
      </div>

      {/* Team B */}
      <div style={{ padding: '8px 20px 8px' }}>
        <div className="vm-xs" style={{ color: 'var(--ink-3)', marginBottom: 10, marginTop: 10 }}>OPPONENTS</div>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 12,
          padding: '10px 14px', background: 'var(--surface)', border: '1px solid var(--line)',
          borderRadius: 'var(--r-md)', marginBottom: 8,
        }}>
          <Avatar name="Jon A" size={36}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14.5, fontWeight: 700 }}>Jon A.</div>
            <div className="vm-sm" style={{ fontSize: 12 }}>ELO 1198</div>
          </div>
          <I.chevDown size={18} sw={2.2} style={{ color: 'var(--ink-3)' }}/>
        </div>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 12,
          padding: '10px 14px', background: 'var(--surface)', border: '1px solid var(--line)',
          borderRadius: 'var(--r-md)',
        }}>
          <Avatar name="Eli C" size={36}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14.5, fontWeight: 700 }}>Eli C.</div>
            <div className="vm-sm" style={{ fontSize: 12 }}>ELO 1156</div>
          </div>
          <I.chevDown size={18} sw={2.2} style={{ color: 'var(--ink-3)' }}/>
        </div>
      </div>

      {/* Score */}
      <div style={{ padding: '14px 20px 8px' }}>
        <div className="vm-xs" style={{ color: 'var(--ink-3)', marginBottom: 12 }}>SCORE</div>
        <div style={{
          background: 'var(--surface)', borderRadius: 'var(--r-md)',
          border: '1px solid var(--line)', overflow: 'hidden',
        }}>
          {/* Header row */}
          <div style={{ display: 'grid', gridTemplateColumns: '60px 1fr 1fr', alignItems: 'center', padding: '10px 14px', borderBottom: '1px solid var(--line)' }}>
            <div className="vm-xs" style={{ color: 'var(--ink-3)' }}>SET</div>
            <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink-2)' }}>You & Marta</div>
            <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink-2)' }}>Jon & Eli</div>
          </div>
          {sets.map((s, i) => {
            const aWon = s[0] > s[1];
            return (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '60px 1fr 1fr', alignItems: 'center',
                padding: '8px 14px', borderTop: i === 0 ? 'none' : '1px solid var(--line)',
              }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink-3)' }}>Set {i+1}</div>
                <ScoreStepper value={s[0]} highlight={aWon}/>
                <ScoreStepper value={s[1]} highlight={!aWon}/>
              </div>
            );
          })}
        </div>
        <div style={{ textAlign: 'center', marginTop: 10 }}>
          <button style={{ background: 'none', border: 'none', color: 'var(--ink-3)', fontSize: 12.5, fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
            <I.plus size={14} sw={2.2}/> Add 3rd set
          </button>
        </div>
      </div>

      {/* Predicted ELO impact */}
      <div style={{ padding: '4px 20px 8px' }}>
        <div style={{
          background: 'var(--lime-soft)', borderRadius: 'var(--r-md)', padding: 14,
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <I.bolt size={18} sw={2.4} style={{ color: 'var(--ink)', flexShrink: 0 }}/>
          <div style={{ flex: 1, fontSize: 12.5, fontWeight: 600, color: 'var(--ink-2)', letterSpacing: '-0.005em' }}>
            Win this match → projected{' '}
            <span style={{ background: 'var(--lime)', color: 'var(--on-lime)', padding: '2px 6px', borderRadius: 6, fontWeight: 800 }}>+12 ELO</span>
          </div>
        </div>
      </div>

      {/* Submit */}
      <div style={{ padding: '12px 20px 30px' }}>
        <Button variant="ink" size="lg" full>Submit match</Button>
        <div className="vm-sm" style={{ textAlign: 'center', marginTop: 10, fontSize: 12 }}>
          Other players confirm within 24h, or it auto-confirms
        </div>
      </div>
    </div>
  );
}

function ScoreStepper({ value, highlight }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
      <button style={{
        width: 26, height: 26, borderRadius: 999, border: '1px solid var(--line-strong)',
        background: 'var(--surface)', color: 'var(--ink-2)', cursor: 'pointer',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 14,
      }}>−</button>
      <span className="vm-num" style={{
        flex: 1, textAlign: 'center', fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em',
        color: highlight ? 'var(--ink)' : 'var(--ink-3)',
      }}>{value}</span>
      <button style={{
        width: 26, height: 26, borderRadius: 999, border: 'none',
        background: highlight ? 'var(--lime)' : 'var(--surface-3)', color: highlight ? 'var(--on-lime)' : 'var(--ink)',
        cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 14,
      }}>+</button>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// Match Detail — the "ELO moment" screen (confirmed match)
// ═══════════════════════════════════════════════════════════════
function MatchDetail() {
  const sets = [[6,3],[4,6],[7,5]];
  const teamA = [{ name: ME.username, eloBefore: 1272, delta: +12 }, { name: 'Marta R.', eloBefore: 1388, delta: +14 }];
  const teamB = [{ name: 'Jon A.',   eloBefore: 1210, delta: -12 }, { name: 'Eli C.',   eloBefore: 1168, delta: -12 }];

  return (
    <div className="vm-scroll" style={{ height: '100%', background: 'var(--bg)', paddingBottom: 30 }}>
      {/* Header */}
      <div style={{ padding: '12px 12px 8px', display: 'flex', alignItems: 'center', gap: 4 }}>
        <IconButton icon={<I.back size={20}/>} variant="ghost" size={44}/>
        <div style={{ flex: 1 }}>
          <div className="vm-h3" style={{ fontSize: 17 }}>Match</div>
          <div className="vm-sm" style={{ fontSize: 12, marginTop: -1 }}>Tuesday crew · 2h ago</div>
        </div>
        <IconButton icon={<I.share size={18}/>} variant="ghost" size={44}/>
      </div>

      {/* Hero — score reveal */}
      <div style={{ padding: '4px 20px 18px' }}>
        <div style={{
          background: 'var(--ink)', color: '#fff', borderRadius: 'var(--r-xl)', padding: 20,
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ position: 'absolute', top: -50, right: -50, width: 200, height: 200, borderRadius: 999, background: 'var(--lime)', opacity: 0.16, filter: 'blur(4px)' }}/>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, position: 'relative' }}>
            <Chip tone="lime" size="sm" leading={<I.trophy size={11}/>}>WINNERS</Chip>
            <div style={{ fontSize: 11, fontWeight: 700, opacity: 0.6, marginLeft: 'auto' }}>CONFIRMED · 2h ago</div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', gap: 10, marginTop: 14, position: 'relative' }}>
            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: -6 }}>
                <Avatar name={ME.username} size={36}/>
                <div style={{ marginLeft: -10 }}><Avatar name="Marta R" size={36}/></div>
              </div>
              <div style={{ fontSize: 13.5, fontWeight: 800, marginTop: 8, letterSpacing: '-0.005em' }}>You · Marta</div>
            </div>

            <div style={{ textAlign: 'center', padding: '0 4px' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, justifyContent: 'center' }}>
                <div className="vm-num" style={{ fontSize: 36, fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1 }}>2</div>
                <div style={{ fontSize: 16, fontWeight: 700, opacity: 0.4 }}>—</div>
                <div className="vm-num" style={{ fontSize: 36, fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1, opacity: 0.5 }}>1</div>
              </div>
              <div style={{ display: 'flex', justifyContent: 'center', gap: 8, marginTop: 8 }}>
                {sets.map((s, i) => (
                  <div key={i} className="vm-num" style={{
                    fontSize: 11.5, fontWeight: 700,
                    background: s[0] > s[1] ? 'rgba(220,255,80,0.18)' : 'rgba(255,255,255,0.08)',
                    color: s[0] > s[1] ? 'var(--lime)' : 'rgba(255,255,255,0.6)',
                    padding: '3px 8px', borderRadius: 6,
                  }}>{s[0]}-{s[1]}</div>
                ))}
              </div>
            </div>

            <div style={{ textAlign: 'right' }}>
              <div style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'flex-end' }}>
                <Avatar name="Jon A" size={36}/>
                <div style={{ marginLeft: -10 }}><Avatar name="Eli C" size={36}/></div>
              </div>
              <div style={{ fontSize: 13.5, fontWeight: 800, marginTop: 8, letterSpacing: '-0.005em' }}>Jon · Eli</div>
            </div>
          </div>
        </div>
      </div>

      {/* ELO changes */}
      <div style={{ padding: '0 20px 6px', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
        <div className="vm-h3">ELO changes</div>
        <span className="vm-xs" style={{ color: 'var(--ink-3)' }}>Tuesday crew</span>
      </div>

      <div style={{ padding: '8px 20px', background: 'var(--surface)', borderRadius: 'var(--r-lg)', margin: '0 20px', border: '1px solid var(--line)' }}>
        {[...teamA, ...teamB].map((p, i, arr) => {
          const newElo = p.eloBefore + p.delta;
          return (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 12, padding: '12px 0',
              borderTop: i === 0 ? 'none' : '1px solid var(--line)',
            }}>
              <Avatar name={p.name} size={36}/>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 14, fontWeight: 700 }}>{p.name}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 3 }}>
                  <span className="vm-num" style={{ fontSize: 12, color: 'var(--ink-3)', fontWeight: 600 }}>{p.eloBefore}</span>
                  <I.arrow size={11} sw={2.2} style={{ color: 'var(--ink-4)' }}/>
                  <span className="vm-num" style={{ fontSize: 13, fontWeight: 800, color: 'var(--ink)' }}>{newElo}</span>
                </div>
              </div>
              <DeltaPill delta={p.delta}/>
            </div>
          );
        })}
      </div>

      {/* Share card CTA */}
      <div style={{ padding: '18px 20px 6px' }}>
        <Button variant="surface" size="md" full leading={<I.share size={16} sw={2.2}/>}>Share ranking card</Button>
      </div>
    </div>
  );
}

window.LogMatch = LogMatch;
window.MatchDetail = MatchDetail;