// screens-donor.jsx — Donor Hub. Shown on the account screen when the user's
// persona is "donor". Gated by a donor-ID verification step, then a tabbed
// space (themed like the team pages): Giving · Benefits · Concierge · Messages.

function DonorHub() {
  const [verified, setVerified] = React.useState(() => {
    try { return localStorage.getItem('mtn.donorVerified') === '1'; } catch (e) { return false; }
  });
  const [donorId, setDonorId] = React.useState('');
  const [verifying, setVerifying] = React.useState(false);
  const [tab, setTab] = React.useState('giving');

  const verify = () => {
    if (!donorId.trim() || verifying) return;
    setVerifying(true);
    setTimeout(() => {
      setVerified(true);
      setVerifying(false);
      try { localStorage.setItem('mtn.donorVerified', '1'); } catch (e) {}
      if (window.fireRewardEvent) window.fireRewardEvent({ pts: 0, reason: 'Donor account linked', label: 'Concierge unlocked' });
    }, 1100);
  };

  const clubName = WVU.id === 'utah' ? 'Crimson Club'
    : WVU.id === 'osu' ? 'Buckeye Club'
    : WVU.id === 'kentucky' ? 'K Fund'
    : (WVU.vertical === 'soccer' ? 'Founders Club' : 'Mountaineer Athletic Club');

  // ─── Verification gate ───
  if (!verified) {
    return (
      <div style={{ padding: '0 16px 18px' }}>
        <div style={{ borderRadius: DS.r.lg, overflow: 'hidden', background: '#15151B', border: `0.5px solid ${hexA(WVU.gold, 0.3)}` }}>
          <div style={{ padding: '16px 16px 14px', background: `linear-gradient(135deg, ${WVU.gold}, ${_donorDark()})` }}>
            <div style={{ fontFamily: DS.mono, fontSize: 10, fontWeight: 800, color: WVU.onPrimary || '#fff', letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 4 }}>♛ Donor Access</div>
            <div style={{ fontFamily: DS.display, fontSize: 20, fontWeight: 900, color: WVU.onPrimary || '#fff', letterSpacing: '-0.01em', lineHeight: 1.1 }}>Verify your {clubName} membership</div>
          </div>
          <div style={{ padding: 16 }}>
            <div style={{ fontFamily: DS.sans, fontSize: 13, color: WVU.creamDim, lineHeight: 1.45, marginBottom: 14 }}>
              Link your donor ID to unlock giving history, member benefits, and your personal concierge.
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <input
                value={donorId}
                onChange={(e) => setDonorId(e.target.value)}
                onKeyDown={(e) => { if (e.key === 'Enter') verify(); }}
                placeholder="Donor ID (e.g. MAC-40192)"
                style={{
                  flex: 1, minWidth: 0, padding: '12px 14px', borderRadius: DS.r.md,
                  background: 'rgba(255,255,255,0.05)', border: `0.5px solid ${WVU.lineBold}`,
                  fontFamily: DS.sans, fontSize: 14, color: WVU.cream, outline: 'none',
                }}
              />
              <button onClick={verify} disabled={!donorId.trim() || verifying} style={{
                padding: '0 18px', borderRadius: DS.r.md, flexShrink: 0, cursor: donorId.trim() ? 'pointer' : 'default',
                background: donorId.trim() ? `linear-gradient(135deg, ${WVU.gold}, ${WVU.goldDim})` : 'rgba(255,255,255,0.08)',
                border: 'none', color: donorId.trim() ? (WVU.onPrimary || WVU.blueDim) : WVU.creamDim,
                fontFamily: DS.sans, fontSize: 13, fontWeight: 800,
              }}>{verifying ? 'Linking…' : 'Verify'}</button>
            </div>
            <div style={{ fontFamily: DS.mono, fontSize: 10, color: 'rgba(255,255,255,0.4)', letterSpacing: '0.06em', marginTop: 10 }}>
              🔒 Verified against the {clubName} donor registry
            </div>
          </div>
        </div>
      </div>
    );
  }

  // ─── Verified hub ───
  const tabs = ['Giving', 'Benefits', 'Concierge', 'Messages'];
  return (
    <div style={{ padding: '0 0 18px' }}>
      <div style={{ margin: '0 16px', borderRadius: DS.r.lg, overflow: 'hidden', background: '#15151B', border: `0.5px solid ${hexA(WVU.gold, 0.3)}` }}>
        {/* Hub header */}
        <div style={{ padding: '14px 16px', background: `linear-gradient(135deg, ${WVU.gold}, ${_donorDark()})`, display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ width: 42, height: 42, borderRadius: 21, background: 'rgba(0,0,0,0.2)', border: '1.5px solid rgba(255,255,255,0.35)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20, flexShrink: 0 }}>♛</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: DS.sans, fontSize: 14, fontWeight: 900, color: WVU.onPrimary || '#fff', letterSpacing: '-0.005em' }}>{DEREK.firstName} {DEREK.lastName}</div>
            <div style={{ fontFamily: DS.mono, fontSize: 10, fontWeight: 700, color: hexA(WVU.onPrimary || '#fff', 0.85), letterSpacing: '0.08em', marginTop: 2 }}>{clubName.toUpperCase()} · GOLD · #MAC-40192</div>
          </div>
          <div style={{ padding: '4px 9px', borderRadius: DS.r.pill, background: 'rgba(0,0,0,0.25)', fontFamily: DS.mono, fontSize: 9, fontWeight: 800, color: WVU.onPrimary || '#fff', letterSpacing: '0.08em' }}>VERIFIED</div>
        </div>
        {/* Tabs */}
        <div style={{ display: 'flex', borderBottom: `1px solid ${WVU.line}` }}>
          {tabs.map(tb => {
            const id = tb.toLowerCase();
            const on = id === tab;
            return (
              <button key={id} onClick={() => setTab(id)} style={{
                flex: 1, padding: '12px 4px', background: 'transparent', border: 'none', cursor: 'pointer',
                fontFamily: DS.sans, fontSize: 12, fontWeight: 700,
                color: on ? WVU.gold : WVU.creamDim, letterSpacing: '0.01em',
                borderBottom: on ? `2px solid ${WVU.gold}` : '2px solid transparent', marginBottom: -1,
              }}>{tb}</button>
            );
          })}
        </div>
        {/* Body */}
        <div style={{ padding: 16 }}>
          {tab === 'giving'    && <DonorGiving clubName={clubName} />}
          {tab === 'benefits'  && <DonorBenefits clubName={clubName} />}
          {tab === 'concierge' && <DonorConcierge />}
          {tab === 'messages'  && <DonorMessages />}
        </div>
      </div>
    </div>
  );
}

function _donorDark() {
  const h = (WVU.gold || '#F2A900').replace('#','');
  const n = parseInt(h, 16);
  const r = ((n>>16)&255)*0.28, g = ((n>>8)&255)*0.28, b = (n&255)*0.28;
  return `rgb(${Math.round(r)},${Math.round(g)},${Math.round(b)})`;
}

// ── GIVING ──
function DonorGiving({ clubName }) {
  const history = [
    { id: 'g1', label: `${clubName} annual gift`, amount: '$1,200', date: 'Jun 2025', fund: 'Operating' },
    { id: 'g2', label: 'Football facility campaign', amount: '$2,500', date: 'Mar 2025', fund: 'Capital' },
    { id: 'g3', label: 'NIL collective contribution', amount: '$500', date: 'Jan 2025', fund: 'NIL' },
    { id: 'g4', label: `${clubName} annual gift`, amount: '$1,200', date: 'Jun 2024', fund: 'Operating' },
    { id: 'g5', label: 'Scholarship endowment', amount: '$3,000', date: 'Nov 2023', fund: 'Endowment' },
  ];
  return (
    <div>
      {/* Totals */}
      <div style={{ display: 'flex', gap: 0, borderRadius: DS.r.md, overflow: 'hidden', background: 'rgba(255,255,255,0.04)', border: `0.5px solid ${WVU.line}`, marginBottom: 16 }}>
        {[['LIFETIME', '$8,400'], ['THIS YEAR', '$4,200'], ['RANK', 'Top 6%']].map(([k, v], i) => (
          <div key={k} style={{ flex: 1, textAlign: 'center', padding: '14px 4px', borderLeft: i ? `0.5px solid ${WVU.line}` : 'none' }}>
            <div style={{ fontFamily: DS.display, fontSize: 20, fontWeight: 900, color: WVU.gold, fontVariantNumeric: 'tabular-nums' }}>{v}</div>
            <div style={{ fontFamily: DS.mono, fontSize: 9, color: WVU.creamDim, letterSpacing: '0.1em', marginTop: 3 }}>{k}</div>
          </div>
        ))}
      </div>
      <div style={{ fontFamily: DS.sans, fontSize: 11, fontWeight: 700, color: WVU.gold, letterSpacing: '0.11em', textTransform: 'uppercase', marginBottom: 10 }}>Donation history</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {history.map(h => (
          <div key={h.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 12, borderRadius: DS.r.md, background: WVU.ink2, border: `0.5px solid ${WVU.line}` }}>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontFamily: DS.sans, fontSize: 13, fontWeight: 700, color: WVU.cream, letterSpacing: '-0.005em' }}>{h.label}</div>
              <div style={{ fontFamily: DS.mono, fontSize: 9.5, color: WVU.creamDim, letterSpacing: '0.06em', marginTop: 2, textTransform: 'uppercase' }}>{h.date} · {h.fund} fund</div>
            </div>
            <div style={{ fontFamily: DS.display, fontSize: 16, fontWeight: 800, color: WVU.gold, fontVariantNumeric: 'tabular-nums' }}>{h.amount}</div>
          </div>
        ))}
      </div>
      <button onClick={() => window.fireRewardEvent && window.fireRewardEvent({ pts: 0, reason: 'Tax receipt sent', label: 'Check your email' })} style={{ width: '100%', marginTop: 14, padding: '12px 0', borderRadius: DS.r.pill, background: 'rgba(255,255,255,0.06)', border: `0.5px solid ${WVU.lineBold}`, fontFamily: DS.sans, fontSize: 13, fontWeight: 700, color: WVU.cream, cursor: 'pointer' }}>Download 2024 tax receipt</button>
    </div>
  );
}

