const { useState } = React;

const PLAYER = {
  name: 'HiqueG',
  level: 1,
  faction: '—',
  rank: 'Novato',
  avatar: null,
  kills: 0,
  deaths: 0,
  hours: 0,
  kd: '0.0',
  joined: 'Abr 2026',
  status: 'online',
};

const ACHIEVEMENTS = [
  { id: 1, icon: '🩸', title: 'Primeiro Sangue',   desc: 'Eliminou 100 zumbis',         unlocked: false },
  { id: 2, icon: '🎯', title: 'Atirador de Elite', desc: 'K/D acima de 10',             unlocked: false },
  { id: 3, icon: '🏅', title: 'Fundador',          desc: 'Jogou no lançamento',         unlocked: false },
  { id: 4, icon: '💰', title: 'Comerciante',       desc: '50 transações no mercado',    unlocked: false },
  { id: 5, icon: '🗺', title: 'Explorador',        desc: 'Visitou todas as zonas',      unlocked: false },
  { id: 6, icon: '👑', title: 'VIP Ouro',          desc: 'Status VIP Ouro ativo',       unlocked: false },
];

const RARITY_COLORS = {
  comum: '#9ca3af',
  raro: '#3b82f6',
  épico: '#a855f7',
  lendário: '#a8ff00',
};

