// VibraMatch — "My Groups" home tab, 3 directions
// Real structure: horizontal group strip + cross-group activity feed of confirmed matches.

// ────────────────────────────────────────────────────────────────
// Shared atoms used across directions
// ────────────────────────────────────────────────────────────────

function DeltaPill({ delta, size = 'md' }) {
  const sz = size === 'sm' ? { fs: 11, px: 6, py: 2 } : { fs: 12.5, px: 8, py: 3 };
  if (delta === null || delta === undefined || delta === 0) {
    return <span style={{ color: 'var(--ink-4)', fontSize: sz.fs, fontWeight: 700 }}>—</span>;
  }
  const up = delta > 0;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 2,
      background: up ? 'var(--lime)' : 'var(--surface-3)',
      color: up ? 'var(--on-lime)' : 'var(--danger)',
      padding: `${sz.py}px ${sz.px}px`, borderRadius: 999,
      fontSize: sz.fs, fontWeight: 800, letterSpacing: '-0.005em',
      fontVariantNumeric: 'tabular-nums',
    }}>
      {up ? '+' : '−'}{Math.abs(delta)}
    </span>
  );
}

function StreakChip({ value }) {
  if (!value || value === '—') return <span className="vm-sm" style={{ fontWeight: 600 }}>No streak</span>;
  const isWin = value.startsWith('W');
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 4,
      fontSize: 12, fontWeight: 700, color: isWin ? 'var(--success)' : 'var(--ink-3)',
      fontVariantNumeric: 'tabular-nums',
    }}>
      <I.fire size={12} sw={2.2}/>{value}
    </span>
  );
}

