---
import "@/styles/globals.css";
import { ViewTransitions } from "astro:transitions";
import { getCsrfToken } from "@/middleware/csrf";

interface Props {
  title: string;
}

const { title } = Astro.props;

const { token, cookie } = getCsrfToken(Astro.request);
Astro.response.headers.set("Set-Cookie", cookie);
---

<!doctype html>
<html lang="en" class="dark">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{title}</title>
    <meta name="csrf-token" content={token} />
    <!-- Global CSRF Fetch Interceptor -->
    <script is:inline>
      (function() {
        const originalFetch = window.fetch;
        window.fetch = async function () {
          let [resource, config] = arguments;
          if (!config) config = {};
          
          const method = (config.method || 'GET').toUpperCase();
          if (['POST', 'PUT', 'PATCH', 'DELETE'].includes(method)) {
            const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            if (token) {
              if (config.headers instanceof Headers) {
                config.headers.set('x-csrf-token', token);
              } else {
                config.headers = {
                  ...config.headers,
                  'x-csrf-token': token
                };
              }
            }
          }
          return originalFetch(resource, config);
        };
      })();
    </script>
    <ViewTransitions />
  </head>
  <body class="h-screen w-screen flex flex-col font-sans">
    <slot />
  </body>
</html>