---
import Layout from '../layouts/Layout.astro';
import Navbar from '../components/navigation/Navbar.astro';
import Footer from '../components/navigation/Footer.astro';
import Section from '../components/content/Section.astro';
import Container from '../components/layout/Container.astro';
import Grid from '../components/layout/Grid.astro';
import Flex from '../components/layout/Flex.astro';
import Card from '../components/ui/Card.astro';
import Button from '../components/ui/Button.astro';
import Heading from '../components/typography/Heading.astro';
import Text from '../components/typography/Text.astro';
import Badge from '../components/ui/Badge.astro';
import Image from '../components/ui/Image.astro';
import HeroSection from '../components/content/HeroSection.astro';
import ImageTextSection from '../components/content/ImageTextSection.astro';
import PricingCard from '../components/pricing/PricingCard.astro';
import { Icon } from 'astro-icon/components';

// Sample data for components
const samplePricingPlan = {
	name: 'Professional',
	price: 29,
	interval: 'month',
	mana: 5000,
	features: ['Alle KI-Tools', 'Priority Support', 'API-Zugang', 'Team-Features'],
	popular: true,
};
---

<Layout title="Design System - Mana">
	<Navbar />

	<!-- Sticky Design System Navigation -->
	<div
		class="sticky top-16 z-40 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 shadow-sm"
	>
		<Container>
			<div class="flex items-center justify-between py-4">
				<nav class="flex items-center gap-6 overflow-x-auto scrollbar-hide">
					<a
						href="#typography"
						class="text-sm font-medium hover:text-mana-blue whitespace-nowrap transition-colors"
						>Typography</a
					>
					<a
						href="#colors"
						class="text-sm font-medium hover:text-mana-blue whitespace-nowrap transition-colors"
						>Colors</a
					>
					<a
						href="#buttons"
						class="text-sm font-medium hover:text-mana-blue whitespace-nowrap transition-colors"
						>Buttons</a
					>
					<a
						href="#cards"
						class="text-sm font-medium hover:text-mana-blue whitespace-nowrap transition-colors"
						>Cards</a
					>
					<a
						href="#layout"
						class="text-sm font-medium hover:text-mana-blue whitespace-nowrap transition-colors"
						>Layout</a
					>
					<a
						href="#sections"
						class="text-sm font-medium hover:text-mana-blue whitespace-nowrap transition-colors"
						>Sections</a
					>
					<a
						href="#pricing"
						class="text-sm font-medium hover:text-mana-blue whitespace-nowrap transition-colors"
						>Pricing</a
					>
					<a
						href="#navigation"
						class="text-sm font-medium hover:text-mana-blue whitespace-nowrap transition-colors"
						>Navigation</a
					>
				</nav>

				<!-- Wireframe Toggle -->
				<div class="flex items-center gap-2 ml-4 flex-shrink-0">
					<label class="text-sm font-medium">Wireframes</label>
					<button
						id="wireframe-toggle"
						class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition-colors"
						onclick="toggleWireframes()"
					>
						<span class="sr-only">Toggle wireframes</span>
						<span
							class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-1"
						></span>
					</button>
				</div>
			</div>
		</Container>
	</div>

	<!-- Hero -->
	<HeroSection
		title="Mana Design System"
		subtitle="Alle UI-Komponenten und Patterns im Überblick"
		minHeight="small"
		background="gradient"
		titleSize="2"
		containerClass="pt-16 pb-8"
	/>

	<!-- Typography Section -->
	<Section spacing="xlarge" id="typography">
		<Container>
			<Heading as="h2" size="3" class="mb-8">Typography</Heading>

			<Grid cols={2} gap="large">
				<Card padding="large" variant="bordered">
					<Heading as="h3" size="5" class="mb-4">Headings</Heading>
					<div class="space-y-4">
						<Heading as="h1" size="1">Heading Size 1</Heading>
						<Heading as="h2" size="2">Heading Size 2</Heading>
						<Heading as="h3" size="3">Heading Size 3</Heading>
						<Heading as="h4" size="4">Heading Size 4</Heading>
						<Heading as="h5" size="5">Heading Size 5</Heading>
						<Heading as="h6" size="6">Heading Size 6</Heading>
					</div>
				</Card>

				<Card padding="large" variant="bordered">
					<Heading as="h3" size="5" class="mb-4">Text Variants</Heading>
					<div class="space-y-4">
						<Text size="xs">Extra Small Text (xs)</Text>
						<Text size="sm">Small Text (sm)</Text>
						<Text size="base">Base Text (base)</Text>
						<Text size="lg">Large Text (lg)</Text>
						<Text size="xl">Extra Large Text (xl)</Text>
						<Text size="2xl">2X Large Text (2xl)</Text>
						<div class="pt-4 border-t">
							<Text weight="light">Light Weight</Text>
							<Text weight="normal">Normal Weight</Text>
							<Text weight="medium">Medium Weight</Text>
							<Text weight="semibold">Semibold Weight</Text>
							<Text weight="bold">Bold Weight</Text>
						</div>
					</div>
				</Card>
			</Grid>
		</Container>
	</Section>

	<!-- Colors Section -->
	<Section spacing="xlarge" class="bg-gray-50 dark:bg-gray-900" id="colors">
		<Container>
			<Heading as="h2" size="3" class="mb-8">Colors</Heading>

			<Grid cols={4} gap="medium">
				<Card padding="large" variant="bordered">
					<div class="h-24 bg-mana-blue rounded-lg mb-4"></div>
					<Text weight="semibold">Mana Blue</Text>
					<Text size="sm" color="muted">#3B82F6</Text>
				</Card>

				<Card padding="large" variant="bordered">
					<div class="h-24 bg-gray-900 dark:bg-gray-100 rounded-lg mb-4"></div>
					<Text weight="semibold">Text Primary</Text>
					<Text size="sm" color="muted">gray-900 / gray-100</Text>
				</Card>

				<Card padding="large" variant="bordered">
					<div class="h-24 bg-gray-600 dark:bg-gray-400 rounded-lg mb-4"></div>
					<Text weight="semibold">Text Muted</Text>
					<Text size="sm" color="muted">gray-600 / gray-400</Text>
				</Card>

				<Card padding="large" variant="bordered">
					<div
						class="h-24 bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-950/20 dark:to-purple-950/20 rounded-lg mb-4"
					>
					</div>
					<Text weight="semibold">Gradient</Text>
					<Text size="sm" color="muted">Blue to Purple</Text>
				</Card>
			</Grid>
		</Container>
	</Section>

	<!-- Buttons Section -->
	<Section spacing="xlarge" id="buttons">
		<Container>
			<Heading as="h2" size="3" class="mb-8">Buttons</Heading>

			<div class="space-y-8">
				<!-- Button Variants -->
				<Card padding="large" variant="bordered">
					<Heading as="h3" size="5" class="mb-6">Variants</Heading>
					<Flex gap="medium" wrap class="mb-4">
						<Button variant="primary">Primary Button</Button>
						<Button variant="secondary">Secondary Button</Button>
						<Button variant="outline">Outline Button</Button>
						<Button variant="ghost">Ghost Button</Button>
						<Button variant="danger">Danger Button</Button>
					</Flex>
				</Card>

				<!-- Button Sizes -->
				<Card padding="large" variant="bordered">
					<Heading as="h3" size="5" class="mb-6">Sizes</Heading>
					<Flex gap="medium" align="center" wrap>
						<Button size="small">Small</Button>
						<Button size="medium">Medium</Button>
						<Button size="large">Large</Button>
					</Flex>
				</Card>

				<!-- Button States -->
				<Card padding="large" variant="bordered">
					<Heading as="h3" size="5" class="mb-6">States</Heading>
					<Flex gap="medium" wrap>
						<Button>Normal</Button>
						<Button disabled>Disabled</Button>
						<Button class="animate-pulse">Loading...</Button>
					</Flex>
				</Card>

				<!-- Icon Buttons -->
				<Card padding="large" variant="bordered">
					<Heading as="h3" size="5" class="mb-6">With Icons</Heading>
					<Flex gap="medium" wrap>
						<Button>
							<Icon name="mdi:arrow-left" class="w-4 h-4 mr-2" />
							Back
						</Button>
						<Button>
							Next
							<Icon name="mdi:arrow-right" class="w-4 h-4 ml-2" />
						</Button>
						<Button variant="outline">
							<Icon name="mdi:download" class="w-4 h-4 mr-2" />
							Download
						</Button>
					</Flex>
				</Card>
			</div>
		</Container>
	</Section>

	<!-- Cards Section -->
	<Section spacing="xlarge" class="bg-gray-50 dark:bg-gray-900" id="cards">
		<Container>
			<Heading as="h2" size="3" class="mb-8">Cards</Heading>

			<Grid cols={3} gap="large">
				<Card variant="flat" padding="large">
					<Heading as="h3" size="5" class="mb-2">Flat Card</Heading>
					<Text color="muted">This is a flat card variant with no shadow or border.</Text>
				</Card>

				<Card variant="bordered" padding="large">
					<Heading as="h3" size="5" class="mb-2">Bordered Card</Heading>
					<Text color="muted">This card has a border around it.</Text>
				</Card>

				<Card variant="elevated" padding="large">
					<Heading as="h3" size="5" class="mb-2">Elevated Card</Heading>
					<Text color="muted">This card has a shadow effect for elevation.</Text>
				</Card>
			</Grid>

			<div class="mt-8">
				<Heading as="h3" size="5" class="mb-6">Card Padding Options</Heading>
				<Grid cols={4} gap="medium">
					<Card variant="bordered" padding="none">
						<div class="p-4 bg-gray-100 dark:bg-gray-800">
							<Text size="sm">No Padding</Text>
						</div>
					</Card>
					<Card variant="bordered" padding="small">
						<Text size="sm">Small Padding</Text>
					</Card>
					<Card variant="bordered" padding="medium">
						<Text size="sm">Medium Padding</Text>
					</Card>
					<Card variant="bordered" padding="large">
						<Text size="sm">Large Padding</Text>
					</Card>
				</Grid>
			</div>
		</Container>
	</Section>

	<!-- Layout Components -->
	<Section spacing="xlarge" id="layout">
		<Container>
			<Heading as="h2" size="3" class="mb-8">Layout Components</Heading>

			<!-- Grid Examples -->
			<div class="space-y-8">
				<Card padding="large" variant="bordered">
					<Heading as="h3" size="5" class="mb-6">Grid System</Heading>

					<div class="space-y-6">
						<div>
							<Text size="sm" weight="semibold" class="mb-3">2 Columns</Text>
							<Grid cols={2} gap="medium">
								<div class="bg-gray-100 dark:bg-gray-800 p-4 rounded">Col 1</div>
								<div class="bg-gray-100 dark:bg-gray-800 p-4 rounded">Col 2</div>
							</Grid>
						</div>

						<div>
							<Text size="sm" weight="semibold" class="mb-3">3 Columns</Text>
							<Grid cols={3} gap="medium">
								<div class="bg-gray-100 dark:bg-gray-800 p-4 rounded">Col 1</div>
								<div class="bg-gray-100 dark:bg-gray-800 p-4 rounded">Col 2</div>
								<div class="bg-gray-100 dark:bg-gray-800 p-4 rounded">Col 3</div>
							</Grid>
						</div>

						<div>
							<Text size="sm" weight="semibold" class="mb-3">4 Columns</Text>
							<Grid cols={4} gap="medium">
								<div class="bg-gray-100 dark:bg-gray-800 p-4 rounded">1</div>
								<div class="bg-gray-100 dark:bg-gray-800 p-4 rounded">2</div>
								<div class="bg-gray-100 dark:bg-gray-800 p-4 rounded">3</div>
								<div class="bg-gray-100 dark:bg-gray-800 p-4 rounded">4</div>
							</Grid>
						</div>
					</div>
				</Card>

				<!-- Flex Examples -->
				<Card padding="large" variant="bordered">
					<Heading as="h3" size="5" class="mb-6">Flex Layouts</Heading>

					<div class="space-y-6">
						<div>
							<Text size="sm" weight="semibold" class="mb-3">Justify Options</Text>
							<div class="space-y-3">
								<Flex justify="start" class="bg-gray-100 dark:bg-gray-800 p-4 rounded">
									<div class="bg-mana-blue text-white px-3 py-1 rounded">Start</div>
								</Flex>
								<Flex justify="center" class="bg-gray-100 dark:bg-gray-800 p-4 rounded">
									<div class="bg-mana-blue text-white px-3 py-1 rounded">Center</div>
								</Flex>
								<Flex justify="end" class="bg-gray-100 dark:bg-gray-800 p-4 rounded">
									<div class="bg-mana-blue text-white px-3 py-1 rounded">End</div>
								</Flex>
							</div>
						</div>

						<div>
							<Text size="sm" weight="semibold" class="mb-3">Gap Options</Text>
							<Flex gap="small" class="bg-gray-100 dark:bg-gray-800 p-4 rounded">
								<div class="bg-mana-blue text-white px-3 py-1 rounded">Small</div>
								<div class="bg-mana-blue text-white px-3 py-1 rounded">Gap</div>
							</Flex>
							<Flex gap="medium" class="bg-gray-100 dark:bg-gray-800 p-4 rounded mt-2">
								<div class="bg-mana-blue text-white px-3 py-1 rounded">Medium</div>
								<div class="bg-mana-blue text-white px-3 py-1 rounded">Gap</div>
							</Flex>
							<Flex gap="large" class="bg-gray-100 dark:bg-gray-800 p-4 rounded mt-2">
								<div class="bg-mana-blue text-white px-3 py-1 rounded">Large</div>
								<div class="bg-mana-blue text-white px-3 py-1 rounded">Gap</div>
							</Flex>
						</div>
					</div>
				</Card>
			</div>
		</Container>
	</Section>

	<!-- Section Components -->
	<Section spacing="xlarge" class="bg-gray-50 dark:bg-gray-900" id="sections">
		<Container>
			<Heading as="h2" size="3" class="mb-8">Section Components</Heading>

			<div class="space-y-8">
				<!-- Hero Section Example -->
				<Card padding="none" variant="bordered" class="overflow-hidden">
					<HeroSection
						title="Hero Section Example"
						subtitle="This is how a hero section looks with different options"
						minHeight="medium"
						background="gradient"
						titleSize="3"
						sideImage={true}
						imageSrc="/images/Mana_River_Manacore_AI_Credits.jpg"
						imageAlt="Hero Example"
					>
						<Flex gap="medium" justify="center">
							<Button>Primary CTA</Button>
							<Button variant="outline">Secondary CTA</Button>
						</Flex>
					</HeroSection>
				</Card>

				<!-- Image Text Section -->
				<Card padding="none" variant="bordered" class="overflow-hidden">
					<ImageTextSection
						title="Image Text Section"
						content="This component displays content alongside an image. Perfect for feature explanations."
						imagePosition="left"
						imageSrc="/images/Mana_Drop_Manacore_AI_Credits.jpg"
						imageAlt="Feature Example"
					/>
				</Card>
			</div>
		</Container>
	</Section>

	<!-- Pricing Components -->
	<Section spacing="xlarge" id="pricing">
		<Container>
			<Heading as="h2" size="3" class="mb-8">Pricing Components</Heading>

			<Grid cols={3} gap="large">
				<PricingCard
					plan={{
						name: 'Starter',
						price: 0,
						interval: 'month',
						mana: 500,
						features: ['Basic Features', 'Email Support', '5 Projects'],
						popular: false,
					}}
					type="subscription"
					billingPeriod="monthly"
				/>

				<PricingCard plan={samplePricingPlan} type="subscription" billingPeriod="monthly" />

				<PricingCard
					plan={{
						name: 'Enterprise',
						price: 99,
						interval: 'month',
						mana: 20000,
						features: [
							'All Features',
							'Priority Support',
							'Unlimited Projects',
							'Custom Integration',
						],
						popular: false,
					}}
					type="subscription"
					billingPeriod="monthly"
				/>
			</Grid>
		</Container>
	</Section>

	<!-- UI Elements -->
	<Section spacing="xlarge" class="bg-gray-50 dark:bg-gray-900" id="navigation">
		<Container>
			<Heading as="h2" size="3" class="mb-8">UI Elements</Heading>

			<Grid cols={2} gap="large">
				<!-- Badges -->
				<Card padding="large" variant="bordered">
					<Heading as="h3" size="5" class="mb-6">Badges</Heading>
					<Flex gap="medium" wrap>
						<Badge>Default</Badge>
						<Badge variant="success">Success</Badge>
						<Badge variant="warning">Warning</Badge>
						<Badge variant="danger">Danger</Badge>
						<Badge variant="info">Info</Badge>
					</Flex>
				</Card>

				<!-- Icons -->
				<Card padding="large" variant="bordered">
					<Heading as="h3" size="5" class="mb-6">Icons</Heading>
					<Flex gap="large" wrap>
						<Icon name="mdi:home" class="w-6 h-6" />
						<Icon name="mdi:cog" class="w-6 h-6" />
						<Icon name="mdi:account" class="w-6 h-6" />
						<Icon name="mdi:bell" class="w-6 h-6" />
						<Icon name="mdi:heart" class="w-6 h-6" />
						<Icon name="mdi:star" class="w-6 h-6" />
					</Flex>
				</Card>
			</Grid>

			<!-- Images -->
			<Card padding="large" variant="bordered" class="mt-8">
				<Heading as="h3" size="5" class="mb-6">Image Component</Heading>
				<Grid cols={3} gap="medium">
					<div>
						<Text size="sm" weight="semibold" class="mb-2">Default</Text>
						<Image placeholder="feature" alt="Default Image" width={300} height={200} />
					</div>
					<div>
						<Text size="sm" weight="semibold" class="mb-2">Rounded</Text>
						<Image placeholder="team" alt="Rounded Image" width={300} height={200} rounded />
					</div>
					<div>
						<Text size="sm" weight="semibold" class="mb-2">With Shadow</Text>
						<Image
							placeholder="dashboard"
							alt="Shadow Image"
							width={300}
							height={200}
							class="shadow-lg"
						/>
					</div>
				</Grid>
			</Card>
		</Container>
	</Section>

	<Footer />

	<script>
		function toggleWireframes() {
			const toggle = document.getElementById('wireframe-toggle');
			const toggleSpan = toggle?.querySelector('span:last-child');
			const body = document.body;

			if (body.classList.contains('wireframe-mode')) {
				body.classList.remove('wireframe-mode');
				toggleSpan?.classList.remove('translate-x-5');
				toggleSpan?.classList.add('translate-x-1');
				toggle?.classList.remove('bg-mana-blue');
				toggle?.classList.add('bg-gray-200', 'dark:bg-gray-700');
			} else {
				body.classList.add('wireframe-mode');
				toggleSpan?.classList.remove('translate-x-1');
				toggleSpan?.classList.add('translate-x-5');
				toggle?.classList.remove('bg-gray-200', 'dark:bg-gray-700');
				toggle?.classList.add('bg-mana-blue');
			}
		}

		// Smooth scroll for navigation links
		document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
			anchor.addEventListener('click', function (e) {
				e.preventDefault();
				const target = document.querySelector(this.getAttribute('href'));
				if (target) {
					target.scrollIntoView({
						behavior: 'smooth',
						block: 'start',
					});
				}
			});
		});
	</script>

	<style>
		/* Hide scrollbar for navigation */
		.scrollbar-hide {
			-ms-overflow-style: none; /* IE and Edge */
			scrollbar-width: none; /* Firefox */
		}

		.scrollbar-hide::-webkit-scrollbar {
			display: none; /* Chrome, Safari and Opera */
		}

		/* Wireframe Mode Styles */
		.wireframe-mode * {
			color: #333 !important;
			background-color: transparent !important;
			background-image: none !important;
		}

		.wireframe-mode [class*='bg-'] {
			background-color: transparent !important;
			border: 2px dashed #999 !important;
		}

		.wireframe-mode img,
		.wireframe-mode [class*='Image'] {
			opacity: 0.1;
			border: 2px dashed #999;
		}

		.wireframe-mode button,
		.wireframe-mode a[class*='Button'] {
			background-color: transparent !important;
			border: 2px solid #666 !important;
			color: #666 !important;
		}

		.wireframe-mode [class*='Card'] {
			background-color: transparent !important;
			border: 2px dashed #999 !important;
			box-shadow: none !important;
		}

		.wireframe-mode [class*='text-mana-blue'],
		.wireframe-mode [class*='text-blue'],
		.wireframe-mode [class*='text-green'],
		.wireframe-mode [class*='text-red'],
		.wireframe-mode [class*='text-yellow'] {
			color: #666 !important;
		}

		.wireframe-mode [class*='from-'],
		.wireframe-mode [class*='to-'],
		.wireframe-mode [class*='via-'] {
			background: transparent !important;
		}

		/* Keep the toggle visible */
		.wireframe-mode #wireframe-toggle {
			background-color: #3b82f6 !important;
			border: none !important;
		}

		.wireframe-mode #wireframe-toggle span {
			background-color: white !important;
		}
	</style>
</Layout>