// ── BENEFITS ──
function DonorBenefits({ clubName }) {
  const benefits = [
    { icon: '🎟', title: 'Priority seat selection', sub: 'Lower-bowl 40-yard line · before public', on: true },
    { icon: '🅿️', title: 'Premium parking', sub: 'Blue Lot · gate-adjacent reserved spot', on: true },
    { icon: '🍽', title: `${clubName} luncheons`, sub: 'Monthly · with coaches & AD', on: true },
    { icon: '🏟', title: 'Field & sideline access', sub: '2 games per season', on: true },
    { icon: '✈️', title: 'Away-game travel package', sub: 'Unlocks at Platinum ($10k+)', on: false },
    { icon: '🎖', title: 'Locker room naming', sub: 'Unlocks at Champion ($25k+)', on: false },
  ];
  return (
    <div>
      <div style={{ fontFamily: DS.sans, fontSize: 11, fontWeight: 700, color: WVU.gold, letterSpacing: '0.11em', textTransform: 'uppercase', marginBottom: 10 }}>Your member benefits</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {benefits.map((b, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 12, borderRadius: DS.r.md, background: WVU.ink2, border: `0.5px solid ${b.on ? hexA(WVU.gold, 0.3) : WVU.line}`, opacity: b.on ? 1 : 0.6 }}>
            <div style={{ width: 38, height: 38, borderRadius: 10, background: b.on ? hexA(WVU.gold, 0.16) : 'rgba(255,255,255,0.05)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, flexShrink: 0 }}>{b.icon}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontFamily: DS.sans, fontSize: 13, fontWeight: 700, color: WVU.cream, letterSpacing: '-0.005em' }}>{b.title}</div>
              <div style={{ fontFamily: DS.sans, fontSize: 11, color: WVU.creamDim, marginTop: 1 }}>{b.sub}</div>
            </div>
            {b.on
              ? <div style={{ fontFamily: DS.mono, fontSize: 9, fontWeight: 800, color: WVU.gold, letterSpacing: '0.08em', padding: '3px 7px', borderRadius: 3, background: hexA(WVU.gold, 0.14) }}>ACTIVE</div>
              : <div style={{ fontFamily: DS.mono, fontSize: 9, fontWeight: 700, color: WVU.creamDim, letterSpacing: '0.08em' }}>LOCKED</div>}
          </div>
        ))}
      </div>
    </div>
  );
}

