/* ============================================================
   Cadastro (Signup) page — full validation + persistence
   ============================================================ */

function CadastroPage() {
  const { signup, currentUser } = useAuth();
  const { params } = useHashRoute();
  const nextPath = params.next ? decodeURIComponent(params.next) : '/dashboard';
  const isGated = !!params.next;
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [accept, setAccept] = useState(false);
  const [news, setNews] = useState(true);
  const [touched, setTouched] = useState({});
  const [submitted, setSubmitted] = useState(false);
  const [serverError, setServerError] = useState(null);
  const [success, setSuccess] = useState(false);

  useEffect(() => {
    if (currentUser && !success) {
      // already logged in
      nav(nextPath);
    }
  }, [currentUser, success]);

  const errors = {
    name: !isValidFullName(name) ? 'Informe seu nome completo (nome e sobrenome).' : null,
    email: !isValidEmail(email) ? 'E-mail inválido.' : null,
    phone: !isValidPhoneBR(phone) ? 'Celular deve estar no formato (DD) NNNNN-NNNN.' : null,
    accept: !accept ? 'É necessário aceitar os termos.' : null,
  };
  const hasErrors = Object.values(errors).some(Boolean);

  const onSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
    setServerError(null);
    if (hasErrors) return;
    const r = signup({ name: name.trim(), email: email.trim(), phone, news });
    if (!r.ok) { setServerError(r.error); return; }
    setSuccess(true);
    setTimeout(() => nav(nextPath), 1400);
  };

  const show = (field) => (submitted || touched[field]) && errors[field];

  if (success) {
    return (
      <Page fullBleed>
        <div className="auth-stage">
          <aside className="auth-aside">
              <div>
              <div className="eyebrow eyebrow-accent" style={{color: 'var(--accent)'}}>Cadastro confirmado</div>
              <h2 style={{marginTop: 'var(--s-3)'}}>
                Bem-vindo ao Instituto Brasileiro de Derivativos.
              </h2>
              <p className="auth-aside-quote">
                Sua conta foi criada com sucesso. Estamos redirecionando você para o seu painel.
              </p>
            </div>
            <div className="auth-aside-foot">IBD · 2026</div>
          </aside>
          <div className="auth-form-wrap" style={{justifyContent: 'center'}}>
            <div className="notice notice-success">
              <div>
                <strong>Cadastro realizado.</strong> Você será redirecionado em instantes.
              </div>
            </div>
            <Link to={nextPath} className="btn" style={{marginTop: 'var(--s-4)', alignSelf: 'flex-start'}}>
              Ir para o painel agora <span className="icon-arrow"></span>
            </Link>
          </div>
        </div>
      </Page>
    );
  }

  return (
    <Page fullBleed>
      <div className="auth-stage">
        <aside className="auth-aside">
          <div>
            <div className="eyebrow eyebrow-accent" style={{color: 'var(--accent)'}}>Criar conta gratuita</div>
            <h2 style={{marginTop: 'var(--s-3)'}}>
              Educação técnica em derivativos, com rigor e linguagem clara.
            </h2>
            <p className="auth-aside-quote">
              "A alfabetização em mercados derivativos não deve ser privilégio.
              É infraestrutura cognitiva para uma economia minimamente desenvolvida."
            </p>
            <p style={{fontSize: 13, opacity: 0.6, marginTop: 'var(--s-4)'}}>
              — Manifesto fundacional do IBD
            </p>
          </div>
          <div className="auth-aside-foot">IBD · Fundação Educativa · 2026</div>
        </aside>

        <div className="auth-form-wrap">
          <div className="crumb" style={{marginBottom: 'var(--s-4)'}}>
            <a href="#/">Início</a>
            <span className="crumb-sep"></span>
            <span>Cadastro</span>
          </div>
          <h1>Criar conta</h1>
          <p className="auth-sub">
            Acesso integral aos conteúdos, vídeo-aulas e ferramentas analíticas.
            Sem cobrança, sem cartão de crédito.
          </p>

          {isGated && (
            <div className="auth-gate-notice">
              <strong>Conteúdo exclusivo a membros.</strong> Crie sua conta gratuita para continuar.
            </div>
          )}

          {serverError && (
            <div className="notice notice-error" style={{marginBottom: 'var(--s-4)'}}>
              <div><strong>Não foi possível concluir o cadastro.</strong> {serverError}</div>
            </div>
          )}

          <form onSubmit={onSubmit} noValidate>
            <div className="form-field">
              <label htmlFor="name">Nome completo</label>
              <input
                id="name"
                className={'form-input' + (show('name') ? ' error' : '')}
                value={name}
                onChange={e => setName(e.target.value)}
                onBlur={() => setTouched(t => ({...t, name: true}))}
                placeholder="Maria de Souza Lima"
                autoComplete="name"
              />
              {show('name') && <div className="form-error">{errors.name}</div>}
            </div>

            <div className="form-field">
              <label htmlFor="email">E-mail</label>
              <input
                id="email"
                type="email"
                className={'form-input' + (show('email') ? ' error' : '')}
                value={email}
                onChange={e => setEmail(e.target.value)}
                onBlur={() => setTouched(t => ({...t, email: true}))}
                placeholder="maria.lima@exemplo.com.br"
                autoComplete="email"
              />
              {show('email') && <div className="form-error">{errors.email}</div>}
            </div>

            <div className="form-field">
              <label htmlFor="phone">Celular com DDD</label>
              <input
                id="phone"
                className={'form-input mono' + (show('phone') ? ' error' : '')}
                value={phone}
                onChange={e => setPhone(maskPhoneBR(e.target.value))}
                onBlur={() => setTouched(t => ({...t, phone: true}))}
                placeholder="(11) 98765-4321"
                inputMode="tel"
                autoComplete="tel-national"
                maxLength={16}
              />
              {show('phone') ? (
                <div className="form-error">{errors.phone}</div>
              ) : (
                <div className="form-hint">Formato (DD) NNNNN-NNNN. Usaremos apenas para comunicação institucional.</div>
              )}
            </div>

            <label className="form-check">
              <input type="checkbox" checked={accept} onChange={e => setAccept(e.target.checked)} />
              <span>
                Li e aceito os <a href="#" className="link">Termos de Uso</a> e a{' '}
                <a href="#" className="link">Política de Privacidade</a> do Instituto Brasileiro de Derivativos.
              </span>
            </label>
            {show('accept') && <div className="form-error" style={{marginTop: -8, marginBottom: 'var(--s-4)'}}>{errors.accept}</div>}

            <label className="form-check">
              <input type="checkbox" checked={news} onChange={e => setNews(e.target.checked)} />
              <span>Quero receber a newsletter editorial quinzenal do IBD.</span>
            </label>

            <button type="submit" className="btn btn-lg" style={{width: '100%', justifyContent: 'center', marginTop: 'var(--s-4)'}}>
              Criar conta gratuita
            </button>

            <p style={{textAlign: 'center', marginTop: 'var(--s-5)', color: 'var(--fg-muted)', fontSize: 14}}>
              Já tem uma conta? <Link to={'/login' + (isGated ? '?next=' + encodeURIComponent(nextPath) : '')} className="link">Entrar</Link>
            </p>
          </form>
        </div>
      </div>
    </Page>
  );
}

