<x-filament-panels::page>
    <x-logistics.error-banner :message="$errorMessage" />

    @if ($tablesMetadata)
        <x-logistics.stat-bar>
            <x-logistics.stat-item icon="heroicon-o-server" :value="$tablesMetadata['endpoint'] ?? '-'" />
            <x-logistics.stat-item icon="heroicon-o-circle-stack" label="Type :" :value="$tablesMetadata['folderType'] ?? '-'" />
            <x-logistics.stat-item icon="heroicon-o-table-cells" :value="($tablesMetadata['tableCount'] ?? count($tables)) . ' table(s)'" />
        </x-logistics.stat-bar>
    @endif

    <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
        {{-- Panneau gauche : liste des tables --}}
        <x-logistics.card class="lg:col-span-1">
            <x-logistics.section-header
                title="Tables disponibles"
                description="Sélectionnez une table pour explorer ses colonnes."
            />

            @if (count($tables) > 6)
                <div class="px-6 pt-4">
                    <x-logistics.search-input
                        wire:model.live.debounce.200ms="tableFilter"
                        placeholder="Filtrer les tables..."
                    />
                </div>
            @endif

            <div class="max-h-[32rem] space-y-0.5 overflow-y-auto p-2">
                @forelse ($this->filteredTables as $table)
                    @php
                        $tableName = $table['name'] ?? '';
                        $columnCount = $table['columnCount'] ?? 0;
                        $isSelected = $selectedTable === $tableName;
                    @endphp
                    <button
                        wire:click="selectTable('{{ $tableName }}')"
                        wire:key="table-{{ $tableName }}"
                        @class([
                            'flex w-full items-center justify-between rounded-lg px-3 py-2.5 text-left text-sm transition-colors',
                            'bg-primary-50 text-primary-700 ring-1 ring-primary-200 dark:bg-primary-400/10 dark:text-primary-400 dark:ring-primary-400/30' => $isSelected,
                            'text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-white/5' => ! $isSelected,
                        ])
                    >
                        <div class="flex items-center gap-2.5">
                            <x-filament::icon
                                icon="heroicon-o-table-cells"
                                @class([
                                    'h-4 w-4 shrink-0',
                                    'text-primary-500 dark:text-primary-400' => $isSelected,
                                    'text-gray-400' => ! $isSelected,
                                ])
                            />
                            <span class="font-mono font-medium">{{ $tableName }}</span>
                        </div>
                        <span @class([
                            'rounded-full px-2 py-0.5 text-xs font-medium tabular-nums',
                            'bg-primary-100 text-primary-700 dark:bg-primary-400/20 dark:text-primary-300' => $isSelected,
                            'bg-gray-100 text-gray-500 dark:bg-white/10 dark:text-gray-400' => ! $isSelected,
                        ])>
                            {{ $columnCount }}
                        </span>
                    </button>
                @empty
                    <x-logistics.empty-state
                        icon="heroicon-o-table-cells"
                        :title="filled($tableFilter) ? 'Aucune table ne correspond au filtre.' : 'Aucune table trouvée.'"
                        :description="filled($tableFilter) ? null : 'Vérifiez votre clé API.'"
                    />
                @endforelse
            </div>
        </x-logistics.card>

        {{-- Panneau droit : colonnes de la table selectionnee --}}
        <x-logistics.card class="lg:col-span-2">
            <x-logistics.section-header :title="$selectedTable ? 'Colonnes de ' . $selectedTable : 'Colonnes'">
                <x-slot:actions>
                    @if ($columnsMetadata && $selectedTable)
                        <span class="rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium tabular-nums text-gray-600 dark:bg-white/10 dark:text-gray-300">
                            {{ $columnsMetadata['columnCount'] ?? count($columns) }} colonne(s)
                        </span>
                    @endif
                </x-slot:actions>
            </x-logistics.section-header>

            <div class="p-6">
                @if ($selectedTable)
                    <div wire:loading wire:target="selectTable" class="flex items-center justify-center py-12">
                        <x-filament::loading-indicator class="h-6 w-6 text-primary-500" />
                        <span class="ml-3 text-sm text-gray-500">Chargement des colonnes...</span>
                    </div>

                    <div wire:loading.remove wire:target="selectTable">
                        @if (count($columns) > 0)
                            <div class="overflow-x-auto">
                                <table class="w-full text-left text-sm">
                                    <thead>
                                        <tr class="border-b border-gray-200 dark:border-white/10">
                                            <th class="px-3 py-2.5 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">Nom</th>
                                            <th class="px-3 py-2.5 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">Type</th>
                                            <th class="px-3 py-2.5 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">Longueur</th>
                                            <th class="px-3 py-2.5 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">Précision</th>
                                        </tr>
                                    </thead>
                                    <tbody class="divide-y divide-gray-100 dark:divide-white/5">
                                        @foreach ($columns as $column)
                                            @php
                                                $dataType = strtoupper($column['dataType'] ?? '');
                                                $typeLabel = \App\Filament\Pages\TablesExplorer::getDataTypeLabel($dataType);
                                            @endphp
                                            <tr class="transition-colors hover:bg-gray-50 dark:hover:bg-white/5">
                                                <td class="px-3 py-2.5">
                                                    <span class="font-mono text-sm font-medium text-gray-900 dark:text-white">{{ $column['name'] ?? '-' }}</span>
                                                </td>
                                                <td class="px-3 py-2.5">
                                                    <span @class([
                                                        'inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium ring-1 ring-inset',
                                                        'bg-blue-50 text-blue-700 ring-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400 dark:ring-blue-400/30' => $dataType === 'C',
                                                        'bg-emerald-50 text-emerald-700 ring-emerald-600/20 dark:bg-emerald-400/10 dark:text-emerald-400 dark:ring-emerald-400/30' => $dataType === 'N',
                                                        'bg-violet-50 text-violet-700 ring-violet-600/20 dark:bg-violet-400/10 dark:text-violet-400 dark:ring-violet-400/30' => in_array($dataType, ['T', 'D']),
                                                        'bg-amber-50 text-amber-700 ring-amber-600/20 dark:bg-amber-400/10 dark:text-amber-400 dark:ring-amber-400/30' => $dataType === 'L',
                                                        'bg-gray-50 text-gray-700 ring-gray-600/20 dark:bg-gray-400/10 dark:text-gray-400 dark:ring-gray-400/30' => ! in_array($dataType, ['C', 'N', 'T', 'D', 'L']),
                                                    ])>
                                                        {{ $typeLabel }}
                                                    </span>
                                                </td>
                                                <td class="px-3 py-2.5 tabular-nums text-gray-600 dark:text-gray-300">{{ $column['length'] ?? '-' }}</td>
                                                <td class="px-3 py-2.5 tabular-nums text-gray-600 dark:text-gray-300">{{ $column['precision'] ?? '-' }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <x-logistics.empty-state icon="heroicon-o-inbox" title="Aucune colonne trouvée pour cette table." />
                        @endif
                    </div>
                @else
                    <x-logistics.empty-state
                        icon="heroicon-o-cursor-arrow-rays"
                        title="Aucune table sélectionnée"
                        description="Choisissez une table dans la liste pour afficher ses colonnes."
                    />
                @endif
            </div>
        </x-logistics.card>
    </div>
</x-filament-panels::page>
