/* Auth: login, signup, forgot password */
const { useState } = React;

function Field({ label, type = 'text', icon, placeholder, value, onChange, toggle }) {
  const [show, setShow] = useState(false);
  const realType = toggle ? (show ? 'text' : 'password') : type;
  return (
    <div className="field">
      <label>{label}</label>
      <div className="input-shell">
        {icon && <Icon name={icon} size={19} />}
        <input
          type={realType}
          placeholder={placeholder}
          value={value}
          onChange={(e) => onChange && onChange(e.target.value)}
        />
        {toggle && (
          <button type="button" className="ghost-icon-btn" onClick={() => setShow((s) => !s)} aria-label="Mostrar senha">
            <Icon name={show ? 'eyeOff' : 'eye'} size={19} />
          </button>
        )}
      </div>
    </div>
  );
}

function AuthAside() {
  return (
    <aside className="auth-aside">
      <span className="auth-blob b1" />
      <span className="auth-blob b2" />
      <span className="auth-blob b3" />
      <Wordmark />
      <div className="auth-aside-body">
        <h2>Fale inglês com confiança em seis meses.</h2>
        <p>Conversas guiadas, correção em tempo real e um plano que cabe em 15 minutos por dia.</p>
      </div>
      <div className="auth-aside-foot">
        <div><strong>15 min</strong>por dia</div>
        <div><strong>6 meses</strong>de plano</div>
        <div><strong>+1.200</strong>frases úteis</div>
      </div>
    </aside>
  );
}

function LoginScreen({ go, onLogin }) {
  const [email, setEmail] = useState('');
  const [pass, setPass] = useState('');
  const [remember, setRemember] = useState(true);
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  return (
    <div className="auth">
      <AuthAside />
      <main className="auth-main">
        <div className="auth-form-wrap">
          <h1>Bem-vindo de volta</h1>
          <p className="sub">Entre para continuar seu treino de hoje.</p>
          <form className="auth-form" onSubmit={async (e) => {
            e.preventDefault();
            setError('');
            setLoading(true);
            try {
              const res = await fetch('/api/login', {
                method: 'POST',
                credentials: 'same-origin',
                headers: { 'content-type': 'application/json' },
                body: JSON.stringify({ email, password: pass })
              });
              const data = await res.json();
              if (!res.ok) { setError(data.error || 'Email ou senha incorretos.'); return; }
              onLogin(data.user);
            } catch {
              setError('Erro de conexão. Tente novamente.');
            } finally {
              setLoading(false);
            }
          }}>
            <Field label="Email" icon="mail" placeholder="voce@email.com" value={email} onChange={setEmail} />
            <Field label="Senha" icon="lock" toggle placeholder="Sua senha" value={pass} onChange={setPass} />
            <div className="auth-row">
              <label className="checkbox">
                <input type="checkbox" checked={remember} onChange={(e) => setRemember(e.target.checked)} />
                <span className="box"><Icon name="check" size={13} stroke={2.6} /></span>
                Lembrar de mim
              </label>
              <a className="link" onClick={() => go('forgot')}>Esqueci minha senha</a>
            </div>
            {error && <p style={{ color: 'var(--coral)', fontSize: '14px', margin: '0' }}>{error}</p>}
            <button type="submit" className="btn btn-primary btn-lg btn-block" disabled={loading}>
              {loading ? 'Entrando...' : 'Entrar'}
            </button>
          </form>
          <p className="auth-alt">Ainda não tem conta? <a className="link" onClick={() => go('signup')}>Criar conta</a></p>
        </div>
      </main>
    </div>
  );
}

