import type { Metadata } from "next";
import Link from "next/link";
import "@fontsource/inter/400.css";
import "@fontsource/inter/500.css";
import "@fontsource/inter/600.css";
import "@fontsource/inter/700.css";
import { Providers } from "./providers";
import "./globals.css";

const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || "https://codetutor.example.com";

export const metadata: Metadata = {
  title: {
    default: "CodeTutor - Coding Interview Preparation",
    template: "%s | CodeTutor",
  },
  description:
    "Master coding interviews with curated questions, detailed explanations, and optimal solutions. Practice 400+ problems with interactive code editor.",
  keywords: [
    "coding interview",
    "leetcode",
    "algorithm",
    "data structures",
    "programming practice",
    "software engineering",
  ],
  authors: [{ name: "Kai Chappell" }],
  openGraph: {
    type: "website",
    locale: "en_US",
    url: siteUrl,
    siteName: "CodeTutor",
    title: "CodeTutor - Coding Interview Preparation",
    description:
      "Master coding interviews with curated questions, detailed explanations, and optimal solutions.",
  },
  twitter: {
    card: "summary_large_image",
    title: "CodeTutor - Coding Interview Preparation",
    description:
      "Master coding interviews with curated questions, detailed explanations, and optimal solutions.",
  },
  metadataBase: new URL(siteUrl),
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className="min-h-screen antialiased">
        <Providers>
          <a
            href="#main-content"
            className="sr-only focus:not-sr-only focus:absolute focus:z-50 focus:p-4 focus:bg-[var(--primary)] focus:text-[var(--primary-foreground)]"
          >
            Skip to main content
          </a>
          <header className="border-b border-[var(--border)] bg-[var(--card)]">
            <nav
              className="container mx-auto px-4 py-4 flex items-center justify-between"
              aria-label="Main navigation"
            >
              <Link
                href="/"
                className="text-xl font-bold text-[var(--primary)]"
              >
                CodeTutor
              </Link>
              <div className="flex items-center gap-6">
                <Link
                  href="/questions"
                  className="text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors"
                >
                  Questions
                </Link>
                <Link
                  href="/categories"
                  className="text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors"
                >
                  Categories
                </Link>
                <Link
                  href="/patterns"
                  className="text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors"
                >
                  Patterns
                </Link>
              </div>
            </nav>
          </header>
          <main id="main-content" className="container mx-auto px-4 py-8">
            {children}
          </main>
          <footer className="border-t border-[var(--border)] mt-auto py-6 text-center text-[var(--muted-foreground)] text-sm">
            CodeTutor - Coding Interview Preparation
          </footer>
        </Providers>
      </body>
    </html>
  );
}
