/* global React, Icon, Modal */

// ============================================================================
// Auth screens — Login, Signup (with invite token), Forgot password
// ============================================================================

const AuthArt = () => (
  <div className="auth-art">
    <div className="auth-art-inner">
      <div className="auth-logo">
        <img src="assets/logo-full.png" alt="Edson Lima" />
      </div>
      <div>
        <div style={{ fontSize: 11, letterSpacing: '0.32em', textTransform:'uppercase', color: 'var(--gold-bright)', fontWeight: 700, marginBottom: 22 }}>
          Núcleo de Líderes
        </div>
        <h1>O <span className="blue">corredor</span><br/>dos que decidem.</h1>
        <p style={{ color: 'var(--text-muted)', marginTop: 22, fontSize: 15, lineHeight: 1.55, maxWidth: 480 }}>
          Área restrita do programa de mentoria. Acesso somente por convite — se você está aqui, foi aceito.
        </p>
      </div>
      <div className="quote">
        Não treino executivos para serem melhores executivos. Treino para que parem de fugir do que já sabem que precisam decidir.
        <span>— Edson Lima</span>
      </div>
    </div>
  </div>
);

const LoginScreen = ({ onLogin, nav }) => {
  const [email, setEmail] = React.useState('');
  const [pwd, setPwd] = React.useState('');
  const [showPwd, setShowPwd] = React.useState(false);
  const [err, setErr] = React.useState('');
  const [loading, setLoading] = React.useState(false);

  const submit = (e) => {
    e.preventDefault();
    setErr(''); setLoading(true);
    setTimeout(() => {
      const r = DB.login(email, pwd);
      setLoading(false);
      if (!r.ok) { setErr(r.error); return; }
      onLogin(r.user);
    }, 350);
  };

  const quickLogin = (em, pw) => { setEmail(em); setPwd(pw); };

  return (
    <div className="auth-shell">
      <AuthArt />
      <div className="auth-form-side">
        <form className="auth-form" onSubmit={submit}>
          <div className="auth-eyebrow">Acesso de membro</div>
          <h2>Entrar na plataforma</h2>
          <p className="lead">Bem-vindo de volta. Continue de onde parou.</p>

          {err && <div className="alert alert-error"><Icon name="lock" size={16}/><div>{err}</div></div>}

          <div className="field">
            <label>E-mail</label>
            <input type="email" value={email} onChange={e=>setEmail(e.target.value)} placeholder="seu@email.com" required />
          </div>
          <div className="field">
            <label>Senha</label>
            <div style={{ position: 'relative' }}>
              <input type={showPwd ? 'text' : 'password'} value={pwd} onChange={e=>setPwd(e.target.value)} placeholder="••••••••" required style={{ paddingRight: 44, width:'100%' }} />
              <button type="button" onClick={()=>setShowPwd(s=>!s)}
                style={{ position:'absolute', right:10, top:'50%', transform:'translateY(-50%)', color:'var(--text-muted)', padding: 4 }}>
                <Icon name={showPwd ? 'eyeOff':'eye'} size={18}/>
              </button>
            </div>
          </div>

          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 22 }}>
            <label style={{ display:'flex', alignItems:'center', gap: 8, fontSize: 13, color:'var(--text-muted)', cursor:'pointer' }}>
              <input type="checkbox" /> Manter conectado
            </label>
            <a href="#/recuperar" onClick={(e)=>{e.preventDefault(); nav('/recuperar');}} style={{ fontSize: 13, color:'var(--blue-bright)', fontWeight:600 }}>Esqueci minha senha</a>
          </div>

          <button type="submit" className="btn-primary" disabled={loading}>
            {loading ? 'Entrando…' : 'Entrar'} {!loading && <Icon name="arrow" size={14}/>}
          </button>

          <div className="auth-footer-divider"/>

          <div className="auth-footer">
            Recebeu um convite do Edson?{' '}
            <a href="#/cadastro" onClick={(e)=>{e.preventDefault(); nav('/cadastro');}}>Criar conta com token</a>
            <div style={{ marginTop: 14, fontSize: 11.5, color: 'var(--text-muted-2)', letterSpacing: '0.04em' }}>
              Ao entrar você concorda com os{' '}
              <a href="#/termos" onClick={(e)=>{e.preventDefault(); nav('/termos');}}>Termos de Uso</a>
              {' '}e a{' '}
              <a href="#/privacidade" onClick={(e)=>{e.preventDefault(); nav('/privacidade');}}>Política de Privacidade</a>.
            </div>
          </div>

          <div style={{ marginTop: 28, padding: 14, background: 'rgba(212,165,90,0.06)', border:'1px solid rgba(212,165,90,0.2)', borderRadius: 6, fontSize: 12.5, color:'var(--text-muted)' }}>
            <div style={{ fontWeight: 700, color: 'var(--gold-bright)', letterSpacing: '0.12em', textTransform: 'uppercase', fontSize: 10.5, marginBottom: 8 }}>Acesso de demonstração</div>
            <div style={{ display:'flex', flexDirection:'column', gap: 6 }}>
              <button type="button" onClick={()=>quickLogin('edson@nucleolideres.com.br','admin123')} style={{ textAlign:'left', color:'var(--text-light)' }}>
                <b>Admin:</b> edson@nucleolideres.com.br <span style={{color:'var(--text-muted-2)'}}>/ admin123</span>
              </button>
              <button type="button" onClick={()=>quickLogin('carla@empresa.com.br','123456')} style={{ textAlign:'left', color:'var(--text-light)' }}>
                <b>Membro:</b> carla@empresa.com.br <span style={{color:'var(--text-muted-2)'}}>/ 123456</span>
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  );
};

