const { useState } = React;

const RARITY = {
  comum:    { label: 'COMUM',    color: '#9ca3af', bg: 'rgba(156,163,175,0.08)' },
  raro:     { label: 'RARO',     color: '#3b82f6', bg: 'rgba(59,130,246,0.08)'  },
  épico:    { label: 'ÉPICO',    color: '#a855f7', bg: 'rgba(168,85,247,0.08)'  },
  lendário: { label: 'LENDÁRIO', color: '#a8ff00', bg: 'rgba(168,255,0,0.08)'   },
};

const ITEMS = {
  vip: [
    { id: 1,  name: 'VIP Bronze',   desc: 'Acesso a zonas VIP, cor no chat, kit semanal.',         price: 19.90, rarity: 'comum'    },
    { id: 2,  name: 'VIP Prata',    desc: 'Bronze + veículo exclusivo + 500 créditos/mês.',         price: 39.90, rarity: 'raro'     },
    { id: 3,  name: 'VIP Ouro',     desc: 'Prata + slot prioritário + kit mensal épico.',           price: 79.90, rarity: 'épico'    },
    { id: 4,  name: 'VIP Diamante', desc: 'Tudo acima + acesso antecipado + suporte dedicado.',     price: 149.90,rarity: 'lendário' },
  ],
  veiculos: [
    { id: 5,  name: 'Pick-up Enferrujada', desc: 'Transporte básico para novos sobreviventes.',     price: 24.90, rarity: 'comum'    },
    { id: 6,  name: 'SUV Blindada',        desc: 'Alta durabilidade, comporta 4 passageiros.',      price: 59.90, rarity: 'raro'     },
    { id: 7,  name: 'Caminhão de Combate', desc: 'Cobertura traseira com suporte para torretas.',   price: 99.90, rarity: 'épico'    },
    { id: 8,  name: 'Helicóptero Apache',  desc: 'Mobilidade total. Domínio dos céus.',             price: 199.90,rarity: 'lendário' },
  ],
  creditos: [
    { id: 9,  name: '500 Créditos',   desc: 'Use no mercado player para comprar itens.',            price: 9.90,  rarity: 'comum'    },
    { id: 10, name: '1.500 Créditos', desc: 'Pacote intermediário com 10% de bônus.',               price: 24.90, rarity: 'raro'     },
    { id: 11, name: '5.000 Créditos', desc: 'Melhor custo-benefício. 20% de bônus incluído.',       price: 69.90, rarity: 'épico'    },
    { id: 12, name: '15.000 Créditos',desc: 'Para traders sérios. 35% de bônus + item surpresa.',   price: 169.90,rarity: 'lendário' },
  ],
  itens: [
    { id: 13, name: 'Kit de Sobrevivência', desc: 'Comida, água e curativo para 3 dias.',           price: 14.90, rarity: 'comum'    },
    { id: 14, name: 'Mochila Militar',      desc: 'Capacidade máxima de inventário. Durável.',      price: 29.90, rarity: 'raro'     },
    { id: 15, name: 'Armadura Tática',      desc: 'Reduz 40% de dano de bala. Alta resistência.',   price: 34.90, rarity: 'raro'     },
    { id: 16, name: 'Conjunto de Armas',    desc: 'Shotgun, pistola e rifle. Munição inclusa.',      price: 79.90, rarity: 'épico'    },
  ],
};

const TABS = [
  { key: 'vip',      label: 'VIP'       },
  { key: 'veiculos', label: 'Veículos'  },
  { key: 'creditos', label: 'Créditos'  },
  { key: 'itens',    label: 'Itens'     },
];