// ── CONCIERGE ──
function DonorConcierge() {
  const menu = [
    { icon: '🎫', title: 'Request extra tickets', sub: 'Up to 4 · any home game' },
    { icon: '🍽', title: 'Reserve a luncheon seat', sub: 'Next: Fri · with the head coach' },
    { icon: '🚗', title: 'Arrange game-day transport', sub: 'Black-car to the stadium' },
    { icon: '🤝', title: 'Meet & greet request', sub: 'Player or coach introduction' },
    { icon: '📞', title: 'Call my concierge', sub: 'Direct line · Dana R. · 9a–6p ET' },
  ];
  return (
    <div>
      <div style={{ padding: 14, borderRadius: DS.r.md, background: `linear-gradient(135deg, ${hexA(WVU.gold, 0.14)}, ${WVU.ink2})`, border: `0.5px solid ${hexA(WVU.gold, 0.3)}`, marginBottom: 14, display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ width: 44, height: 44, borderRadius: 22, overflow: 'hidden', flexShrink: 0, border: `2px solid ${WVU.gold}` }}>
          <img src="mountaineer/assets/rewards/avatar-03.png" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontFamily: DS.mono, fontSize: 9.5, fontWeight: 700, color: WVU.gold, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Your concierge</div>
          <div style={{ fontFamily: DS.sans, fontSize: 14, fontWeight: 800, color: WVU.cream, marginTop: 1 }}>Dana Reeves</div>
          <div style={{ fontFamily: DS.sans, fontSize: 11, color: WVU.creamDim }}>Donor relations · usually replies in minutes</div>
        </div>
      </div>
      <div style={{ fontFamily: DS.sans, fontSize: 11, fontWeight: 700, color: WVU.gold, letterSpacing: '0.11em', textTransform: 'uppercase', marginBottom: 10 }}>Concierge menu</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {menu.map((m, i) => (
          <button key={i} onClick={() => window.fireRewardEvent && window.fireRewardEvent({ pts: 0, reason: 'Concierge request sent', label: m.title })} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 12, borderRadius: DS.r.md, background: WVU.ink2, border: `0.5px solid ${WVU.line}`, cursor: 'pointer', textAlign: 'left', width: '100%' }}>
            <div style={{ width: 36, height: 36, borderRadius: 10, background: hexA(WVU.gold, 0.14), display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 17, flexShrink: 0 }}>{m.icon}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontFamily: DS.sans, fontSize: 13, fontWeight: 700, color: WVU.cream, letterSpacing: '-0.005em' }}>{m.title}</div>
              <div style={{ fontFamily: DS.sans, fontSize: 11, color: WVU.creamDim, marginTop: 1 }}>{m.sub}</div>
            </div>
            <svg width="8" height="14" viewBox="0 0 8 14" style={{ flexShrink: 0, opacity: 0.4 }}><path d="M1 1l6 6-6 6" stroke={WVU.cream} strokeWidth="1.6" fill="none" strokeLinecap="round"/></svg>
          </button>
        ))}
      </div>
    </div>
  );
}

