---
import '../styles/global.css';
import UserStatus from '../components/UserStatus.vue';

interface Props {
  title: string;
  description?: string;
  image?: string;
  canonicalURL?: string;
}

const {
  title,
  description = 'NovaBlog - 一个极简、高效的程序员博客系统',
  image = '/og-default.png',
  canonicalURL = Astro.url.href,
} = Astro.props;

const { site } = Astro;
const socialImageURL = image.startsWith('http') ? image : new URL(image, site).href;
---

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="generator" content={Astro.generator} />

    <!-- SEO Meta Tags -->
    <title>{title}</title>
    <meta name="description" content={description} />
    <link rel="canonical" href={canonicalURL} />

    <!-- Open Graph -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content={canonicalURL} />
    <meta property="og:title" content={title} />
    <meta property="og:description" content={description} />
    <meta property="og:image" content={socialImageURL} />

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content={title} />
    <meta name="twitter:description" content={description} />
    <meta name="twitter:image" content={socialImageURL} />

    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />

    <!-- Preload Fonts -->
    <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=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Noto+Serif+SC:wght@400;600&display=swap"
      rel="stylesheet"
    />

    <!-- KaTeX CSS for LaTeX Math Rendering -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/katex@0.16.33/dist/katex.min.css"
      crossorigin="anonymous"
    />

    <!-- Dark Mode Script (防止闪烁) -->
    <script is:inline>
      const theme = (() => {
        if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
          return localStorage.getItem('theme');
        }
        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
          return 'dark';
        }
        return 'light';
      })();

      if (theme === 'dark') {
        document.documentElement.classList.add('dark');
      } else {
        document.documentElement.classList.remove('dark');
      }
    </script>
  </head>
  <body class="min-h-screen flex flex-col bg-background text-foreground">
    <!-- Header -->
    <header class="sticky top-0 z-50 glass border-b border-border">
      <nav class="content-width h-16 flex items-center justify-between">
        <!-- Logo -->
        <a href="/" class="flex items-center gap-2 text-xl font-bold hover:text-primary-500 transition-colors">
          <svg class="w-8 h-8" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="32" height="32" rx="8" fill="url(#logo-gradient)" />
            <path
              d="M8 12L16 8L24 12V20L16 24L8 20V12Z"
              stroke="white"
              stroke-width="2"
              stroke-linejoin="round"
            />
            <circle cx="16" cy="16" r="3" fill="white" />
            <defs>
              <linearGradient id="logo-gradient" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse">
                <stop stop-color="#0ea5e9" />
                <stop offset="1" stop-color="#8b5cf6" />
              </linearGradient>
            </defs>
          </svg>
          <span class="gradient-text">NovaBlog</span>
        </a>

        <!-- Navigation Links -->
        <div class="hidden md:flex items-center gap-6">
          <a href="/" class="text-foreground/70 hover:text-foreground transition-colors">首页</a>
          <a href="/blog" class="text-foreground/70 hover:text-foreground transition-colors">博客</a>
          <a href="/micro" class="text-foreground/70 hover:text-foreground transition-colors">微语</a>
          <a href="/categories" class="text-foreground/70 hover:text-foreground transition-colors">分类</a>
          <a href="/tags" class="text-foreground/70 hover:text-foreground transition-colors">标签</a>
          <a href="/about" class="text-foreground/70 hover:text-foreground transition-colors">关于</a>
        </div>

        <!-- Actions -->
        <div class="flex items-center gap-3">
          <!-- User Status (登录状态) -->
          <UserStatus client:load />

          <!-- Theme Toggle -->
          <button
            id="theme-toggle"
            class="btn-ghost p-2 rounded-lg"
            aria-label="切换主题"
          >
            <svg class="w-5 h-5 hidden dark:block" fill="currentColor" viewBox="0 0 20 20">
              <path
                d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
              />
            </svg>
            <svg class="w-5 h-5 block dark:hidden" fill="currentColor" viewBox="0 0 20 20">
              <path
                d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"
              />
            </svg>
          </button>

          <!-- Mobile Menu Toggle -->
          <button
            id="mobile-menu-toggle"
            class="btn-ghost p-2 rounded-lg md:hidden"
            aria-label="打开菜单"
          >
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
          </button>
        </div>
      </nav>

      <!-- Mobile Menu -->
      <div id="mobile-menu" class="hidden md:hidden border-t border-border">
        <div class="content-width py-4 flex flex-col gap-3">
          <a href="/" class="text-foreground/70 hover:text-foreground transition-colors py-2">首页</a>
          <a href="/blog" class="text-foreground/70 hover:text-foreground transition-colors py-2">博客</a>
          <a href="/micro" class="text-foreground/70 hover:text-foreground transition-colors py-2">微语</a>
          <a href="/categories" class="text-foreground/70 hover:text-foreground transition-colors py-2">分类</a>
          <a href="/tags" class="text-foreground/70 hover:text-foreground transition-colors py-2">标签</a>
          <a href="/about" class="text-foreground/70 hover:text-foreground transition-colors py-2">关于</a>
        </div>
      </div>
    </header>

    <!-- Main Content -->
    <main class="flex-1">
      <slot />
    </main>

    <!-- Footer -->
    <footer class="border-t border-border bg-muted/30">
      <div class="content-width py-12">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <!-- About -->
          <div>
            <h3 class="font-semibold text-lg mb-4">NovaBlog</h3>
            <p class="text-foreground/60 text-sm leading-relaxed">
              一个极简、高效的程序员博客系统。支持 MDX、Typst 学术排版，静态渲染 + 轻量级微服务架构。
            </p>
          </div>

          <!-- Links -->
          <div>
            <h3 class="font-semibold text-lg mb-4">快速链接</h3>
            <ul class="space-y-2 text-sm">
              <li><a href="/blog" class="text-foreground/60 hover:text-primary-500 transition-colors">全部文章</a></li>
              <li><a href="/micro" class="text-foreground/60 hover:text-primary-500 transition-colors">微语</a></li>
              <li><a href="/tags" class="text-foreground/60 hover:text-primary-500 transition-colors">标签分类</a></li>
              <li><a href="/about" class="text-foreground/60 hover:text-primary-500 transition-colors">关于我</a></li>
              <li><a href="/rss.xml" class="text-foreground/60 hover:text-primary-500 transition-colors">RSS 订阅</a></li>
            </ul>
          </div>

          <!-- Tech Stack -->
          <div>
            <h3 class="font-semibold text-lg mb-4">技术栈</h3>
            <ul class="space-y-2 text-sm text-foreground/60">
              <li>前端: Astro + Vue 3 + Tailwind CSS</li>
              <li>后端: Go + Gin + SQLite</li>
              <li>部署: Docker + Nginx</li>
            </ul>
          </div>
        </div>

        <!-- Copyright -->
        <div class="mt-8 pt-8 border-t border-border text-center text-sm text-foreground/40">
          <p>&copy; {new Date().getFullYear()} NovaBlog. All rights reserved.</p>
        </div>
      </div>
    </footer>

    <!-- Theme Toggle Script -->
    <script>
      const themeToggle = document.getElementById('theme-toggle');
      const mobileMenuToggle = document.getElementById('mobile-menu-toggle');
      const mobileMenu = document.getElementById('mobile-menu');

      // Theme toggle
      themeToggle?.addEventListener('click', () => {
        const isDark = document.documentElement.classList.toggle('dark');
        localStorage.setItem('theme', isDark ? 'dark' : 'light');
      });

      // Mobile menu toggle
      mobileMenuToggle?.addEventListener('click', () => {
        mobileMenu?.classList.toggle('hidden');
      });
    </script>
  </body>
</html>