// Pummel Tale — Login Modal (shared component)
// Loaded on every page. Listens for `window.dispatchEvent(new Event('open-login'))`.
// Successful login redirects to painel.html. Auth is stored by the API in an httpOnly cookie.

(function() {
  const { useState, useEffect, useRef } = 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 LoginModal() {
    const [open, setOpen] = useState(false);
    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");
    const [showPw, setShowPw] = useState(false);
    const [error, setError] = useState("");
    const [loading, setLoading] = useState(false);
    const userRef = useRef(null);

    // Listen for global open events
    useEffect(() => {
      const onOpen = () => { setOpen(true); setError(""); };
      const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
      window.addEventListener("open-login", onOpen);
      window.addEventListener("keydown", onKey);
      return () => {
        window.removeEventListener("open-login", onOpen);
        window.removeEventListener("keydown", onKey);
      };
    }, []);

    // Focus first field when opened
    useEffect(() => {
      if (open) setTimeout(() => userRef.current?.focus(), 100);
    }, [open]);

    async function submit(e) {
      e.preventDefault();
      setError("");
      if (!username || username.length < 3) { setError("Usuario invalido."); return; }
      if (!password || password.length < 6) { setError("Senha deve ter ao menos 6 caracteres."); return; }
      setLoading(true);

      try {
        const response = await fetch(`${API_BASE_URL}/api/auth/login`, {
          method: "POST",
          credentials: "include",
          headers: { "Content-Type": "application/json", "Accept": "application/json" },
          body: JSON.stringify({ username, password }),
        });
        const data = await response.json().catch(() => ({}));

        if (!response.ok || !data.ok) {
          setError(data.message || "Usuario ou senha incorretos.");
          return;
        }

        window.location.href = "painel.html";
      } catch (error) {
        setError("Erro temporario. Tente novamente em instantes.");
      } finally {
        setLoading(false);
      }
    }
    if (!open) return null;

    return (
      <div className="login-overlay" onClick={(e) => { if (e.target.classList.contains("login-overlay")) setOpen(false); }}>
        <form className="login-card form-card" onSubmit={submit}>
          <div className="fc-corner tl"></div>
          <div className="fc-corner tr"></div>
          <div className="fc-corner bl"></div>
          <div className="fc-corner br"></div>

          <button type="button" className="login-close" aria-label="Fechar" onClick={() => setOpen(false)}>
            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
              <path d="M6 6l12 12M18 6L6 18"/>
            </svg>
          </button>

          <div className="login-head">
            <div className="form-eyebrow">// acesso ao reino</div>
            <h2>Entrar</h2>
            <p className="login-sub">Continue sua jornada no Pummel Tale.</p>
          </div>

          <div className="field-group">
            <div className="field-label"><span>Usuário</span><span className="req">*</span></div>
            <div className={"field-input-wrap" + (error && !username ? " error" : "")}>
              <div className="field-icon"><Icons.User/></div>
              <input
                ref={userRef}
                className="field-input"
                type="text"
                placeholder="Seu nome de usuário"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                autoComplete="username"
                maxLength={20}
              />
            </div>
          </div>

          <div className="field-group">
            <div className="field-label"><span>Senha</span><span className="req">*</span></div>
            <div className={"field-input-wrap" + (error && password.length < 6 ? " error" : "")}>
              <div className="field-icon"><Icons.Lock/></div>
              <input
                className="field-input"
                type={showPw ? "text" : "password"}
                placeholder="••••••••"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                autoComplete="current-password"
              />
              <button type="button" className="field-toggle" onClick={() => setShowPw(s => !s)} aria-label="Mostrar senha">
                {showPw ? <Icons.EyeOff/> : <Icons.Eye/>}
              </button>
            </div>
          </div>

          {error && (
            <div className="field-msg error" style={{marginTop:"-6px", marginBottom:"6px"}}>
              <Icons.Alert/>
              <span>{error}</span>
            </div>
          )}

          <div className="login-actions">
            <button type="submit" className="btn btn-primary" disabled={loading}>
              <span className="glint"></span>
              {loading ? (
                <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>
                  Acessando…
                </React.Fragment>
              ) : (
                <React.Fragment>
                  <Icons.Bolt size={14}/>
                  Entrar
                </React.Fragment>
              )}
            </button>
          </div>

          <div className="login-links">
            <a href="cadastro.html">Criar conta</a>
            <span className="sep">·</span>
            <a href="reset-password.html">Esqueci minha senha</a>
          </div>
        </form>
      </div>
    );
  }

  window.LoginModal = LoginModal;
})();