import type { Metadata } from "next";
import { DocsSidebar } from "./docs-sidebar";

export const metadata: Metadata = {
  title: {
    default: "Documentation",
    template: "%s | AgentLens Docs",
  },
  description:
    "AgentLens documentation — learn how to instrument, trace, and observe your AI agents.",
};

export default function DocsLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <div className="min-h-screen bg-neutral-950">
      <header className="sticky top-0 z-50 border-b border-neutral-800/50 bg-neutral-950/80 backdrop-blur-md">
        <div className="max-w-[90rem] mx-auto flex items-center justify-between h-14 px-4 sm:px-6 lg:px-8">
          <div className="flex items-center gap-6">
            <a href="/" className="flex items-center gap-2 text-neutral-100 hover:text-emerald-400 transition-colors">
              <div className="w-7 h-7 rounded bg-gradient-to-br from-emerald-400 to-emerald-600 flex items-center justify-center">
                <svg className="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
                </svg>
              </div>
              <span className="font-semibold text-sm">AgentLens</span>
            </a>
            <span className="text-neutral-600">/</span>
            <a href="/docs" className="text-sm text-neutral-400 hover:text-neutral-200 transition-colors">
              Documentation
            </a>
          </div>
          <div className="flex items-center gap-4">
            <a
              href="/dashboard"
              className="text-sm text-neutral-400 hover:text-neutral-200 transition-colors"
            >
              Dashboard
            </a>
            <a
              href="https://gitea.repi.fun/repi/agentlens"
              target="_blank"
              rel="noopener noreferrer"
              className="text-sm text-neutral-400 hover:text-neutral-200 transition-colors"
            >
              Source
            </a>
          </div>
        </div>
      </header>

      <div className="max-w-[90rem] mx-auto flex">
        <DocsSidebar />
        <main className="flex-1 min-w-0 px-4 sm:px-8 lg:px-12 py-10 lg:py-12">
          <div className="max-w-3xl">{children}</div>
        </main>
      </div>
    </div>
  );
}
