// Aria console — schermata di login.
// Layout centrato e sobrio, coerente col design system: canvas off-white, card bianca,
// hairline, brand sage. Usa TextField/Button/Banner esistenti. Una sola azione primaria.
const { Icon, TextField, Button, Banner } = window.AriaDesignSystem_af77ab;

function LoginScreen() {
  const { signIn } = window.AriaAuth.useAuth();
  const [username, setUsername] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [error, setError] = React.useState(null);
  const [loading, setLoading] = React.useState(false);

  async function onSubmit(e) {
    e.preventDefault();
    if (loading) return;
    setError(null);
    setLoading(true);
    try {
      await signIn(username.trim(), password);
      // Al successo l'AuthProvider aggiorna `user`: l'app monta la console.
    } catch (err) {
      // 401 → credenziali non valide; altri errori → messaggio generico dal modulo auth.
      setError(err && err.code === 401 ? "Credenziali non valide" : (err && err.message) || "Accesso non riuscito");
      setLoading(false);
    }
  }

  return (
    <div style={{
      minHeight: "100vh", background: "var(--surface-app)",
      display: "flex", alignItems: "center", justifyContent: "center", padding: 24,
    }}>
      <div style={{ width: "100%", maxWidth: 380 }}>
        {/* Brand */}
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 22, justifyContent: "center" }}>
          <span style={{
            width: 36, height: 36, borderRadius: 10, background: "var(--primary)",
            display: "inline-flex", alignItems: "center", justifyContent: "center", flex: "none",
          }}>
            <Icon name="bot-message-square" size={21} color="#fff" strokeWidth={1.75} />
          </span>
          <span style={{ display: "flex", flexDirection: "column", lineHeight: 1.1 }}>
            <span style={{ font: "var(--fw-semibold) 19px/1 var(--font-sans)", color: "var(--text-strong)", letterSpacing: "-0.01em" }}>Aria</span>
            <span style={{ fontSize: 12, color: "var(--text-subtle)" }}>Console</span>
          </span>
        </div>

        {/* Card */}
        <form onSubmit={onSubmit} style={{
          background: "var(--surface-card)", border: "1px solid var(--border-subtle)",
          borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-sm)",
          padding: 28, display: "flex", flexDirection: "column", gap: 18,
        }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
            <span style={{ font: "var(--text-h2)", color: "var(--text-strong)" }}>Accedi</span>
            <span style={{ fontSize: 13, color: "var(--text-muted)" }}>Inserisci le tue credenziali per continuare.</span>
          </div>

          {error && <Banner tone="danger">{error}</Banner>}

          <TextField
            label="Nome utente"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            autoComplete="username"
            autoFocus
            disabled={loading}
            name="username"
          />
          <TextField
            label="Password"
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            autoComplete="current-password"
            disabled={loading}
            name="password"
          />

          <Button
            type="submit"
            block
            disabled={loading || !username.trim() || !password}
            iconLeft={loading ? <Icon name="loader" /> : undefined}
          >
            {loading ? "Accesso in corso…" : "Accedi"}
          </Button>
        </form>
      </div>
    </div>
  );
}

Object.assign(window, { LoginScreen });