// Área do Sócio — Login + Modal + Shell coordenador

function LoginScreen({ onLogin }) {
  const [mode, setMode] = React.useState("login"); // login | cadastro | recuperar | totp
  const [id, setId] = React.useState("");
  const [pwd, setPwd] = React.useState("");
  const [feedback, setFeedback] = React.useState(null);
  const [erro, setErro] = React.useState(null);
  const [busy, setBusy] = React.useState(false);
  const [pre2FA, setPre2FA] = React.useState(null);

  const submit = async (e) => {
    e.preventDefault();
    setErro(null);
    if (window.IKIGAI_API_ENABLED) {
      setBusy(true);
      try {
        const res = await fetch((window.IKIGAI_API || "") + "/auth/login", {
          method: "POST", headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ codigoSocio: id, senha: pwd }),
        }).then((r) => r.json().then((d) => ({ ok: r.ok, d })));
        if (!res.ok) { setErro(res.d.error === "invalid_credentials" ? "Código ou senha inválidos." : "Falha ao conectar."); setBusy(false); return; }
        if (res.d.precisaTotp) {
          setPre2FA({ tempToken: res.d.tempToken, identificador: id, emailMasked: res.d.emailMasked });
          setMode("totp");
          setBusy(false); return;
        }
        localStorage.setItem("ikigai_token", res.d.token);
        const s = res.d.socio;
        onLogin({ ...s, id: s.codigo, nomeCurto: s.nome?.split(" ")[0], iniciais: (s.nome || "").split(" ").map(n=>n[0]).slice(0,2).join("") });
      } catch (err) {
        setErro("Falha ao conectar. Tente novamente.");
      } finally { setBusy(false); }
    } else {
      const m = SOCIOS.find((s) => s.id === id) || SOCIOS[0];
      // se 2FA ativo no demo, pedir código
      if (IkigaiTOTP.Storage.isAtivo("socio", m.id)) {
        setPre2FA({ tempToken: "demo", identificador: m.id, emailMasked: m.email.replace(/(.{2}).+(@.+)/, "$1•••$2"), socioMock: m });
        setMode("totp");
        return;
      }
      onLogin(m);
    }
  };

  const submitCadastro = async (e) => {
    e.preventDefault();
    setErro(null);
    const f = e.target;
    const dados = {
      nome: f.nome.value, email: f.email.value, telefone: f.telefone.value,
      nascimento: f.nascimento.value, senha: f.senha.value,
    };
    if (window.IKIGAI_API_ENABLED) {
      setBusy(true);
      try { await IkigaiAPI.cadastro(dados); setFeedback("Cadastro enviado! Em até 24h um sensei aprova e te enviamos o código de sócio por e-mail."); }
      catch (err) { setErro(err.data?.error || "Falha ao cadastrar."); }
      finally { setBusy(false); }
    } else {
      setFeedback("Cadastro enviado! Em até 24h um sensei aprova e te enviamos o código de sócio por e-mail. (modo demo)");
    }
  };

  const submitRecuperar = async (e) => {
    e.preventDefault();
    setErro(null);
    const email = e.target.email.value;
    if (window.IKIGAI_API_ENABLED) {
      setBusy(true);
      try { await IkigaiAPI.recuperar(email); }
      catch (_) { /* sempre sucesso por segurança */ }
      finally { setBusy(false); }
    }
    setFeedback("Pronto! Se o e-mail estiver cadastrado, você receberá o link em alguns minutos.");
  };

  const isLogin = mode === "login";
  const isCadastro = mode === "cadastro";
  const isRecuperar = mode === "recuperar";
  const isTotp = mode === "totp";

  if (isTotp && pre2FA) {
    return (
      <div className="as-login">
        <TwoFAVerify
          escopo="socio"
          tempToken={pre2FA.tempToken}
          identificador={pre2FA.identificador}
          emailMasked={pre2FA.emailMasked}
          onSucesso={(real) => {
            const user = real || pre2FA.socioMock;
            onLogin(user);
          }}
          onCancelar={() => { setPre2FA(null); setMode("login"); }}
        />
      </div>
    );
  }

  return (
    <div className="as-login">
      <div className="as-login-card">
        <div className="as-login-brand">
          <img src="assets/logo-ikigai.png" alt="Ikigai" style={{ height: 44, width: "auto" }}/>
          <div>
            <div style={{ fontFamily: "var(--k-font-display)", fontWeight: 700, fontSize: 16, letterSpacing: "0.04em" }}>IKIGAI</div>
            <div style={{ fontSize: 11, color: "var(--k-ink-3)", letterSpacing: "0.02em" }}>Área do Sócio</div>
          </div>
        </div>

        {isLogin && (<>
          <div className="as-login-h">Entre na sua área.</div>
          <div className="as-login-sub">Use seu código de sócio e senha.</div>
          {!window.IKIGAI_API_ENABLED && <div style={{ background: "rgba(230,168,0,0.12)", color: "#8a6500", padding: 8, borderRadius: 8, fontSize: 11.5, marginBottom: 10, textAlign: "center" }}>⚠ Modo demonstração (backend não conectado)</div>}
          {erro && <div style={{ background: "rgba(198,59,59,0.10)", color: "#a02e2e", padding: 10, borderRadius: 8, fontSize: 12.5, marginBottom: 10 }}>{erro}</div>}
          <form className="as-login-form" onSubmit={submit}>
            <div className="as-field">
              <label>Código de sócio</label>
              <input value={id} onChange={(e) => setId(e.target.value)} placeholder="0054" />
            </div>
            <div className="as-field">
              <label>Senha</label>
              <input type="password" value={pwd} onChange={(e) => setPwd(e.target.value)} placeholder="••••••••" />
            </div>
            <button type="submit" disabled={busy} className="k-btn" style={{ marginTop: 6, background: "#1d1d1f", color: "#fff", opacity: busy ? 0.6 : 1 }}>
              {busy ? "Entrando..." : "Entrar"}
            </button>
            <button type="button" className="k-btn" style={{ background: "#e6a800", color: "#1d1d1f", fontWeight: 500 }} onClick={() => setMode("recuperar")}>
              Esqueci minha senha
            </button>
            <button type="button" className="k-btn" style={{ background: "#c63b3b", color: "#fff", fontWeight: 500 }} onClick={() => setMode("cadastro")}>
              Quero me cadastrar
            </button>
          </form>

          <div className="as-login-foot">
            <a onClick={(e) => { e.preventDefault(); setMode("recuperar"); }} href="#">Esqueci minha senha</a>
            <a onClick={(e) => { e.preventDefault(); window.location.hash = ""; }} href="#">‹ Voltar ao site</a>
          </div>
        </>)}

        {isCadastro && (<>
          <div className="as-login-h">Criar conta de sócio.</div>
          <div className="as-login-sub">Preencha seus dados. Após validação, você recebe seu código por e-mail.</div>
          {erro && <div style={{ background: "rgba(198,59,59,0.10)", color: "#a02e2e", padding: 10, borderRadius: 8, fontSize: 12.5, marginBottom: 10 }}>{erro}</div>}
          <form className="as-login-form" onSubmit={submitCadastro}>
            <div className="as-field">
              <label>Nome completo</label>
              <input name="nome" required placeholder="Seu nome completo" />
            </div>
            <div className="as-field">
              <label>E-mail</label>
              <input name="email" type="email" required placeholder="voce@exemplo.com" />
            </div>
            <div className="as-field">
              <label>Telefone (WhatsApp)</label>
              <input name="telefone" required placeholder="(11) 98765-4321" />
            </div>
            <div className="as-field">
              <label>Data de nascimento</label>
              <input name="nascimento" required placeholder="dd/mm/aaaa" />
            </div>
            <div className="as-field">
              <label>Crie uma senha</label>
              <input name="senha" type="password" required placeholder="mínimo 8 caracteres" />
            </div>
            <label style={{ display: "flex", gap: 8, fontSize: 12, color: "var(--k-ink-3)", lineHeight: 1.4 }}>
              <input type="checkbox" required style={{ marginTop: 2 }} />
              <span>Li e concordo com o <a style={{ color: "var(--k-blue)" }} href="#">estatuto</a> e <a style={{ color: "var(--k-blue)" }} href="#">termos</a>.</span>
            </label>
            {feedback && <div style={{ background: "rgba(45,160,106,0.12)", color: "#1f7a4d", padding: 12, borderRadius: 10, fontSize: 13 }}>{feedback}</div>}
            <button type="submit" className="k-btn k-btn-primary" style={{ marginTop: 6 }}>Enviar cadastro</button>
          </form>
          <div className="as-login-foot">
            <a onClick={(e) => { e.preventDefault(); setMode("login"); setFeedback(null); }} href="#">‹ Voltar ao login</a>
            <span></span>
          </div>
        </>)}

        {isRecuperar && (<>
          <div className="as-login-h">Recuperar senha.</div>
          <div className="as-login-sub">Informe o e-mail cadastrado. Enviaremos um link de redefinição.</div>
          <form className="as-login-form" onSubmit={submitRecuperar}>
            <div className="as-field">
              <label>E-mail cadastrado</label>
              <input name="email" type="email" required placeholder="voce@exemplo.com" />
            </div>
            <div className="as-field">
              <label>Código de sócio (opcional)</label>
              <input placeholder="0054" />
            </div>
            {feedback && <div style={{ background: "rgba(0,113,227,0.10)", color: "#0058b8", padding: 12, borderRadius: 10, fontSize: 13 }}>{feedback}</div>}
            <button type="submit" className="k-btn k-btn-primary" style={{ marginTop: 6 }}>Enviar link de recuperação</button>
          </form>
          <div className="as-login-foot">
            <a onClick={(e) => { e.preventDefault(); setMode("login"); setFeedback(null); }} href="#">‹ Voltar ao login</a>
            <a onClick={(e) => { e.preventDefault(); setMode("cadastro"); setFeedback(null); }} href="#">Não tenho conta</a>
          </div>
        </>)}
      </div>
    </div>
  );
}

