'use client';

import { ReactNode } from 'react';
import { usePathname } from 'next/navigation';
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';
import { PageProvider } from '@/contexts/page-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>
      <PageProvider
        navItems={navItems}
        currentPath={pathname}
        rightSlot={<ApiKeyWidget />}
      >
        <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}
        />
      </PageProvider>
    </ApiKeyProvider>
  );
}
