import type { Metadata } from "next";
import Link from "next/link";
import { headers } from "next/headers";

import { OpenAPIDocsContent } from "@/components/openapi/openapi-docs-content";

export const metadata: Metadata = {
  title: "API Docs — Security Center",
  description:
    "Agent integration guide for the Security Center open APIs: OpenAPI contract, MCP server setup, example prompts, and permission model. Served as server-rendered HTML so fetch-only agents can read it without login or JavaScript.",
};

// Public, login-free route for AI agents: the full guide text is in the
// initial HTML (the dashboard twin at /dashboard/openapi/docs renders the
// same OpenAPIDocsContent behind the authenticated app shell). Reading the
// request headers opts this route into dynamic rendering, which also lets
// the SSR HTML embed the real deployment origin in the examples.
export default function PublicOpenAPIDocsPage() {
  const h = headers();
  const proto = h.get("x-forwarded-proto") ?? "http";
  const host = h.get("x-forwarded-host") ?? h.get("host") ?? "localhost";
  const origin = `${proto}://${host}`;
  return (
    <div style={{ minHeight: "100vh", background: "#f5f5f5" }}>
      <header
        style={{
          padding: "12px 24px",
          borderBottom: "1px solid #e5e7eb",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          background: "#fff",
        }}
      >
        <strong>Security Center — API Docs</strong>
        <Link href="/dashboard/openapi/docs">Sign in for the dashboard view</Link>
      </header>
      <main style={{ maxWidth: 1100, margin: "0 auto", padding: "24px 16px" }}>
        <OpenAPIDocsContent initialBaseUrl={origin} />
      </main>
    </div>
  );
}