{{-- API Keys Overview Partial --}}
<div class="row g-4">
    {{-- API Keys List --}}
    <div class="col-xl-8">
        <div class="card card-bordered shadow-sm">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h6 class="mb-0">
                    <x-ui.nicon name="key" class="me-2"/>
                    {{ __('Clés API') }}
                </h6>
                <button 
                    type="button" 
                    class="btn btn-sm btn-primary"
                    x-on:click="$wire.emit('showModal', 'modals.api.save-api-key-modal')"
                >
                    <x-ui.nicon name="plus" class="me-1"/>
                    {{ __('Nouvelle clé') }}
                </button>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th class="small fw-semibold">{{ __('Nom') }}</th>
                                <th class="small fw-semibold">{{ __('Source') }}</th>
                                <th class="small fw-semibold text-center">{{ __('Filtres') }}</th>
                                <th class="small fw-semibold text-center">{{ __('Commandes') }}</th>
                                <th class="small fw-semibold text-center">{{ __('Leads') }}</th>
                                <th class="small fw-semibold text-center">{{ __('Conversion') }}</th>
                                <th class="small fw-semibold text-end">{{ __('Revenus') }}</th>
                                <th class="small fw-semibold text-center">{{ __('Statut') }}</th>
                                <th class="text-end">{{ __('Actions') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($this->apiKeysWithSummaries as $apiKey)
                                <tr 
                                    class="cursor-pointer {{ $selectedApiKeyId === $apiKey['id'] ? 'table-primary' : '' }}"
                                    wire:click="selectApiKey({{ $apiKey['id'] }})"
                                    x-data="{ hover: false }"
                                    x-on:mouseenter="hover = true"
                                    x-on:mouseleave="hover = false"
                                >
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="tw-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-full bg-primary-dim me-2">
                                                <x-ui.nicon name="key" class="text-primary"/>
                                            </div>
                                            <div>
                                                <span class="fw-medium" x-bind:class="{ 'text-primary': hover }">
                                                    {{ $apiKey['name'] }}
                                                </span>
                                                @if($apiKey['user'])
                                                    <span class="d-block small text-muted">{{ $apiKey['user'] }}</span>
                                                @endif
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        @if($apiKey['source'])
                                            <span class="badge bg-light text-dark">{{ $apiKey['source'] }}</span>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        @if($apiKey['has_filters'])
                                            <span class="badge bg-success badge-dim rounded-pill">
                                                <x-ui.nicon name="check"/>
                                            </span>
                                        @else
                                            <span class="badge bg-light badge-dim rounded-pill">
                                                <x-ui.nicon name="cross"/>
                                            </span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        <span class="badge bg-info badge-dim">
                                            {{ $apiKey['active_orders'] }}/{{ $apiKey['total_orders'] }}
                                        </span>
                                    </td>
                                    <td class="text-center">
                                        <span class="fw-medium">{{ number_format($apiKey['total_leads']) }}</span>
                                        <span class="text-success small">({{ number_format($apiKey['billable_leads']) }})</span>
                                    </td>
                                    <td class="text-center">
                                        @php
                                            $rate = $apiKey['conversion_rate'];
                                            $rateColor = $rate >= 60 ? 'success' : ($rate >= 40 ? 'warning' : 'danger');
                                        @endphp
                                        <span class="badge bg-{{ $rateColor }}-dim bg-outline-{{ $rateColor }} rounded-pill">
                                            {{ $rate }}%
                                        </span>
                                    </td>
                                    <td class="text-end">
                                        <span class="fw-medium">{{ number_format($apiKey['revenue'], 2) }} €</span>
                                    </td>
                                    <td class="text-center">
                                        @if($apiKey['active'])
                                            <span class="badge bg-success rounded-pill">
                                                <x-ui.nicon name="check"/>
                                            </span>
                                        @else
                                            <span class="badge bg-danger rounded-pill">
                                                <x-ui.nicon name="cross"/>
                                            </span>
                                        @endif
                                    </td>
                                    <td class="text-end" x-on:click.stop>
                                        <div class="dropdown">
                                            <button class="btn btn-icon btn-sm btn-trigger" data-bs-toggle="dropdown">
                                                <x-ui.nicon name="more-h"/>
                                            </button>
                                            <div class="dropdown-menu dropdown-menu-end">
                                                <a 
                                                    class="dropdown-item"
                                                    href="javascript:void(0)"
                                                    wire:click="selectApiKey({{ $apiKey['id'] }})"
                                                >
                                                    <x-ui.nicon name="eye" class="me-2"/>
                                                    {{ __('Voir les leads') }}
                                                </a>
                                                <a 
                                                    class="dropdown-item"
                                                    href="javascript:void(0)"
                                                    x-on:click="$wire.emit('showModal', 'modals.api.save-lead-filter-modal', {{ $apiKey['id'] }})"
                                                >
                                                    <x-ui.nicon name="filter-alt" class="me-2"/>
                                                    {{ __('Configurer filtres') }}
                                                </a>
                                                <a 
                                                    class="dropdown-item"
                                                    href="javascript:void(0)"
                                                    x-on:click="$wire.emit('showModal', 'modals.api.save-lead-order-modal', {{ $apiKey['id'] }})"
                                                >
                                                    <x-ui.nicon name="cart" class="me-2"/>
                                                    {{ __('Nouvelle commande') }}
                                                </a>
                                                <div class="dropdown-divider"></div>
                                                <a 
                                                    class="dropdown-item"
                                                    href="javascript:void(0)"
                                                    x-on:click="$wire.emit('showModal', 'modals.api.save-api-key-modal', {{ $apiKey['id'] }})"
                                                >
                                                    <x-ui.nicon name="edit" class="me-2"/>
                                                    {{ __('Modifier') }}
                                                </a>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="9" class="text-center py-4 text-muted">
                                        <x-ui.nicon name="key" class="d-block mx-auto mb-2 tw-text-3xl tw-opacity-50"/>
                                        {{ __('Aucune clé API trouvée') }}
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- Top Performing API Keys --}}
    <div class="col-xl-4">
        <div class="card card-bordered shadow-sm h-100">
            <div class="card-header">
                <h6 class="mb-0">
                    <x-ui.nicon name="award" class="me-2 text-warning"/>
                    {{ __('Meilleures performances') }}
                </h6>
            </div>
            <div class="card-body">
                @forelse($this->topPerformingApiKeys as $index => $apiKey)
                    <div 
                        class="d-flex align-items-center {{ !$loop->last ? 'mb-3 pb-3 border-bottom' : '' }}"
                        x-data="{ hover: false }"
                        x-on:mouseenter="hover = true"
                        x-on:mouseleave="hover = false"
                    >
                        @php
                            $rankBgClass = match($index) {
                                0 => 'bg-warning text-white',
                                1 => 'bg-secondary text-white',
                                2 => 'bg-dark text-white',
                                default => 'bg-light text-muted',
                            };
                        @endphp
                        <div class="d-flex align-items-center justify-content-center rounded-circle me-3 {{ $rankBgClass }}" style="width: 32px; height: 32px; min-width: 32px;">
                            <span class="fw-bold small">{{ $index + 1 }}</span>
                        </div>
                        <div class="flex-grow-1">
                            <span class="fw-medium d-block" x-bind:class="{ 'text-primary': hover }">
                                {{ $apiKey->name }}
                            </span>
                            <span class="small text-muted">
                                {{ $apiKey->total_leads }} {{ __('leads') }}
                            </span>
                        </div>
                        <div class="text-end">
                            @php
                                $rate = $apiKey->conversion_rate;
                                $rateColor = $rate >= 60 ? 'success' : ($rate >= 40 ? 'warning' : 'danger');
                            @endphp
                            <span class="badge bg-{{ $rateColor }} badge-dim rounded-pill">
                                {{ $rate }}%
                            </span>
                        </div>
                    </div>
                @empty
                    <div class="text-center text-muted py-4">
                        <x-ui.nicon name="growth" class="d-block mx-auto mb-2 tw-text-3xl tw-opacity-50"/>
                        {{ __('Pas assez de données') }}
                    </div>
                @endforelse
            </div>
        </div>
    </div>
</div>