// screens-me.jsx — Derek's account: identity, rewards, history, receipts
// The most literal surface of the "digital spine" — single source of truth.

function ScreenMe({ onOpenTickets }) {
  return (
    <div style={{
      position: 'absolute', inset: 0, overflow: 'auto',
      background: WVU.ink, color: WVU.cream, paddingBottom: 120,
      paddingTop: 104,
    }} className="mtn-scrollbar">

      {/* Identity */}
      <div style={{ padding: '0 20px 18px' }}>
        <div style={{ display: 'flex', gap: 14, alignItems: 'center', marginBottom: 14 }}>
          <div style={{
            width: 60, height: 60, borderRadius: 30,
            background: `linear-gradient(135deg, ${WVU.goldDim}, ${WVU.gold})`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: DS.display, fontWeight: 800, fontSize: 22, color: WVU.blueDim,
            boxShadow: WVU.shGlow,
          }}>{DEREK.initials}</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: DS.display, fontSize: 22, fontWeight: 800, color: WVU.cream, letterSpacing: '-0.02em' }}>
              {DEREK.firstName} {DEREK.lastName}
            </div>
            <div style={{ fontFamily: DS.sans, fontSize: 12, color: WVU.creamDim, marginTop: 2 }}>
              {DEREK.handle} · {DEREK.homeCity}
            </div>
          </div>
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
          <MtnChip>Gold Donor</MtnChip>
          <MtnChip>Alum '14</MtnChip>
          <MtnChip>ST · Yr {DEREK.seasonTickets.yearsHeld}</MtnChip>
        </div>
      </div>

      {/* Rewards — the gold bar */}
      <div style={{ padding: '0 16px 18px' }}>
        <div style={{
          padding: 18,
          background: `linear-gradient(155deg, ${WVU.blueDim}, ${WVU.blue} 60%, #001a3a)`,
          border: `0.5px solid ${WVU.blueLite}44`,
          borderRadius: DS.r.lg, position: 'relative', overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', top: -20, right: -20, width: 140, height: 140,
            background: `radial-gradient(circle, ${WVU.gold}44, transparent 70%)`,
            pointerEvents: 'none',
          }} />
          <div style={{ position: 'relative' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
              <div>
                <div style={{ fontFamily: DS.sans, fontSize: 10, fontWeight: 600, color: WVU.gold, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
                  MOUNTAINEER REWARDS · GOLD
                </div>
                <div style={{
                  fontFamily: DS.display, fontSize: 36, fontWeight: 900,
                  color: WVU.cream, letterSpacing: '-0.03em', marginTop: 8,
                  fontVariantNumeric: 'tabular-nums', lineHeight: 1,
                  display: 'flex', alignItems: 'baseline', gap: 8,
                }}>
                  <span>{DEREK.points.toLocaleString()}</span>
                  <span style={{ fontSize: 14, color: WVU.creamDim, fontWeight: 600, letterSpacing: 0 }}>pts</span>
                </div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontFamily: DS.sans, fontSize: 10, fontWeight: 600, color: WVU.goldLite, letterSpacing: '0.12em', textTransform: 'uppercase' }}>NEXT</div>
                <div style={{ fontFamily: DS.display, fontSize: 16, fontWeight: 700, color: WVU.cream, letterSpacing: '0.02em', marginTop: 3 }}>PLATINUM</div>
                <div style={{ fontFamily: DS.mono, fontSize: 9, color: WVU.creamDim, letterSpacing: '0.1em', marginTop: 2 }}>
                  {DEREK.pointsToNext.toLocaleString()} PTS TO GO
                </div>
              </div>
            </div>
            <div style={{ height: 5, background: 'rgba(245,236,217,0.14)', borderRadius: 3, overflow: 'hidden', marginTop: 14 }}>
              <div style={{
                width: `${(DEREK.points / 20000) * 100}%`, height: '100%',
                background: `linear-gradient(90deg, ${WVU.goldDim}, ${WVU.gold})`,
              }} />
            </div>
          </div>
        </div>
      </div>

      {/* Redeem carousel */}
      <MtnSection title="Redeem your points" kicker="4 rewards unlocked">
        <div style={{ display: 'flex', gap: 10, overflowX: 'auto', padding: '0 16px 4px' }} className="mtn-scrollbar">
          {REWARDS.map(rw => {
            const can = DEREK.points >= rw.pts;
            return (
              <div key={rw.id} style={{
                width: 200, flexShrink: 0, padding: 14,
                background: can ? WVU.ink2 : 'rgba(30,26,19,0.4)',
                border: `0.5px solid ${can ? WVU.line : WVU.line}`,
                borderRadius: DS.r.md, opacity: can ? 1 : 0.55,
                display: 'flex', flexDirection: 'column', minHeight: 140,
              }}>
                <div style={{ fontFamily: DS.mono, fontSize: 9, color: can ? WVU.gold : WVU.creamDim, letterSpacing: '0.12em' }}>
                  {rw.pts.toLocaleString()} PTS
                </div>
                <div style={{ fontFamily: DS.sans, fontSize: 13, fontWeight: 700, color: WVU.cream, marginTop: 8, lineHeight: 1.25, flex: 1 }}>
                  {rw.title}
                </div>
                <div style={{ fontFamily: DS.sans, fontSize: 10, color: WVU.creamDim, marginTop: 4 }}>
                  {rw.sub}
                </div>
                <MtnButton size="sm" variant={can ? 'primary' : 'ghost'} style={{ marginTop: 10 }}>
                  {can ? 'Redeem' : `Locked`}
                </MtnButton>
              </div>
            );
          })}
        </div>
      </MtnSection>

      {/* What's linked — the spine, explicit */}
      <MtnSection title="What's linked" kicker="Your account across Mountaineer 360">
        <div style={{ padding: '0 16px' }}>
          <MtnCard padding={0}>
            <LinkedRow
              icon="🎟"
              title="Football season tickets"
              sub={`Sec ${DEREK.seasonTickets.section} · Row ${DEREK.seasonTickets.row} · Seats 3-4 · Yr ${DEREK.seasonTickets.yearsHeld}`}
              val="Active"
            />
            <LinkedRow
              icon="♚"
              title="Gold Mountaineer Club"
              sub="Donor member · Renews Jun 2026"
              val="$1,200/yr"
            />
            <LinkedRow
              icon="★"
              title="Following · Jalen Briscoe"
              sub="Gold Tier supporter · Sep 2024"
              val="$15/mo"
            />
            <LinkedRow
              icon="✉"
              title="Email · push · in-app"
              sub="Game day, drops, NIL, ticket alerts"
              val="All on"
            />
            <LinkedRow
              icon="▣"
              title="Visa •••• 4242"
              sub="Default payment · Apple Pay on"
              val="Edit"
              last
            />
          </MtnCard>
        </div>
      </MtnSection>

      {/* Recent activity */}
      <MtnSection title="Recent activity" kicker="Last 45 days">
        <div style={{ padding: '0 16px' }}>
          <MtnCard padding={0}>
            {RECENT_PURCHASES.map((p, i) => (
              <div key={p.id} style={{
                padding: '14px 14px',
                display: 'flex', alignItems: 'center', gap: 12,
                borderBottom: i === RECENT_PURCHASES.length - 1 ? 'none' : `0.5px solid ${WVU.line}`,
              }}>
                <div style={{
                  width: 34, height: 34, borderRadius: DS.r.sm,
                  background: p.type.startsWith('Ticket') ? WVU.blue
                    : p.type === 'NIL' ? 'rgba(234,170,0,0.2)'
                    : WVU.ink3,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: DS.sans, fontSize: 10, fontWeight: 800,
                  color: p.type === 'NIL' ? WVU.gold : WVU.cream,
                  letterSpacing: '0.05em', flexShrink: 0,
                }}>
                  {p.type.startsWith('Ticket') ? 'TIX' : p.type === 'NIL' ? 'NIL' : 'SHP'}
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{
                    fontFamily: DS.sans, fontSize: 12, fontWeight: 600, color: WVU.cream,
                    letterSpacing: '-0.005em', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                  }}>{p.item}</div>
                  <div style={{ fontFamily: DS.mono, fontSize: 9, color: WVU.creamDim, letterSpacing: '0.08em', marginTop: 2 }}>
                    {p.date} · {p.type.toUpperCase()}
                  </div>
                </div>
                <div style={{
                  fontFamily: DS.sans, fontSize: 12, fontWeight: 700, color: WVU.cream,
                  fontVariantNumeric: 'tabular-nums',
                }}>{p.amount}</div>
              </div>
            ))}
          </MtnCard>
        </div>
      </MtnSection>

      {/* Account settings (minimal list) */}
      <div style={{ padding: '0 16px' }}>
        <MtnCard padding={0}>
          {[
            'Notifications',
            'Payment & receipts',
            'Privacy & data',
            'Help & contact',
            'Sign out',
          ].map((label, i, arr) => (
            <div key={label} style={{
              padding: '14px 16px',
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              borderBottom: i === arr.length - 1 ? 'none' : `0.5px solid ${WVU.line}`,
              cursor: 'pointer',
            }}>
              <div style={{
                fontFamily: DS.sans, fontSize: 13, fontWeight: 600,
                color: label === 'Sign out' ? '#d97757' : WVU.cream,
              }}>{label}</div>
              {label !== 'Sign out' && (
                <svg width="8" height="14" viewBox="0 0 8 14" style={{ opacity: 0.5 }}>
                  <path d="M1 1l6 6-6 6" stroke={WVU.cream} strokeWidth="1.6" fill="none" strokeLinecap="round"/>
                </svg>
              )}
            </div>
          ))}
        </MtnCard>
      </div>

      <div style={{ textAlign: 'center', marginTop: 20, fontFamily: DS.mono, fontSize: 9, color: WVU.creamDim, letterSpacing: '0.14em' }}>
        MOUNTAINEER 360 · v2.4.1 · MADE IN WV
      </div>
    </div>
  );
}

function LinkedRow({ icon, title, sub, val, last }) {
  return (
    <div style={{
      padding: '14px 14px', display: 'flex', alignItems: 'center', gap: 12,
      borderBottom: last ? 'none' : `0.5px solid ${WVU.line}`,
    }}>
      <div style={{
        width: 32, height: 32, borderRadius: DS.r.sm,
        background: 'rgba(234,170,0,0.10)',
        border: `0.5px solid ${WVU.lineWarm}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: WVU.gold, fontSize: 14, flexShrink: 0,
      }}>{icon}</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontFamily: DS.sans, fontSize: 12, fontWeight: 700, color: WVU.cream }}>{title}</div>
        <div style={{ fontFamily: DS.sans, fontSize: 10, color: WVU.creamDim, marginTop: 2 }}>{sub}</div>
      </div>
      <div style={{ fontFamily: DS.sans, fontSize: 11, fontWeight: 600, color: WVU.gold, letterSpacing: '-0.005em' }}>
        {val}
      </div>
    </div>
  );
}

Object.assign(window, { ScreenMe });