/**
 * Entrar — email e password. Quem entra define o que pode fazer
 * (administrador, atualiza itens, só consulta).
 */

function ScreenLogin({ onEntrar }) {
  const [email, setEmail] = React.useState(() => lerPreferencia('email', ''));
  const [password, setPassword] = React.useState('');
  const [erro, setErro] = React.useState('');
  const [aEntrar, setAEntrar] = React.useState(false);

  async function entrar(ev) {
    ev.preventDefault();
    setErro('');
    setAEntrar(true);
    try {
      await api.post('/api/login', { email: email.trim(), password });
      guardarPreferencia('email', email.trim());
      onEntrar();
    } catch (err) {
      setErro(err.message);
      setAEntrar(false);
    }
  }

  return (
    <main className="flex min-h-screen items-center justify-center px-4">
      <form onSubmit={entrar} className="border bg-card w-full max-w-sm p-6" noValidate>
        <div className="mb-6 flex items-center gap-3">
          <img src="/assets/simbolo-netscreen.svg" alt="" width="36" height="26" />
          <div>
            <h1 className="text-lg font-semibold leading-tight">Lista de Itens</h1>
            <p className="text-xs text-muted-foreground">NetScreen</p>
          </div>
        </div>
        <label className="block">
          <span className="mb-1.5 block text-sm font-medium">Email</span>
          <input className="campo" type="email" autoComplete="username" value={email} onChange={(e) => setEmail(e.target.value)} autoFocus={!email} required />
        </label>
        <label className="mt-4 block">
          <span className="mb-1.5 block text-sm font-medium">Password</span>
          <input className="campo" type="password" autoComplete="current-password" value={password} onChange={(e) => setPassword(e.target.value)} autoFocus={!!email} required />
        </label>
        {erro && <p role="alert" className="mt-4 text-sm text-[hsl(var(--offline))]">{erro}</p>}
        <button type="submit" className={`${BOTAO_PRIMARIO} mt-6 w-full justify-center`} disabled={aEntrar || !email || !password}>
          {aEntrar ? 'A entrar…' : 'Entrar'}
        </button>
        <p className="mt-4 text-xs text-muted-foreground">Sem password? Pede ao Bruno.</p>
      </form>
    </main>
  );
}