// ProfileScreen — the screenshot-worthy "trophy". Avatar with gradient ring,
// Activity Dots tier + progress-to-next, four metric tiles, the Points card,
// recent Socials strip, interest chips, public toggle, sign out.
function ProfileScreen() {
  const { Avatar, ActivityDots, StatTile, PointsCard, CategoryChip, Switch, Button, IconButton } = window.PraigoDesignSystem_290071;
  const { useState } = React;
  const u = window.PRAIGO_DATA.USER;
  const [pub, setPub] = useState(true);

  return (
    <div style={{ padding: '8px 16px 24px' }}>
      {/* top bar */}
      <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 4 }}>
        <IconButton icon="ios_share" label="Share profile" variant="filled" />
        <IconButton icon="settings" label="Settings" />
      </div>

      {/* identity */}
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 8, marginTop: 4 }}>
        <Avatar src={u.avatar} name={u.name} size={88} ring />
        <div style={{ fontSize: 24, fontWeight: 800, letterSpacing: '-.02em' }}>{u.name}</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <ActivityDots tier={u.tier} size={15} />
          <span style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-secondary)' }}>Tier {u.tier} · {u.tierName}</span>
        </div>
        {/* progress to next tier */}
        <div style={{ width: '100%', maxWidth: 260, marginTop: 4 }}>
          <div style={{ height: 8, borderRadius: 999, background: 'var(--surface-sunken)', overflow: 'hidden' }}>
            <div style={{ width: '78%', height: '100%', background: 'var(--grad-glow)' }} />
          </div>
          <div style={{ fontSize: 12, color: 'var(--text-secondary)', marginTop: 6 }}>{u.toNext}</div>
        </div>
      </div>

      {/* four metrics */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8, marginTop: 20 }}>
        <StatTile value={u.hosted} label="Hosted" />
        <StatTile value={u.attended} label="Attended" />
        <StatTile value={u.bonds} label="Bonds" accent="var(--bonds)" />
        <StatTile value={u.interests} label="Interests" />
      </div>

      {/* points */}
      <div style={{ marginTop: 14 }}>
        <PointsCard points={u.points} toNext="Redeem at partnered cafés — soon" />
      </div>

      {/* recent socials */}
      <div style={{ marginTop: 20 }}>
        <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-secondary)', marginBottom: 10 }}>Recent Socials</div>
        <div style={{ display: 'flex', gap: 10, overflowX: 'auto', paddingBottom: 4 }}>
          {u.recent.map((src, i) => (
            <div key={i} style={{ width: 92, height: 110, borderRadius: 14, background: `center/cover url(${src})`, flex: '0 0 auto', boxShadow: 'var(--shadow-sm)' }} />
          ))}
        </div>
      </div>

      {/* interests */}
      <div style={{ marginTop: 20 }}>
        <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-secondary)', marginBottom: 10 }}>Interests</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
          {u.interestSlugs.map(slug => <CategoryChip key={slug} slug={slug} selected />)}
        </div>
      </div>

      {/* privacy + sign out */}
      <div style={{ marginTop: 22, display: 'flex', flexDirection: 'column', gap: 6 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 16px', background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--radius-card)' }}>
          <div>
            <div style={{ fontSize: 15, fontWeight: 700 }}>Public profile</div>
            <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>Let others see your card to share it</div>
          </div>
          <Switch checked={pub} onChange={setPub} />
        </div>
        <Button variant="danger" fullWidth leadingIcon="logout">Sign out</Button>
      </div>
    </div>
  );
}

Object.assign(window, { ProfileScreen });