/* ============================================================
   Login
   ============================================================ */
function LoginPage() {
  const { login, currentUser } = useAuth();
  const { params } = useHashRoute();
  const nextPath = params.next ? decodeURIComponent(params.next) : '/dashboard';
  const isGated = !!params.next;
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [submitted, setSubmitted] = useState(false);
  const [serverError, setServerError] = useState(null);

  useEffect(() => {
    if (currentUser) nav(nextPath);
  }, [currentUser]);

  const onSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
    setServerError(null);
    if (!isValidEmail(email)) return;
    const r = login(email, password);
    if (!r.ok) { setServerError(r.error); return; }
    nav(nextPath);
  };

  const cadastroHref = '/cadastro' + (isGated ? '?next=' + encodeURIComponent(nextPath) : '');

  return (
    <Page fullBleed>
      <div className="auth-stage">
        <aside className="auth-aside">
          <div>
            <div className="eyebrow eyebrow-accent" style={{color: 'var(--accent)'}}>Entrar</div>
            <h2 style={{marginTop: 'var(--s-3)'}}>
              Tenha acesso a mais conteúdos do Instituto.
            </h2>
            <p className="auth-aside-quote">
              Membros do Instituto Brasileiro de Derivativos acompanham as próximas
              ferramentas analíticas em desenvolvimento, recebem a newsletter editorial
              quinzenal e têm prioridade no acesso aos novos materiais publicados.
            </p>
          </div>
          <div className="auth-aside-foot">IBD · Fundação Educativa · 2026</div>
        </aside>

        <div className="auth-form-wrap">
          <div className="crumb" style={{marginBottom: 'var(--s-4)'}}>
            <a href="#/">Início</a>
            <span className="crumb-sep"></span>
            <span>Entrar</span>
          </div>
          <h1>Entrar na sua conta</h1>
          <p className="auth-sub">Use o e-mail cadastrado para acessar seu painel.</p>

          {isGated && (
            <div className="auth-gate-notice">
              <strong>Conteúdo exclusivo a membros.</strong> Entre na sua conta ou{' '}
              <Link to={cadastroHref} className="link">cadastre-se gratuitamente</Link>{' '}
              para continuar.
            </div>
          )}

          {serverError && (
            <div className="notice notice-error" style={{marginBottom: 'var(--s-4)'}}>
              <div><strong>Erro de autenticação.</strong> {serverError}</div>
            </div>
          )}

          <form onSubmit={onSubmit} noValidate>
            <div className="form-field">
              <label htmlFor="lemail">E-mail</label>
              <input
                id="lemail"
                type="email"
                className={'form-input' + (submitted && !isValidEmail(email) ? ' error' : '')}
                value={email}
                onChange={e => setEmail(e.target.value)}
                autoComplete="email"
              />
              {submitted && !isValidEmail(email) && <div className="form-error">E-mail inválido.</div>}
            </div>

            <div className="form-field">
              <label htmlFor="lpass">Senha</label>
              <input
                id="lpass"
                type="password"
                className="form-input"
                value={password}
                onChange={e => setPassword(e.target.value)}
                autoComplete="current-password"
              />
              <div className="form-hint">Protótipo: a senha não é verificada — basta usar o e-mail cadastrado.</div>
            </div>

            <button type="submit" className="btn btn-lg" style={{width: '100%', justifyContent: 'center', marginTop: 'var(--s-3)'}}>
              Entrar
            </button>

            <p style={{textAlign: 'center', marginTop: 'var(--s-5)', color: 'var(--fg-muted)', fontSize: 14}}>
              Ainda não tem conta? <Link to={cadastroHref} className="link">Criar conta gratuita</Link>
            </p>
          </form>
        </div>
      </div>
    </Page>
  );
}

window.CadastroPage = CadastroPage;
window.LoginPage = LoginPage;