/* global React, ReactDOM, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakToggle */
const { useState, useEffect, useRef } = React;

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "headlineEmphasis": "strike",
  "background": "grid",
  "pullPosition": "ruled",
  "showCorners": true
}/*EDITMODE-END*/;

/* ---------- background variants ---------- */
function Background({ variant }) {
  if (variant === "grid") {
    return (
      <div className="bg-grid" aria-hidden="true">
        <svg width="100%" height="100%" preserveAspectRatio="none">
          <defs>
            <pattern id="dot" x="0" y="0" width="32" height="32" patternUnits="userSpaceOnUse">
              <circle cx="1" cy="1" r="1" fill="rgba(255,255,255,0.05)" />
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#dot)" />
        </svg>
        <div className="bg-vignette" />
      </div>
    );
  }
  if (variant === "lines") {
    return (
      <div className="bg-lines" aria-hidden="true">
        <div className="bg-vignette" />
      </div>
    );
  }
  return <div className="bg-vignette" aria-hidden="true" />;
}

/* ---------- corner crosshairs (consultancy "framing" cue) ---------- */
function Corners() {
  return (
    <div className="corners" aria-hidden="true">
      <span className="corner tl" />
      <span className="corner tr" />
      <span className="corner bl" />
      <span className="corner br" />
    </div>
  );
}

/* ---------- emphasis treatments for "achismo" ---------- */
function Achismo({ mode }) {
  if (mode === "strike") {
    return (
      <span className="achismo achismo--strike">
        achismo<span className="achismo-line" aria-hidden="true" />
      </span>
    );
  }
  if (mode === "circle") {
    return (
      <span className="achismo achismo--circle">
        achismo
        <svg className="achismo-circle" viewBox="0 0 220 80" aria-hidden="true" preserveAspectRatio="none">
          <path d="M210,40 C210,62 165,75 110,75 C55,75 10,62 10,40 C10,18 55,5 110,5 C165,5 210,18 210,40 Z"
            fill="none" stroke="var(--exact-orange)" strokeWidth="2" strokeLinecap="round" />
        </svg>
      </span>
    );
  }
  return <span className="achismo">achismo</span>;
}

