<div class="flex flex-col max-h-[85vh]">

    {{-- HEADER --}}
    <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100">
        <div>
            <p class="text-sm font-semibold text-gray-800">{{ $planId ? t('admin.plans.form.edit') : t('admin.plans.form.new') }}</p>
            <p class="text-xs text-gray-400">{{ t('admin.plans.form.step', ['step' => $step]) }}</p>
        </div>
        <div class="flex gap-1 bg-gray-100 rounded-lg p-1">
            <button wire:click="$set('step', 1)"
                    class="px-3 py-1 rounded-md text-xs font-medium transition-all
                        {{ $step === 1 ? 'bg-white text-gray-800 shadow-sm' : 'text-gray-500 hover:text-gray-700' }}">
                {{ t('admin.plans.form.general') }}
            </button>
            <button wire:click="$set('step', 2)"
                    class="px-3 py-1 rounded-md text-xs font-medium transition-all
                        {{ $step === 2 ? 'bg-white text-gray-800 shadow-sm' : 'text-gray-500 hover:text-gray-700' }}">
                {{ t('admin.plans.form.features') }}
            </button>
        </div>
    </div>


    {{-- BODY --}}
    <div class="flex-1 overflow-y-auto px-6 py-5 space-y-4">

        {{-- STEP 1 --}}
        @if($step === 1)

            <div>
                <label class="block text-xs font-medium text-gray-600 mb-1.5">{{ t('admin.plans.form.name') }}</label>
                <input wire:model.live="name" type="text" placeholder="{{ t('admin.plans.form.name_ph') }}"
                       class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-indigo-400 placeholder:text-gray-400">
            </div>

            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1.5">{{ t('admin.plans.form.price') }}</label>
                    <input wire:model.live="price" type="number" min="0" placeholder="1500"
                           class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-indigo-400 placeholder:text-gray-400">
                    @if($price > 0)
                        <p class="text-[11px] text-gray-400 mt-1">= {{ number_format($price / 100, 2, ',', '.') }} €</p>
                    @endif
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1.5">{{ t('admin.plans.form.discount') }}</label>
                    <input wire:model.live="yearly_discount_months" type="number" min="0" max="12"
                           @disabled($price <= 0)
                           placeholder="2"
                           class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-indigo-400 placeholder:text-gray-400 disabled:opacity-40">
                </div>
            </div>

            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1.5">{{ t('admin.plans.form.credits') }}</label>
                    <input wire:model="credit_limit" type="number" min="0" placeholder="500"
                           class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-indigo-400 placeholder:text-gray-400">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1.5">{{ t('admin.plans.form.devices') }}</label>
                    <input wire:model="device_limit" type="number" min="0" placeholder="3"
                           class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-indigo-400 placeholder:text-gray-400">
                </div>
            </div>

            {{-- AI Konfiguration --}}
            <div class="border border-gray-100 rounded-xl p-4 space-y-3">
                <p class="text-xs font-medium text-gray-600">{{ t('admin.plans.form.ai_config') }}</p>

                <div>
                    <label class="block text-[11px] text-gray-400 mb-1">{{ t('admin.plans.form.model') }}</label>
                    <select wire:model.live="ai_config.model" wire:change="getAiModelDefaults"
                            class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-400">
                        <option value="">{{ t('admin.plans.form.model_ph') }}</option>
                        @foreach(config('ai_models') as $key => $model)
                            <option value="{{ $key }}">{{ $model['label'] }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="block text-[11px] text-gray-400 mb-1">{{ t('admin.plans.form.max_tokens') }}</label>
                        <input wire:model.lazy="ai_config.max_tokens" type="number" min="1"
                               placeholder="{{ $this->getAiModelDefaults()['max_tokens'] ?? '4096' }}"
                               class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-400 placeholder:text-gray-400">
                    </div>
                    <div>
                        <label class="block text-[11px] text-gray-400 mb-1">{{ t('admin.plans.form.temperature') }}</label>
                        <input wire:model.lazy="ai_config.temperature" type="number" step="0.1" min="0" max="1"
                               placeholder="{{ $this->getAiModelDefaults()['temperature'] ?? '0.7' }}"
                               class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-400 placeholder:text-gray-400">
                    </div>
                </div>
            </div>

            <div class="flex items-center justify-between py-2">
                <div>
                    <p class="text-sm font-medium text-gray-700">{{ t('admin.plans.form.active') }}</p>
                    <p class="text-xs text-gray-400">{{ t('admin.plans.form.active_desc') }}</p>
                </div>
                <button type="button" wire:click="$toggle('active')"
                        class="relative inline-flex h-5 w-9 cursor-pointer items-center rounded-full transition-colors
                            {{ $active ? 'bg-indigo-600' : 'bg-gray-200' }}">
                    <span class="inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow transition-transform
                        {{ $active ? 'translate-x-4.5' : 'translate-x-0.5' }}"></span>
                </button>
            </div>

            <div class="flex items-center justify-between py-2">
                <div>
                    <p class="text-sm font-medium text-gray-700">{{ t('admin.plans.form.featured') }}</p>
                    <p class="text-xs text-gray-400">{{ t('admin.plans.form.featured_desc') }}</p>
                </div>
                <button type="button" wire:click="$toggle('is_featured')"
                        class="relative inline-flex h-5 w-9 cursor-pointer items-center rounded-full transition-colors
                            {{ $is_featured ? 'bg-indigo-600' : 'bg-gray-200' }}">
                    <span class="inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow transition-transform
                        {{ $is_featured ? 'translate-x-4.5' : 'translate-x-0.5' }}"></span>
                </button>
            </div>

        @endif


        {{-- STEP 2: FEATURES --}}
        @if($step === 2)
            <div class="space-y-4">

                <div class="flex items-center justify-between">
                    <p class="text-xs text-gray-400">{{ t('admin.plans.form.assign') }}</p>
                    <button wire:click="$dispatch('openModal', { component: 'admin.features.modals.form' })"
                            class="flex items-center gap-1 text-xs text-indigo-600 hover:bg-indigo-50 px-2 py-1 rounded-lg transition-colors">
                        <x-heroicon-o-plus class="w-3.5 h-3.5"/>
                        {{ t('admin.plans.form.feature') }}
                    </button>
                </div>

                @foreach($groupedFeatures as $group)
                    <div>
                        <p class="text-[10px] font-semibold text-gray-400 uppercase tracking-wide mb-2">{{ $group->label }}</p>
                        <div class="grid grid-cols-2 gap-2">
                            @foreach($group->features as $feature)
                                @php $selected = in_array($feature->id, $selectedFeatures); @endphp
                                <button type="button"
                                        wire:click="toggleFeature('{{ $feature->id }}')"
                                        class="flex items-center gap-2.5 p-3 rounded-xl border text-left transition-all
                                            {{ $selected
                                                ? 'bg-indigo-50 border-indigo-300 text-indigo-700'
                                                : 'bg-white border-gray-200 hover:border-gray-300 text-gray-600' }}">
                                    <div class="w-7 h-7 rounded-lg flex items-center justify-center shrink-0
                                        {{ $selected ? 'bg-indigo-600' : 'bg-gray-100' }}">
                                        <x-dynamic-component :component="$feature->icon"
                                                             class="w-3.5 h-3.5 {{ $selected ? 'text-white' : 'text-gray-400' }}"/>
                                    </div>
                                    <span class="text-xs font-medium flex-1">{{ $feature->label }}</span>
                                    @if($selected)
                                        <x-heroicon-s-check-circle class="w-4 h-4 text-indigo-500 shrink-0"/>
                                    @endif
                                </button>
                            @endforeach
                        </div>
                    </div>
                @endforeach

            </div>
        @endif

    </div>


    {{-- FOOTER --}}
    <div class="px-6 py-4 border-t border-gray-100 flex items-center justify-between">
        @if($step === 2)
            <button wire:click="prevStep"
                    class="px-4 py-2 text-sm text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
                {{ t('admin.plans.form.back') }}
            </button>
        @else
            <div></div>
        @endif

        <div class="flex gap-2">
            <button wire:click="$dispatch('closeModal')"
                    class="px-4 py-2 text-sm text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
                {{ t('common.cancel') }}
            </button>
            @if($step === 1)
                <button wire:click="nextStep"
                        class="px-4 py-2 text-sm font-medium bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition-colors">
                    {{ t('admin.plans.form.next') }}
                </button>
            @else
                <button wire:click="save"
                        class="px-4 py-2 text-sm font-medium bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition-colors">
                    {{ t('common.save') }}
                </button>
            @endif
        </div>
    </div>

</div>