const SignupScreen = ({ onLogin, nav }) => {
  const [form, setForm] = React.useState({ name: '', email: '', password: '', inviteToken: '' });
  const [consents, setConsents] = React.useState({ termsOfUse: false, privacyPolicy: false, marketingEmails: false });
  const [err, setErr] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const [showPwd, setShowPwd] = React.useState(false);

  const submit = (e) => {
    e.preventDefault();
    setErr(''); setLoading(true);
    setTimeout(() => {
      const r = DB.signup({ ...form, consents });
      setLoading(false);
      if (!r.ok) { setErr(r.error); return; }
      onLogin(r.user);
    }, 350);
  };

  return (
    <div className="auth-shell">
      <AuthArt />
      <div className="auth-form-side">
        <form className="auth-form" onSubmit={submit}>
          <div className="auth-eyebrow">Convite aceito</div>
          <h2>Criar sua conta</h2>
          <p className="lead">Você foi aprovado. Agora vamos configurar seu acesso ao programa.</p>

          {err && <div className="alert alert-error"><Icon name="lock" size={16}/><div>{err}</div></div>}

          <div className="field">
            <label>Token de convite</label>
            <input type="text" value={form.inviteToken} onChange={e=>setForm({...form, inviteToken: e.target.value})} placeholder="INV-XXXX-XXXXX" required style={{ fontFamily:'JetBrains Mono, monospace', letterSpacing:'0.08em' }} />
            <div className="hint">Token enviado pelo Edson após aprovação da sua candidatura. Tente <code>INV-7K3M-LIDER</code> para testar.</div>
          </div>

          <div className="field">
            <label>Nome completo</label>
            <input type="text" value={form.name} onChange={e=>setForm({...form, name: e.target.value})} required />
          </div>

          <div className="field">
            <label>E-mail</label>
            <input type="email" value={form.email} onChange={e=>setForm({...form, email: e.target.value})} placeholder="seu@email.com" required />
          </div>

          <div className="field">
            <label>Senha (mínimo 6 caracteres)</label>
            <div style={{ position: 'relative' }}>
              <input type={showPwd ? 'text' : 'password'} value={form.password} onChange={e=>setForm({...form, password: e.target.value})} required minLength={6} style={{ paddingRight: 44, width:'100%' }} />
              <button type="button" onClick={()=>setShowPwd(s=>!s)}
                style={{ position:'absolute', right:10, top:'50%', transform:'translateY(-50%)', color:'var(--text-muted)', padding: 4 }}>
                <Icon name={showPwd ? 'eyeOff':'eye'} size={18}/>
              </button>
            </div>
          </div>

          <ConsentCheckboxes value={consents} onChange={setConsents} nav={nav}/>

          <button type="submit" className="btn-primary" disabled={loading || !consents.termsOfUse || !consents.privacyPolicy}>
            {loading ? 'Criando…' : 'Criar conta'} {!loading && <Icon name="arrow" size={14}/>}
          </button>

          <div className="auth-footer-divider"/>
          <div className="auth-footer">
            Já tem conta?{' '}
            <a href="#/login" onClick={(e)=>{e.preventDefault(); nav('/login');}}>Entrar</a>
          </div>
        </form>
      </div>
    </div>
  );
};

const RecoverScreen = ({ nav }) => {
  const [email, setEmail] = React.useState('');
  const [msg, setMsg] = React.useState('');
  const [err, setErr] = React.useState('');
  const [loading, setLoading] = React.useState(false);

  const submit = (e) => {
    e.preventDefault();
    setErr(''); setMsg(''); setLoading(true);
    setTimeout(() => {
      const r = DB.recover(email);
      setLoading(false);
      if (!r.ok) { setErr(r.error); return; }
      setMsg(r.message);
    }, 400);
  };

  return (
    <div className="auth-shell">
      <AuthArt />
      <div className="auth-form-side">
        <form className="auth-form" onSubmit={submit}>
          <div className="auth-eyebrow">Recuperação de acesso</div>
          <h2>Esqueceu a senha?</h2>
          <p className="lead">Informe seu e-mail e enviaremos um link para você criar uma nova senha.</p>

          {err && <div className="alert alert-error"><Icon name="lock" size={16}/><div>{err}</div></div>}
          {msg && <div className="alert alert-success"><Icon name="check" size={16}/><div>{msg}</div></div>}

          <div className="field">
            <label>E-mail cadastrado</label>
            <input type="email" value={email} onChange={e=>setEmail(e.target.value)} placeholder="seu@email.com" required />
          </div>

          <button type="submit" className="btn-primary" disabled={loading || !!msg}>
            {loading ? 'Enviando…' : (msg ? 'Link enviado' : 'Enviar link de recuperação')}
          </button>

          <div className="auth-footer-divider"/>
          <div className="auth-footer">
            <a href="#/login" onClick={(e)=>{e.preventDefault(); nav('/login');}}>← Voltar para o login</a>
          </div>
        </form>
      </div>
    </div>
  );
};

Object.assign(window, { LoginScreen, SignupScreen, RecoverScreen });