// Pummel Tale - Painel do Usuario
const { useState: useStatePN, useEffect: useEffectPN, useRef: useRefPN } = React;
const API_BASE_URL = window.location.protocol === "file:" || ["localhost", "127.0.0.1"].includes(window.location.hostname)
  ? "http://127.0.0.1:3001"
  : "";

function formatDate(value) {
  if (!value) return "-";
  try {
    const d = new Date(value);
    if (Number.isNaN(d.getTime())) return String(value);
    return d.toLocaleDateString("pt-BR", { day: "2-digit", month: "2-digit", year: "numeric" })
      + " - " + d.toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" });
  } catch (_) {
    return "-";
  }
}

function characterColor(cls) {
  const normalized = String(cls || "").toLowerCase();
  if (normalized.includes("fighter") || normalized.includes("lutador")) return "#d66a3a";
  if (normalized.includes("mechanician") || normalized.includes("mecanico")) return "#a8b5c2";
  if (normalized.includes("archer") || normalized.includes("arqueira")) return "#6dd99a";
  if (normalized.includes("pikeman")) return "#6aa6ff";
  if (normalized.includes("atalanta")) return "#c772ff";
  if (normalized.includes("knight") || normalized.includes("cavaleiro")) return "#f0c97a";
  if (normalized.includes("magician") || normalized.includes("mago")) return "#5b8fd4";
  if (normalized.includes("priestess") || normalized.includes("sacerdotisa")) return "#f3d7ff";
  return "#c8995a";
}

function PainelHeader({ username, onLogout }) {
  const [menuOpen, setMenuOpen] = useStatePN(false);
  const nav = [
    { id: "home", label: "Inicio", 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: "Noticias", href: "index.html#news" },
    { id: "donate", label: "Doacao", href: "doacao.html" },
    { id: "panel", label: "Painel", href: "painel.html", active: true },
  ];

  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>
          {username && (
            <button className="logout-btn" onClick={onLogout}>
              <Icons.Logout/>
              Sair
            </button>
          )}
          <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>
        ))}
      </div>
    </React.Fragment>
  );
}

function ChangeEmailForm({ currentEmail }) {
  const [newEmail, setNewEmail] = useStatePN("");
  const [currentPassword, setCurrentPassword] = useStatePN("");
  const [message, setMessage] = useStatePN("");
  const [error, setError] = useStatePN("");
  const [loading, setLoading] = useStatePN(false);

  async function submit(e) {
    e.preventDefault();
    setMessage("");
    setError("");
    setLoading(true);

    try {
      const response = await fetch(`${API_BASE_URL}/api/account/change-email`, {
        method: "POST",
        credentials: "include",
        headers: { "Content-Type": "application/json", "Accept": "application/json" },
        body: JSON.stringify({ newEmail, currentPassword }),
      });
      const data = await response.json().catch(() => ({}));
      if (!response.ok || !data.ok) {
        setError(data.message || "Nao foi possivel solicitar a alteracao.");
        return;
      }

      setMessage(data.message || "Enviamos um link de confirmacao para o novo e-mail.");
      setNewEmail("");
      setCurrentPassword("");
    } catch (err) {
      setError("Erro temporario. Tente novamente em instantes.");
    } finally {
      setLoading(false);
    }
  }

  return (
    <form className="account-change-form" onSubmit={submit}>
      <div className="panel-eyebrow">// alterar e-mail</div>
      <div className="field-group">
        <div className="field-label"><span>E-mail atual</span></div>
        <div className="field-input-wrap">
          <input className="field-input" type="email" value={currentEmail || ""} disabled />
        </div>
      </div>
      <div className="field-group">
        <div className="field-label"><span>Novo e-mail</span><span className="req">*</span></div>
        <div className="field-input-wrap">
          <input className="field-input" type="email" value={newEmail} onChange={(e) => setNewEmail(e.target.value)} autoComplete="email" />
        </div>
      </div>
      <div className="field-group">
        <div className="field-label"><span>Senha atual</span><span className="req">*</span></div>
        <div className="field-input-wrap">
          <input className="field-input" type="password" value={currentPassword} onChange={(e) => setCurrentPassword(e.target.value)} autoComplete="current-password" />
        </div>
      </div>
      {message && <div className="field-msg valid"><Icons.Verified/><span>{message}</span></div>}
      {error && <div className="field-msg error"><Icons.Alert/><span>{error}</span></div>}
      <button className="btn btn-primary" type="submit" disabled={loading}>
        <span className="glint"></span>
        {loading ? "Enviando..." : "Solicitar alteracao"}
      </button>
    </form>
  );
}

