---
import { getMenu, getEmDashCollection } from "emdash";
import {
	WidgetArea,
	EmDashHead,
	EmDashBodyStart,
	EmDashBodyEnd,
} from "emdash/ui";
import { createPublicPageContext } from "emdash/page";
import LiveSearch from "emdash/ui/search";
import "../styles/theme.css";

interface Props {
	title: string;
	description?: string | null;
	image?: string | null;
	canonical?: string | null;
	robots?: string | null;
	type?: "website" | "article";
	publishedTime?: string | null;
	modifiedTime?: string | null;
	author?: string | null;
	/** Pass content reference for plugin page contributions on content pages */
	content?: { collection: string; id: string; slug?: string | null };
}

const {
	title,
	description,
	image,
	canonical,
	robots,
	type = "website",
	publishedTime,
	modifiedTime,
	author,
	content,
} = Astro.props;
const siteTitle = "My Blog";
// If title already includes site title (from getSeoMeta), use as-is
const fullTitle = title.includes(siteTitle) ? title : `${title} — ${siteTitle}`;

// Fetch primary menu defined in seed
const menu = await getMenu("primary");

// Fetch pages for footer
const { entries: pages } = await getEmDashCollection("pages");

// Build public page context for plugin contributions
// SEO data is passed here and rendered securely by EmDashHead
const pageCtx = createPublicPageContext({
	Astro,
	kind: content ? "content" : "custom",
	pageType: type,
	title: fullTitle,
	description,
	canonical,
	image,
	content,
	seo: { ogImage: image, robots },
	articleMeta: { publishedTime, modifiedTime, author },
	siteName: siteTitle,
});

