// Pummel Tale — Doação page (R$ 1 = 10 Pummel Coins)
const { useState: useStateDN, useEffect: useEffectDN, useRef: useRefDN } = React;

const COINS_PER_REAL = 10;
const QUICK_AMOUNTS = [5, 10, 25, 50, 100, 250, 500];
const MIN_AMOUNT = 5;
const MAX_AMOUNT = 2000;

const PAY_METHODS = [
  { id: "pix",    name: "PIX",    fee: "Sem taxa",  feeRate: 0,    icon: "Pix" },
  { id: "card",   name: "Cartão", fee: "+2% taxa",  feeRate: 0.02, icon: "Card" },
  { id: "paypal", name: "PayPal", fee: "+4% taxa",  feeRate: 0.04, icon: "Globe" },
];

function RegHeader() {
  const [menuOpen, setMenuOpen] = useStateDN(false);
  const [authUser, setAuthUser] = useStateDN(null);
  const apiBaseUrl = window.location.protocol === "file:" || ["localhost", "127.0.0.1"].includes(window.location.hostname)
    ? "http://127.0.0.1:3001"
    : "";
  const nav = [
    { id: "home", label: "Início", href: "index.html" },
    { id: "download", label: "Download", href: "index.html#download" },
    { id: "ranking", label: "Ranking", href: "index.html#ranking" },
    { id: "mix", label: "Sistema Mix", href: "index.html#mix" },
    { id: "news", label: "Notícias", href: "index.html#news" },
    { id: "register", label: "Cadastro", href: "cadastro.html" },
    { id: "donate", label: "Doação", href: "doacao.html", active: true },
  ];
  useEffectDN(() => {
    let active = true;

    async function loadAuthUser() {
      try {
        const response = await fetch(`${apiBaseUrl}/api/auth/me`, {
          credentials: "include",
          headers: { "Accept": "application/json" },
        });
        const data = await response.json().catch(() => ({}));
        if (active && response.ok && data.ok) setAuthUser(data.user);
      } catch (_) {}
    }

    loadAuthUser();
    return () => { active = false; };
  }, [apiBaseUrl]);

  return (
    <React.Fragment>
    <header className="header">
      <a href="index.html" className="brand">
        <BrandMark/>
        <div>
          <div className="brand-name">Pummel Tale</div>
          <span className="brand-tag">Season III · Awaken</span>
        </div>
      </a>
      <nav className="nav">
        {nav.map(n => (
          <a key={n.id} href={n.href} className={n.active ? "active" : ""}>{n.label}</a>
        ))}
      </nav>
      <div className="header-spacer"></div>
      <div className="header-actions">
        <a className="discord-btn" href="#discord" onClick={(e)=>e.preventDefault()}>
          <Icons.Discord size={14}/>
          <span>Discord</span>
        </a>
        {authUser
          ? <a className="login-btn" href="painel.html">Painel</a>
          : <a className="login-btn" href="#" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new Event("open-login")); }}>Entrar</a>}
        <button className="menu-btn" aria-label="Menu" onClick={() => setMenuOpen(o => !o)}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
            {menuOpen ? <path d="M6 6l12 12M18 6l-12 12"/> : <path d="M4 7h16M4 12h16M4 17h16"/>}
          </svg>
        </button>
      </div>
    </header>
    <div className={`mobile-nav ${menuOpen ? "open" : ""}`}>
      {nav.map(n => (
        <a key={n.id} href={n.href} className={n.active ? "active" : ""} onClick={() => setMenuOpen(false)}>{n.label}</a>
      ))}
      {authUser
        ? <a href="painel.html" onClick={() => setMenuOpen(false)}>Painel</a>
        : <a href="#" onClick={(e) => { e.preventDefault(); setMenuOpen(false); window.dispatchEvent(new Event("open-login")); }}>Entrar</a>}
    </div>
    </React.Fragment>
  );
}

function PixPreview({ amount }) {
  const code = `00020126580014BR.GOV.BCB.PIX0136pummeltale@server.gg5204000053039865802BR59POMMEL6009RICARTEN62${String(Math.round(amount * 100)).padStart(4, "0")}6304ABCD`;
  const [copied, setCopied] = useStateDN(false);
  return (
    <div className="pix-preview">
      <div className="pix-qr"><span></span></div>
      <div className="pix-info">
        <div className="pix-label">Chave Pix · Copia e Cola</div>
        <div className="pix-code">{code.slice(0, 72)}…</div>
        <button onClick={() => { navigator.clipboard?.writeText(code); setCopied(true); setTimeout(() => setCopied(false), 2000); }}>
          {copied ? "Copiado!" : "Copiar Código"}
        </button>
      </div>
    </div>
  );
}

