// Auth flow: Login → first-time setup → forgot password
// Wired to the real backend via window.API.
const { useState: useStateAuth } = React;
const UIA = window.UI;
const AA = UIA.A;

const AuthScreen = ({ onLogin }) => {
  const [step, setStep] = useStateAuth("login"); // login | first | forgot
  const [user, setUser] = useStateAuth("");
  const [pass, setPass] = useStateAuth("");
  const [pass2, setPass2] = useStateAuth("");
  const [err, setErr] = useStateAuth("");
  const [busy, setBusy] = useStateAuth(false);

  const handleLogin = async () => {
    setErr("");
    if (!user) { setErr("Informe o nome de usuário"); return; }
    if (!pass) { setErr("Informe a senha"); return; }
    setBusy(true);
    try {
      const r = await window.API.login(user, pass);
      if (r.needs_setup) {
        // Password not yet set — bounce to first-access flow with username preserved
        setStep("first");
        setPass(""); setPass2("");
        setErr("");
      } else {
        window.API.token.set(r.token);
        window.API.user.set(r.user);
        onLogin(r.user.role, r.user);
      }
    } catch (e) {
      if (e.status === 401) setErr("Usuário ou senha inválidos.");
      else if (e.status === 429) {
        const wait = e.body?.retry_seconds || 900;
        const mins = Math.ceil(wait / 60);
        setErr(`Muitas tentativas. Aguarde ${mins} minuto${mins > 1 ? "s" : ""} antes de tentar novamente.`);
      }
      else setErr("Erro de conexão. Tente novamente.");
    } finally {
      setBusy(false);
    }
  };

  const handleFirstPass = async () => {
    setErr("");
    if (!user) { setErr("Informe o usuário"); return; }
    if (pass.length < 6) { setErr("Senha deve ter ao menos 6 caracteres"); return; }
    if (pass !== pass2) { setErr("As senhas não conferem"); return; }
    setBusy(true);
    try {
      const r = await window.API.setupPassword(user, pass);
      window.API.token.set(r.token);
      window.API.user.set(r.user);
      onLogin(r.user.role, r.user);
    } catch (e) {
      if (e.status === 404) setErr("Usuário não encontrado. Verifique com o administrador.");
      else if (e.status === 409) setErr("Esse usuário já tem senha cadastrada. Use 'Entrar' ou solicite redefinição ao admin.");
      else setErr("Não foi possível criar a senha. Tente novamente.");
    } finally {
      setBusy(false);
    }
  };

  return (
    <div style={{position:"relative", minHeight:"100vh", display:"flex", alignItems:"center", justifyContent:"center", padding:24, overflow:"hidden"}}>
      <UIA.RefineryBg/>
      <div style={{position:"absolute", inset:0, background:"linear-gradient(135deg, rgba(0,78,45,0.55), rgba(8,26,18,0.65))", zIndex:1}}/>

      <div style={{position:"relative", zIndex:2, display:"grid", gridTemplateColumns:"1fr 1fr", gap:48, maxWidth:1100, width:"100%", alignItems:"center"}} className="auth-grid">
        <div style={{color:"#fff", paddingRight:24}} className="auth-brand">
          <div style={{marginBottom:36, display:"inline-flex"}}>
            <UIA.AbendiBrandCard height={28} padding="12px 18px"/>
          </div>
          <h1 style={{fontSize:46, fontWeight:700, lineHeight:1.05, letterSpacing:"-0.025em", margin:"0 0 18px", fontFamily:'"Plus Jakarta Sans", sans-serif'}}>
            Plataforma de<br/>Treinamento em<br/><span style={{color:AA.gold}}>Inspeção Visual</span>
          </h1>
          <p style={{fontSize:16, lineHeight:1.55, color:"rgba(255,255,255,0.78)", maxWidth:440, margin:"0 0 28px"}}>
            Acompanhe o desempenho de alunos em simulações de inspeção industrial — tubulações, vasos de pressão e ensaios não destrutivos.
          </p>
        </div>

        <UIA.Glass padding={32} style={{maxWidth:440, width:"100%", justifySelf:"end"}}>
          {step === "login" && (
            <>
              <h2 style={{margin:"0 0 6px", fontSize:22, fontWeight:600, color:AA.ink, fontFamily:'"Plus Jakarta Sans", sans-serif'}}>Acessar plataforma</h2>
              <p style={{margin:"0 0 22px", fontSize:14, color:AA.inkSoft}}>Entre com seu usuário institucional e senha.</p>
              <form onSubmit={(e) => { e.preventDefault(); handleLogin(); }} style={{display:"flex", flexDirection:"column", gap:14}}>
                <UIA.Input label="Usuário" icon="user" placeholder="ex: ST120341" value={user} onChange={e => setUser(e.target.value)} name="username" autoComplete="username"/>
                <UIA.Input label="Senha" icon="lock" type="password" placeholder="••••••••" value={pass} onChange={e => setPass(e.target.value)} name="password" autoComplete="current-password"/>
                {err && <div style={{padding:10, background:"rgba(184,51,31,0.08)", border:"1px solid rgba(184,51,31,0.2)", borderRadius:8, fontSize:13, color:AA.danger, display:"flex", gap:8, alignItems:"flex-start"}}><UIA.Icon name="alert" size={16}/>{err}</div>}
                <UIA.Button fullWidth size="lg" type="submit" iconRight="arrow" disabled={busy}>{busy ? "Entrando…" : "Entrar"}</UIA.Button>
                <div style={{display:"flex", justifyContent:"space-between", fontSize:13, marginTop:4}}>
                  <button type="button" onClick={() => { setStep("first"); setErr(""); }} style={{background:"none", border:"none", color:AA.green, fontWeight:600, cursor:"pointer", padding:0, fontSize:13}}>Primeiro acesso</button>
                  <button type="button" onClick={() => { setStep("forgot"); setErr(""); }} style={{background:"none", border:"none", color:AA.inkSoft, cursor:"pointer", padding:0, fontSize:13}}>Esqueci minha senha</button>
                </div>
              </form>
            </>
          )}

          {step === "first" && (
            <>
              <button type="button" onClick={() => { setStep("login"); setErr(""); }} style={{background:"none", border:"none", color:AA.inkSoft, cursor:"pointer", padding:0, fontSize:13, marginBottom:14, display:"inline-flex", alignItems:"center", gap:6}}><UIA.Icon name="arrowLeft" size={14}/>Voltar</button>
              <h2 style={{margin:"0 0 6px", fontSize:22, fontWeight:600, color:AA.ink, fontFamily:'"Plus Jakarta Sans", sans-serif'}}>Criar senha de acesso</h2>
              <p style={{margin:"0 0 22px", fontSize:14, color:AA.inkSoft}}>Seu usuário foi cadastrado pela administração. Defina uma senha para começar a usar a plataforma.</p>
              <form onSubmit={(e) => { e.preventDefault(); handleFirstPass(); }} style={{display:"flex", flexDirection:"column", gap:14}}>
                <UIA.Input label="Usuário institucional" icon="user" placeholder="ex: ST120341" value={user} onChange={e => setUser(e.target.value)} name="username" autoComplete="username"/>
                <UIA.Input label="Nova senha" icon="lock" type="password" placeholder="mínimo 6 caracteres" value={pass} onChange={e => setPass(e.target.value)} name="new-password" autoComplete="new-password"/>
                <UIA.Input label="Confirmar senha" icon="lock" type="password" placeholder="repita a senha" value={pass2} onChange={e => setPass2(e.target.value)} name="confirm-password" autoComplete="new-password"/>
                {err && <div style={{padding:10, background:"rgba(184,51,31,0.08)", border:"1px solid rgba(184,51,31,0.2)", borderRadius:8, fontSize:13, color:AA.danger}}>{err}</div>}
                <UIA.Button fullWidth size="lg" type="submit" iconRight="check" disabled={busy}>{busy ? "Criando…" : "Criar senha e entrar"}</UIA.Button>
              </form>
            </>
          )}

          {step === "forgot" && (
            <>
              <button type="button" onClick={() => setStep("login")} style={{background:"none", border:"none", color:AA.inkSoft, cursor:"pointer", padding:0, fontSize:13, marginBottom:14, display:"inline-flex", alignItems:"center", gap:6}}><UIA.Icon name="arrowLeft" size={14}/>Voltar</button>
              <h2 style={{margin:"0 0 6px", fontSize:22, fontWeight:600, color:AA.ink, fontFamily:'"Plus Jakarta Sans", sans-serif'}}>Esqueci minha senha</h2>
              <p style={{margin:"0 0 22px", fontSize:14, color:AA.inkSoft}}>Por questões de simplicidade, a redefinição é feita pelo administrador da instituição.</p>
              <div style={{padding:18, background:"rgba(0,78,45,0.06)", border:"1px solid rgba(0,78,45,0.18)", borderRadius:10, marginBottom:18}}>
                <div style={{display:"flex", gap:12, alignItems:"flex-start"}}>
                  <div style={{color:AA.green, marginTop:2}}><UIA.Icon name="info" size={20}/></div>
                  <div style={{fontSize:13, color:AA.ink, lineHeight:1.55}}>
                    <b>Como funciona:</b> entre em contato com o administrador da sua instituição. Após confirmar sua identidade, ele removerá sua senha atual e, no próximo acesso, você criará uma nova.
                  </div>
                </div>
              </div>
              <UIA.Button fullWidth variant="primary" icon="arrowLeft" onClick={() => setStep("login")}>Voltar para o login</UIA.Button>
            </>
          )}
        </UIA.Glass>
      </div>

      <div style={{position:"absolute", bottom:18, left:0, right:0, display:"flex", flexDirection:"column", alignItems:"center", gap:8, color:"rgba(255,255,255,0.45)", fontSize:11, zIndex:2, letterSpacing:"0.05em"}}>
        <div>ABENDI · Associação Brasileira de Ensaios Não Destrutivos e Inspeção · v1.0</div>
        <div style={{display:"flex", alignItems:"center", gap:8, opacity:0.85}}>
          <span style={{textTransform:"uppercase", fontSize:10}}>Desenvolvido por</span>
          <UIA.RysaxMark size={14} tone="mono"/>
        </div>
      </div>
    </div>
  );
};

window.AuthScreen = AuthScreen;