// Match-result narrative row used in feeds
function MatchFeedRow({ m, dense = false, showGroup = true }) {
  const myColor = m.iWon === true ? 'var(--success)' : m.iWon === false ? 'var(--ink-3)' : 'var(--ink-2)';
  return (
    <div style={{ padding: dense ? '10px 4px' : '14px 4px', borderTop: '1px solid var(--line)' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
        {showGroup && (
          <span style={{
            fontSize: 10.5, fontWeight: 700, padding: '3px 7px', borderRadius: 6,
            background: 'var(--lime-soft)', color: 'var(--ink)', letterSpacing: '0.01em',
          }}>{m.group}</span>
        )}
        <span style={{ fontSize: 11.5, color: 'var(--ink-4)', fontWeight: 600, marginLeft: 'auto' }}>{m.when}</span>
      </div>
      <div style={{ fontSize: 14.5, color: 'var(--ink)', fontWeight: 600, marginBottom: 4, letterSpacing: '-0.005em' }}>
        <span style={{ color: myColor, fontWeight: 700 }}>{m.winners}</span>
        <span style={{ color: 'var(--ink-3)', fontWeight: 500 }}> beat </span>
        <span style={{ color: 'var(--ink-2)', fontWeight: 600 }}>{m.losers}</span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div className="vm-num" style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink-2)', letterSpacing: '-0.005em' }}>
          {m.sets.map((s, i) => (
            <span key={i}>{s[0]}-{s[1]}{i < m.sets.length - 1 ? ' · ' : ''}</span>
          ))}
        </div>
        {m.myDelta !== null && <DeltaPill delta={m.myDelta} size="sm"/>}
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// Direction A — "Refined": horizontal strip + activity feed (1:1 with current IA)
// ═══════════════════════════════════════════════════════════════
function MyGroupsA() {
  return (
    <div className="vm-scroll" style={{ height: '100%', background: 'var(--bg)', paddingBottom: 110 }}>
      {/* Header */}
      <div style={{ padding: '12px 20px 6px', display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 11.5, fontWeight: 600, color: 'var(--ink-3)', letterSpacing: '-0.005em' }}>Hey, {ME.username}</div>
          <div className="vm-h1" style={{ fontSize: 28, marginTop: 2 }}>My groups</div>
        </div>
        <IconButton icon={<I.search size={20}/>} variant="surface"/>
        <IconButton icon={<I.bell size={20}/>} variant="surface"/>
      </div>

      {/* Group cards — horizontal strip */}
      <div style={{ padding: '14px 0 0' }}>
        <div style={{
          display: 'flex', gap: 10, padding: '0 20px',
          overflowX: 'auto', scrollSnapType: 'x mandatory',
        }} className="vm-scroll">
          {GROUPS.map(g => (
            <div key={g.id} style={{
              flex: '0 0 168px', scrollSnapAlign: 'start',
              background: 'var(--surface)', borderRadius: 'var(--r-md)',
              padding: 14, border: '1px solid var(--line)',
              display: 'flex', flexDirection: 'column', gap: 10, minHeight: 116,
            }}>
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8 }}>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="vm-h4" style={{ fontSize: 14.5, lineHeight: 1.25, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{g.name}</div>
                  <div className="vm-sm" style={{ fontSize: 11.5, marginTop: 2 }}>{g.memberCount} members</div>
                </div>
                <DeltaPill delta={g.myDelta} size="sm"/>
              </div>
              <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
                <div>
                  <div style={{ fontSize: 9.5, fontWeight: 700, color: 'var(--ink-3)', letterSpacing: '0.06em' }}>YOUR ELO</div>
                  <div className="vm-num" style={{ fontSize: 22, fontWeight: 800, lineHeight: 1, marginTop: 2, letterSpacing: '-0.02em' }}>
                    {g.myElo}
                    {g.isProvisional && <span style={{ fontSize: 10, fontWeight: 700, color: 'var(--ink-3)', marginLeft: 4, letterSpacing: 0 }}>·prov</span>}
                  </div>
                </div>
                <div style={{ fontSize: 11.5, fontWeight: 700, color: 'var(--ink-3)' }}>#{g.myRank}</div>
              </div>
            </div>
          ))}
          {/* See all tile */}
          <div style={{
            flex: '0 0 100px', scrollSnapAlign: 'start',
            background: 'transparent', borderRadius: 'var(--r-md)',
            border: '1.5px dashed var(--line-strong)',
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
            color: 'var(--ink-2)', fontWeight: 600, fontSize: 12.5, gap: 6,
          }}>
            <I.plus size={20} sw={2.4}/>
            New group
          </div>
        </div>
      </div>

      {/* Recent matches */}
      <div style={{ padding: '22px 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.map(m => <MatchFeedRow key={m.id} m={m}/>)}
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// Direction B — "Group-first": stacked rich group cards
// Group is the hero. ELO + delta + last-3 form mini-feed inline.
// ═══════════════════════════════════════════════════════════════
function MyGroupsB() {
  return (
    <div className="vm-scroll" style={{ height: '100%', background: 'var(--bg)', paddingBottom: 110 }}>
      <div style={{ padding: '12px 20px 18px', display: 'flex', alignItems: 'center', gap: 10 }}>
        <Avatar name={ME.username} size={40} ring/>
        <div style={{ flex: 1 }}>
          <div className="vm-h1" style={{ fontSize: 28 }}>Groups</div>
        </div>
        <IconButton icon={<I.plus size={22} sw={2.4}/>} variant="ink"/>
      </div>

      {/* Best group highlight banner */}
      <div style={{ padding: '0 20px 16px' }}>
        <div style={{
          background: 'var(--ink)', color: '#fff', borderRadius: 'var(--r-lg)', padding: 16,
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ position: 'absolute', top: -40, right: -40, width: 140, height: 140, borderRadius: 999, background: 'var(--lime)', opacity: 0.18, filter: 'blur(4px)' }}/>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 10.5, fontWeight: 700, letterSpacing: '0.06em', opacity: 0.75 }}>
            <I.trophy size={13} sw={2.2}/> TOP RANK · SUNDAY DOUBLES
          </div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginTop: 8 }}>
            <div className="vm-num" style={{ fontSize: 44, fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1 }}>1342</div>
            <div style={{ background: 'var(--lime)', color: 'var(--on-lime)', padding: '4px 10px', borderRadius: 999, fontSize: 13, fontWeight: 800 }}>+18</div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 10, fontSize: 12, fontWeight: 600, opacity: 0.8 }}>
            <span>#1 of 4 · 5-win streak 🔥</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>Open <I.arrow size={14} sw={2.2}/></span>
          </div>
        </div>
      </div>

      {/* Group cards (stacked) */}
      <div style={{ padding: '0 20px 4px', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
        <div className="vm-h3">All groups</div>
        <div className="vm-sm" style={{ fontWeight: 600 }}>{GROUPS.length} active</div>
      </div>

      <div style={{ padding: '12px 20px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {GROUPS.map(g => (
          <div key={g.id} style={{
            background: 'var(--surface)', borderRadius: 'var(--r-lg)', padding: 16,
            border: '1px solid var(--line)',
          }}>
            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="vm-h4" style={{ fontSize: 16.5 }}>{g.name}</div>
                <div className="vm-sm" style={{ fontSize: 12.5, marginTop: 2 }}>{g.memberCount} members · top: {g.topPlayer}</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div className="vm-num" style={{ fontSize: 24, fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 1, color: g.isProvisional ? 'var(--ink-3)' : 'var(--ink)' }}>{g.myElo}</div>
                <div style={{ fontSize: 10.5, fontWeight: 700, color: 'var(--ink-3)', marginTop: 2, letterSpacing: '0.04em' }}>YOUR ELO</div>
              </div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 12, paddingTop: 12, borderTop: '1px solid var(--line)' }}>
              <span style={{
                display: 'inline-flex', alignItems: 'center', gap: 4,
                fontSize: 11.5, fontWeight: 700, color: 'var(--ink-2)',
                background: 'var(--surface-3)', padding: '3px 8px', borderRadius: 999,
              }}>#{g.myRank} of {g.memberCount}</span>
              {g.isProvisional && (
                <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--ink-3)', background: 'var(--surface-3)', padding: '3px 8px', borderRadius: 999 }}>Provisional</span>
              )}
              <StreakChip value={g.streak}/>
              <DeltaPill delta={g.myDelta} size="sm"/>
              <button style={{ marginLeft: 'auto', background: 'var(--ink)', color: '#fff', border: 'none', height: 30, padding: '0 12px', borderRadius: 999, fontSize: 12, fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                Open <I.chev size={12} sw={2.4}/>
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// Direction C — "Live feed first": activity feed is the hero, groups condensed
// ═══════════════════════════════════════════════════════════════
function MyGroupsC() {
  return (
    <div className="vm-scroll" style={{ height: '100%', background: 'var(--bg)', paddingBottom: 110 }}>
      <div style={{ padding: '12px 20px 4px', display: 'flex', alignItems: 'center', gap: 10 }}>
        <Avatar name={ME.username} size={40} ring/>
        <div style={{ flex: 1 }}>
          <div className="vm-h1" style={{ fontSize: 26 }}>Today in your groups</div>
        </div>
        <IconButton icon={<I.bell size={20}/>} variant="surface"/>
      </div>

      {/* Slim group rail */}
      <div style={{ padding: '14px 0 6px' }}>
        <div style={{ display: 'flex', gap: 8, padding: '0 20px', overflowX: 'auto' }} className="vm-scroll">
          {GROUPS.map(g => (
            <button key={g.id} style={{
              flex: '0 0 auto', display: 'flex', alignItems: 'center', gap: 8,
              background: 'var(--surface)', border: '1px solid var(--line)',
              borderRadius: 999, padding: '6px 12px 6px 6px', cursor: 'pointer',
            }}>
              <Avatar name={g.name} size={26}/>
              <div style={{ textAlign: 'left' }}>
                <div style={{ fontSize: 12.5, fontWeight: 700, lineHeight: 1.1, color: 'var(--ink)' }}>{g.name}</div>
                <div className="vm-num" style={{ fontSize: 10.5, color: 'var(--ink-3)', fontWeight: 700, marginTop: 1 }}>
                  #{g.myRank} · {g.myElo}
                </div>
              </div>
              {g.myDelta != null && g.myDelta !== 0 && (
                <span style={{
                  width: 6, height: 6, borderRadius: 999,
                  background: g.myDelta > 0 ? 'var(--lime-deep)' : 'var(--danger)',
                }}/>
              )}
            </button>
          ))}
          <button style={{
            flex: '0 0 auto', display: 'flex', alignItems: 'center', gap: 6,
            background: 'transparent', border: '1.5px dashed var(--line-strong)',
            borderRadius: 999, padding: '6px 12px', color: 'var(--ink-2)', fontSize: 12.5, fontWeight: 600,
          }}>
            <I.plus size={14} sw={2.4}/> New
          </button>
        </div>
      </div>

      {/* Big "log match" affordance */}
      <div style={{ padding: '16px 20px 6px' }}>
        <button style={{
          width: '100%', display: 'flex', alignItems: 'center', gap: 14,
          padding: '14px 16px', 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: 36, height: 36, borderRadius: 999, background: 'var(--on-lime)', color: 'var(--lime)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
            <I.plus size={20} sw={2.6}/>
          </div>
          <div style={{ textAlign: 'left', flex: 1 }}>
            <div style={{ fontSize: 15, fontWeight: 800, letterSpacing: '-0.01em' }}>Log a match</div>
            <div style={{ fontSize: 12, fontWeight: 600, opacity: 0.7 }}>Takes about 30 seconds</div>
          </div>
          <I.arrow size={18} sw={2.4}/>
        </button>
      </div>

      {/* Feed */}
      <div style={{ padding: '18px 20px 4px', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
        <div className="vm-h3">Recent matches</div>
        <Tabs value="all" onChange={() => {}} items={[
          { key: 'all', label: 'All' },
          { key: 'mine', label: 'Mine' },
        ]}/>
      </div>
      <div style={{ padding: '0 20px' }}>
        {FEED.map(m => <MatchFeedRow key={m.id} m={m}/>)}
      </div>
    </div>
  );
}

window.MyGroupsA = MyGroupsA;
window.MyGroupsB = MyGroupsB;
window.MyGroupsC = MyGroupsC;
window.MatchFeedRow = MatchFeedRow;
window.DeltaPill = DeltaPill;
window.StreakChip = StreakChip;