function StorePage() {
  const [activeTab, setActiveTab] = useState('vip');
  const [cart, setCart] = useState([]);
  const [purchased, setPurchased] = useState(null);
  const [showCart, setShowCart] = useState(false);

  const addToCart = (item) => {
    setCart(c => c.find(i => i.id === item.id) ? c : [...c, item]);
  };
  const removeFromCart = (id) => setCart(c => c.filter(i => i.id !== id));
  const total = cart.reduce((s, i) => s + i.price, 0);

  const checkout = () => {
    setPurchased(cart);
    setCart([]);
    setShowCart(false);
  };

  if (purchased) return (
    <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '5vw' }}>
      <div style={{ textAlign: 'center', maxWidth: 440 }}>
        <div style={{ fontSize: 52, color: '#a8ff00', fontFamily: 'Share Tech Mono', marginBottom: 16 }}>✓</div>
        <h2 style={{ fontFamily: 'Rajdhani', fontWeight: 700, fontSize: 32, textTransform: 'uppercase', marginBottom: 12 }}>Compra Aprovada</h2>
        <p style={{ color: 'rgba(255,255,255,0.5)', marginBottom: 8, fontSize: 14 }}>Pagamento processado via Mercado Pago.</p>
        <p style={{ color: 'rgba(255,255,255,0.4)', marginBottom: 32, fontSize: 13 }}>Seus itens serão entregues no servidor em até 5 minutos após você estar online.</p>
        <div style={{ border: '1px solid rgba(168,255,0,0.2)', padding: '20px', marginBottom: 32 }}>
          {purchased.map(i => (
            <div key={i.id} style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0', borderBottom: '1px solid rgba(255,255,255,0.05)', fontFamily: 'Rajdhani', fontSize: 14 }}>
              <span>{i.name}</span><span style={{ color: '#a8ff00', fontFamily: 'Share Tech Mono' }}>R$ {i.price.toFixed(2).replace('.', ',')}</span>
            </div>
          ))}
        </div>
        <button onClick={() => setPurchased(null)} style={{
          background: '#a8ff00', color: '#111', fontFamily: 'Rajdhani', fontWeight: 700,
          fontSize: 14, letterSpacing: '0.12em', padding: '14px 32px', border: 'none',
          cursor: 'pointer', textTransform: 'uppercase',
          clipPath: 'polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px))',
        }}>CONTINUAR COMPRANDO</button>
      </div>
    </div>
  );

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

        {/* Header */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 40, flexWrap: 'wrap', gap: 16 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
              <div style={{ width: 24, height: 2, background: '#a8ff00' }} />
              <span style={{ fontFamily: 'Share Tech Mono', fontSize: 11, color: '#a8ff00', letterSpacing: '0.18em' }}>LOJA OFICIAL</span>
            </div>
            <h1 style={{ fontFamily: 'Rajdhani', fontWeight: 700, fontSize: 'clamp(28px,4vw,52px)', textTransform: 'uppercase', lineHeight: 1 }}>
              DOAÇÕES &<br /><span style={{ color: '#a8ff00' }}>ITENS ESPECIAIS</span>
            </h1>
          </div>
          {/* Cart button */}
          <button onClick={() => setShowCart(s => !s)} style={{
            position: 'relative', background: cart.length ? 'rgba(168,255,0,0.1)' : '#2a2a2a',
            border: `1px solid ${cart.length ? 'rgba(168,255,0,0.5)' : 'rgba(255,255,255,0.1)'}`,
            color: '#fff', fontFamily: 'Rajdhani', fontWeight: 700, fontSize: 14,
            padding: '12px 24px', cursor: 'pointer', letterSpacing: '0.1em',
            display: 'flex', alignItems: 'center', gap: 10, transition: 'all 0.2s',
          }}>
            <span>🛒</span> CARRINHO
            {cart.length > 0 && (
              <span style={{
                background: '#a8ff00', color: '#111', borderRadius: '50%',
                width: 20, height: 20, display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'Share Tech Mono', fontSize: 11, fontWeight: 700,
              }}>{cart.length}</span>
            )}
          </button>
        </div>

        {/* Mercado Pago badge */}
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, background: '#2a2a2a', border: '1px solid rgba(255,255,255,0.08)', padding: '8px 16px', marginBottom: 32 }}>
          <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#00b1ea' }} />
          <span style={{ fontFamily: 'Rajdhani', fontWeight: 600, fontSize: 13, color: 'rgba(255,255,255,0.6)' }}>Pagamentos via</span>
          <span style={{ fontFamily: 'Rajdhani', fontWeight: 700, fontSize: 13, color: '#fff' }}>Mercado Pago</span>
          <span style={{ fontFamily: 'Share Tech Mono', fontSize: 10, color: 'rgba(255,255,255,0.3)' }}>• PIX • CARTÃO • BOLETO</span>
        </div>

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

        {/* Item grid */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 16 }}>
          {ITEMS[activeTab].map(item => {
            const r = RARITY[item.rarity];
            const inCart = cart.find(i => i.id === item.id);
            return (
              <div key={item.id} style={{
                background: '#2a2a2a', borderTop: `3px solid ${r.color}`,
                padding: '24px 20px', position: 'relative',
                transition: 'transform 0.2s, box-shadow 0.2s',
              }}
                onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = `0 8px 30px ${r.color}22`; }}
                onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'none'; }}
              >
                <div style={{
                  position: 'absolute', top: 14, right: 14,
                  background: r.bg, border: `1px solid ${r.color}44`,
                  color: r.color, fontFamily: 'Share Tech Mono', fontSize: 9,
                  padding: '3px 8px', letterSpacing: '0.12em',
                }}>{r.label}</div>

                <div style={{ fontFamily: 'Rajdhani', fontWeight: 700, fontSize: 18, textTransform: 'uppercase', marginBottom: 10, paddingRight: 60 }}>{item.name}</div>
                <p style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', lineHeight: 1.6, marginBottom: 20, minHeight: 40 }}>{item.desc}</p>

                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <div style={{ fontFamily: 'Share Tech Mono', fontSize: 20, color: '#a8ff00' }}>
                    R$ {item.price.toFixed(2).replace('.', ',')}
                  </div>
                  <button onClick={() => addToCart(item)} style={{
                    background: inCart ? 'rgba(168,255,0,0.15)' : '#a8ff00',
                    color: inCart ? '#a8ff00' : '#111',
                    fontFamily: 'Rajdhani', fontWeight: 700, fontSize: 11,
                    letterSpacing: '0.1em', padding: '9px 16px', border: inCart ? '1px solid rgba(168,255,0,0.4)' : 'none',
                    cursor: 'pointer', textTransform: 'uppercase', transition: 'all 0.2s',
                    clipPath: inCart ? 'none' : 'polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px))',
                  }}>
                    {inCart ? '✓ ADICIONADO' : 'COMPRAR'}
                  </button>
                </div>
              </div>
            );
          })}
        </div>

        {/* Cart panel */}
        {showCart && (
          <div style={{
            position: 'fixed', right: 0, top: 0, bottom: 0, width: 'min(380px, 100vw)',
            background: '#1e1e1e', borderLeft: '1px solid rgba(168,255,0,0.2)',
            zIndex: 200, display: 'flex', flexDirection: 'column', overflowY: 'auto',
          }}>
            <div style={{ padding: '24px 24px 16px', borderBottom: '1px solid rgba(255,255,255,0.08)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div style={{ fontFamily: 'Rajdhani', fontWeight: 700, fontSize: 18, textTransform: 'uppercase', letterSpacing: '0.1em' }}>Carrinho</div>
              <button onClick={() => setShowCart(false)} style={{ background: 'none', border: 'none', color: 'rgba(255,255,255,0.4)', fontSize: 20, cursor: 'pointer' }}>✕</button>
            </div>

            <div style={{ flex: 1, padding: '16px 24px' }}>
              {cart.length === 0 ? (
                <div style={{ textAlign: 'center', color: 'rgba(255,255,255,0.25)', fontFamily: 'Rajdhani', fontSize: 14, marginTop: 40 }}>Carrinho vazio</div>
              ) : cart.map(item => (
                <div key={item.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '14px 0', borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
                  <div>
                    <div style={{ fontFamily: 'Rajdhani', fontWeight: 600, fontSize: 14, marginBottom: 2 }}>{item.name}</div>
                    <div style={{ fontFamily: 'Share Tech Mono', fontSize: 13, color: '#a8ff00' }}>R$ {item.price.toFixed(2).replace('.', ',')}</div>
                  </div>
                  <button onClick={() => removeFromCart(item.id)} style={{ background: 'none', border: 'none', color: 'rgba(255,255,255,0.3)', cursor: 'pointer', fontSize: 14 }}>✕</button>
                </div>
              ))}
            </div>

            {cart.length > 0 && (
              <div style={{ padding: '20px 24px', borderTop: '1px solid rgba(255,255,255,0.08)' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 20 }}>
                  <span style={{ fontFamily: 'Rajdhani', fontWeight: 600, fontSize: 16 }}>Total</span>
                  <span style={{ fontFamily: 'Share Tech Mono', fontSize: 20, color: '#a8ff00' }}>R$ {total.toFixed(2).replace('.', ',')}</span>
                </div>
                <button onClick={checkout} style={{
                  width: '100%', background: '#a8ff00', color: '#111', fontFamily: 'Rajdhani', fontWeight: 700,
                  fontSize: 14, letterSpacing: '0.12em', padding: '15px', border: 'none',
                  cursor: 'pointer', textTransform: 'uppercase',
                  clipPath: 'polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px))',
                }}>FINALIZAR COMPRA</button>
                <div style={{ textAlign: 'center', marginTop: 12, fontFamily: 'Share Tech Mono', fontSize: 10, color: 'rgba(255,255,255,0.25)' }}>
                  Pagamento seguro via Mercado Pago
                </div>
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { StorePage });