function DonateApp() {
  const [amount, setAmount] = useStateDN(50);
  const [character, setCharacter] = useStateDN("");
  const [payment, setPayment] = useStateDN("pix");
  const [touched, setTouched] = useStateDN(false);
  const [success, setSuccess] = useStateDN(null);
  const [submitting, setSubmitting] = useStateDN(false);
  const canvasRef = useRefDN(null);

  const coins = Math.floor(amount * COINS_PER_REAL);
  const method = PAY_METHODS.find(p => p.id === payment);
  const fee = amount * method.feeRate;
  const total = amount + fee;

  // Glow tier based on amount (just for visuals)
  const tier = amount >= 500 ? "mitico"
             : amount >= 250 ? "lendario"
             : amount >= 100 ? "cavaleiro"
             : amount >= 25  ? "soldado"
             : "recruta";

  const tierLabel =
    tier === "mitico"    ? { name: "Mítico",    color: "#ff4a5a", glow: "rgba(255,74,90,0.40)" } :
    tier === "lendario"  ? { name: "Lendário",  color: "#c772ff", glow: "rgba(199,114,255,0.40)" } :
    tier === "cavaleiro" ? { name: "Cavaleiro", color: "#f0c97a", glow: "rgba(240,201,122,0.40)" } :
    tier === "soldado"   ? { name: "Soldado",   color: "#6aa6ff", glow: "rgba(106,166,255,0.35)" } :
                           { name: "Recruta",   color: "#b0b7c0", glow: "rgba(176,183,192,0.25)" };

  const charError = touched && (!character || character.length < 4)
    ? "Personagem inválido (mín 4 caracteres)"
    : touched && !/^[A-Za-z0-9_]+$/.test(character)
    ? "Apenas letras, números e _"
    : null;

  const canSubmit = character.length >= 4 && /^[A-Za-z0-9_]+$/.test(character) && amount >= MIN_AMOUNT && !submitting;

  function onSubmit(e) {
    e.preventDefault();
    setTouched(true);
    if (!canSubmit) return;
    setSubmitting(true);
    setTimeout(() => {
      setSubmitting(false);
      setSuccess({ character, amount: total, coins, payment: method.name, tier: tierLabel.name });
    }, 1400);
  }

  // particles
  useEffectDN(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    let raf, w, h;
    const dpr = Math.min(window.devicePixelRatio || 1, 2);
    function resize() {
      w = window.innerWidth; h = window.innerHeight;
      canvas.width = w * dpr; canvas.height = h * dpr;
      canvas.style.width = w + "px"; canvas.style.height = h + "px";
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    }
    resize();
    window.addEventListener("resize", resize);
    const ps = Array.from({ length: 55 }, () => ({
      x: Math.random()*w, y: Math.random()*h,
      r: Math.random()*1.6+0.4,
      vx: (Math.random()-0.5)*0.12,
      vy: -(Math.random()*0.22+0.05),
      a: Math.random()*0.7+0.3,
      c: Math.random() > 0.75 ? "rgba(214,58,63,0.35)" : "rgba(200,153,90,0.45)",
      drift: Math.random()*Math.PI*2,
    }));
    function frame(t) {
      ctx.clearRect(0,0,w,h);
      for (const p of ps) {
        p.x += p.vx + Math.sin((t*0.0005) + p.drift)*0.08;
        p.y += p.vy;
        if (p.y < -10) { p.y = h+10; p.x = Math.random()*w; }
        if (p.x < -10) p.x = w+10;
        if (p.x > w+10) p.x = -10;
        ctx.beginPath();
        ctx.fillStyle = p.c.replace(/[\d.]+\)$/, `${p.a})`);
        ctx.shadowBlur = 8; ctx.shadowColor = p.c;
        ctx.arc(p.x, p.y, p.r, 0, Math.PI*2);
        ctx.fill();
      }
      ctx.shadowBlur = 0;
      raf = requestAnimationFrame(frame);
    }
    raf = requestAnimationFrame(frame);
    return () => { cancelAnimationFrame(raf); window.removeEventListener("resize", resize); };
  }, []);

  const cssVars = { "--tier-color": tierLabel.color, "--tier-glow": tierLabel.glow };

  if (success) {
    return (
      <div className="app">
        <RegHeader/>
        <div className="donate-wrap" style={cssVars}>
          <div className="order-card" style={{maxWidth:"560px", margin:"60px auto"}}>
            <div className="fc-corner tl"></div>
            <div className="fc-corner tr"></div>
            <div className="fc-corner bl"></div>
            <div className="fc-corner br"></div>
            <div className="donate-success">
              <div className="donate-success-icon"><Icons.Check size={40}/></div>
              <h2>Doação Confirmada</h2>
              <p>Obrigado, <b style={{color:"var(--gold-bright)"}}>{success.character}</b>! Seus <b style={{color:"var(--gold-bright)"}}>{success.coins.toLocaleString("pt-BR")} Pummel Coins</b> serão creditados em até 5 minutos.</p>
              <div className="order-meta">
                <span className="lbl">Personagem</span><span className="val">{success.character}</span>
                <span className="lbl">Coins</span><span className="val">{success.coins.toLocaleString("pt-BR")}</span>
                <span className="lbl">Valor</span><span className="val">R$ {success.amount.toFixed(2).replace(".",",")}</span>
                <span className="lbl">Método</span><span className="val">{success.payment}</span>
                <span className="lbl">Pedido</span><span className="val">#{Math.floor(Math.random()*900000+100000)}</span>
              </div>
              <a className="btn btn-ghost" href="index.html" style={{padding:"12px 22px", fontSize:"11px"}}>
                <Icons.Arrow size={14} style={{transform:"rotate(180deg)"}}/>
                Voltar ao Reino
              </a>
            </div>
          </div>
        </div>
        <canvas id="particles" ref={canvasRef}></canvas>
      </div>
    );
  }

  return (
    <div className="app">
      <RegHeader/>

      <div className="donate-wrap" style={cssVars}>
        <div className="donate-head">
          <div className="eyebrow-line">
            <span className="line"></span>
            <Icons.Diamond size={12}/>
            <span className="line"></span>
          </div>
          <div className="eyebrow">apoie o reino</div>
          <h1>Pummel Coins</h1>
          <p className="subtitle">Mantenha o servidor vivo. Sem pay-to-win — apenas cosméticos, conveniência e gratidão. <b style={{color:"var(--gold-bright)"}}>R$ 1 = 10 Pummel Coins</b>.</p>
        </div>

        <div className="why-strip">
          <div className="why-cell">
            <div className="why-icon"><Icons.Shield/></div>
            <div className="why-text">
              <strong>Sem Pay-to-Win</strong>
              <span>Apenas cosméticos, XP boost e conveniência. Nada que quebre o balanceamento PvP.</span>
            </div>
          </div>
          <div className="why-cell">
            <div className="why-icon"><Icons.Bolt/></div>
            <div className="why-text">
              <strong>Servidor 24/7</strong>
              <span>VPS dedicada, anti-DDoS e backups diários. Sua doação mantém tudo no ar.</span>
            </div>
          </div>
          <div className="why-cell">
            <div className="why-icon"><Icons.Calendar/></div>
            <div className="why-text">
              <strong>Eventos Constantes</strong>
              <span>Prêmios, GMs ativos e novos sistemas custam tempo e dinheiro real.</span>
            </div>
          </div>
          <div className="why-cell">
            <div className="why-icon"><Icons.Heart/></div>
            <div className="why-text">
              <strong>Projeto Sem Lucro</strong>
              <span>Mantido pela comunidade, para a comunidade. Sem CEOs, sem investidores.</span>
            </div>
          </div>
        </div>

        <form className="order-grid" onSubmit={onSubmit}>
          <div className="order-card">
            <div className="fc-corner tl"></div>
            <div className="fc-corner tr"></div>
            <div className="fc-corner bl"></div>
            <div className="fc-corner br"></div>

            {/* Amount picker */}
            <div className="form-eyebrow">// selecione o valor</div>
            <h2>Quantos Coins?</h2>

            <div className="amount-display">
              <div className="amount-side">
                <div className="amount-lbl">Doar</div>
                <div className="amount-val">
                  <span className="amount-currency">R$</span>
                  <input
                    className="amount-input"
                    type="number"
                    min={MIN_AMOUNT}
                    max={MAX_AMOUNT}
                    step="1"
                    value={amount}
                    onChange={(e) => {
                      const v = Math.max(MIN_AMOUNT, Math.min(MAX_AMOUNT, Number(e.target.value) || MIN_AMOUNT));
                      setAmount(v);
                    }}
                  />
                </div>
              </div>
              <div className="amount-equals">
                <Icons.Arrow/>
              </div>
              <div className="amount-side coins">
                <div className="amount-lbl">Receber</div>
                <div className="amount-val coins-val">
                  <Icons.Coin size={22}/>
                  <span>{coins.toLocaleString("pt-BR")}</span>
                  <span className="coins-suffix">coins</span>
                </div>
              </div>
            </div>

            <div className="amount-slider-wrap">
              <input
                className="amount-slider"
                type="range"
                min={MIN_AMOUNT}
                max={MAX_AMOUNT}
                step="5"
                value={amount}
                onChange={(e) => setAmount(Number(e.target.value))}
              />
              <div className="amount-slider-marks">
                <span>R$ {MIN_AMOUNT}</span>
                <span>R$ {MAX_AMOUNT}</span>
              </div>
            </div>

            <div className="quick-amounts">
              {QUICK_AMOUNTS.map(a => (
                <button
                  key={a}
                  type="button"
                  className={`quick-amount ${amount === a ? "active" : ""}`}
                  onClick={() => setAmount(a)}
                >
                  <span className="qa-amount">R$ {a}</span>
                  <span className="qa-coins">{(a * COINS_PER_REAL).toLocaleString("pt-BR")} coins</span>
                </button>
              ))}
            </div>

            {/* Character */}
            <div className="form-eyebrow" style={{marginTop:"30px"}}>// dados do pedido</div>
            <h2 style={{fontSize:"18px"}}>Personagem</h2>

            <div className="field-group">
              <div className="field-label">
                <span>Nome do Personagem</span>
                <span className="req">*</span>
              </div>
              <div className={"field-input-wrap" + (charError ? " error" : character.length >= 4 ? " valid" : "")}>
                <div className="field-icon"><Icons.User/></div>
                <input
                  className="field-input"
                  type="text"
                  placeholder="Ex.: Mordregar"
                  value={character}
                  onChange={(e) => { setCharacter(e.target.value); setTouched(true); }}
                  maxLength={16}
                />
              </div>
              {charError
                ? <div className="field-msg error"><Icons.Alert/><span>{charError}</span></div>
                : character.length >= 4
                ? <div className="field-msg valid"><Icons.Check/><span>Os coins serão creditados neste personagem.</span></div>
                : <div className="field-msg"><span>Os coins serão creditados neste personagem.</span></div>}
            </div>

            {/* Payment */}
            <div className="form-eyebrow" style={{marginTop:"22px"}}>// método de pagamento</div>
            <h2 style={{fontSize:"18px"}}>Pagamento</h2>

            <div className="pay-methods">
              {PAY_METHODS.map(p => {
                const I = Icons[p.icon];
                return (
                  <button
                    key={p.id}
                    type="button"
                    className={`pay-method ${payment === p.id ? "active" : ""}`}
                    onClick={() => setPayment(p.id)}
                  >
                    <I/>
                    <div className="pm-name">{p.name}</div>
                    <div className="pm-fee">{p.fee}</div>
                  </button>
                );
              })}
            </div>

            {payment === "pix" && <PixPreview amount={total}/>}

            <button type="submit" className="donate-confirm" disabled={!canSubmit}>
              {submitting ? (
                <React.Fragment>
                  <span style={{width:"14px",height:"14px",border:"2px solid currentColor",borderTopColor:"transparent",borderRadius:"50%",display:"inline-block",animation:"spin 0.8s linear infinite"}}></span>
                  Processando…
                </React.Fragment>
              ) : (
                <React.Fragment>
                  <Icons.Verified size={14}/>
                  Confirmar Doação · R$ {total.toFixed(2).replace(".",",")}
                </React.Fragment>
              )}
            </button>
          </div>

          <div className="summary-card">
            <div className="s-eyebrow">// resumo do pedido</div>
            <h3>Seu Pedido</h3>

            <div className="s-item-card">
              <div className="s-tier-name">{tierLabel.name}</div>
              <div className="s-coins">
                <Icons.Coin/>
                {coins.toLocaleString("pt-BR")} Pummel Coins
              </div>
              <div className="s-bonus">R$ 1 = 10 coins</div>
            </div>

            <div className="s-row">
              <span>Valor</span>
              <span className="s-val">R$ {amount.toFixed(2).replace(".",",")}</span>
            </div>
            <div className="s-row">
              <span>Método · {method.name}</span>
              <span className="s-val">{fee === 0 ? "Grátis" : `+ R$ ${fee.toFixed(2).replace(".",",")}`}</span>
            </div>
            <div className="s-row">
              <span>Personagem</span>
              <span className="s-val">{character || "—"}</span>
            </div>

            <div className="s-total">
              <span className="s-label">Total</span>
              <span className="s-value">R$ {total.toFixed(2).replace(".",",")}</span>
            </div>

            <div className="s-secure">
              <Icons.Verified/>
              <span>Transação segura · SSL 256-bit · Fan project</span>
            </div>
          </div>
        </form>
      </div>

      <div className="page-footer">
        <div>© 2026 Pummel Tale · Fan project. Doações ajudam a manter o servidor.</div>
        <div className="pf-links">
          <a href="index.html">Voltar ao Início</a>
          <a href="cadastro.html">Cadastro</a>
          <a href="#" onClick={(e)=>e.preventDefault()}>Discord</a>
          <a href="#" onClick={(e)=>e.preventDefault()}>Termos</a>
        </div>
      </div>

      <canvas id="particles" ref={canvasRef}></canvas>
    </div>
  );
}

const dnRoot = ReactDOM.createRoot(document.getElementById("root"));
dnRoot.render(
  <React.Fragment>
    <DonateApp/>
    {window.LoginModal && <window.LoginModal/>}
  </React.Fragment>
);