---
import "@/styles/global.css"
import { ViewTransitions } from "astro:transitions"

interface Props {
  title?: string
  description?: string
  active?: "home" | "docs"
}

const {
  title = "Feynman - The open source AI research agent",
  description = "An AI-powered research agent that helps you discover, analyze, and synthesize scientific literature.",
  active = "home",
} = Astro.props
---

<html lang="en" class="dark">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="description" content={description} />
    <title>{title}</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet" />
    <ViewTransitions />
    <script is:inline>
      ;(function () {
        const theme = localStorage.getItem("theme")
        if (theme === "dark" || (!theme && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
          document.documentElement.classList.add("dark")
        } else {
          document.documentElement.classList.remove("dark")
        }
      })()
    </script>
  </head>
  <body class="flex min-h-screen flex-col bg-background text-foreground antialiased">
    <nav class="sticky top-0 z-50 bg-background">
      <div class="mx-auto flex h-14 max-w-6xl items-center justify-between px-6">
        <a href="/" class="flex items-center gap-2">
          <span class="font-['VT323'] text-2xl text-primary">feynman</span>
        </a>
        <div class="flex items-center gap-6">
          <a
            href="/docs/getting-started/installation"
            class:list={[
              "text-sm transition-colors hover:text-foreground",
              active === "docs" ? "text-foreground" : "text-muted-foreground",
            ]}
          >
            Docs
          </a>
          <a
            href="https://github.com/getcompanion-ai/feynman"
            target="_blank"
            rel="noopener noreferrer"
            class="text-sm text-muted-foreground transition-colors hover:text-foreground"
          >
            GitHub
          </a>
          <button
          id="theme-toggle"
          type="button"
          class="inline-flex size-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
          aria-label="Toggle theme"
        >
          <svg
            id="sun-icon"
            class="hidden size-4"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="2"
            stroke="currentColor"
          >
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
          </svg>
          <svg
            id="moon-icon"
            class="hidden size-4"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="2"
            stroke="currentColor"
          >
            <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
          </svg>
        </button>
      </div>
    </nav>

    <main class="flex flex-1 flex-col">
      <slot />
    </main>

    <footer>
      <div class="mx-auto flex max-w-6xl flex-col items-center justify-between gap-4 px-6 py-8 sm:flex-row">
        <p class="text-sm text-muted-foreground">
          &copy; {new Date().getFullYear()} Companion, Inc.
        </p>
        <div class="flex items-center gap-4 text-sm">
          <a href="/docs/getting-started/installation" class="text-muted-foreground transition-colors hover:text-foreground">Docs</a>
          <a
            href="https://github.com/getcompanion-ai/feynman"
            target="_blank"
            rel="noopener noreferrer"
            class="text-muted-foreground transition-colors hover:text-foreground"
          >
            GitHub
          </a>
        </div>
      </div>
    </footer>

    <script is:inline>
      function updateThemeIcons() {
        const isDark = document.documentElement.classList.contains("dark")
        document.getElementById("sun-icon").classList.toggle("hidden", !isDark)
        document.getElementById("moon-icon").classList.toggle("hidden", isDark)
      }

      function setupThemeToggle() {
        updateThemeIcons()
        document.getElementById("theme-toggle").addEventListener("click", function () {
          document.documentElement.classList.toggle("dark")
          const isDark = document.documentElement.classList.contains("dark")
          localStorage.setItem("theme", isDark ? "dark" : "light")
          updateThemeIcons()
        })
      }

      setupThemeToggle()

      document.addEventListener("astro:after-swap", function () {
        const theme = localStorage.getItem("theme")
        if (theme === "dark" || (!theme && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
          document.documentElement.classList.add("dark")
        } else {
          document.documentElement.classList.remove("dark")
        }
        setupThemeToggle()
      })
    </script>
  </body>
</html>
