import type React from 'react';
import { SwaggerExplorer } from '@/components/SwaggerExplorer';

export const metadata = {
  title: 'API Explorer — SentryAgent AgentIdP',
  description:
    'Interactively explore and test the SentryAgent AgentIdP REST API.',
};

export default function ApiExplorerPage(): React.ReactElement {
  const apiUrl =
    process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:3000';

  return (
    <div className="px-4 py-8">
      <div className="mx-auto max-w-7xl">
        <div className="mb-8">
          <h1 className="text-3xl font-extrabold text-slate-900">
            API Explorer
          </h1>
          <p className="mt-2 text-slate-600">
            Explore, authenticate, and test every AgentIdP endpoint directly
            from your browser. Use the Authorize button to set your Bearer
            token.
          </p>
          <p className="mt-1 text-sm text-slate-400">
            Spec loaded from:{' '}
            <code className="rounded bg-slate-100 px-1.5 py-0.5 text-xs">
              {apiUrl}/openapi.json
            </code>
          </p>
        </div>

        <SwaggerExplorer apiUrl={apiUrl} />
      </div>
    </div>
  );
}