// Check if user is logged in (for showing admin link)
const isLoggedIn = !!Astro.locals.user;
---

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<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:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&family=JetBrains+Mono:wght@400;500&display=swap"
			rel="stylesheet"
		/>
		<title>{fullTitle}</title>
		<EmDashHead page={pageCtx} />
		<script is:inline>
			// Apply theme immediately to prevent flash
			(function () {
				var c = document.cookie;
				var i = c.indexOf("theme=");
				var theme = i >= 0 ? c.slice(i + 6).split(";")[0] : null;
				if (theme === "dark" || theme === "light") {
					document.documentElement.classList.add(theme);
				} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
					document.documentElement.classList.add("dark");
				}
			})();
		</script>
	</head>
	<body>
		<EmDashBodyStart page={pageCtx} />
		<header class="site-header">
			<nav class="nav">
				<a href="/" class="site-title">{siteTitle}</a>
				<div class="nav-right">
					<LiveSearch
						placeholder="Search..."
						class="site-search"
						inputClass="site-search-input"
						resultsClass="site-search-results"
						resultClass="site-search-result"
						collections={["posts", "pages"]}
					/>
					<div class="nav-links">
						{
							menu?.items.map((item) => (
								<a href={item.url} target={item.target}>
									{item.label}
								</a>
							))
						}
					</div>
					{
						isLoggedIn && (
							<a href="/_emdash/admin" class="nav-admin">
								Admin
							</a>
						)
					}
				</div>
			</nav>
		</header>

		<main>
			<slot />
		</main>

		<footer class="site-footer">
			<div class="footer-inner">
				<div class="footer-grid">
					<div class="footer-brand">
						<a href="/" class="footer-logo">{siteTitle}</a>
						<p class="footer-tagline">Thoughts, stories, and ideas.</p>
					</div>
					<div class="footer-nav">
						<h4 class="footer-heading">Navigate</h4>
						<ul class="footer-links">
							<li><a href="/">Home</a></li>
							<li><a href="/posts">All Posts</a></li>
							{
								pages.slice(0, 3).map((page) => (
									<li>
										<a href={`/pages/${page.data.slug || page.id}`}>
											{page.data.title}
										</a>
									</li>
								))
							}
						</ul>
					</div>
					<div class="footer-nav">
						<h4 class="footer-heading">Connect</h4>
						<ul class="footer-links">
							{
								menu?.items.map((item) => (
									<li>
										<a
											href={item.url}
											target={item.target}
											rel={
												item.target === "_blank"
													? "noopener noreferrer"
													: undefined
											}
										>
											{item.label}
										</a>
									</li>
								))
							}
							<li><a href="/rss.xml">RSS Feed</a></li>
						</ul>
					</div>
					<div class="footer-widgets-section">
						<WidgetArea name="footer" />
					</div>
				</div>
				<div class="footer-bottom">
					<p class="footer-copyright">
						Powered by <a href="https://emdashcms.com">EmDash</a>
					</p>
					<div class="theme-switcher">
						<button
							type="button"
							class="theme-btn"
							data-theme="light"
							aria-label="Light mode"
						>
							<svg
								width="16"
								height="16"
								viewBox="0 0 24 24"
								fill="none"
								stroke="currentColor"
								stroke-width="2"
								stroke-linecap="round"
								stroke-linejoin="round"
								><circle cx="12" cy="12" r="5"></circle><line
									x1="12"
									y1="1"
									x2="12"
									y2="3"></line><line x1="12" y1="21" x2="12" y2="23"
								></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"
								></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"
								></line><line x1="1" y1="12" x2="3" y2="12"></line><line
									x1="21"
									y1="12"
									x2="23"
									y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"
								></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"
								></line></svg
							>
						</button>
						<button
							type="button"
							class="theme-btn"
							data-theme="dark"
							aria-label="Dark mode"
						>
							<svg
								width="16"
								height="16"
								viewBox="0 0 24 24"
								fill="none"
								stroke="currentColor"
								stroke-width="2"
								stroke-linecap="round"
								stroke-linejoin="round"
								><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"
								></path></svg
							>
						</button>
						<button
							type="button"
							class="theme-btn"
							data-theme="system"
							aria-label="System theme"
						>
							<svg
								width="16"
								height="16"
								viewBox="0 0 24 24"
								fill="none"
								stroke="currentColor"
								stroke-width="2"
								stroke-linecap="round"
								stroke-linejoin="round"
								><rect x="2" y="3" width="20" height="14" rx="2" ry="2"
								></rect><line x1="8" y1="21" x2="16" y2="21"></line><line
									x1="12"
									y1="17"
									x2="12"
									y2="21"></line></svg
							>
						</button>
					</div>
				</div>
			</div>
		</footer>

		<script>
			// Theme switcher
			const THEME_REGEX = /theme=([^;]+)/;
			const themeBtns =
				document.querySelectorAll<HTMLButtonElement>(".theme-btn");
			const root = document.documentElement;

			function setCookie(
				name: string,
				value: string,
				maxAge: number = 31536000
			) {
				const secure = location.protocol === "https:" ? "; Secure" : "";
				if (value === "") {
					document.cookie = `${name}=; path=/; max-age=0; SameSite=Lax${secure}`;
				} else {
					document.cookie = `${name}=${value}; path=/; max-age=${maxAge}; SameSite=Lax${secure}`;
				}
			}

			function setTheme(theme: string) {
				if (theme === "system") {
					setCookie("theme", "");
					root.classList.remove("light", "dark");
					if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
						root.classList.add("dark");
					}
				} else {
					setCookie("theme", theme);
					root.classList.remove("light", "dark");
					root.classList.add(theme);
				}
				updateActiveBtn(theme);
			}

			function updateActiveBtn(theme: string) {
				themeBtns.forEach((btn) => {
					btn.classList.toggle("active", btn.dataset.theme === theme);
				});
			}

			function getStoredTheme(): string {
				const match = document.cookie.match(THEME_REGEX);
				return match ? match[1] : "system";
			}

			// Initialize
			const storedTheme = getStoredTheme();
			setTheme(storedTheme);

			themeBtns.forEach((btn) => {
				btn.addEventListener("click", () => {
					setTheme(btn.dataset.theme || "system");
				});
			});

			// Listen for system preference changes
			window
				.matchMedia("(prefers-color-scheme: dark)")
				.addEventListener("change", (e) => {
					if (getStoredTheme() === "system") {
						root.classList.toggle("dark", e.matches);
					}
				});
		</script>

		<style is:global>
			*:where(:not([class*="emdash"]):not([class*="ec-"])),
			*:where(:not([class*="emdash"]):not([class*="ec-"]))::before,
			*:where(:not([class*="emdash"]):not([class*="ec-"]))::after {
				box-sizing: border-box;
			}

			body,
			h1,
			h2,
			h3,
			h4,
			h5,
			h6,
			p,
			ul,
			ol,
			figure,
			blockquote,
			dl,
			dd {
				margin: 0;
			}

			ul,
			ol {
				padding: 0;
			}

			:root {
				/* Colors - Light mode (default) */
				--color-bg: #ffffff;
				--color-bg-subtle: #fafafa;
				--color-text: #1a1a1a;
				--color-text-secondary: #525252;
				--color-muted: #8b8b8b;
				--color-border: #e5e5e5;
				--color-border-subtle: #f0f0f0;
				--color-surface: #f7f7f7;
				--color-accent: #0066cc;
				--color-accent-hover: #0052a3;
				--color-on-accent: white;
				--color-accent-ring: color-mix(
					in srgb,
					var(--color-accent) 25%,
					transparent
				);

				/* EmDash search theming */
				--emdash-search-bg: var(--color-bg);
				--emdash-search-text: var(--color-text);
				--emdash-search-muted: var(--color-muted);
				--emdash-search-border: var(--color-border);
				--emdash-search-hover: var(--color-surface);
				--emdash-search-highlight: var(--color-text);

				/* Typography */
				--font-sans:
					"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
					sans-serif;
				--font-mono:
					"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

				/* Type scale - more refined */
				--font-size-xs: 0.8125rem;
				--font-size-sm: 0.875rem;
				--font-size-base: 1rem;
				--font-size-lg: 1.125rem;
				--font-size-xl: 1.25rem;
				--font-size-2xl: 1.5rem;
				--font-size-3xl: 2rem;
				--font-size-4xl: 2.5rem;
				--font-size-5xl: 3.5rem;

				/* Line heights */
				--leading-tight: 1.15;
				--leading-snug: 1.3;
				--leading-normal: 1.5;
				--leading-relaxed: 1.7;

				/* Spacing - more generous */
				--spacing-1: 0.25rem;
				--spacing-2: 0.5rem;
				--spacing-3: 0.75rem;
				--spacing-4: 1rem;
				--spacing-5: 1.25rem;
				--spacing-6: 1.5rem;
				--spacing-8: 2rem;
				--spacing-10: 2.5rem;
				--spacing-12: 3rem;
				--spacing-16: 4rem;
				--spacing-20: 5rem;
				--spacing-24: 6rem;

				/* Legacy spacing aliases */
				--spacing-xs: var(--spacing-1);
				--spacing-sm: var(--spacing-2);
				--spacing-md: var(--spacing-4);
				--spacing-lg: var(--spacing-6);
				--spacing-xl: var(--spacing-8);
				--spacing-2xl: var(--spacing-12);
				--spacing-3xl: var(--spacing-16);

				/* Layout - wider for three-column */
				--content-width: 680px;
				--wide-width: 1200px;
				--max-width: var(--content-width);
				--gutter-width: 200px;
				--radius: 4px;
				--radius-lg: 8px;

				/* Transitions */
				--transition-fast: 120ms ease;
				--transition-base: 180ms ease;

				/* Nav */
				--nav-height: 64px;

				/* Search */
				--search-input-width: 180px;

				/* Article layout */
				--meta-col-width: 180px;

				/* Avatar sizes */
				--avatar-size-xs: 18px;
				--avatar-size-sm: 20px;
				--avatar-size-md: 24px;
				--avatar-size-lg: 32px;

				/* Letter spacing */
				--tracking-tight: -0.03em;
				--tracking-snug: -0.02em;
				--tracking-wide: 0.06em;
				--tracking-wider: 0.08em;

				/* Tag pill */
				--tag-padding-y: 2px;

				/* Shadows */
				--shadow-dropdown: 0 8px 30px rgba(0, 0, 0, 0.12);
				--shadow-btn-active: 0 1px 2px rgba(0, 0, 0, 0.05);
			}

			/* Dark mode via system preference (when no explicit class) */
			@media (prefers-color-scheme: dark) {
				:root:not(.light) {
					--color-bg: #0d0d0d;
					--color-bg-subtle: #141414;
					--color-text: #ededed;
					--color-text-secondary: #a0a0a0;
					--color-muted: #6b6b6b;
					--color-border: #2a2a2a;
					--color-border-subtle: #1f1f1f;
					--color-surface: #181818;
					--color-accent: #4d9fff;
					--color-accent-hover: #6eb0ff;
				}
			}

			/* Explicit dark mode */
			:root.dark {
				--color-bg: #0d0d0d;
				--color-bg-subtle: #141414;
				--color-text: #ededed;
				--color-text-secondary: #a0a0a0;
				--color-muted: #6b6b6b;
				--color-border: #2a2a2a;
				--color-border-subtle: #1f1f1f;
				--color-surface: #181818;
				--color-accent: #4d9fff;
				--color-accent-hover: #6eb0ff;
			}

			html {
				scroll-behavior: smooth;
			}

			body {
				font-family: var(--font-sans);
				font-size: var(--font-size-base);
				line-height: var(--leading-relaxed);
				color: var(--color-text);
				background: var(--color-bg);
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
				min-height: 100vh;
			}

			a:where(:not([class*="emdash"]):not([class*="ec-"])) {
				color: var(--color-accent);
				text-decoration: none;
				transition: color var(--transition-fast);
			}

			a:where(:not([class*="emdash"]):not([class*="ec-"])):hover {
				color: var(--color-accent-hover);
			}

			img {
				max-width: 100%;
				height: auto;
				display: block;
			}

			h1,
			h2,
			h3,
			h4,
			h5,
			h6 {
				font-family: var(--font-sans);
				line-height: var(--leading-tight);
				font-weight: 600;
				letter-spacing: var(--tracking-snug);
			}

			h1 {
				font-weight: 700;
				letter-spacing: var(--tracking-tight);
			}

			::selection {
				background: var(--color-accent);
				color: white;
			}
		</style>

		<style>
			.site-header {
				position: sticky;
				top: 0;
				z-index: 100;
				background: color-mix(in srgb, var(--color-bg) 65%, transparent);
				backdrop-filter: blur(12px);
				-webkit-backdrop-filter: blur(12px);
				border-bottom: 1px solid var(--color-border-subtle);
			}

			.nav {
				display: flex;
				justify-content: space-between;
				align-items: center;
				max-width: var(--wide-width);
				margin: 0 auto;
				padding: var(--spacing-4) var(--spacing-6);
				height: var(--nav-height);
			}

			.site-title {
				font-size: var(--font-size-lg);
				font-weight: 600;
				color: var(--color-text);
				text-decoration: none;
				letter-spacing: var(--tracking-snug);
			}

			.site-title:hover {
				color: var(--color-accent);
			}

			.nav-right {
				display: flex;
				align-items: center;
				gap: var(--spacing-6);
			}

			.nav-links {
				display: flex;
				gap: var(--spacing-5);
				font-size: var(--font-size-sm);
			}

			.nav-links a {
				text-decoration: none;
				color: var(--color-text);
				transition: color var(--transition-fast);
			}

			.nav-links a:hover {
				color: var(--color-accent);
			}

			.nav-admin {
				font-size: var(--font-size-sm);
				color: var(--color-muted);
				text-decoration: none;
				opacity: 0.5;
				transition: opacity var(--transition-fast);
			}

			.nav-admin:hover {
				opacity: 1;
			}

			/* Search styling */
			.site-search {
				position: relative;
				width: var(--search-input-width);
				--emdash-search-border-focus: var(--color-accent);
			}

			:global(.site-search-input) {
				width: var(--search-input-width);
				padding: var(--spacing-2) var(--spacing-3);
				font-family: var(--font-sans);
				font-size: var(--font-size-sm);
				border: 1px solid var(--color-border);
				border-radius: var(--radius);
				background: var(--color-bg);
				color: var(--color-text);
				transition:
					border-color var(--transition-fast),
					box-shadow var(--transition-fast);
			}

			:global(.site-search-input)::placeholder {
				color: var(--color-muted);
			}

			:global(.site-search-input):focus,
			:global(.site-search-input):focus-visible {
				outline: none;
				border-color: var(--color-accent) !important;
				box-shadow: 0 0 0 3px var(--color-accent-ring);
			}

			:global(.site-search-results) {
				position: absolute;
				top: 100%;
				left: 0;
				right: 0;
				margin-top: var(--spacing-2);
				background: var(--color-bg);
				border: 1px solid var(--color-border);
				border-radius: var(--radius-lg);
				box-shadow: var(--shadow-dropdown);
				max-height: 400px;
				overflow-y: auto;
				z-index: 1000;
			}

			:global(.site-search-results .emdash-live-search-loading),
			:global(.site-search-results .emdash-live-search-no-results) {
				padding: var(--spacing-4);
				text-align: center;
				color: var(--color-muted);
				font-size: var(--font-size-sm);
			}

			:global(.site-search-result) {
				display: block;
				padding: var(--spacing-3) var(--spacing-4);
				text-decoration: none;
				color: var(--color-text);
				border-bottom: 1px solid var(--color-border-subtle);
				transition: background var(--transition-fast);
			}

			:global(.site-search-result):last-child {
				border-bottom: none;
			}

			:global(.site-search-result):hover,
			:global(.site-search-result):focus,
			:global(.site-search-result.focused) {
				background: var(--color-surface);
				outline: none;
			}

			:global(.site-search-result .emdash-live-search-result-title) {
				display: block;
				font-weight: 500;
				font-size: var(--font-size-sm);
			}

			:global(.site-search-result .emdash-live-search-result-collection) {
				display: block;
				font-size: var(--font-size-xs);
				color: var(--color-muted);
				text-transform: uppercase;
				letter-spacing: var(--tracking-wide);
				margin-top: 2px;
			}

			:global(.site-search-result .emdash-live-search-result-snippet) {
				display: block;
				font-size: var(--font-size-sm);
				color: var(--color-muted);
				margin-top: var(--spacing-1);
				line-height: var(--leading-snug);
			}

			:global(.site-search-result .emdash-live-search-result-snippet mark) {
				font-weight: 600;
				color: var(--color-text);
			}

			main {
				min-height: calc(100vh - var(--nav-height) - 300px);
			}

			/* Footer */
			.site-footer {
				background: var(--color-bg-subtle);
				border-top: 1px solid var(--color-border-subtle);
			}

			.footer-inner {
				max-width: var(--wide-width);
				margin: 0 auto;
				padding: var(--spacing-16) var(--spacing-6) var(--spacing-8);
			}

			.footer-grid {
				display: grid;
				grid-template-columns: 2fr 1fr 1fr 1fr;
				gap: var(--spacing-12);
				margin-bottom: var(--spacing-12);
			}

			.footer-brand {
				max-width: 280px;
			}

			.footer-logo {
				font-size: var(--font-size-lg);
				font-weight: 600;
				color: var(--color-text);
				text-decoration: none;
				letter-spacing: var(--tracking-snug);
			}

			.footer-tagline {
				margin-top: var(--spacing-3);
				font-size: var(--font-size-sm);
				color: var(--color-muted);
				line-height: var(--leading-relaxed);
			}

			.footer-nav {
				min-width: 0;
			}

			.footer-heading {
				font-size: var(--font-size-xs);
				font-weight: 500;
				text-transform: uppercase;
				letter-spacing: var(--tracking-wider);
				color: var(--color-muted);
				margin-bottom: var(--spacing-4);
			}

			.footer-links {
				list-style: none;
			}

			.footer-links li {
				margin-bottom: var(--spacing-2);
			}

			.footer-links a {
				color: var(--color-text-secondary);
				text-decoration: none;
				font-size: var(--font-size-sm);
				transition: color var(--transition-fast);
			}

			.footer-links a:hover {
				color: var(--color-text);
			}

			.footer-widgets-section :global(.widget-area) {
				display: block;
			}

			.footer-widgets-section :global(.widget) {
				color: var(--color-text-secondary);
			}

			.footer-widgets-section :global(.widget__title) {
				font-size: var(--font-size-xs);
				font-weight: 500;
				text-transform: uppercase;
				letter-spacing: var(--tracking-wider);
				color: var(--color-muted);
				margin-bottom: var(--spacing-4);
			}

			.footer-widgets-section :global(.widget__content) {
				color: var(--color-text-secondary);
				font-size: var(--font-size-sm);
				line-height: var(--leading-relaxed);
			}

			.footer-bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: var(--spacing-6);
				border-top: 1px solid var(--color-border);
			}

			.footer-copyright {
				font-size: var(--font-size-sm);
				color: var(--color-muted);
			}

			.footer-copyright a {
				color: var(--color-text-secondary);
			}

			/* Theme switcher */
			.theme-switcher {
				display: flex;
				gap: var(--spacing-1);
				padding: var(--spacing-1);
				background: var(--color-surface);
				border-radius: var(--radius);
			}

			.theme-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 32px;
				height: 28px;
				background: transparent;
				border: none;
				color: var(--color-muted);
				border-radius: var(--radius);
				cursor: pointer;
				transition: all var(--transition-fast);
			}

			.theme-btn:hover {
				color: var(--color-text-secondary);
			}

			.theme-btn.active {
				background: var(--color-bg);
				color: var(--color-text);
				box-shadow: var(--shadow-btn-active);
			}

			.theme-btn svg {
				width: 16px;
				height: 16px;
			}

			@media (max-width: 900px) {
				.footer-grid {
					grid-template-columns: 1fr 1fr;
					gap: var(--spacing-8);
				}

				.footer-brand {
					grid-column: span 2;
					max-width: none;
				}
			}

			@media (max-width: 640px) {
				.site-header {
					position: relative;
					border-bottom: none;
				}

				.nav {
					flex-direction: row;
					flex-wrap: wrap;
					justify-content: space-between;
					align-items: center;
					height: auto;
					gap: var(--spacing-2);
					padding: var(--spacing-3) var(--spacing-4);
				}

				.site-title {
					font-size: var(--font-size-base);
				}

				.nav-right {
					display: contents;
				}

				.site-search {
					order: 0;
					max-width: 140px;
				}

				:global(.site-search-input) {
					width: 140px !important;
					padding: var(--spacing-1) var(--spacing-2) !important;
					font-size: var(--font-size-sm) !important;
				}

				.nav-links {
					order: 1;
					width: 100%;
					display: flex;
					column-gap: var(--spacing-3);
					row-gap: var(--spacing-1);
					flex-wrap: wrap;
					justify-content: flex-start;
				}

				.nav-admin {
					order: 2;
					position: absolute;
					right: var(--spacing-4);
					top: var(--spacing-3);
					font-size: var(--font-size-xs);
				}

				.footer-grid {
					grid-template-columns: 1fr;
				}

				.footer-brand {
					grid-column: span 1;
				}

				.footer-bottom {
					flex-direction: column;
					gap: var(--spacing-4);
					text-align: center;
				}

				.footer-controls {
					flex-wrap: wrap;
					justify-content: center;
				}
			}
		</style>

		<script>
			// ⌘K / Ctrl+K to focus search
			document.addEventListener("keydown", (e) => {
				if ((e.metaKey || e.ctrlKey) && e.key === "k") {
					e.preventDefault();
					const searchInput = document.querySelector(
						".site-search-input"
					) as HTMLInputElement;
					if (searchInput) {
						searchInput.focus();
					}
				}
			});
		</script>
		<EmDashBodyEnd page={pageCtx} />
	</body>
</html>
