---
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>
            <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>