---
import Card from '../ui/Card.astro';
import Heading from '../typography/Heading.astro';
import Text from '../typography/Text.astro';
import Button from '../ui/Button.astro';
import { Icon } from 'astro-icon/components';

export interface Props {
	plan: {
		id: string;
		name: string;
		price: number;
		priceText: string;
		monthlyEquivalent?: number;
		startMana?: number;
		regeneration?: number;
		storage?: number;
		mana?: number;
		icon: string;
		popular?: boolean;
		features?: string[];
	};
	type: 'subscription' | 'onetime';
	billingPeriod?: 'monthly' | 'yearly';
}

const { plan, type, billingPeriod = 'monthly' } = Astro.props;
---

<div class="relative group h-full">
	<div class="relative h-full">
		<div
			class="absolute -inset-0.5 bg-gradient-to-r from-mana-blue/0 via-mana-blue/20 to-mana-blue/0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur"
		>
		</div>
		<div
			class="relative h-full bg-white/90 backdrop-blur-sm dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700 group-hover:border-mana-blue/50 transition-all duration-300"
		>
			<!-- Header -->
			<div class="text-center mb-6">
				<div
					class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-mana-blue/10 to-blue-500/10 rounded-2xl mb-4 group-hover:scale-110 transition-transform"
				>
					<span class="text-3xl">{plan.icon}</span>
				</div>
				<Heading as="h3" size="5" class="mb-3 text-center">{plan.name}</Heading>

				<!-- Price -->
				<div class="mb-4">
					<div class="flex items-baseline justify-center gap-1">
						<span
							class="text-4xl font-bold bg-gradient-to-br from-mana-blue to-blue-600 bg-clip-text text-transparent"
						>
							{plan.price === 0 ? 'Kostenlos' : plan.price.toString().replace('.', ',')}
						</span>
						{plan.price > 0 && <span class="text-2xl text-gray-600 dark:text-gray-400">€</span>}
					</div>
					{
						billingPeriod === 'yearly' && plan.monthlyEquivalent && (
							<Text size="sm" class="text-gray-600 dark:text-gray-400 mt-1 text-center block">
								{plan.monthlyEquivalent.toFixed(2).replace('.', ',')}€ pro Monat
							</Text>
						)
					}
					{
						type === 'subscription' && plan.price > 0 && (
							<Text size="sm" class="text-gray-600 dark:text-gray-400 text-center block">
								pro {billingPeriod === 'monthly' ? 'Monat' : 'Jahr'}
							</Text>
						)
					}
				</div>
			</div>

			<!-- Stats for Subscription -->
			{
				type === 'subscription' && (
					<div class="space-y-3 mb-6">
						<div class="bg-gradient-to-r from-blue-50 to-cyan-50 dark:from-gray-700 dark:to-gray-700 rounded-xl p-4 border border-blue-100 dark:border-gray-600">
							<div class="flex items-center justify-between">
								<Text size="sm" class="text-gray-600 dark:text-gray-400">
									Start-Mana
								</Text>
								<Text weight="semibold" class="text-mana-blue text-lg">
									{plan.startMana?.toLocaleString('de-DE')}
								</Text>
							</div>
						</div>
						<div class="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-gray-700 dark:to-gray-700 rounded-xl p-4 border border-green-100 dark:border-gray-600">
							<div class="flex items-center justify-between">
								<Text size="sm" class="text-gray-600 dark:text-gray-400">
									Regeneration
								</Text>
								<Text weight="semibold" class="text-green-600 dark:text-green-400 text-lg">
									{plan.regeneration} Mana/Tag
								</Text>
							</div>
						</div>
						<div class="bg-gradient-to-r from-purple-50 to-pink-50 dark:from-gray-700 dark:to-gray-700 rounded-xl p-4 border border-purple-100 dark:border-gray-600">
							<div class="flex items-center justify-between">
								<Text size="sm" class="text-gray-600 dark:text-gray-400">
									Max. Speicher
								</Text>
								<Text weight="semibold" class="text-purple-600 dark:text-purple-400 text-lg">
									{plan.storage?.toLocaleString('de-DE')}
								</Text>
							</div>
						</div>
					</div>
				)
			}

			<!-- Mana Amount for One-time -->
			{
				type === 'onetime' && (
					<div class="text-center mb-6">
						<div class="relative">
							<div class="absolute inset-0 bg-gradient-to-br from-mana-blue/20 to-blue-500/20 rounded-2xl blur-xl" />
							<div class="relative bg-gradient-to-br from-mana-blue/10 to-blue-500/10 rounded-2xl p-8 border border-mana-blue/20">
								<div class="text-5xl font-bold bg-gradient-to-br from-mana-blue to-blue-600 bg-clip-text text-transparent">
									{plan.mana?.toLocaleString('de-DE')}
								</div>
								<Text size="base" class="text-gray-600 dark:text-gray-400 mt-2 block">
									Mana Credits
								</Text>
							</div>
						</div>
					</div>
				)
			}

			<!-- Features -->
			{
				plan.features && (
					<ul class="space-y-3 mb-8">
						{plan.features.map((feature) => (
							<li class="flex items-start gap-3">
								<div class="flex-shrink-0 w-5 h-5 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center mt-0.5">
									<Icon name="mdi:check" class="w-3 h-3 text-green-600 dark:text-green-400" />
								</div>
								<Text size="sm" class="text-gray-700 dark:text-gray-300">
									{feature}
								</Text>
							</li>
						))}
					</ul>
				)
			}

			<!-- CTA -->
			<div class="mt-auto">
				<a
					href={plan.price === 0 ? '/register' : '/purchase'}
					class="inline-flex items-center justify-center w-full px-6 py-3 rounded-lg font-medium transition-all duration-300 border-2 border-gray-300 dark:border-gray-600 hover:border-mana-blue dark:hover:border-mana-blue hover:bg-mana-blue/5"
				>
					<Icon name="mdi:rocket-launch" class="w-5 h-5 mr-2" />
					{plan.price === 0 ? 'Jetzt starten' : 'Plan auswählen'}
				</a>
			</div>
		</div>
	</div>
</div>
