import { Layout } from "./Layout.tsx";

export const UnregisteredAppPage = ({ host }: { host: string }) => {
  return (
    <Layout title="Application Not Registered">
      <div style={{ textAlign: "center", padding: "2rem" }}>
        <h1 style={{ color: "#dc3545", marginBottom: "1rem" }}>
          Application Not Registered
        </h1>
        <p style={{ fontSize: "1.1rem", marginBottom: "1.5rem" }}>
          The domain <strong>{host}</strong>{" "}
          is not registered in the Auth-Yes Identity Catalog.
        </p>
        <p style={{ color: "#6c757d", marginBottom: "2rem" }}>
          Access to unregistered domains is blocked by default (Default-Deny) to
          protect against unauthorized ingress mapping.
        </p>
        <div style={{ display: "flex", justifyContent: "center", gap: "1rem" }}>
          <a
            href="/admin/apps"
            class="btn-action btn-success"
            style={{
              padding: "0.75rem 1.5rem",
              textDecoration: "none",
              color: "white",
              backgroundColor: "#198754",
              borderRadius: "4px",
            }}
          >
            Register Application in IAM Console
          </a>
          <a
            href="/dashboard"
            class="btn-action"
            style={{
              padding: "0.75rem 1.5rem",
              textDecoration: "none",
              color: "#333",
              backgroundColor: "#e9ecef",
              borderRadius: "4px",
            }}
          >
            Return to Dashboard
          </a>
        </div>
      </div>
    </Layout>
  );
};