@php
    $publicPlans   = $plans->where('is_internal', false);
    $internalPlans = $plans->where('is_internal', true);
@endphp

<div class="space-y-6">

    {{-- HEADER --}}
    <div class="flex items-start justify-between">
        <div>
            <h2 class="text-xl font-semibold text-gray-800">{{ t('admin.plans.title') }}</h2>
            <p class="text-sm text-gray-500 mt-1">{{ t('admin.plans.subtitle') }}</p>
        </div>
        <button wire:click="$dispatch('openModal', { component: 'admin.plans.modals.form' })"
                class="flex items-center gap-1.5 text-sm font-medium bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition-colors">
            <x-heroicon-o-plus class="w-4 h-4"/>
            {{ t('admin.plans.new') }}
        </button>
    </div>


    {{-- ═══════════════════════════════════════════════════════ --}}
    {{-- ÖFFENTLICHE PLÄNE                                       --}}
    {{-- ═══════════════════════════════════════════════════════ --}}
    <div>
        <div class="flex items-center gap-3 mb-3">
            <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">{{ t('admin.plans.public') }}</p>
            <div class="h-px flex-1 bg-gray-100"></div>
            <span class="text-[11px] text-gray-400">{{ $publicPlans->count() }} {{ t('admin.plans.plans') }}</span>
        </div>

        @if($publicPlans->where('active', true)->isNotEmpty())
            <div class="grid md:grid-cols-2 xl:grid-cols-3 gap-4 mb-4">
                @foreach($publicPlans->where('active', true) as $plan)
                    @php
                        $aiConfig = is_string($plan->ai_config) ? json_decode($plan->ai_config, true) : ($plan->ai_config ?? []);
                        $model = $aiConfig['model'] ?? '—';
                    @endphp
                    <div class="bg-white border border-gray-100 rounded-xl shadow-sm p-5 hover:shadow-md transition-shadow">

                        <div class="flex items-start justify-between mb-4">
                            <div>
                                <p class="text-sm font-semibold text-gray-800">{{ $plan->name }}</p>
                                <div class="flex items-center gap-1 mt-0.5">
                                    <span class="text-[10px] font-semibold bg-green-50 text-green-700 px-1.5 py-0.5 rounded-full">{{ t('common.active') }}</span>
                                    @if($plan->is_featured)
                                        <span class="text-[10px] font-semibold bg-indigo-50 text-indigo-600 px-1.5 py-0.5 rounded-full">{{ t('admin.plans.popular') }}</span>
                                    @endif
                                </div>
                            </div>
                            <div class="flex gap-1">
                                <button wire:click="$dispatch('openModal', { component: 'admin.plans.modals.form', arguments: { id: @js($plan->id) } })"
                                        class="p-1.5 text-gray-400 hover:text-indigo-600 hover:bg-indigo-50 rounded-lg transition-colors">
                                    <x-heroicon-o-pencil class="w-4 h-4"/>
                                </button>
                                <button wire:click="delete('{{ $plan->id }}')"
                                        wire:confirm="{{ t('admin.plans.confirm_delete', ['name' => $plan->name]) }}"
                                        class="p-1.5 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors">
                                    <x-heroicon-o-trash class="w-4 h-4"/>
                                </button>
                            </div>
                        </div>

                        <p class="text-xl font-bold text-gray-900 mb-3">
                            @if($plan->price === 0)
                                {{ t('admin.plans.free') }}
                            @else
                                {{ number_format($plan->price / 100, 2, ',', '.') }} €
                                <span class="text-xs font-normal text-gray-400">{{ t('admin.plans.per_month') }}</span>
                            @endif
                        </p>

                        <div class="flex items-center justify-between text-xs text-gray-500 pt-3 border-t border-gray-50">
                            <span class="flex items-center gap-1">
                                <x-heroicon-o-sparkles class="w-3.5 h-3.5 text-indigo-400"/>
                                {{ $plan->credit_limit <= 0 ? '∞' : number_format($plan->credit_limit) }} {{ t('common.credits') }}
                            </span>
                            <span class="flex items-center gap-1">
                                <x-heroicon-o-device-phone-mobile class="w-3.5 h-3.5 text-gray-400"/>
                                {{ $plan->device_limit <= 0 ? '∞' : $plan->device_limit }} {{ t('admin.plans.devices') }}
                            </span>
                            <span class="text-[10px] text-gray-300 bg-gray-50 border border-gray-100 px-1.5 py-0.5 rounded-md font-mono">
                                {{ $model }}
                            </span>
                        </div>

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

        {{-- Inaktive öffentliche Pläne --}}
        @if($publicPlans->where('active', false)->isNotEmpty())
            <div class="grid md:grid-cols-2 xl:grid-cols-3 gap-4">
                @foreach($publicPlans->where('active', false) as $plan)
                    <div class="bg-white border border-gray-100 rounded-xl shadow-sm p-5 opacity-60 hover:opacity-100 transition-opacity">
                        <div class="flex items-start justify-between mb-3">
                            <div>
                                <p class="text-sm font-semibold text-gray-800">{{ $plan->name }}</p>
                                <span class="text-[10px] font-semibold bg-gray-100 text-gray-500 px-1.5 py-0.5 rounded-full">{{ t('common.inactive') }}</span>
                            </div>
                            <div class="flex gap-1">
                                <button wire:click="$dispatch('openModal', { component: 'admin.plans.modals.form', arguments: { id: @js($plan->id) } })"
                                        class="p-1.5 text-gray-400 hover:text-indigo-600 hover:bg-indigo-50 rounded-lg transition-colors">
                                    <x-heroicon-o-pencil class="w-4 h-4"/>
                                </button>
                                <button wire:click="delete('{{ $plan->id }}')"
                                        wire:confirm="{{ t('admin.plans.confirm_delete', ['name' => $plan->name]) }}"
                                        class="p-1.5 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors">
                                    <x-heroicon-o-trash class="w-4 h-4"/>
                                </button>
                            </div>
                        </div>
                        <p class="text-sm text-gray-400">
                            {{ $plan->credit_limit <= 0 ? '∞' : number_format($plan->credit_limit) }} {{ t('common.credits') }}
                            · {{ $plan->device_limit <= 0 ? '∞' : $plan->device_limit }} {{ t('admin.plans.devices') }}
                        </p>
                    </div>
                @endforeach
            </div>
        @endif

        @if($publicPlans->isEmpty())
            <p class="text-sm text-gray-400">{{ t('admin.plans.no_public') }}</p>
        @endif
    </div>


    {{-- ═══════════════════════════════════════════════════════ --}}
    {{-- INTERNE PLÄNE                                           --}}
    {{-- ═══════════════════════════════════════════════════════ --}}
    @if($internalPlans->isNotEmpty())
        <div>
            <div class="flex items-center gap-3 mb-3">
                <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">{{ t('admin.plans.internal') }}</p>
                <div class="h-px flex-1 bg-gray-100"></div>
                <span class="text-[10px] font-medium px-2 py-0.5 rounded-full bg-orange-50 text-orange-700 border border-orange-200">{{ t('admin.plans.not_public') }}</span>
                <span class="text-[11px] text-gray-400">{{ $internalPlans->count() }} {{ t('admin.plans.plans') }}</span>
            </div>

            <div class="space-y-2">
                @foreach($internalPlans as $plan)
                    @php
                        $aiConfig = is_string($plan->ai_config) ? json_decode($plan->ai_config, true) : ($plan->ai_config ?? []);
                        $model = $aiConfig['model'] ?? '—';
                        $roleLabel = match($plan->plan_key ?? '') {
                            'internal'    => t('admin.plans.role.admin'),
                            'developer'   => 'Developer',
                            'support'     => 'Support',
                            'affiliate'   => 'Affiliate',
                            'beta_tester' => 'Beta Tester',
                            default       => null,
                        };
                    @endphp
                    <div class="bg-gray-50/50 border border-dashed border-gray-200 rounded-xl px-5 py-4 flex items-center justify-between gap-4">
                        <div class="flex items-center gap-3 min-w-0">
                            <div class="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center shrink-0">
                                <x-heroicon-o-lock-closed class="w-4 h-4 text-gray-400"/>
                            </div>
                            <div class="min-w-0">
                                <div class="flex items-center gap-2">
                                    <span class="text-sm font-medium text-gray-700">{{ $plan->name }}</span>
                                    <span class="text-[9px] font-semibold px-1.5 py-0.5 rounded-full bg-orange-50 text-orange-700 border border-orange-200">{{ t('admin.plans.internal_badge') }}</span>
                                    @if($roleLabel)
                                        <span class="text-[11px] text-gray-400">→ {{ $roleLabel }}</span>
                                    @endif
                                </div>
                                <div class="flex items-center gap-3 mt-0.5 text-xs text-gray-400">
                                    <span>{{ $plan->credit_limit === 0 ? '∞ Unlimited' : number_format($plan->credit_limit) . ' Credits/mo' }}</span>
                                    <span>·</span>
                                    <span class="font-mono text-[10px] text-gray-300 bg-white border border-gray-100 px-1.5 py-0.5 rounded-md">{{ $model }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="flex items-center gap-2 shrink-0">
                            <span class="text-[10px] font-medium px-2 py-0.5 rounded-full bg-gray-100 text-gray-500">{{ t('admin.plans.auto_assigned') }}</span>
                            <button wire:click="$dispatch('openModal', { component: 'admin.plans.modals.form', arguments: { id: @js($plan->id) } })"
                                    class="p-1.5 text-gray-400 hover:text-indigo-600 hover:bg-indigo-50 rounded-lg transition-colors">
                                <x-heroicon-o-pencil class="w-4 h-4"/>
                            </button>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endif


    {{-- EMPTY STATE --}}
    @if($plans->isEmpty())
        <div class="bg-white border border-gray-100 rounded-xl shadow-sm py-16 flex flex-col items-center gap-3">
            <div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center">
                <x-heroicon-o-credit-card class="w-6 h-6 text-gray-400"/>
            </div>
            <p class="text-sm text-gray-500">{{ t('admin.plans.no_plans') }}</p>
        </div>
    @endif

</div>