/* ---------- Login modal ---------- */
function LoginModal({ open, onClose }) {
  const [email, setEmail] = useState("");
  const [pass, setPass] = useState("");
  // view: signin | recover
  // stage: idle | loading | success | error
  const [view, setView] = useState("signin");
  const [stage, setStage] = useState("idle");
  const [errorMsg, setErrorMsg] = useState("");
  const firstFieldRef = useRef(null);
  const recoverEmailRef = useRef(null);

  useEffect(() => {
    if (open) {
      setView("signin");
      setStage("idle");
      setErrorMsg("");
      setTimeout(() => firstFieldRef.current && firstFieldRef.current.focus(), 60);
    }
  }, [open]);

  useEffect(() => {
    if (view === "recover") {
      setStage("idle");
      setErrorMsg("");
      setTimeout(() => recoverEmailRef.current && recoverEmailRef.current.focus(), 60);
    }
  }, [view]);

  useEffect(() => {
    function onKey(e) {
      if (e.key === "Escape" && open) onClose();
    }
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  async function submit(e) {
    e.preventDefault();
    if (!email || !pass) return;
    setStage("loading");
    setErrorMsg("");
    try {
      const auth = window.__AUTH__;
      if (!auth) throw new Error("Módulo de autenticação não carregado");
      await auth.signIn(email, pass);
      setStage("success");
      setTimeout(async () => {
        const dest = await window.__POST_LOGIN_DEST__();
        window.location.href = dest;
      }, 900);
    } catch (err) {
      setStage("error");
      setErrorMsg(err.message || "Erro ao entrar.");
    }
  }

  async function submitRecover(e) {
    e.preventDefault();
    if (!email) return;
    setStage("loading");
    setErrorMsg("");
    try {
      const auth = window.__AUTH__;
      if (!auth) throw new Error("Módulo de autenticação não carregado");
      await auth.requestPasswordReset(email);
      setStage("success");
    } catch (err) {
      setStage("error");
      setErrorMsg(err.message || "Não foi possível enviar o e-mail.");
    }
  }

  if (!open) return null;

  return (
    <div className="modal-scrim" onMouseDown={onClose}>
      <div className="modal-card" onMouseDown={(e) => e.stopPropagation()}>
        <div className="modal-head">
          <div className="modal-eyebrow t-eyebrow">Acesso · Clientes Exact</div>
          <button className="modal-close" onClick={onClose} aria-label="Fechar">
            <svg width="14" height="14" viewBox="0 0 14 14"><path d="M1 1 L13 13 M13 1 L1 13" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
          </button>
        </div>

        {view === "signin" && stage !== "success" ? (
          <form className="modal-body" onSubmit={submit}>
            <h2 className="modal-title">Entrar na área do cliente.</h2>
            <p className="modal-sub">Use o e-mail cadastrado no contrato de consultoria.</p>

            <label className="field">
              <span className="field-label">E-mail</span>
              <input
                ref={firstFieldRef}
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="voce@empresa.com.br"
                autoComplete="email"
                required
              />
            </label>

            <label className="field">
              <span className="field-label">Senha</span>
              <input
                type="password"
                value={pass}
                onChange={(e) => setPass(e.target.value)}
                placeholder="••••••••"
                autoComplete="current-password"
                required
              />
            </label>

            <div className="field-row">
              <label className="check">
                <input type="checkbox" defaultChecked />
                <span>Manter conectado por 30 dias</span>
              </label>
              <button
                type="button"
                className="link-quiet link-as-button"
                onClick={() => setView("recover")}
              >
                Esqueci minha senha
              </button>
            </div>

            {stage === "error" && errorMsg ? (
              <div className="login-error" role="alert">
                <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true">
                  <circle cx="7" cy="7" r="6" fill="none" stroke="currentColor" strokeWidth="1.4"/>
                  <path d="M7 4v3.5M7 9.5v0.4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
                </svg>
                <span>{errorMsg}</span>
              </div>
            ) : null}

            <button type="submit" className="btn btn-primary btn-block" disabled={stage === "loading"}>
              {stage === "loading" ? (
                <span className="btn-loading">
                  <span className="spinner" />
                  Verificando credenciais
                </span>
              ) : (
                <>Entrar <span className="btn-arrow">→</span></>
              )}
            </button>

            <div className="modal-foot">
              <span className="t-caption">Suporte: <a href="mailto:contato@exactbr.com.br" className="link-quiet">contato@exactbr.com.br</a></span>
              <span className="t-caption mono">SSL · TLS 1.3</span>
            </div>
          </form>
        ) : view === "recover" && stage !== "success" ? (
          <form className="modal-body" onSubmit={submitRecover}>
            <h2 className="modal-title">Recuperar acesso.</h2>
            <p className="modal-sub">Informe seu e-mail cadastrado. Vamos enviar um link para você definir uma nova senha.</p>

            <label className="field">
              <span className="field-label">E-mail</span>
              <input
                ref={recoverEmailRef}
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="voce@empresa.com.br"
                autoComplete="email"
                required
              />
            </label>

            {stage === "error" && errorMsg ? (
              <div className="login-error" role="alert">
                <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true">
                  <circle cx="7" cy="7" r="6" fill="none" stroke="currentColor" strokeWidth="1.4"/>
                  <path d="M7 4v3.5M7 9.5v0.4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
                </svg>
                <span>{errorMsg}</span>
              </div>
            ) : null}

            <button type="submit" className="btn btn-primary btn-block" disabled={stage === "loading"}>
              {stage === "loading" ? (
                <span className="btn-loading">
                  <span className="spinner" />
                  Enviando link
                </span>
              ) : (
                <>Enviar link de recuperação <span className="btn-arrow">→</span></>
              )}
            </button>

            <div className="modal-foot">
              <button
                type="button"
                className="link-quiet link-as-button"
                onClick={() => { setView("signin"); setStage("idle"); setErrorMsg(""); }}
              >
                ← Voltar para login
              </button>
              <span className="t-caption">Suporte: <a href="mailto:contato@exactbr.com.br" className="link-quiet">contato@exactbr.com.br</a></span>
            </div>
          </form>
        ) : view === "recover" && stage === "success" ? (
          <div className="modal-body modal-success">
            <div className="success-mark" aria-hidden="true">
              <svg viewBox="0 0 32 32"><path d="M4 10 L16 19 L28 10 M4 10 L4 24 L28 24 L28 10" stroke="var(--exact-orange)" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </div>
            <h2 className="modal-title">Link enviado.</h2>
            <p className="modal-sub">
              Se <strong>{email}</strong> estiver cadastrado, você vai receber um e-mail em instantes
              com o link para redefinir a senha. Confira também sua caixa de spam.
            </p>
            <button
              type="button"
              className="btn btn-primary btn-block"
              onClick={() => { setView("signin"); setStage("idle"); setPass(""); }}
            >
              Voltar para login
            </button>
          </div>
        ) : (
          <div className="modal-body modal-success">
            <div className="success-mark" aria-hidden="true">
              <svg viewBox="0 0 32 32"><path d="M7 16 L14 23 L25 10" stroke="var(--exact-orange)" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </div>
            <h2 className="modal-title">Bem-vindo de volta.</h2>
            <p className="modal-sub">Carregando suas ferramentas e dashboards.</p>
            <div className="loading-bar"><div className="loading-bar-fill" /></div>
          </div>
        )}
      </div>
    </div>
  );
}

/* ---------- Tweaks ---------- */
function Tweaks({ t, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Tipografia">
        <TweakRadio
          label="Ênfase em &quot;achismo&quot;"
          value={t.headlineEmphasis}
          options={[
            { value: "strike", label: "Risco" },
            { value: "circle", label: "Círculo" },
            { value: "clean", label: "Limpo" }
          ]}
          onChange={(v) => setTweak("headlineEmphasis", v)}
        />
        <TweakRadio
          label="Citação de fechamento"
          value={t.pullPosition}
          options={[
            { value: "ruled", label: "Régua" },
            { value: "quoted", label: "Aspas" }
          ]}
          onChange={(v) => setTweak("pullPosition", v)}
        />
      </TweakSection>
      <TweakSection label="Canvas">
        <TweakRadio
          label="Fundo"
          value={t.background}
          options={[
            { value: "ink", label: "Sólido" },
            { value: "grid", label: "Pontos" },
            { value: "lines", label: "Régua" }
          ]}
          onChange={(v) => setTweak("background", v)}
        />
        <TweakToggle
          label="Marcas de canto"
          value={t.showCorners}
          onChange={(v) => setTweak("showCorners", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

/* ---------- Main ---------- */
function App() {
  const [t, setTweak] = useTweaks(DEFAULTS);
  const [loginOpen, setLoginOpen] = useState(false);

  return (
    <div className="app">
      <Background variant={t.background} />
      {t.showCorners && <Corners />}

      {/* Top bar */}
      <header className="top">
        <div className="top-left">
          <img src="assets/logo-white.png" alt="exact." className="logo" />
        </div>
        <div className="top-right">
          <span className="status-pill">
            <span className="status-dot" />
            Sessão criptografada
          </span>
        </div>
      </header>

      {/* Hero / manifesto */}
      <main className="stage">
        <div className="access-badge" role="status">
          <svg className="access-badge-ico" width="12" height="14" viewBox="0 0 12 14" aria-hidden="true">
            <path d="M3 6V4a3 3 0 0 1 6 0v2" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round"/>
            <rect x="1.5" y="6" width="9" height="7" rx="1.2" stroke="currentColor" strokeWidth="1.4" fill="none"/>
            <circle cx="6" cy="9.5" r="0.9" fill="currentColor"/>
          </svg>
          <span className="access-badge-text">
            <span className="access-badge-tag">Acesso restrito</span>
            <span className="access-badge-sep" aria-hidden="true">·</span>
            <span className="access-badge-sub">Apenas clientes Exact</span>
          </span>
        </div>

        <h1 className="hero">
          <span className="hero-line">Gestão não se faz</span>
          <span className="hero-line">no <Achismo mode={t.headlineEmphasis} />.</span>
        </h1>

        <p className="lede">
          Você está na área exclusiva dos clientes Exact, onde os números viram
          <em> decisão </em>
          e a estratégia vira <em>execução</em>.
        </p>

        {t.pullPosition === "ruled" ? (
          <div className="pull pull-ruled">
            <span className="pull-rule" aria-hidden="true" />
            <span className="pull-text">Porque disciplina gera lucro.</span>
          </div>
        ) : (
          <div className="pull pull-quoted">
            <span className="pull-quote-mark" aria-hidden="true">“</span>
            <span className="pull-text">Porque disciplina gera lucro.</span>
          </div>
        )}

        <div className="cta-block">
          <span className="cta-hint t-body-sm">Entre para acessar suas ferramentas.</span>
          <button className="btn btn-primary btn-hero" onClick={() => setLoginOpen(true)}>
            Fazer login
            <span className="btn-arrow" aria-hidden="true">→</span>
          </button>
        </div>
      </main>

      <LoginModal open={loginOpen} onClose={() => setLoginOpen(false)} />

      <Tweaks t={t} setTweak={setTweak} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);