function PainelApp() {
  const [session, setSession] = useStatePN(null);
  const [characters, setCharacters] = useStatePN([]);
  const [loading, setLoading] = useStatePN(true);
  const canvasRef = useRefPN(null);

  useEffectPN(() => {
    let active = true;

    async function loadAccount() {
      try {
        const meResponse = await fetch(`${API_BASE_URL}/api/auth/me`, { credentials: "include", headers: { "Accept": "application/json" } });
        if (meResponse.status === 401) {
          if (active) setSession(null);
          return;
        }
        const me = await meResponse.json().catch(() => ({}));
        if (!meResponse.ok || !me.ok) throw new Error("ME_FAILED");

        const charsResponse = await fetch(`${API_BASE_URL}/api/account/characters`, { credentials: "include", headers: { "Accept": "application/json" } });
        const chars = await charsResponse.json().catch(() => ({}));

        if (active) {
          setSession(me.user);
          setCharacters(chars.ok ? (chars.characters || []) : []);
        }
      } catch (error) {
        if (active) setSession(null);
      } finally {
        if (active) setLoading(false);
      }
    }

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

  useEffectPN(() => {
    if (!loading && !session && window.location.pathname.endsWith("painel.html")) {
      setTimeout(() => window.dispatchEvent(new Event("open-login")), 200);
    }
  }, [loading, session]);

  useEffectPN(() => {
    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: 50 }, () => ({
      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); };
  }, []);

  async function logout() {
    try {
      await fetch(`${API_BASE_URL}/api/auth/logout`, { method: "POST", credentials: "include" });
    } catch (_) {}
    setSession(null);
    window.location.href = "index.html";
  }

  if (loading || !session) {
    return (
      <div className="app">
        <PainelHeader username="" onLogout={() => {}}/>
        <div className="painel-wrap" style={{textAlign:"center", paddingTop:"120px"}}>
          <div className="form-eyebrow">// acesso restrito</div>
          <h1 style={{
            fontFamily:"var(--font-display)",
            fontSize:"36px",
            letterSpacing:"0.08em",
            textTransform:"uppercase",
            background:"linear-gradient(180deg, #fff3d6 0%, #c8995a 60%, #7a5a2e 100%)",
            WebkitBackgroundClip:"text",
            backgroundClip:"text",
            WebkitTextFillColor:"transparent",
            marginTop:"10px",
            marginBottom:"14px",
          }}>{loading ? "Carregando" : "Sessao necessaria"}</h1>
          <p style={{color:"var(--ink-dim)", marginBottom:"28px"}}>{loading ? "Validando sua sessao..." : "Voce precisa estar logado para acessar o painel."}</p>
          {!loading && (
            <button className="btn btn-primary" onClick={() => window.dispatchEvent(new Event("open-login"))}>
              <span className="glint"></span>
              <Icons.Bolt size={14}/>
              Entrar
            </button>
          )}
        </div>
        <canvas id="particles" ref={canvasRef}></canvas>
        {window.LoginModal && <window.LoginModal/>}
      </div>
    );
  }

  return (
    <div className="app">
      <PainelHeader username={session.username} onLogout={logout}/>

      <div className="painel-wrap">
        <div className="painel-head">
          <div>
            <div className="ph-eyebrow">// painel do aventureiro</div>
            <h1>Bem-vindo, {session.username}</h1>
            <div className="ph-sub">Gerencie sua conta, personagens e doacoes.</div>
          </div>
        </div>

        <div className="painel-grid">
          <div className="acc-card">
            <div className="panel-eyebrow">// resumo da conta</div>
            <h2>Account Summary</h2>

            <div className="acc-coins">
              <div className="acc-coins-row">
                <div className="acc-coins-icon"><Icons.Coin/></div>
                <div className="acc-coins-meta">
                  <div className="acc-coins-label">Meus Coins</div>
                  <div className="acc-coins-value">{(session.coins || 0).toLocaleString("pt-BR")}</div>
                </div>
              </div>
              <button className="acc-orders-btn" onClick={() => window.location.href = "doacao.html"}>
                <Icons.Cart/>
                My Orders / Subscriptions
              </button>
            </div>

            <div className="acc-info">
              <div className="acc-row">
                <span className="acc-label">Username</span>
                <span className="acc-value">{session.username}</span>
              </div>
              <div className="acc-row">
                <span className="acc-label">Email</span>
                <span className="acc-value sub">{session.email || "-"}</span>
              </div>
              <div className="acc-row">
                <span className="acc-label">Status</span>
                <span className="acc-verified">
                  <Icons.Verified/>
                  {session.status === "blocked" ? "Bloqueada" : "Ativa"}
                </span>
              </div>
              <div className="acc-row">
                <span className="acc-label">Last Login</span>
                <span className="acc-value sub">{formatDate(session.lastLogin)}</span>
              </div>
            </div>
          </div>

          <div className="chars-card">
            <div className="chars-head">
              <h2>My Characters</h2>
              <span className="chars-count">{characters.length} / 6</span>
            </div>

            <div className="chars-grid">
              {characters.map((c, i) => (
                <div key={`${c.name}-${i}`} className="char-card">
                  <div className="char-avatar" style={{ "--cls-color": characterColor(c.cls) }}>
                    {c.avatar ? <img src={c.avatar} alt={c.cls} draggable="false"/> : <span>{(c.name || "?")[0]}</span>}
                    <span className="level-badge">Lv {c.level || 0}</span>
                  </div>
                  <div className="char-info">
                    <div className="char-name">{c.name}</div>
                    <div className="char-meta">{c.cls}</div>
                    <span className="char-class-badge" style={{ "--cls-color": characterColor(c.cls) }}>{c.cls}</span>
                  </div>
                </div>
              ))}

              {characters.length === 0 && (
                <div className="char-add">
                  Nenhum personagem encontrado
                </div>
              )}
            </div>
          </div>

          <div className="acc-card account-security-card">
            <ChangeEmailForm currentEmail={session.email}/>
          </div>
        </div>
      </div>

      <div className="page-footer">
        <div>© 2026 Pummel Tale - Fan project - Painel do jogador</div>
        <div className="pf-links">
          <a href="index.html">Inicio</a>
          <a href="doacao.html">Doacao</a>
          <a href="#" onClick={(e)=>e.preventDefault()}>Suporte</a>
        </div>
      </div>

      <canvas id="particles" ref={canvasRef}></canvas>
      {window.LoginModal && <window.LoginModal/>}
    </div>
  );
}

const pnRoot = ReactDOM.createRoot(document.getElementById("root"));
pnRoot.render(<PainelApp/>);