// Login screen — centered auth card with local login form + SSO fallback.
(function () {
  const NS = window.ChicoryTVDesignSystem_eb3b61;
  const { Button, Input, Card } = NS;
  const Ico = window.Ico;
  const mono = { fontFamily: "var(--font-mono)", fontVariantNumeric: "tabular-nums" };

  function Login() {
    const [username, setUsername] = React.useState('');
    const [password, setPassword] = React.useState('');
    const [error, setError] = React.useState(null);
    const [submitting, setSubmitting] = React.useState(false);

    const canSubmit = username.trim().length > 0 && password.length > 0 && !submitting;

    const handleSubmit = (e) => {
      e.preventDefault();
      if (!canSubmit) return;
      setSubmitting(true);
      setError(null);
      // Mock: simulate submission delay
      setTimeout(() => {
        setSubmitting(false);
      }, 2000);
    };

    // Mock config: both local login and SSO enabled
    const config = {
      localLoginEnabled: true,
      oidcEnabled: true
    };

    return (
      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", padding: "20px", background: "var(--ctv-bg)" }}>
        <Card
          title="Welcome back"
          subtitle="Sign in to ChicoryTV"
          padded
          style={{ maxWidth: 420, width: "100%" }}
        >
          {config.localLoginEnabled && (
            <form onSubmit={handleSubmit}>
              <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                <Input
                  label="Username"
                  placeholder="Username"
                  value={username}
                  onChange={(e) => {
                    setUsername(e.target.value);
                    setError(null);
                  }}
                  leadingIcon={<Ico n="User" s={14} />}
                />
                <Input
                  label="Password"
                  type="password"
                  placeholder="Password"
                  value={password}
                  onChange={(e) => {
                    setPassword(e.target.value);
                    setError(null);
                  }}
                  leadingIcon={<Ico n="KeyRound" s={14} />}
                />
              </div>

              {error && (
                <div
                  role="alert"
                  style={{
                    marginTop: 12,
                    padding: "10px 12px",
                    borderRadius: "var(--radius-sm)",
                    background: "var(--ctv-error-soft)",
                    color: "var(--status-error)",
                    font: "var(--text-sm)/1.3 var(--font-sans)"
                  }}
                >
                  {error}
                </div>
              )}

              <div style={{ marginTop: 18 }}>
                <Button
                  variant="primary"
                  fullWidth
                  disabled={!canSubmit}
                  loading={submitting}
                  startIcon={<Ico n="LogIn" s={14} />}
                  type="submit"
                >
                  Sign in
                </Button>
              </div>
            </form>
          )}

          {config.oidcEnabled && (
            <div style={{ marginTop: config.localLoginEnabled ? 12 : 0 }}>
              <Button
                variant={config.localLoginEnabled ? "secondary" : "primary"}
                fullWidth
                startIcon={<Ico n="ShieldCheck" s={14} />}
              >
                Sign in with SSO
              </Button>
            </div>
          )}
        </Card>
      </div>
    );
  }

  window.CTVLogin = Login;
})();
