'use client';

import { ReactNode } from 'react';
import { usePathname } from 'next/navigation';
import { SubsectionNav } from '@/components/shared/SubsectionNav';
import { DocsSidebar } from '@/components/docs/layout/DocsSidebar';
import { ThreeColumnLayout } from '@/components/layout/ThreeColumnLayout';
import { ApiKeyWidget } from '@/components/shared/ApiKeyWidget/apikey-widget';
import { ApiKeyProvider } from '@/components/shared/ApiKeyWidget/apikey-context';

/**
 * Root Documentation Layout
 *
 * Provides shared layout elements for all documentation pages:
 * - SubsectionNav at the top
 * - Three-column layout (left sidebar + content + right TOC via DocPage)
 * - Background gradients
 *
 * Uses ThreeColumnLayout for consistent column structure:
 * - Left: DocsSidebar (w-64, hidden lg:block)
 * - Center: Page content (flex-1)
 * - Right: Handled by DocPage component
 *
 * Pages handle their own:
 * - Breadcrumbs (manually specified)
 * - Article content
 * - TOC sidebar (on the right via DocPage)
 *
 * Features:
 * - Animated gradient background matching landing page
 * - Automatic active page detection via pathname
 * - Responsive layout (mobile → tablet → desktop)
 */

interface DocsRootLayoutProps {
  children: ReactNode;
}

const navItems = [
  { label: 'Documentation', href: '/docs' },
  { label: 'Demo', href: '/demo' },
  { label: 'Examples', href: '/docs/examples' },
];

export default function DocsRootLayout({ children }: DocsRootLayoutProps) {
  const pathname = usePathname();

  return (
    <ApiKeyProvider>
      <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950">
        {/* Animated gradient background (matching landing page) */}
        <div className="fixed inset-0 overflow-hidden pointer-events-none">
          <div className="absolute top-1/4 -left-1/4 w-96 h-96 bg-purple-600/10 rounded-full blur-3xl animate-pulse"></div>
          <div className="absolute bottom-1/4 -right-1/4 w-96 h-96 bg-cyan-600/10 rounded-full blur-3xl animate-pulse delay-700"></div>
        </div>

        {/* Subsection Navigation */}
        <SubsectionNav
          items={navItems}
          currentPath={pathname}
          ctaText="Join Beta"
          ctaHref="/signup"
          rightSlot={<ApiKeyWidget />}
        />

        {/* Three-column Documentation Layout */}
        <div className="relative z-10">
          <ThreeColumnLayout
            left={
              <div className="border-r border-white/10 bg-slate-950/50 backdrop-blur-sm sticky top-12 h-[calc(100vh-3rem)] overflow-y-auto">
                <DocsSidebar currentPath={pathname} />
              </div>
            }
            center={children}
          />
        </div>
      </div>
    </ApiKeyProvider>
  );
}