function Modal({ kind, payload, onClose, socio }) {
  if (kind === "agendar") {
    const slot = payload || SLOTS[0];
    return (
      <div className="as-modal-bg" onClick={onClose}>
        <div className="as-modal" onClick={(e) => e.stopPropagation()}>
          <span className="as-modal-x" onClick={onClose}>{ICON.x}</span>
          <div className="as-modal-h">
            <h3>Confirmar agendamento</h3>
            <p>Você está prestes a agendar uma aula.</p>
          </div>
          <div className="as-modal-body">
            <div style={{ background: "var(--k-bg-soft)", padding: "16px 18px", borderRadius: 12, marginBottom: 14 }}>
              <div style={{ fontSize: 12, color: "var(--k-ink-3)", textTransform: "uppercase", letterSpacing: "0.04em" }}>Aula</div>
              <div style={{ fontFamily: "var(--k-font-display)", fontSize: 19, fontWeight: 600, marginTop: 4 }}>{slot.titulo}</div>
              <div style={{ fontSize: 14, color: "var(--k-ink-2)", marginTop: 4 }}>
                {slot.dia} · {slot.data} · {slot.hora} · {slot.vagas} vagas
              </div>
            </div>
            <div className="as-field">
              <label>Observações para o sensei (opcional)</label>
              <textarea rows="3" placeholder="Ex.: estou voltando depois de uma lesão…" />
            </div>
          </div>
          <div className="as-modal-foot">
            <button className="k-btn k-btn-light" onClick={onClose}>Cancelar</button>
            <button className="k-btn k-btn-primary" onClick={onClose}>Confirmar agendamento</button>
          </div>
        </div>
      </div>
    );
  }
  return null;
}

