"use client";

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

declare global {
  interface Window {
    Scalar?: {
      createApiReference: (
        el: HTMLElement,
        config: Record<string, unknown>
      ) => void;
    };
  }
}

const scalarConfig = {
  spec: { url: "/openapi.json" },
  theme: "purple",
  darkMode: true,
  hideModels: false,
  showSidebar: true,
  // Hide toolbar clutter
  hideDarkModeToggle: true,
  hideDownloadButton: true,
  hideTestRequestButton: false,
  hideClientButton: true,
  hiddenClients: true,
  showDeveloperTools: false,
  metaData: {
    title: "StemeDB API Reference",
    description: "API documentation for the StemeDB claim-oriented database",
  },
  servers: [
    {
      url: "http://127.0.0.1:18180",
      description: "Local development server",
    },
  ],
};

export default function ScalarDocs() {
  const containerRef = useRef<HTMLDivElement>(null);
  const initializedRef = useRef(false);

  return (
    <>
      <Script
        src="https://cdn.jsdelivr.net/npm/@scalar/api-reference"
        strategy="afterInteractive"
        onLoad={() => {
          if (
            !initializedRef.current &&
            containerRef.current &&
            window.Scalar?.createApiReference
          ) {
            initializedRef.current = true;
            window.Scalar.createApiReference(containerRef.current, scalarConfig);
          }
        }}
      />
      <div ref={containerRef} className="min-h-screen" />
    </>
  );
}
