---
import { ClientRouter } from "astro:transitions";
import BackToTop from "@/components/ui/back-to-top";
import { useTranslations } from "@/i18n/utils";
import type { Lang } from "@/types/i18n";
import { defaultLang } from "@/i18n/ui";
import { personalInfo } from "@/lib/data";
import "../styles/global.css";

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

const lang = Astro.currentLocale as Lang || defaultLang;
const isZh = lang === 'zh';
const t = useTranslations(lang);
const { title, description, image, articleDate } = Astro.props;
const siteTitle = t("site.title");
const fullTitle = title ? `${title} | ${siteTitle}` : siteTitle;
const siteUrl = "https://zhaoguiyang.com";
const defaultImage = "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=1200&h=630&fit=crop";

const currentUrl = Astro.url.href;
const ogImage = image || defaultImage;
---

<!doctype html>
<html lang={lang}>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <!-- Preload critical fonts - using WOFF2 for better compression -->
    <link rel="preload" href="/fonts/archivo-700.woff2" as="font" type="font/woff2" crossorigin />
    <link rel="preload" href="/fonts/space-grotesk-400.woff2" as="font" type="font/woff2" crossorigin />
    <meta name="generator" content={Astro.generator} />

    <!-- Basic SEO -->
    <meta name="description" content={description || "AI Full-stack Engineer - 8 years building enterprise systems, financial platforms, and blockchain infrastructure."} />
    <link rel="canonical" href={currentUrl} />

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content={articleDate ? "article" : "website"} />
    <meta property="og:url" content={currentUrl} />
    <meta property="og:title" content={fullTitle} />
    <meta property="og:description" content={description || "AI Full-stack Engineer - 8 years building enterprise systems, financial platforms, and blockchain infrastructure."} />
    <meta property="og:image" content={ogImage} />
    <meta property="og:site_name" content={siteTitle} />

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:url" content={currentUrl} />
    <meta name="twitter:title" content={fullTitle} />
    <meta name="twitter:description" content={description || "AI Full-stack Engineer - 8 years building enterprise systems, financial platforms, and blockchain infrastructure."} />
    <meta name="twitter:image" content={ogImage} />

    <!-- Article specific -->
    {articleDate && <meta property="article:published_time" content={articleDate} />}

    <title>{fullTitle}</title>

    <!-- View Transitions for smooth page transitions -->
    <ClientRouter />
    <meta name="view-transition" content="same-origin" />
    {
      import.meta.env.MODE === 'production' && (
      <script defer src="https://cloud.umami.is/script.js" data-website-id="a79f759b-74ae-4165-b738-56d123a1c6be"></script>
      )
    }
  </head>
  <body
    class="min-h-screen bg-background font-sans antialiased selection:bg-primary/20 selection:text-primary"
  >
    <!-- Skip link for accessibility -->
    <a
      href="#main-content"
      class="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-primary focus:text-primary-foreground focus:rounded-lg focus:font-semibold focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
    >
      {isZh ? '跳到主要内容' : 'Skip to main content'}
    </a>

    <div
      class="fixed inset-0 -z-10 h-full w-full bg-background"
    >
      <div class="absolute inset-0 bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(37,99,235,0.12),rgba(255,255,255,0))]"></div>
      <div class="absolute inset-0 bg-[radial-gradient(circle_at_80%_20%,rgba(139,92,246,0.08),transparent_40%)]"></div>
      <div class="absolute inset-0 bg-[radial-gradient(circle_at_20%_80%,rgba(249,115,22,0.05),transparent_40%)]"></div>
    </div>
    <slot />
    <BackToTop client:idle />
  </body>
</html>

<script is:inline>
  const getThemePreference = () => {
    if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
      return localStorage.getItem("theme");
    }
    return window.matchMedia("(prefers-color-scheme: dark)").matches
      ? "dark"
      : "light";
  };
  const isDark = getThemePreference() === "dark";
  document.documentElement.classList[isDark ? "add" : "remove"]("dark");

  if (typeof localStorage !== "undefined") {
    const observer = new MutationObserver(() => {
      const isDark = document.documentElement.classList.contains("dark");
      localStorage.setItem("theme", isDark ? "dark" : "light");
    });
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["class"],
    });
  }
</script>

<style>
  html,
  body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    scroll-behavior: smooth;
  }

  :root {
    --transition-standard: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body {
    transition:
      background-color var(--transition-standard),
      color var(--transition-standard);
  }

  /* Page transition animations */
  @keyframes pageIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  main {
    animation: pageIn 0.4s ease-out forwards;
  }

  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    main {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }
</style>
