// VibraMatch — Profile tab + Matches tab (pending confirmations)

// ═══════════════════════════════════════════════════════════════
// Matches tab — pending matches list with prominent "Log a match" CTA
// ═══════════════════════════════════════════════════════════════
function MatchesTab() {
  return (
    <div className="vm-scroll" style={{ height: '100%', background: 'var(--bg)', paddingBottom: 110 }}>
      <div style={{ padding: '14px 20px 8px' }}>
        <div className="vm-h1" style={{ fontSize: 28 }}>Matches</div>
      </div>

      {/* Primary CTA — the 30s log */}
      <div style={{ padding: '8px 20px 16px' }}>
        <button style={{
          width: '100%', display: 'flex', alignItems: 'center', gap: 14,
          padding: '16px 18px', background: 'var(--lime)', color: 'var(--on-lime)',
          border: 'none', borderRadius: 'var(--r-lg)', cursor: 'pointer',
          boxShadow: '0 4px 16px rgba(180,220,34,0.4)',
        }}>
          <div style={{
            width: 40, height: 40, borderRadius: 999,
            background: 'var(--on-lime)', color: 'var(--lime)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <I.plus size={22} sw={2.6}/>
          </div>
          <div style={{ textAlign: 'left', flex: 1 }}>
            <div style={{ fontSize: 16, fontWeight: 800, letterSpacing: '-0.01em' }}>Log a match</div>
            <div style={{ fontSize: 12.5, fontWeight: 600, opacity: 0.7 }}>About 30 seconds</div>
          </div>
          <I.arrow size={20} sw={2.4}/>
        </button>
      </div>

      {/* Awaiting confirmation */}
      <div style={{ padding: '0 20px 8px', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
        <div className="vm-h3">Awaiting confirmation</div>
        <span style={{
          fontSize: 11.5, fontWeight: 700, color: 'var(--on-lime)', background: 'var(--lime)',
          padding: '3px 8px', borderRadius: 999,
        }}>{PENDING.length}</span>
      </div>

      <div style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {PENDING.map(p => (
          <div key={p.id} style={{
            background: p.mine ? 'var(--lime-soft)' : 'var(--surface)',
            border: '1px solid ' + (p.mine ? 'transparent' : 'var(--line)'),
            borderRadius: 'var(--r-md)', padding: '14px 16px',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
              <span style={{
                fontSize: 10.5, fontWeight: 700, padding: '3px 7px', borderRadius: 6,
                background: 'var(--surface)', border: '1px solid var(--line)',
                color: 'var(--ink-2)',
              }}>{p.group}</span>
              <span className="vm-sm" style={{ fontSize: 11.5, marginLeft: 'auto' }}>{p.when}</span>
            </div>
            <div style={{ fontSize: 14.5, fontWeight: 700, color: 'var(--ink)', marginBottom: 4 }}>{p.summary}</div>
            <div className="vm-num" style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink-2)' }}>{p.score}</div>

            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 10, paddingTop: 10, borderTop: '1px dashed ' + (p.mine ? 'rgba(11,15,26,0.12)' : 'var(--line)') }}>
              {p.mine ? (
                <>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12.5, fontWeight: 600, color: 'var(--ink-2)' }}>
                    <I.clock size={13} sw={2.2}/> You submitted this · auto-confirms in 22h
                  </span>
                </>
              ) : (
                <>
                  <span style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--ink-2)' }}>Waiting for your confirmation</span>
                  <div style={{ display: 'flex', gap: 6 }}>
                    <Button variant="surface" size="sm">Dispute</Button>
                    <Button variant="ink" size="sm" leading={<I.check size={14} sw={2.4}/>}>Confirm</Button>
                  </div>
                </>
              )}
            </div>
          </div>
        ))}
      </div>

      {/* All caught up — example empty state */}
      <div style={{ padding: '32px 20px 0', textAlign: 'center', opacity: 0.5 }}>
        <div className="vm-sm" style={{ fontSize: 12 }}>That's all for now</div>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// Profile tab
// ═══════════════════════════════════════════════════════════════
function PlayerProfile() {
  // Build ELO sparkline path from STATS.eloHistory
  const elo = STATS.eloHistory;
  const min = Math.min(...elo), max = Math.max(...elo);
  const points = elo.map((v, i) => {
    const x = (i / (elo.length - 1)) * 320;
    const y = 60 - ((v - min) / (max - min)) * 50;
    return [x, y];
  });
  const path = points.map(([x, y], i) => (i === 0 ? `M${x} ${y}` : `L${x} ${y}`)).join(' ');
  const fill = path + ` L320 70 L0 70 Z`;

  return (
    <div className="vm-scroll" style={{ height: '100%', background: 'var(--bg)', paddingBottom: 110 }}>
      {/* Header */}
      <div style={{ padding: '12px 20px 4px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div className="vm-h1" style={{ fontSize: 28 }}>Profile</div>
        <IconButton icon={<I.sliders size={20}/>} variant="ghost"/>
      </div>

      {/* Hero */}
      <div style={{ padding: '12px 20px 20px', textAlign: 'center' }}>
        <Avatar name={ME.username} size={88} ring/>
        <div style={{ fontSize: 22, fontWeight: 800, marginTop: 12, letterSpacing: '-0.015em' }}>{ME.username}</div>
        <div className="vm-sm" style={{ marginTop: 4 }}>Madrid · 5 groups · since Mar 2024</div>
      </div>

      {/* Streak + Form card */}
      <div style={{ padding: '0 20px 14px' }}>
        <div style={{
          background: 'var(--surface)', border: '1px solid var(--line)',
          borderRadius: 'var(--r-lg)', padding: 16,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{
              width: 64, height: 64, borderRadius: 16,
              background: STATS.streakType === 'W' ? 'var(--lime)' : 'var(--surface-3)',
              color: STATS.streakType === 'W' ? 'var(--on-lime)' : 'var(--ink-2)',
              display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 2,
            }}>
              <I.fire size={20} sw={2.2}/>
              <div className="vm-num" style={{ fontSize: 18, fontWeight: 800, lineHeight: 1 }}>{STATS.streakCount}</div>
            </div>
            <div style={{ flex: 1 }}>
              <div className="vm-xs" style={{ color: 'var(--ink-3)' }}>STREAK</div>
              <div style={{ fontSize: 17, fontWeight: 800, marginTop: 2, letterSpacing: '-0.01em' }}>{STATS.streakCount}-win streak</div>
              <div className="vm-sm" style={{ fontSize: 12.5, marginTop: 2 }}>Keep it going</div>
            </div>
          </div>

          <div style={{ marginTop: 16, paddingTop: 14, borderTop: '1px solid var(--line)' }}>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 8 }}>
              <div className="vm-xs" style={{ color: 'var(--ink-3)' }}>FORM · LAST 5</div>
              <span className="vm-num" style={{ fontSize: 12, fontWeight: 700, color: 'var(--ink-2)' }}>
                {STATS.form.filter(r => r === 'W').length}/5 wins
              </span>
            </div>
            <div style={{ display: 'flex', gap: 6 }}>
              {STATS.form.map((r, i) => (
                <div key={i} style={{
                  flex: 1, height: 38, borderRadius: 10,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  background: r === 'W' ? 'var(--lime)' : 'var(--surface-3)',
                  color: r === 'W' ? 'var(--on-lime)' : 'var(--ink-3)',
                  fontSize: 14, fontWeight: 800,
                }}>{r}</div>
              ))}
            </div>
            <div className="vm-sm" style={{ marginTop: 10, fontSize: 11.5, fontStyle: 'italic' }}>
              ELO is group-scoped — see each group for your ranking
            </div>
          </div>
        </div>
      </div>

      {/* Trend across all groups (combined ELO sparkline) */}
      <div style={{ padding: '0 20px 14px' }}>
        <div style={{
          background: 'var(--surface)', border: '1px solid var(--line)',
          borderRadius: 'var(--r-lg)', padding: 16,
        }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 10 }}>
            <div>
              <div className="vm-xs" style={{ color: 'var(--ink-3)' }}>AVG ELO TREND · ALL GROUPS</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 4 }}>
                <div className="vm-num" style={{ fontSize: 24, fontWeight: 800, letterSpacing: '-0.02em' }}>{elo[elo.length - 1]}</div>
                <DeltaPill delta={elo[elo.length - 1] - elo[0]}/>
              </div>
            </div>
            <Tabs value="3m" onChange={() => {}} items={['1M','3M','6M','1Y']}/>
          </div>
          <svg viewBox="0 0 320 76" width="100%" height="76">
            <defs>
              <linearGradient id="vm-elo-fill" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="var(--lime)" stopOpacity="0.5"/>
                <stop offset="100%" stopColor="var(--lime)" stopOpacity="0"/>
              </linearGradient>
            </defs>
            <path d={fill} fill="url(#vm-elo-fill)"/>
            <path d={path} fill="none" stroke="var(--ink)" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
            <circle cx={points[points.length-1][0]} cy={points[points.length-1][1]} r="4.5" fill="var(--lime)" stroke="var(--ink)" strokeWidth="2"/>
          </svg>
        </div>
      </div>

      {/* Recent matches (last 5) */}
      <div style={{ padding: '6px 20px 4px', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
        <div className="vm-h3">Recent matches</div>
        <button style={{ background: 'none', border: 'none', color: 'var(--ink-3)', fontSize: 13, fontWeight: 600 }}>See all</button>
      </div>
      <div style={{ padding: '0 20px' }}>
        {FEED.slice(0, 5).map(m => <MatchFeedRow key={m.id} m={m}/>)}
      </div>

      {/* Sign out */}
      <div style={{ padding: '24px 20px 12px' }}>
        <button style={{
          width: '100%', height: 48, background: 'transparent',
          border: 'none', color: 'var(--danger)', fontSize: 14.5, fontWeight: 700,
          cursor: 'pointer',
        }}>Sign out</button>
      </div>
    </div>
  );
}

window.MatchesTab = MatchesTab;
window.PlayerProfile = PlayerProfile;