// profile.jsx — User profile screen (mobile + desktop)
// Adds the goal/gamification/notification layer that is core to sharewise but
// missing from the redesigns so far.

// ╔══════════════════════════════════════════════════════════════╗
// ║  PROFILE — Mobile                                            ║
// ╚══════════════════════════════════════════════════════════════╝
function ProfileScreen({ dark }) {
  const t = useTheme(dark);
  return (
    <div style={{ background: t.bg, color: t.text, height: '100%', display: 'flex', flexDirection: 'column',
      fontFamily: SW_FONT, position: 'relative' }}>
      {/* Top app bar */}
      <TopAppBar t={t} hasNotifications={true} />
      {/* Screen title block */}
      <div style={{ padding: '6px 16px 8px' }}>
        <div style={{ fontSize: 11, color: t.textDim, letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 600 }}>
          Dein Profil
        </div>
        <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em', marginTop: 2 }}>Stefan</div>
      </div>

      <div style={{ flex: 1, overflow: 'auto', paddingBottom: 90 }}>
        {/* Identity strip */}
        <div style={{ padding: '8px 16px 16px', display: 'flex', alignItems: 'center', gap: 14 }}>
          <Avatar name="St" size={64} color={t.accent} />
          <div style={{ flex: 1 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 3 }}>
              <span style={{ fontSize: 16, fontWeight: 700, letterSpacing: '-0.01em' }}>@stefan</span>
              <span style={{ padding: '2px 6px', borderRadius: 5, background: t.accentSoft, color: t.accent,
                fontSize: 9.5, fontWeight: 700, letterSpacing: '0.04em' }}>FOUNDER</span>
            </div>
            <div style={{ fontSize: 11.5, color: t.textDim, fontFamily: SW_MONO, marginBottom: 6 }}>
              Mitglied seit 07/2019
            </div>
            <div style={{ display: 'flex', gap: 14, fontSize: 11 }}>
              <span><span style={{ fontFamily: SW_MONO, fontWeight: 700, color: t.text }}>49</span>
                <span style={{ color: t.textDim, marginLeft: 4 }}>Following</span></span>
              <span><span style={{ fontFamily: SW_MONO, fontWeight: 700, color: t.text }}>17</span>
                <span style={{ color: t.textDim, marginLeft: 4 }}>Followers</span></span>
            </div>
          </div>
        </div>

        {/* Trefferrate hero — the core sharewise metric */}
        <div style={{ padding: '0 16px 14px' }}>
          <div style={{
            padding: '18px', borderRadius: 18,
            background: t.surface, border: `0.5px solid ${t.border}`,
            position: 'relative', overflow: 'hidden',
          }}>
            <div style={{ position: 'absolute', top: -30, right: -30, width: 140, height: 140,
              borderRadius: 999, background: t.upSoft, filter: 'blur(36px)', opacity: 0.5 }} />
            <div style={{ position: 'relative' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 12 }}>
                <div style={{ width: 6, height: 6, borderRadius: 3, background: t.up }} />
                <span style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '0.08em', color: t.textMuted, textTransform: 'uppercase' }}>
                  Trefferrate
                </span>
                <span style={{ marginLeft: 'auto', fontSize: 11, color: t.textDim, fontFamily: SW_MONO }}>
                  letzte 12 Monate
                </span>
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
                <span style={{ fontFamily: SW_MONO, fontSize: 44, fontWeight: 700,
                  letterSpacing: '-0.04em', color: t.up, lineHeight: 1 }}>62%</span>
                <span style={{ fontFamily: SW_MONO, fontSize: 13, color: t.up, fontWeight: 600 }}>+4.2% MoM</span>
              </div>
              <div style={{ marginTop: 6, fontSize: 12, color: t.textMuted, letterSpacing: '-0.005em' }}>
                36 von 58 Einschätzungen waren korrekt — Top 14% der Community.
              </div>
              <div style={{ marginTop: 14 }}>
                <Spark data={SAMPLE.amzn} w={340} h={36} color={t.up} />
              </div>
            </div>
          </div>
        </div>

        {/* Stat tiles */}
        <div style={{ padding: '0 16px 14px', display: 'grid',
          gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
          {[
            { label: 'Einschätzungen', val: '58', sub: 'gesamt' },
            { label: 'Streak', val: '7', sub: 'Wochen 🔥' },
            { label: 'Rang', val: '#142', sub: 'global' },
          ].map(s => (
            <Card key={s.label} t={t} pad={12} radius={12}>
              <div style={{ fontSize: 10, color: t.textDim, letterSpacing: '0.04em',
                textTransform: 'uppercase', fontWeight: 600 }}>{s.label}</div>
              <div style={{ fontFamily: SW_MONO, fontSize: 20, fontWeight: 700,
                letterSpacing: '-0.02em', marginTop: 4 }}>{s.val}</div>
              <div style={{ fontSize: 10.5, color: t.textMuted, marginTop: 2 }}>{s.sub}</div>
            </Card>
          ))}
        </div>

        {/* Goal */}
        <SectionH t={t} label="Dein nächstes Ziel" cta="Alle Ziele" />
        <div style={{ padding: '0 16px' }}>
          <Card t={t} pad={14} radius={14}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
              <div style={{
                width: 38, height: 38, borderRadius: 10, background: t.accentSoft,
                display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
              }}>
                {Icon.award(t.accent, 22)}
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: '-0.005em' }}>
                  Predictor · Silver
                </div>
                <div style={{ fontSize: 11, color: t.textMuted, marginTop: 2 }}>
                  10 Einschätzungen mit > 50% Rendite · mindestens 1 Jahr
                </div>
              </div>
              <span style={{ fontFamily: SW_MONO, fontSize: 13, fontWeight: 700, color: t.accent }}>6/10</span>
            </div>
            <div style={{ height: 8, background: t.chip, borderRadius: 4, overflow: 'hidden', marginBottom: 10 }}>
              <div style={{ width: '60%', height: '100%', background: t.accent, borderRadius: 4 }} />
            </div>
            {/* Tier preview */}
            <div style={{ display: 'flex', gap: 6 }}>
              {[
                { tier: 'Bronze', goal: '5× >30%', done: true },
                { tier: 'Silver', goal: '10× >50%', active: true },
                { tier: 'Gold', goal: '20× >100%' },
              ].map(tr => (
                <div key={tr.tier} style={{
                  flex: 1, padding: '7px 6px', borderRadius: 8,
                  background: tr.active ? t.accentSoft : 'transparent',
                  border: tr.done
                    ? `0.5px solid ${t.up}`
                    : tr.active
                    ? `0.5px solid ${t.accent}`
                    : `0.5px solid ${t.border}`,
                  textAlign: 'center',
                  opacity: tr.done ? 0.7 : 1,
                }}>
                  <div style={{ fontSize: 10.5, fontWeight: 700,
                    color: tr.done ? t.up : tr.active ? t.accent : t.textMuted,
                    letterSpacing: '0.02em' }}>
                    {tr.done ? '✓ ' : ''}{tr.tier}
                  </div>
                  <div style={{ fontSize: 9.5, color: t.textDim, fontFamily: SW_MONO, marginTop: 1 }}>{tr.goal}</div>
                </div>
              ))}
            </div>
          </Card>
        </div>

        {/* Notifications */}
        <SectionH t={t} label="Benachrichtigungen" cta="Alle" badge={3} />
        <div style={{ padding: '0 12px', display: 'flex', flexDirection: 'column', gap: 6 }}>
          {[
            { name: 'fenjal', when: '14:16', verb: 'antwortete dir in',
              target: 'AMZN · Diskussion',
              preview: '"Der FTC-Overhang ist real, aber 5+ Jahre Litigation — bis dahin sind wir längst raus. ↑ stimme zu."',
              unread: true },
            { name: 'PapaSmurf', when: '11:42', verb: 'erwähnte dich in',
              target: 'NVDA · Prediction',
              preview: '"@stefan dein FX-Argument war richtig — schau dir mal die Q3-Guidance an."',
              unread: true },
            { name: 'Investorin_DE', when: 'gestern', verb: 'liked deinen Kommentar in',
              target: 'GOOGL · Diskussion',
              preview: '"Cost discipline + ad business ist die echte Story. Stop FTC, watch margins."',
              unread: true, isLike: true },
          ].map((n, i) => (
            <div key={i} style={{
              padding: '12px 14px', borderRadius: 12,
              background: n.unread ? t.surface : 'transparent',
              border: n.unread ? `0.5px solid ${t.border}` : 'none',
              display: 'flex', gap: 10, alignItems: 'flex-start',
            }}>
              <div style={{ position: 'relative', flexShrink: 0 }}>
                <Avatar name={n.name} size={32} />
                {n.unread && (
                  <div style={{
                    position: 'absolute', top: -2, right: -2,
                    width: 9, height: 9, borderRadius: 5, background: t.accent,
                    border: `1.5px solid ${t.bg}`,
                  }} />
                )}
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 12.5, color: t.text, letterSpacing: '-0.005em', marginBottom: 3 }}>
                  <span style={{ fontWeight: 700 }}>{n.name}</span>{' '}
                  <span style={{ color: t.textMuted, fontWeight: 500 }}>{n.verb}{' '}
                    <span style={{ color: t.text, fontWeight: 600 }}>{n.target}</span></span>
                </div>
                <div style={{ fontSize: 12, color: t.textMuted, lineHeight: 1.4,
                  display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical',
                  overflow: 'hidden', letterSpacing: '-0.005em' }}>
                  {n.preview}
                </div>
              </div>
              <span style={{ fontFamily: SW_MONO, fontSize: 10.5, color: t.textDim, flexShrink: 0, paddingTop: 2 }}>
                {n.when}
              </span>
            </div>
          ))}
        </div>

        {/* Heutige Top & Flops */}
        <SectionH t={t} label="Heute · Top & Flops aus deinen Einschätzungen" />
        <div style={{ padding: '0 16px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          {/* Tops */}
          <Card t={t} pad={0} radius={12} style={{ overflow: 'hidden' }}>
            <div style={{ padding: '8px 10px', background: t.upSoft, color: t.up,
              fontSize: 10, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
              ↑ Top
            </div>
            {[
              { sym: 'NVDA', chg: '+3.2%' },
              { sym: 'GOOGL', chg: '+1.4%' },
              { sym: 'MSFT', chg: '+0.6%' },
            ].map((r, i) => (
              <div key={r.sym} style={{
                padding: '8px 10px', display: 'flex', alignItems: 'center', gap: 8,
                borderTop: i > 0 ? `0.5px solid ${t.border}` : 'none',
              }}>
                <Ticker symbol={r.sym} size={20} />
                <span style={{ fontSize: 11.5, fontWeight: 600, letterSpacing: '-0.005em' }}>{r.sym}</span>
                <span style={{ marginLeft: 'auto', fontFamily: SW_MONO, fontSize: 11.5, color: t.up, fontWeight: 700 }}>
                  {r.chg}
                </span>
              </div>
            ))}
          </Card>
          {/* Flops */}
          <Card t={t} pad={0} radius={12} style={{ overflow: 'hidden' }}>
            <div style={{ padding: '8px 10px', background: t.downSoft, color: t.down,
              fontSize: 10, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
              ↓ Flop
            </div>
            {[
              { sym: 'AMZN', chg: '−1.5%' },
              { sym: 'AAPL', chg: '−0.8%' },
              { sym: 'PFI', chg: '−2.1%' },
            ].map((r, i) => (
              <div key={r.sym} style={{
                padding: '8px 10px', display: 'flex', alignItems: 'center', gap: 8,
                borderTop: i > 0 ? `0.5px solid ${t.border}` : 'none',
              }}>
                <Ticker symbol={r.sym} size={20} />
                <span style={{ fontSize: 11.5, fontWeight: 600, letterSpacing: '-0.005em' }}>{r.sym}</span>
                <span style={{ marginLeft: 'auto', fontFamily: SW_MONO, fontSize: 11.5, color: t.down, fontWeight: 700 }}>
                  {r.chg}
                </span>
              </div>
            ))}
          </Card>
        </div>

        {/* Auszeichnungen */}
        <SectionH t={t} label="Auszeichnungen" cta="Alle 24" />
        <div style={{ padding: '0 16px', display: 'flex', gap: 10, overflowX: 'auto' }}>
          {[
            { name: 'Streak 7', icon: '🔥', got: true, sub: 'Wochen' },
            { name: 'Top 25%', icon: '🥇', got: true, sub: 'Trefferrate' },
            { name: 'First Buy', icon: '✨', got: true, sub: 'Erste Einschätzung' },
            { name: 'Predictor', icon: '🏆', got: false, sub: 'Bronze · 5× >30%' },
            { name: 'Bewerter', icon: '⚖️', got: false, sub: '100 Pro/Kontra' },
          ].map(b => (
            <div key={b.name} style={{
              minWidth: 100, padding: '14px 10px', borderRadius: 12,
              background: t.surface, border: `0.5px solid ${t.border}`,
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
              opacity: b.got ? 1 : 0.45,
            }}>
              <span style={{ fontSize: 28 }}>{b.icon}</span>
              <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: '-0.005em', textAlign: 'center' }}>{b.name}</span>
              <span style={{ fontSize: 9.5, color: t.textDim, textAlign: 'center', letterSpacing: '0.02em' }}>{b.sub}</span>
            </div>
          ))}
        </div>

        {/* Menu list */}
        <SectionH t={t} label="Bereiche" />
        <div style={{ padding: '0 16px' }}>
          <Card t={t} pad={0} radius={14} style={{ overflow: 'hidden' }}>
            {[
              { label: 'Einschätzungen', meta: '58', icon: Icon.trending },
              { label: 'Bewertungen', meta: '24', icon: Icon.users },
              { label: 'Kommentare', meta: '146', icon: Icon.message },
              { label: 'Watchlisten', meta: '3', icon: Icon.bookmark },
              { label: 'Musterdepots', meta: '1', icon: Icon.briefcase },
              { label: 'Börsenspiele', meta: '8 aktiv', icon: Icon.award },
              { label: 'Einstellungen', icon: Icon.more },
            ].map((row, i) => (
              <div key={row.label} style={{
                display: 'flex', alignItems: 'center', gap: 12,
                padding: '14px 14px',
                borderTop: i > 0 ? `0.5px solid ${t.border}` : 'none',
              }}>
                <div style={{
                  width: 30, height: 30, borderRadius: 8, background: t.chip,
                  display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                }}>
                  {row.icon(t.text, 16)}
                </div>
                <span style={{ flex: 1, fontSize: 13.5, fontWeight: 500, letterSpacing: '-0.005em' }}>
                  {row.label}
                </span>
                {row.meta && <span style={{ fontFamily: SW_MONO, fontSize: 11.5, color: t.textDim }}>{row.meta}</span>}
                {Icon.chevR(t.textDim, 14)}
              </div>
            ))}
          </Card>
        </div>
      </div>

      <BottomTabs t={t} active="profile" userInitial="St" userColor={t.accent} />
    </div>
  );
}

function SectionH({ t, label, cta, badge }) {
  return (
    <div style={{ padding: '20px 16px 10px', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
        <span style={{ fontSize: 13.5, fontWeight: 700, letterSpacing: '-0.01em' }}>{label}</span>
        {badge != null && (
          <span style={{
            padding: '2px 6px', borderRadius: 6, background: t.accent, color: '#fff',
            fontSize: 10, fontWeight: 700, fontFamily: SW_MONO,
          }}>{badge}</span>
        )}
      </div>
      {cta && <span style={{ fontSize: 11.5, color: t.accent, fontWeight: 600 }}>{cta} →</span>}
    </div>
  );
}

Object.assign(window, { ProfileScreen });