function SignupScreen({ go }) {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [pass, setPass] = useState('');
  const [agree, setAgree] = useState(false);
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  const [done, setDone] = useState(false);

  if (done) {
    return (
      <div className="auth">
        <AuthAside />
        <main className="auth-main">
          <div className="auth-form-wrap">
            <div className="coach-portrait" style={{ margin: '0 0 20px', background: 'var(--green-soft)', color: 'var(--green)' }}>
              <Icon name="check" size={32} stroke={2.4} />
            </div>
            <h1>Verifique seu email</h1>
            <p className="sub">Enviamos um link de confirmação para <strong style={{ color: 'var(--ink)', fontWeight: 500 }}>{email}</strong>. Clique no link para ativar sua conta.</p>
            <button className="btn btn-primary btn-lg btn-block" style={{ marginTop: '28px' }} onClick={() => go('login')}>
              Ir para o login
            </button>
            <p className="auth-alt" style={{ marginTop: '16px', fontSize: '13px', color: 'var(--ink-faint)' }}>
              Não recebeu? Verifique a pasta de spam.
            </p>
          </div>
        </main>
      </div>
    );
  }

  return (
    <div className="auth">
      <AuthAside />
      <main className="auth-main">
        <div className="auth-form-wrap">
          <h1>Criar sua conta</h1>
          <p className="sub">Comece grátis. Leva menos de um minuto.</p>
          <form className="auth-form" onSubmit={async (e) => {
            e.preventDefault();
            setError('');
            if (!agree) { setError('Aceite os termos para continuar.'); return; }
            setLoading(true);
            try {
              const res = await fetch('/api/signup', {
                method: 'POST',
                credentials: 'same-origin',
                headers: { 'content-type': 'application/json' },
                body: JSON.stringify({ name, email, password: pass })
              });
              const data = await res.json();
              if (!res.ok) { setError(data.error || 'Não foi possível criar a conta.'); return; }
              setDone(true);
            } catch {
              setError('Erro de conexão. Tente novamente.');
            } finally {
              setLoading(false);
            }
          }}>
            <Field label="Nome" icon="user" placeholder="Como podemos te chamar?" value={name} onChange={setName} />
            <Field label="Email" icon="mail" placeholder="voce@email.com" value={email} onChange={setEmail} />
            <Field label="Senha" icon="lock" toggle placeholder="Mínimo 6 caracteres" value={pass} onChange={setPass} />
            <label className="checkbox" style={{ marginTop: '2px' }}>
              <input type="checkbox" checked={agree} onChange={(e) => setAgree(e.target.checked)} />
              <span className="box"><Icon name="check" size={13} stroke={2.6} /></span>
              <span style={{ fontSize: '13.5px', lineHeight: 1.4 }}>Concordo com os <a className="link">Termos</a> e a <a className="link">Política de privacidade</a></span>
            </label>
            {error && <p style={{ color: 'var(--coral)', fontSize: '14px', margin: '0' }}>{error}</p>}
            <button type="submit" className="btn btn-primary btn-lg btn-block" disabled={loading}>
              {loading ? 'Criando conta...' : 'Criar conta'}
            </button>
          </form>
          <p className="auth-alt">Já tem conta? <a className="link" onClick={() => go('login')}>Entrar</a></p>
        </div>
      </main>
    </div>
  );
}

function ForgotScreen({ go }) {
  const [sent, setSent] = useState(false);
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  return (
    <div className="auth">
      <AuthAside />
      <main className="auth-main">
        <div className="auth-form-wrap">
          <a className="back-link" onClick={() => go('login')}>
            <Icon name="arrowRight" size={17} style={{ transform: 'rotate(180deg)' }} /> Voltar para o login
          </a>
          {!sent ? (
            <React.Fragment>
              <h1>Esqueceu a senha?</h1>
              <p className="sub">Digite seu email e enviaremos um link para redefinir sua senha.</p>
              <form className="auth-form" onSubmit={async (e) => {
                e.preventDefault();
                setError('');
                setLoading(true);
                try {
                  const res = await fetch('/api/auth/forgot-password', {
                    method: 'POST',
                    credentials: 'same-origin',
                    headers: { 'content-type': 'application/json' },
                    body: JSON.stringify({ email })
                  });
                  if (!res.ok) {
                    const data = await res.json();
                    setError(data.error || 'Não foi possível enviar o email.');
                    return;
                  }
                  setSent(true);
                } catch {
                  setError('Erro de conexão. Tente novamente.');
                } finally {
                  setLoading(false);
                }
              }}>
                <Field label="Email" icon="mail" placeholder="voce@email.com" value={email} onChange={setEmail} />
                {error && <p style={{ color: 'var(--coral)', fontSize: '14px', margin: '0' }}>{error}</p>}
                <button type="submit" className="btn btn-primary btn-lg btn-block" disabled={loading}>
                  {loading ? 'Enviando...' : 'Enviar link de redefinição'}
                </button>
              </form>
            </React.Fragment>
          ) : (
            <React.Fragment>
              <div className="coach-portrait" style={{ margin: '0 0 20px', background: 'var(--green-soft)', color: 'var(--green)' }}>
                <Icon name="check" size={32} stroke={2.4} />
              </div>
              <h1>Confira seu email</h1>
              <p className="sub">Enviamos um link de redefinição para <strong style={{ color: 'var(--ink)', fontWeight: 500 }}>{email}</strong>. O link expira em 1 hora.</p>
              <button className="btn btn-primary btn-lg btn-block" style={{ marginTop: '28px' }} onClick={() => go('login')}>Voltar para o login</button>
              <p className="auth-alt">Não recebeu? <a className="link" onClick={() => { setSent(false); setError(''); }}>Reenviar</a></p>
            </React.Fragment>
          )}
        </div>
      </main>
    </div>
  );
}

function AuthFlow({ route, go, onLogin }) {
  if (route === 'signup') return <SignupScreen go={go} onLogin={onLogin} />;
  if (route === 'forgot') return <ForgotScreen go={go} />;
  return <LoginScreen go={go} onLogin={onLogin} />;
}

Object.assign(window, { AuthFlow });