@php
    $fields = collect($fields);
    $readOnly = $readOnly ?? false;
    $prefilled = $prefilled ?? [];
    $scopeId = $scopeId ?? 'lvl_'.uniqid();
    $level = $level ?? 1;

    $childGroups = $fields->filter(fn($f) => $f->type === 'group')->values();
    $childOthers = $fields->filter(fn($f) => $f->type !== 'group')->values();
    $hasTabs = $childGroups->count() >= 1;
    $defaultTab = $childGroups->isNotEmpty() ? 'tab_'.$childGroups->first()->id : null;
@endphp

@if($childOthers->isNotEmpty())
    <div class="space-y-2 {{ $hasTabs ? 'mb-4 pb-4 border-b border-slate-200' : '' }}">
        @foreach($childOthers as $child)
            @include('partials.dynamic-field-input', ['field' => $child, 'readOnly' => $readOnly, 'prefilled' => $prefilled, 'level' => $level])
        @endforeach
    </div>
@endif

@if($hasTabs)
    <div x-data="{ activeTab: '{{ $defaultTab }}' }" class="w-full">
        @if($level === 1)
            {{-- Niveau 1 : Onglets horizontaux majuscules avec bordure inférieure et défilement --}}
            <div class="relative mb-6">
                <div class="flex items-center gap-1 border-b border-slate-200 overflow-x-auto scroll-smooth flex-nowrap -mb-px">
                    @foreach($childGroups as $tab)
                        <button type="button"
                                @click="activeTab = 'tab_{{ $tab->id }}'"
                                :class="activeTab === 'tab_{{ $tab->id }}'
                                    ? 'border-b-2 border-transtev-600 text-transtev-700 font-bold'
                                    : 'border-b-2 border-transparent text-slate-500 hover:text-slate-800 hover:border-slate-300'"
                                class="px-5 py-3 text-xs tracking-wider uppercase font-semibold whitespace-nowrap transition-all duration-200 -mb-[2px]">
                            {{ $tab->label }}
                        </button>
                    @endforeach
                </div>
            </div>

            {{-- Contenu Niveau 1 --}}
            @foreach($childGroups as $tab)
                <div x-show="activeTab === 'tab_{{ $tab->id }}'" x-cloak class="group-content-scroll group-content-scroll--l1 space-y-2">
                    @include('partials.dynamic-fields-list', [
                        'fields' => $tab->children,
                        'readOnly' => $readOnly,
                        'prefilled' => $prefilled,
                        'scopeId' => $scopeId.'_'.$tab->id,
                        'level' => $level + 1,
                    ])
                </div>
            @endforeach

        @elseif($level === 2)
            {{-- Niveau 2 : Boutons pilules horizontaux et défilables --}}
            <div class="flex items-center gap-2 overflow-x-auto py-2 mb-6 scroll-smooth flex-nowrap">
                @foreach($childGroups as $tab)
                    <button type="button"
                            @click="activeTab = 'tab_{{ $tab->id }}'"
                            :class="activeTab === 'tab_{{ $tab->id }}'
                                ? 'bg-transtev-600 text-white font-semibold shadow-sm'
                                : 'bg-white border border-slate-200 text-slate-600 hover:bg-slate-50 hover:text-slate-900'"
                            class="px-4 py-2 text-xs font-semibold rounded-full whitespace-nowrap transition-all duration-200">
                        {{ $tab->label }}
                    </button>
                @endforeach
            </div>

            {{-- Contenu Niveau 2 --}}
            @foreach($childGroups as $tab)
                <div x-show="activeTab === 'tab_{{ $tab->id }}'" x-cloak class="group-content-scroll group-content-scroll--l2 space-y-2">
                    @include('partials.dynamic-fields-list', [
                        'fields' => $tab->children,
                        'readOnly' => $readOnly,
                        'prefilled' => $prefilled,
                        'scopeId' => $scopeId.'_'.$tab->id,
                        'level' => $level + 1,
                    ])
                </div>
            @endforeach

        @else
            {{-- Niveau 3+ : Onglets minimalistes sans bordure, juste avec trait de soulignement --}}
            <div class="flex items-center gap-6 overflow-x-auto py-1.5 mb-5 border-b border-slate-100 flex-nowrap">
                @foreach($childGroups as $tab)
                    <button type="button"
                            @click="activeTab = 'tab_{{ $tab->id }}'"
                            :class="activeTab === 'tab_{{ $tab->id }}'
                                ? 'text-transtev-700 font-bold border-b-2 border-transtev-600'
                                : 'text-slate-500 hover:text-slate-800 border-b-2 border-transparent'"
                            class="px-1 py-2 text-xs font-semibold whitespace-nowrap transition-all duration-200 -mb-[8px]">
                        {{ $tab->label }}
                    </button>
                @endforeach
            </div>

            {{-- Contenu Niveau 3+ --}}
            @foreach($childGroups as $tab)
                <div x-show="activeTab === 'tab_{{ $tab->id }}'" x-cloak class="group-content-scroll group-content-scroll--l3 space-y-2">
                    @include('partials.dynamic-fields-list', [
                        'fields' => $tab->children,
                        'readOnly' => $readOnly,
                        'prefilled' => $prefilled,
                        'scopeId' => $scopeId.'_'.$tab->id,
                        'level' => $level + 1,
                    ])
                </div>
            @endforeach
        @endif
    </div>
@endif
