@php
    $fields = collect($fields);
    $valuesById = $valuesById ?? collect();
    $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-3 {{ $hasTabs ? 'mb-5 pb-5 border-b border-slate-200' : '' }}">
        @foreach($childOthers as $field)
            @php $value = $valuesById->get($field->id); @endphp
            <div class="p-4 rounded-xl bg-slate-50 border border-slate-100">
                <p class="text-xs font-medium text-slate-500 uppercase tracking-wide">{{ $field->label }}</p>
                @if(!empty($field->description))
                    <p class="text-xs text-slate-400 italic mt-0.5 mb-1.5">{{ $field->description }}</p>
                @endif
                @if($field->type === 'table')
                    @include('partials.table-value-display', ['field' => $field, 'value' => $value?->value])
                @elseif($field->type === 'file')
                    <div class="mt-1">
                        <x-file-preview :path="$value?->value" />
                    </div>
                @else
                    <p class="mt-1 text-slate-800 font-medium">
                        @if($field->type === 'checkbox_group')
                            {{ implode(', ', json_decode($value?->value ?? '[]', true) ?? []) ?: '—' }}
                        @else
                            {{ $value?->value ?: '—' }}
                        @endif
                    </p>
                @endif
            </div>
        @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-3">
                    @if($tab->children->isEmpty())
                        <p class="text-sm text-slate-400 italic">Aucun champ dans ce groupe.</p>
                    @else
                        @include('partials.admin-submission-tree', [
                            'fields' => $tab->children,
                            'valuesById' => $valuesById,
                            'level' => $level + 1,
                        ])
                    @endif
                </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-3">
                    @if($tab->children->isEmpty())
                        <p class="text-sm text-slate-400 italic">Aucun champ dans ce groupe.</p>
                    @else
                        @include('partials.admin-submission-tree', [
                            'fields' => $tab->children,
                            'valuesById' => $valuesById,
                            'level' => $level + 1,
                        ])
                    @endif
                </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-3">
                    @if($tab->children->isEmpty())
                        <p class="text-sm text-slate-400 italic">Aucun champ dans ce groupe.</p>
                    @else
                        @include('partials.admin-submission-tree', [
                            'fields' => $tab->children,
                            'valuesById' => $valuesById,
                            'level' => $level + 1,
                        ])
                    @endif
                </div>
            @endforeach
        @endif
    </div>
@endif
