/* O Tal Picolé — Tela de login (Supabase Auth)
 *
 * Renderizada por App quando não há sessão ativa.
 * Após login, App busca o staff via email e carrega permissions.
 */

function LoginScreen({ onLoggedIn }) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [loading, setLoading] = useState(false);
  const [err, setErr] = useState("");

  const submit = async (e) => {
    if (e) e.preventDefault();
    if (!email || !password) { setErr("Preencha email e senha."); return; }
    if (!window.supa) { setErr("Conexão Supabase não configurada."); return; }
    setLoading(true); setErr("");
    const { data, error } = await window.supa.auth.signInWithPassword({ email: email.trim(), password });
    setLoading(false);
    if (error) {
      setErr(error.message === "Invalid login credentials" ? "Email ou senha incorretos." : error.message);
      return;
    }
    onLoggedIn?.(data);
  };

  return (
    <div style={{
      minHeight: "100vh",
      display: "flex", alignItems: "center", justifyContent: "center",
      background: "linear-gradient(135deg, #FFF1EA 0%, #FBFAF9 60%, #FEF3E2 100%)",
      padding: 20,
    }}>
      <div style={{
        width: "100%", maxWidth: 380,
        background: "white",
        borderRadius: 16,
        padding: "36px 32px",
        boxShadow: "0 10px 40px -10px rgba(212,49,11,0.18), 0 4px 12px -4px rgba(0,0,0,0.05)",
        border: "1px solid var(--line)",
      }}>
        <div style={{ display: "flex", justifyContent: "center", marginBottom: 18 }}>
          <Logo size={56} />
        </div>
        <h1 style={{
          margin: 0, textAlign: "center",
          fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 700,
          color: "var(--ink-900)", letterSpacing: "-.02em",
        }}>O Tal Picolé</h1>
        <p className="subtle" style={{ textAlign: "center", margin: "6px 0 28px", fontSize: 12, letterSpacing: ".14em", textTransform: "uppercase", fontWeight: 600 }}>
          Painel de Gestão
        </p>

        <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <Field label="Email" required>
            <input
              className="input"
              type="email"
              value={email}
              onChange={e => setEmail(e.target.value)}
              autoComplete="email"
              autoFocus
              placeholder="seu@email.com"
            />
          </Field>
          <Field label="Senha" required>
            <input
              className="input"
              type="password"
              value={password}
              onChange={e => setPassword(e.target.value)}
              autoComplete="current-password"
              placeholder="••••••••"
            />
          </Field>

          {err && (
            <div style={{
              padding: "10px 12px",
              background: "var(--danger-bg)",
              color: "var(--danger)",
              borderRadius: 8,
              fontSize: 12.5,
              display: "flex", alignItems: "center", gap: 8,
            }}>
              <Icons.AlertTriangle size={14} />
              {err}
            </div>
          )}

          <Button variant="primary" type="submit" disabled={loading} style={{ marginTop: 4, justifyContent: "center" }}>
            {loading ? "Entrando..." : "Entrar"}
          </Button>
        </form>

        <div className="subtle" style={{ marginTop: 24, fontSize: 11, textAlign: "center", lineHeight: 1.6 }}>
          Sem conta? Peça ao administrador para criar.<br/>
          A criação de contas é feita pelo painel Supabase.
        </div>
      </div>
    </div>
  );
}

window.LoginScreen = LoginScreen;