import { Logo } from '@/components/logo';
import { pageMetadata } from '@/lib/seo';
import Link from 'next/link';

export const metadata = pageMetadata({
  title: 'Docs',
  description:
    'BuildMyMCPServer documentation — quickstart, MCP concepts, the OAuth 2.1 flow, authoring tools, self-hosting and the API reference.',
  path: '/docs',
});

const SECTIONS: { heading: string; items: { href: string; label: string }[] }[] = [
  {
    heading: 'Get started',
    items: [
      { href: '/docs', label: 'Quickstart' },
      { href: '/docs/concepts', label: 'MCP concepts' },
    ],
  },
  {
    heading: 'Auth',
    items: [{ href: '/docs/oauth', label: 'OAuth 2.1 flow' }],
  },
  {
    heading: 'Build',
    items: [
      { href: '/docs/authoring', label: 'Authoring tools' },
      { href: '/docs/self-hosting', label: 'Self-hosting' },
    ],
  },
  {
    heading: 'Reference',
    items: [
      { href: '/docs/api-reference', label: 'API reference' },
      { href: '/docs/faq', label: 'FAQ' },
    ],
  },
];

export default function DocsLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex min-h-screen flex-col">
      <header className="sticky top-0 z-50 border-b border-[--color-border] bg-[--color-bg]/85 backdrop-blur-md">
        <div className="mx-auto flex h-12 max-w-6xl items-center justify-between px-6">
          <div className="flex items-center gap-3">
            <Logo />
            <span className="text-[12.5px] text-[--color-fg-subtle]">/ docs</span>
          </div>
          <nav className="flex items-center gap-2">
            <Link
              href="/"
              className="text-[12.5px] text-[--color-fg-muted] transition-colors hover:text-[--color-fg]"
            >
              Home
            </Link>
            <Link
              href="/login"
              className="rounded-md bg-[--color-accent] px-3 py-1.5 text-[12.5px] font-medium text-white transition-colors duration-200 hover:bg-[#5557e8]"
            >
              Start building
            </Link>
          </nav>
        </div>
      </header>
      <div className="mx-auto flex w-full max-w-6xl flex-1 gap-8 px-5 py-8 sm:px-6 sm:py-10 lg:gap-12">
        <aside className="hidden w-[240px] shrink-0 lg:block">
          <nav className="sticky top-20 space-y-5">
            {SECTIONS.map((section) => (
              <div key={section.heading}>
                <div className="text-[10.5px] uppercase tracking-[0.14em] text-[--color-fg-subtle]">
                  {section.heading}
                </div>
                <ul className="mt-2 space-y-0.5">
                  {section.items.map((item) => (
                    <li key={item.href}>
                      <Link
                        href={item.href}
                        className="block rounded-sm px-1 py-1 text-[12.5px] text-[--color-fg-muted] transition-colors hover:text-[--color-fg]"
                      >
                        {item.label}
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </nav>
        </aside>
        <article className="prose prose-invert min-w-0 max-w-2xl flex-1">{children}</article>
      </div>
    </div>
  );
}