function AreaSocioShell({ initialSocio, onLogout, variant = "vibrant" }) {
  const [route, setRouteState] = React.useState("dashboard");
  const [modal, setModal] = React.useState(null);
  const [socio, setSocio] = React.useState(initialSocio);
  const [show2FAModal, setShow2FAModal] = React.useState(false);
  const [totpAtivo, setTotpAtivo] = React.useState(IkigaiTOTP.Storage.isAtivo("socio", initialSocio.id));
  const [legalDoc, setLegalDoc] = React.useState(null);

  React.useEffect(() => { setSocio(initialSocio); }, [initialSocio]);

  const setRoute = (r) => {
    setRouteState(r);
    window.location.hash = `area-socio/${r}`;
  };
  const openModal = (kind, payload) => setModal({ kind, payload });
  const closeModal = () => setModal(null);

  // hash sync
  React.useEffect(() => {
    const sync = () => {
      const h = window.location.hash.replace(/^#/, "");
      const m = h.match(/^area-socio\/(.+)$/);
      if (m) setRouteState(m[1]);
    };
    sync();
    window.addEventListener("hashchange", sync);
    return () => window.removeEventListener("hashchange", sync);
  }, []);

  const renderPage = () => {
    switch (route) {
      case "dados":         return <PageDados socio={socio} />;
      case "questionario":  return <PageQuestionario />;
      case "mensalidades":  return <PageMensalidades socio={socio} />;
      case "agendar":       return <PageAgendar openModal={openModal} />;
      case "historico":     return <PageHistorico />;
      case "credencial":    return <PageCredencial socio={socio} />;
      case "material":      return <PageMaterial />;
      case "graduacoes":    return <PageGraduacoes socio={socio} />;
      case "eventos":       return <PageEventos />;
      case "valores":       return <PageValores />;
      case "estatuto":      return <PageEstatuto />;
      case "config":        return <PageConfig setRoute={setRoute} />;
      case "alterar-senha": return <PageAlterarSenha setRoute={setRoute} />;
      case "seguranca":     return <PageSeguranca socio={socio} totpAtivo={totpAtivo} onAtivar={() => setShow2FAModal(true)} onDesativar={() => { IkigaiTOTP.Storage.remove("socio", socio.id); setTotpAtivo(false); }} />;
      case "privacidade":   return <PagePrivacidade socio={socio} onOpenDoc={setLegalDoc} />;
      default:              return <Dashboard socio={socio} setRoute={setRoute} openModal={openModal} />;
    }
  };

  return (
    <div className={`as-shell ${variant === "minimal" ? "is-minimal" : ""}`}>
      <Sidebar
        socio={socio}
        route={route}
        setRoute={setRoute}
        onClose={onLogout}
        onLogout={onLogout}
      />
      <main className="as-main">
        <div className="as-topbar">
          <div className="as-search-bar">
            {ICON.search}
            <input placeholder="Buscar membro" />
          </div>
          <div className="as-topbar-spacer" />
          <span style={{ fontSize: 13, color: "var(--k-ink-3)" }}>ÁREA DO SÓCIO · {socio.id}</span>
        </div>
        {renderPage()}
      </main>
      {modal && <Modal kind={modal.kind} payload={modal.payload} socio={socio} onClose={closeModal} />}
      {show2FAModal && (
        <TwoFAActivation
          escopo="socio"
          identificador={socio.id}
          nome={socio.nome}
          onClose={() => setShow2FAModal(false)}
          onAtivado={() => setTotpAtivo(true)}
        />
      )}
      {legalDoc && <LegalDoc kind={legalDoc} onClose={() => setLegalDoc(null)} />}
    </div>
  );
}

Object.assign(window, { LoginScreen, Modal, AreaSocioShell });