"use client";

import Script from "next/script";
import { useEffect, useRef, useState } from "react";

const SPEC_URL = "/api/openapi/bff-api.v1.yaml";

declare global {
  interface Window {
    Redoc?: {
      init: (specUrl: string, options: Record<string, unknown>, el: HTMLElement) => void;
    };
  }
}

export default function DocsPage() {
  const containerRef = useRef<HTMLDivElement>(null);
  const [redocReady, setRedocReady] = useState(false);

  useEffect(() => {
    if (!redocReady || !containerRef.current || !window.Redoc) return;
    window.Redoc.init(
      SPEC_URL,
      { scrollYOffset: 72, hideDownloadButton: false, expandResponses: "200,201" },
      containerRef.current,
    );
  }, [redocReady]);

  return (
    <>
      {/* eslint-disable-next-line @next/next/no-css-tags */}
      <link
        rel="stylesheet"
        href="https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.css"
      />
      <Script
        src="https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js"
        strategy="afterInteractive"
        onLoad={() => setRedocReady(true)}
      />
      <main className="min-h-screen bg-white pt-20">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 pb-4">
          <h1 className="font-onest text-2xl font-semibold text-[#042718]">BFF API Reference</h1>
          <p className="mt-1 font-inter text-sm text-[#042718]/60">
            OpenAPI 3.1 specification for AGNET browser-facing /api/* routes.
          </p>
        </div>
        <div ref={containerRef} />
      </main>
    </>
  );
}