---
import type { CollectionEntry } from 'astro:content';
import type { ImageMetadata } from 'astro';
import BaseLayout from './BaseLayout.astro';
import FormattedDate from '../components/FormattedDate.astro';
import ReadingProgress from '../components/ReadingProgress.astro';
import PostNavigation from '../components/PostNavigation.astro';
import RelatedPosts from '../components/RelatedPosts.astro';
import { Image } from 'astro:assets';
import { SOCIAL_LINKS } from '../consts';

interface NavPost {
	title: string;
	href: string;
	heroImage?: ImageMetadata;
}

interface RelatedPost {
	title: string;
	description: string;
	pubDate: Date;
	heroImage?: ImageMetadata;
	category?: string;
	tags?: string[];
	href: string;
}

interface Props {
	title: string;
	description: string;
	pubDate: Date;
	updatedDate?: Date;
	heroImage?: ImageMetadata;
	category?: string;
	tags?: string[];
	headings?: Array<{ depth: number; slug: string; text: string }>;
	prevPost?: NavPost;
	nextPost?: NavPost;
	relatedPosts?: RelatedPost[];
	readTime?: string;
}

const {
	title,
	description,
	pubDate,
	updatedDate,
	heroImage,
	category,
	tags,
	headings = [],
	prevPost,
	nextPost,
	relatedPosts = [],
	readTime = '5 min read',
} = Astro.props;

// Article structured data (JSON-LD)
// References the canonical Person @id from BaseLayout for knowledge graph linking
const articleSchema = {
	"@context": "https://schema.org",
	"@type": "Article",
	"headline": title,
	"description": description,
	"datePublished": pubDate.toISOString(),
	"dateModified": (updatedDate || pubDate).toISOString(),
	"author": {
		"@id": `${SOCIAL_LINKS.website}/#person`
	},
	"publisher": {
		"@id": `${SOCIAL_LINKS.website}/#person`
	},
	"mainEntityOfPage": {
		"@type": "WebPage",
		"@id": Astro.url.href
	},
	...(heroImage && { "image": new URL(heroImage.src, Astro.url).toString() }),
	...(category && { "articleSection": category }),
	...(tags && tags.length > 0 && { "keywords": tags.join(", ") })
};
---

<BaseLayout 
	title={title} 
	description={description} 
	image={heroImage}
	type="article"
	publishedTime={pubDate}
	modifiedTime={updatedDate}
>
	<!-- Article Structured Data -->
	<script type="application/ld+json" set:html={JSON.stringify(articleSchema)} slot="head" />
	<ReadingProgress />
	
	<article class="relative pb-24">
		<!-- All content in same grid structure for consistent width -->
		<div class="container mx-auto px-6 lg:px-8">
			<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-8">
				<!-- Main Column -->
				<div class="lg:col-span-10 lg:col-start-2">
					<!-- Back Navigation -->
					<div class="mb-12">
						<a href="/blog" class="inline-flex items-center gap-2 text-sm text-[var(--theme-text-secondary)] hover:text-[var(--theme-text-primary)] transition-colors">
							<span>←</span>
							<span>Back to Blog</span>
						</a>
					</div>

					<!-- Hero Section: Side-by-Side Layout -->
					<header class="mb-20 lg:mb-24 relative">
						<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
							<!-- Text Content -->
							<div class="order-2 lg:order-1 relative z-10">
								<!-- Metadata -->
								<div class="flex flex-wrap items-center gap-3 text-sm text-[var(--theme-text-muted)] mb-6">
									<FormattedDate date={pubDate} />
									<span class="text-[var(--theme-text-subtle)]">·</span>
									<span>{readTime}</span>
								</div>
								
								{category && (
									<div class="mb-4">
										<span class="inline-block px-3 py-1 text-xs rounded-full bg-brand-accent/10 text-brand-accent">
											{category}
										</span>
									</div>
								)}
								
								<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-[var(--theme-text-primary)] leading-tight mb-6 break-words text-balance">
									{title}
								</h1>

								<p class="text-base md:text-lg text-[var(--theme-text-secondary)] leading-relaxed mb-8">
									{description}
								</p>
								
								<!-- Tags -->
								{tags && tags.length > 0 && (
									<div class="flex flex-wrap gap-2">
										{tags.map((tag) => (
											<span class="px-2 py-1 text-xs text-[var(--theme-text-muted)]">
												#{tag}
											</span>
										))}
									</div>
								)}
							</div>
							
							<!-- Hero Image -->
							{heroImage && (
								<div class="order-1 lg:order-2">
									<div class="relative aspect-[4/3] lg:aspect-square overflow-hidden rounded-lg">
										<Image
											src={heroImage}
											alt=""
											width={800}
											height={800}
											loading="eager"
											class="w-full h-full object-cover"
										/>
									</div>
								</div>
							)}
						</div>
					</header>
					
					<!-- Main Content -->
					<div class="prose-custom">
						<slot />
					</div>
					
					<!-- Author Footer -->
					<footer class="mt-20 pt-8 border-t border-[var(--theme-border-primary)]">
						<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
							<div class="text-sm text-[var(--theme-text-muted)]">
								<span>Published <FormattedDate date={pubDate} /></span>
								{updatedDate && (
									<span> · Updated <FormattedDate date={updatedDate} /></span>
								)}
							</div>

							<!-- Share Links -->
							<div class="flex items-center gap-3">
								<span class="text-sm text-[var(--theme-text-muted)]">Share</span>
								<a
									href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(title)}&url=${encodeURIComponent(Astro.url.href)}`}
									target="_blank"
									rel="noopener noreferrer"
									class="w-9 h-9 flex items-center justify-center text-[var(--theme-text-muted)] hover:text-[var(--theme-text-primary)] transition-colors"
									aria-label="Share on Twitter"
								>
									<svg xmlns="http://www.w3.org/2000/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="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"/>
									</svg>
								</a>
								<a
									href={`https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(Astro.url.href)}&title=${encodeURIComponent(title)}`}
									target="_blank"
									rel="noopener noreferrer"
									class="w-9 h-9 flex items-center justify-center text-[var(--theme-text-muted)] hover:text-[var(--theme-text-primary)] transition-colors"
									aria-label="Share on LinkedIn"
								>
									<svg xmlns="http://www.w3.org/2000/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="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/>
										<rect width="4" height="12" x="2" y="9"/>
										<circle cx="4" cy="4" r="2"/>
									</svg>
								</a>
								<button
									type="button"
									onclick="navigator.clipboard.writeText(window.location.href)"
									class="w-9 h-9 flex items-center justify-center text-[var(--theme-text-muted)] hover:text-[var(--theme-text-primary)] transition-colors"
									aria-label="Copy link"
								>
									<svg xmlns="http://www.w3.org/2000/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="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
										<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
									</svg>
								</button>
							</div>
						</div>
					</footer>
					
					<!-- Post Navigation -->
					<PostNavigation prevPost={prevPost} nextPost={nextPost} />
					
					<!-- Related Posts -->
					<RelatedPosts posts={relatedPosts} />
					
					<!-- Back to Blog -->
					<div class="mt-16 pt-8 border-t border-[var(--theme-border-primary)] flex justify-center lg:justify-start">
						<a href="/blog" class="inline-flex items-center gap-2 text-sm text-[var(--theme-text-secondary)] hover:text-brand-accent transition-colors">
							<span>←</span>
							<span>All Posts</span>
						</a>
					</div>
				</div>
				
				<!-- Table of Contents is now inline on wider layouts -->
			</div>
		</div>
	</article>
</BaseLayout>