function ProfilePage({ onNavigate }) {
  const [activeTab, setActiveTab] = useState('stats');

  const statCard = (label, value, accent = false) => (
    <div key={label} style={{
      background: '#2a2a2a', borderLeft: `3px solid ${accent ? '#a8ff00' : 'rgba(255,255,255,0.1)'}`,
      padding: '18px 20px',
    }}>
      <div style={{ fontFamily: 'Share Tech Mono', fontSize: 'clamp(20px,2.5vw,32px)', color: accent ? '#a8ff00' : '#fff', marginBottom: 4 }}>{value}</div>
      <div style={{ fontFamily: 'Rajdhani', fontWeight: 600, fontSize: 11, letterSpacing: '0.12em', color: 'rgba(255,255,255,0.4)', textTransform: 'uppercase' }}>{label}</div>
    </div>
  );

  return (
    <div style={{ minHeight: '100vh', padding: '100px 5vw 60px' }}>
      <div style={{ maxWidth: 1000, margin: '0 auto' }}>

        {/* HEADER */}
        <div style={{ display: 'flex', gap: 32, alignItems: 'flex-start', marginBottom: 40, flexWrap: 'wrap' }}>
          <div style={{ position: 'relative', flexShrink: 0 }}>
            <div style={{
              width: 110, height: 110, background: '#2a2a2a',
              border: '2px solid rgba(168,255,0,0.4)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 48, position: 'relative',
            }}>
              🧟
              <div style={{
                position: 'absolute', bottom: -1, right: -1,
                width: 16, height: 16, borderRadius: '50%',
                background: PLAYER.status === 'online' ? '#a8ff00' : '#555',
                border: '2px solid #222', boxShadow: PLAYER.status === 'online' ? '0 0 8px #a8ff00' : 'none',
              }} />
            </div>
          </div>

          <div style={{ flex: 1, minWidth: 220 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap', marginBottom: 8 }}>
              <h1 style={{ fontFamily: 'Rajdhani', fontWeight: 700, fontSize: 'clamp(24px,4vw,42px)', lineHeight: 1, textTransform: 'uppercase' }}>
                {PLAYER.name}
              </h1>
              <span style={{
                background: 'rgba(168,255,0,0.12)', border: '1px solid rgba(168,255,0,0.4)',
                color: '#a8ff00', fontFamily: 'Share Tech Mono', fontSize: 11,
                padding: '3px 10px', letterSpacing: '0.1em',
              }}>LVL {PLAYER.level}</span>
            </div>
            <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap', marginBottom: 12 }}>
              <span style={{ fontFamily: 'Rajdhani', fontWeight: 600, fontSize: 14, color: 'rgba(255,255,255,0.5)' }}>
                Facção: <span style={{ color: '#a8ff00' }}>{PLAYER.faction}</span>
              </span>
              <span style={{ fontFamily: 'Rajdhani', fontWeight: 600, fontSize: 14, color: 'rgba(255,255,255,0.5)' }}>
                Rank: <span style={{ color: '#fff' }}>{PLAYER.rank}</span>
              </span>
              <span style={{ fontFamily: 'Rajdhani', fontWeight: 600, fontSize: 14, color: 'rgba(255,255,255,0.5)' }}>
                Desde: <span style={{ color: '#fff' }}>{PLAYER.joined}</span>
              </span>
            </div>
            <div style={{ display: 'flex', gap: 10 }}>
              <button onClick={() => onNavigate('store')} style={{
                background: '#a8ff00', color: '#111', fontFamily: 'Rajdhani', fontWeight: 700,
                fontSize: 12, letterSpacing: '0.1em', padding: '9px 20px', border: 'none',
                cursor: 'pointer', textTransform: 'uppercase',
                clipPath: 'polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px))',
              }}>IR À LOJA</button>
              <button style={{
                background: 'transparent', color: 'rgba(255,255,255,0.5)', fontFamily: 'Rajdhani', fontWeight: 700,
                fontSize: 12, letterSpacing: '0.1em', padding: '9px 20px',
                border: '1px solid rgba(255,255,255,0.15)', cursor: 'pointer', textTransform: 'uppercase',
              }}>EDITAR PERFIL</button>
            </div>
          </div>

          {/* VIP badge */}
          <div style={{
            background: 'linear-gradient(135deg, #1a1a1a, #252525)',
            border: '1px solid rgba(255,255,255,0.1)', padding: '16px 24px', textAlign: 'center',
          }}>
            <div style={{ fontFamily: 'Share Tech Mono', fontSize: 9, color: 'rgba(255,255,255,0.3)', letterSpacing: '0.15em', marginBottom: 6 }}>STATUS</div>
            <div style={{ fontFamily: 'Rajdhani', fontWeight: 700, fontSize: 20, color: 'rgba(255,255,255,0.4)' }}>SEM VIP</div>
            <div style={{ fontFamily: 'Share Tech Mono', fontSize: 9, color: 'rgba(255,255,255,0.2)', marginTop: 4 }}>
              <span style={{ cursor: 'pointer', color: 'rgba(168,255,0,0.6)' }} onClick={() => onNavigate('store')}>VER PLANOS →</span>
            </div>
          </div>
        </div>

        {/* TABS */}
        <div style={{ display: 'flex', borderBottom: '1px solid rgba(255,255,255,0.08)', marginBottom: 32 }}>
          {['stats', 'conquistas', 'doações'].map(t => (
            <button key={t} onClick={() => setActiveTab(t)} style={{
              background: 'none', border: 'none', padding: '12px 24px',
              fontFamily: 'Rajdhani', fontWeight: 700, fontSize: 13, letterSpacing: '0.1em',
              textTransform: 'uppercase', cursor: 'pointer',
              color: activeTab === t ? '#a8ff00' : 'rgba(255,255,255,0.35)',
              borderBottom: `2px solid ${activeTab === t ? '#a8ff00' : 'transparent'}`,
              marginBottom: -1, transition: 'color 0.2s',
            }}>{t}</button>
          ))}
        </div>

        {/* STATS TAB */}
        {activeTab === 'stats' && (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: 12 }}>
            {statCard('Kills', PLAYER.kills.toLocaleString('pt-BR'), true)}
            {statCard('Deaths', PLAYER.deaths.toLocaleString('pt-BR'))}
            {statCard('K/D Ratio', PLAYER.kd, true)}
            {statCard('Horas Jogadas', PLAYER.hours.toLocaleString('pt-BR') + 'h')}
            {statCard('Nível', PLAYER.level, true)}
            {statCard('Facção', PLAYER.faction)}
          </div>
        )}

        {/* CONQUISTAS TAB */}
        {activeTab === 'conquistas' && (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: 16 }}>
            {ACHIEVEMENTS.map(a => (
              <div key={a.id} style={{
                background: '#2a2a2a', padding: '20px',
                border: `1px solid ${a.unlocked ? 'rgba(168,255,0,0.3)' : 'rgba(255,255,255,0.05)'}`,
                opacity: a.unlocked ? 1 : 0.4,
              }}>
                <div style={{ fontSize: 28, marginBottom: 10 }}>{a.icon}</div>
                <div style={{ fontFamily: 'Rajdhani', fontWeight: 700, fontSize: 14, textTransform: 'uppercase', marginBottom: 6, color: a.unlocked ? '#fff' : 'rgba(255,255,255,0.5)' }}>{a.title}</div>
                <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.4)', lineHeight: 1.5 }}>{a.desc}</div>
                {a.unlocked && <div style={{ marginTop: 10, fontFamily: 'Share Tech Mono', fontSize: 9, color: '#a8ff00' }}>✓ DESBLOQUEADO</div>}
                {!a.unlocked && <div style={{ marginTop: 10, fontFamily: 'Share Tech Mono', fontSize: 9, color: 'rgba(255,255,255,0.2)' }}>BLOQUEADO</div>}
              </div>
            ))}
          </div>
        )}

        {/* DOAÇÕES TAB */}
        {activeTab === 'doações' && (
          <div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
              <div style={{ fontFamily: 'Rajdhani', fontWeight: 500, fontSize: 14, color: 'rgba(255,255,255,0.4)' }}>Nenhuma transação ainda</div>
              <button onClick={() => onNavigate('store')} style={{
                background: 'transparent', color: '#a8ff00', fontFamily: 'Rajdhani', fontWeight: 700,
                fontSize: 12, letterSpacing: '0.1em', padding: '8px 18px',
                border: '1px solid rgba(168,255,0,0.4)', cursor: 'pointer', textTransform: 'uppercase',
              }}>+ NOVA DOAÇÃO</button>
            </div>
            <div style={{ border: '1px solid rgba(255,255,255,0.06)', padding: '40px', textAlign: 'center' }}>
              <div style={{ fontFamily: 'Share Tech Mono', fontSize: 11, color: 'rgba(255,255,255,0.2)' }}>NENHUMA COMPRA REGISTRADA</div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { ProfilePage });