<div class="max-w-5xl mx-auto space-y-10">

    {{-- HEADER --}}
    <div class="text-center space-y-1">
        <h1 class="text-2xl font-semibold text-gray-800">{{ t('subscription.title') }}</h1>
        <p class="text-sm text-gray-400">{{ t('subscription.subtitle') }}</p>
    </div>


    {{-- AKTUELLER PLAN --}}
    @if($subscription)
        <div class="bg-white border border-gray-100 rounded-2xl shadow-sm overflow-hidden">

            <div class="px-6 py-5 flex items-start justify-between gap-4 border-b border-gray-50">
                <div>
                    <p class="text-[11px] font-medium text-gray-400 uppercase tracking-wide mb-1">{{ t('subscription.current_plan') }}</p>
                    <div class="flex items-center gap-2">
                        <h2 class="text-lg font-semibold text-gray-800">{{ $subscription->plan_name }}</h2>
                        <span class="text-[10px] font-bold {{ $subscription->status->badgeBg() }} {{ $subscription->status->badgeText() }} px-2 py-0.5 rounded-full">
                            {{ $subscription->status->label() }}
                        </span>
                    </div>
                </div>
                <div class="text-right shrink-0">
                    <p class="text-xl font-bold text-gray-800 tabular-nums">
                        {{ number_format($subscription->price / 100, 2, ',', '.') }} €
                    </p>
                    <p class="text-xs text-gray-400">
                        / {{ $subscription->interval === 'yearly' ? t('common.year') : t('common.month') }}
                    </p>
                </div>
            </div>

            <div class="px-6 py-4 flex flex-wrap gap-x-8 gap-y-3">
                <div>
                    <p class="text-[11px] text-gray-400 mb-0.5">{{ t('subscription.duration') }}</p>
                    <p class="text-sm font-medium text-gray-700">
                        {{ $subscription->interval === 'yearly' ? t('subscription.yearly') : t('subscription.monthly') }}
                    </p>
                </div>
                @if($subscription->starts_at)
                    <div>
                        <p class="text-[11px] text-gray-400 mb-0.5">{{ t('subscription.active_since') }}</p>
                        <p class="text-sm font-medium text-gray-700">{{ $subscription->starts_at->format('d.m.Y') }}</p>
                    </div>
                @endif
                @if($subscription->ends_at)
                    <div>
                        <p class="text-[11px] text-gray-400 mb-0.5">
                            {{ $subscription->status === \App\Enums\SubscriptionStatus::Canceled ? t('subscription.ends_at') : t('subscription.renews_at') }}
                        </p>
                        <p class="text-sm font-medium {{ $subscription->ends_at->isPast() ? 'text-red-600' : 'text-gray-700' }}">
                            {{ $subscription->ends_at->format('d.m.Y') }}
                        </p>
                    </div>
                @endif
                @if($subscription->plan?->credit_limit)
                    <div>
                        <p class="text-[11px] text-gray-400 mb-0.5">{{ t('subscription.credits_month') }}</p>
                        <p class="text-sm font-medium text-gray-700">{{ number_format($subscription->plan->credit_limit) }}</p>
                    </div>
                @endif
            </div>

        </div>
    @else
        <div class="bg-white border border-gray-100 rounded-2xl shadow-sm px-6 py-8 text-center">
            <div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mx-auto mb-3">
                <x-heroicon-o-credit-card class="w-6 h-6 text-gray-400"/>
            </div>
            <p class="text-base font-semibold text-gray-800 mb-1">{{ t('subscription.no_plan') }}</p>
            <p class="text-sm text-gray-400">{{ t('subscription.no_plan_hint') }}</p>
        </div>
    @endif


    {{-- INTERNE USER: Kein Plan-Wechsel --}}
    @if(auth()->user()->isInternalUser())
        <div class="bg-green-50 border border-green-200 rounded-2xl px-6 py-4 text-center">
            <p class="text-sm text-green-800">{{ t('subscription.internal') }}</p>
        </div>
    @else

    {{-- PLAN WECHSELN --}}
    <div class="space-y-6">

        <div class="text-center space-y-3">
            <p class="text-base font-semibold text-gray-800">{{ t('subscription.change_plan') }}</p>
            <div class="inline-flex bg-gray-100 rounded-xl p-1 gap-1">
                <button wire:click="$set('billing', 'monthly')"
                        class="px-5 py-1.5 rounded-lg text-sm font-medium transition-all
                            {{ $billing === 'monthly' ? 'bg-white text-gray-800 shadow-sm' : 'text-gray-500 hover:text-gray-700' }}">
                    {{ t('subscription.monthly') }}
                </button>
                <button wire:click="$set('billing', 'yearly')"
                        class="flex items-center gap-2 px-5 py-1.5 rounded-lg text-sm font-medium transition-all
                            {{ $billing === 'yearly' ? 'bg-white text-gray-800 shadow-sm' : 'text-gray-500 hover:text-gray-700' }}">
                    {{ t('subscription.yearly') }}
                    <span class="text-[11px] font-semibold text-green-600 bg-green-50 px-1.5 py-0.5 rounded-full">
                        {{ t('subscription.save_months') }}
                    </span>
                </button>
            </div>
        </div>

        {{-- FIX 1: Cards zentriert mit max-width --}}
        <div class="flex justify-center gap-6 flex-wrap" style="max-width: 700px; margin: 0 auto;">
            @foreach($plans as $plan)
                @php
                    $isCurrent    = $subscription && $subscription->plan_id === $plan->id;
                    $priceMonthly = $plan->price / 100;
                    $priceYearly  = ($plan->price * (12 - $plan->yearly_discount_months)) / 100;
                    $perMonth     = $priceYearly / 12;
                    $isUpgrade    = !$subscription || ($subscription->plan && $plan->sort > $subscription->plan->sort);
                @endphp

                <div class="relative bg-white flex flex-col rounded-2xl shadow-sm transition-all flex-1 min-w-[260px] max-w-[320px]
                    {{ $plan->is_featured ? 'border-2 border-indigo-400 scale-105 shadow-lg z-10' : 'border border-gray-100' }}
                    {{ $isCurrent ? 'ring-2 ring-indigo-300' : '' }}">

                    @if($plan->is_featured && !$isCurrent)
                        <div class="absolute -top-3.5 left-1/2 -translate-x-1/2">
                            <span class="bg-indigo-600 text-white text-[11px] font-bold px-3 py-1 rounded-full shadow-sm">
                                {{ t('subscription.popular') }}
                            </span>
                        </div>
                    @endif
                    @if($isCurrent)
                        <div class="absolute -top-3.5 left-1/2 -translate-x-1/2">
                            <span class="bg-green-500 text-white text-[11px] font-bold px-3 py-1 rounded-full shadow-sm">
                                {{ t('subscription.your_plan') }}
                            </span>
                        </div>
                    @endif

                    <div class="p-5 flex-1 flex flex-col">

                        <p class="text-base font-bold text-gray-800 mb-3">{{ $plan->name }}</p>

                        <div class="mb-4">
                            @if($plan->price === 0)
                                <p class="text-3xl font-bold text-gray-900">{{ t('subscription.free') }}</p>
                            @elseif($billing === 'monthly')
                                <p class="text-3xl font-bold text-gray-900">
                                    {{ number_format($priceMonthly, 2, ',', '.') }} €
                                </p>
                                <p class="text-xs text-gray-400 mt-0.5">{{ t('subscription.per_month') }}</p>
                            @else
                                <p class="text-3xl font-bold text-gray-900">
                                    {{ number_format($perMonth, 2, ',', '.') }} €
                                </p>
                                <p class="text-xs text-gray-400 mt-0.5">
                                    {{ t('subscription.per_month') }} · {{ number_format($priceYearly, 2, ',', '.') }} € {{ t('subscription.billed_yearly') }}
                                    @if($plan->yearly_discount_months > 0)
                                        <span class="text-green-600 font-medium">
                                            ({{ t('subscription.months_free', ['count' => $plan->yearly_discount_months]) }})
                                        </span>
                                    @endif
                                </p>
                            @endif
                        </div>

                        <div class="bg-gray-50 border border-gray-100 rounded-xl px-4 py-3 mb-4 flex items-center justify-between">
                            <span class="text-xs text-gray-500">{{ t('subscription.credits_month') }}</span>
                            <span class="text-lg font-bold text-gray-800">
                                {{ $plan->credit_limit <= 0 ? '∞' : number_format($plan->credit_limit) }}
                            </span>
                        </div>

                        <div class="flex-1"></div>

                        @if($isCurrent)
                            <div class="w-full py-2.5 text-sm font-medium text-center rounded-xl bg-gray-50 text-gray-400 border border-gray-200">
                                {{ t('subscription.current_active') }}
                            </div>
                        @else
                            <button wire:click="selectPlan('{{ $plan->id }}')"
                                    class="w-full py-2.5 text-sm font-semibold rounded-xl transition-colors
                                        {{ $plan->is_featured
                                            ? 'bg-indigo-600 hover:bg-indigo-700 text-white'
                                            : 'bg-white hover:bg-gray-50 text-gray-700 border border-gray-200' }}">
                                {{ $isUpgrade ? t('common.upgrade') : t('subscription.downgrade') }}
                            </button>
                        @endif

                    </div>
                </div>
            @endforeach
        </div>

        <div class="h-6"></div>

        {{-- FEATURE-VERGLEICHSTABELLE --}}
        @php
            $featureGroups = $allFeatures->groupBy('feature_group_id');
            $groupModels = \App\Models\FeatureGroup::whereIn('id', $allFeatures->pluck('feature_group_id')->unique())
                ->orderBy('sort')->get()->keyBy('id');
        @endphp
        <div class="bg-white border border-gray-100 rounded-2xl shadow-sm overflow-hidden">

            {{-- Header --}}
            <div class="grid border-b border-gray-100" style="grid-template-columns: 1fr repeat({{ $plans->count() }}, 120px);">
                <div class="px-5 py-4 text-xs text-gray-400">{{ t('subscription.features') }}</div>
                @foreach($plans as $plan)
                    <div class="px-3 py-4 text-center border-l border-gray-100 {{ $plan->is_featured ? 'bg-indigo-50/30' : '' }}">
                        <p class="text-xs font-semibold text-gray-800">{{ $plan->name }}</p>
                        <p class="text-[11px] text-gray-400 mt-0.5">
                            {{ $plan->credit_limit <= 0 ? '∞' : number_format($plan->credit_limit) }} Credits
                        </p>
                    </div>
                @endforeach
            </div>

            @foreach($groupModels as $groupId => $group)
                @php $gFeatures = ($featureGroups[$groupId] ?? collect())->sortBy('sort'); @endphp
                @if($gFeatures->isEmpty()) @continue @endif

                {{-- Gruppen-Header --}}
                <div class="grid border-b border-gray-100 bg-gray-50/50" style="grid-template-columns: 1fr repeat({{ $plans->count() }}, 120px);">
                    <div class="px-5 py-2 text-[10px] font-semibold text-gray-400 uppercase tracking-wider">{{ $group->label }}</div>
                    @foreach($plans as $plan)
                        <div class="border-l border-gray-100 {{ $plan->is_featured ? 'bg-indigo-50/20' : '' }}"></div>
                    @endforeach
                </div>

                {{-- Feature-Zeilen --}}
                @foreach($gFeatures as $feature)
                    <div class="grid border-b border-gray-50 hover:bg-gray-50/30 transition-colors" style="grid-template-columns: 1fr repeat({{ $plans->count() }}, 120px);">
                        <div class="px-5 py-3 text-[13px] text-gray-600">{{ $feature->label }}</div>
                        @foreach($plans as $plan)
                            <div class="px-3 py-3 text-center border-l border-gray-50 {{ $plan->is_featured ? 'bg-indigo-50/20' : '' }}">
                                @if($plan->features->contains('key', $feature->key))
                                    <div class="w-5 h-5 rounded-full bg-green-50 flex items-center justify-center mx-auto">
                                        <x-heroicon-s-check class="w-3 h-3 text-green-500"/>
                                    </div>
                                @else
                                    <div class="w-5 h-5 flex items-center justify-center mx-auto">
                                        <div class="w-3 h-px bg-gray-200 rounded-full"></div>
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                @endforeach
            @endforeach

            {{-- Footer mit Buttons --}}
            <div class="grid border-t border-gray-100" style="grid-template-columns: 1fr repeat({{ $plans->count() }}, 120px);">
                <div></div>
                @foreach($plans as $plan)
                    @php
                        $isCurrent = $subscription && $subscription->plan_id === $plan->id;
                        $isUpgrade = !$subscription || ($subscription->plan && $plan->sort > $subscription->plan->sort);
                    @endphp
                    <div class="px-3 py-4 border-l border-gray-100 {{ $plan->is_featured ? 'bg-indigo-50/20' : '' }}">
                        @if($isCurrent)
                            <p class="text-center text-[11px] text-gray-400">{{ t('subscription.current') }}</p>
                        @else
                            <button wire:click="selectPlan('{{ $plan->id }}')"
                                    class="w-full py-2 text-[11px] font-semibold rounded-lg transition-colors
                                        {{ $plan->is_featured
                                            ? 'bg-indigo-600 hover:bg-indigo-700 text-white'
                                            : 'bg-white hover:bg-gray-50 text-gray-600 border border-gray-200' }}">
                                {{ $isUpgrade ? t('common.upgrade') : t('subscription.switch') }}
                            </button>
                        @endif
                    </div>
                @endforeach
            </div>

        </div>

        <div class="flex items-center justify-center gap-6 text-xs text-gray-400 pt-2">
            <span class="flex items-center gap-1.5">
                <x-heroicon-o-check-circle class="w-4 h-4 text-green-500"/>
                {{ t('subscription.cancel_anytime') }}
            </span>
            <span class="flex items-center gap-1.5">
                <x-heroicon-o-check-circle class="w-4 h-4 text-green-500"/>
                {{ t('subscription.no_hidden_costs') }}
            </span>
            <span class="flex items-center gap-1.5">
                <x-heroicon-o-check-circle class="w-4 h-4 text-green-500"/>
                {{ t('subscription.instant_active') }}
            </span>
        </div>

    </div>

    @endif {{-- Ende: !isInternalUser --}}

</div>