// ── MESSAGES ──
function DonorMessages() {
  const threads = [
    { id: 'm1', who: 'Dana Reeves', role: 'Concierge', last: 'Your 4 Cincinnati tickets are confirmed — Sec 108.', when: '2h', unread: true, avatar: 'mountaineer/assets/rewards/avatar-03.png' },
    { id: 'm2', who: `${WVU.short || 'WVU'} Athletics`, role: 'Development', last: 'Thank you for your capital campaign gift!', when: '3d', unread: false, avatar: 'mountaineer/assets/rewards/avatar-06.png' },
    { id: 'm3', who: 'Coach\'s Office', role: 'Luncheon invite', last: 'You\'re confirmed for Friday\'s coaches luncheon.', when: '1w', unread: false, avatar: 'mountaineer/assets/rewards/avatar-01.png' },
  ];
  const [openThread, setOpenThread] = React.useState(null);
  if (openThread) {
    const t = threads.find(x => x.id === openThread);
    const msgs = [
      { me: false, body: `Hi ${DEREK.firstName}, this is ${t.who} from donor relations. How can I help today?`, t: '2:14p' },
      { me: true,  body: 'Could I get 2 extra tickets for the Cincinnati game?', t: '2:16p' },
      { me: false, body: t.last, t: '2:18p' },
    ];
    return (
      <div>
        <button onClick={() => setOpenThread(null)} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: 'transparent', border: 'none', cursor: 'pointer', color: WVU.gold, fontFamily: DS.sans, fontSize: 12, fontWeight: 700, marginBottom: 12, padding: 0 }}>
          <svg width="12" height="12" viewBox="0 0 14 14" fill="none"><path d="M9 2L4 7l5 5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
          {t.who}
        </button>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {msgs.map((m, i) => (
            <div key={i} style={{ alignSelf: m.me ? 'flex-end' : 'flex-start', maxWidth: '82%', padding: '10px 13px', borderRadius: 14, background: m.me ? `linear-gradient(135deg, ${WVU.gold}, ${WVU.goldDim})` : WVU.ink2, border: m.me ? 'none' : `0.5px solid ${WVU.line}`, color: m.me ? (WVU.onPrimary || WVU.blueDim) : WVU.cream, fontFamily: DS.sans, fontSize: 13, fontWeight: 500, lineHeight: 1.35 }}>
              {m.body}
              <div style={{ fontFamily: DS.mono, fontSize: 8.5, opacity: 0.6, marginTop: 4, textAlign: 'right' }}>{m.t}</div>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 8, marginTop: 14, alignItems: 'center', padding: '6px 6px 6px 14px', borderRadius: DS.r.pill, background: WVU.ink2, border: `0.5px solid ${WVU.line}` }}>
          <div style={{ flex: 1, fontFamily: DS.sans, fontSize: 13, color: WVU.creamDim }}>Message your concierge…</div>
          <button style={{ width: 34, height: 34, borderRadius: 17, background: `linear-gradient(135deg, ${WVU.gold}, ${WVU.goldDim})`, border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg width="15" height="15" viewBox="0 0 18 18" fill="none"><path d="M2 9l14-7-5 16-2-7-7-2z" stroke={WVU.onPrimary || WVU.blueDim} strokeWidth="1.6" strokeLinejoin="round" fill="none"/></svg>
          </button>
        </div>
      </div>
    );
  }
  return (
    <div>
      <div style={{ fontFamily: DS.sans, fontSize: 11, fontWeight: 700, color: WVU.gold, letterSpacing: '0.11em', textTransform: 'uppercase', marginBottom: 10 }}>Your conversations</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {threads.map(t => (
          <button key={t.id} onClick={() => setOpenThread(t.id)} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 12, borderRadius: DS.r.md, background: WVU.ink2, border: `0.5px solid ${t.unread ? hexA(WVU.gold, 0.3) : WVU.line}`, cursor: 'pointer', textAlign: 'left', width: '100%' }}>
            <div style={{ width: 40, height: 40, borderRadius: 20, overflow: 'hidden', flexShrink: 0, border: `1.5px solid ${hexA(WVU.gold, 0.4)}` }}>
              <img src={t.avatar} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <div style={{ fontFamily: DS.sans, fontSize: 13, fontWeight: 800, color: WVU.cream }}>{t.who}</div>
                <div style={{ fontFamily: DS.mono, fontSize: 9, color: WVU.creamDim }}>· {t.role}</div>
                {t.unread && <div style={{ width: 7, height: 7, borderRadius: 4, background: WVU.gold }} />}
              </div>
              <div style={{ fontFamily: DS.sans, fontSize: 11.5, color: WVU.creamDim, marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t.last}</div>
            </div>
            <div style={{ fontFamily: DS.mono, fontSize: 9.5, color: WVU.creamDim, flexShrink: 0 }}>{t.when}</div>
          </button>
        ))}
      </div>
      <button onClick={() => setOpenThread('m1')} style={{ width: '100%', marginTop: 14, padding: '12px 0', borderRadius: DS.r.pill, background: `linear-gradient(135deg, ${WVU.gold}, ${WVU.goldDim})`, border: 'none', fontFamily: DS.sans, fontSize: 13, fontWeight: 800, color: WVU.onPrimary || WVU.blueDim, cursor: 'pointer' }}>+ New message to concierge</button>
    </div>
  );
}

Object.assign(window, { DonorHub });

// Gate: only show the Donor Hub when the active persona is "donor".
function DonorGate() {
  const [persona] = usePersona();
  if (persona !== 'donor') return null;
  return <DonorHub />;
}

Object.assign(window, { DonorHub, DonorGate });