{{-- Analytics Dashboard Partial --}}
<div class="row g-4">
    {{-- Filters --}}
    <div class="col-12">
        <div class="card card-bordered shadow-sm">
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-4">
                        <x-ui.select
                            :label="__('Origine (Commande)')"
                            wire:model="selectedOrderId"
                            :options="$this->orderFilterOptions"
                            :select2search="true"
                        />
                    </div>
                    <div class="col-md-4">
                        <x-ui.input
                            :label="__('Du')"
                            wire:model="dateFrom"
                            type="date"
                        />
                    </div>
                    <div class="col-md-4">
                        <x-ui.input
                            :label="__('Au')"
                            wire:model="dateTo"
                            type="date"
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Leads Over Time Chart --}}
    <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="growth" class="me-2"/>
                    {{ __('Évolution des leads') }}
                </h6>
                <div class="card-tools">
                    <ul class="nav nav-switch-s2 nav-tabs-sm">
                        <li class="nav-item">
                            <a href="javascript:void(0)" 
                               class="nav-link {{ $period === '7d' ? 'active' : '' }}"
                               wire:click="$set('period', '7d')"
                            >7j</a>
                        </li>
                        <li class="nav-item">
                            <a href="javascript:void(0)" 
                               class="nav-link {{ $period === '30d' ? 'active' : '' }}"
                               wire:click="$set('period', '30d')"
                            >30j</a>
                        </li>
                        <li class="nav-item">
                            <a href="javascript:void(0)" 
                               class="nav-link {{ $period === '90d' ? 'active' : '' }}"
                               wire:click="$set('period', '90d')"
                            >90j</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="card-body">
                <x-api.leads-chart
                    :type="'line'"
                    :data="$this->chartData"
                    :height="350"
                />
            </div>
        </div>
    </div>

    {{-- Classification Distribution --}}
    <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="pie" class="me-2"/>
                    {{ __('Répartition par classification') }}
                </h6>
            </div>
            <div class="card-body">
                @php
                    $distribution = $this->classificationDistribution;
                @endphp
                
                @if(!empty($distribution['distribution']))
                    <x-api.leads-chart
                        :type="'doughnut'"
                        :data="[
                            'labels' => $distribution['labels'],
                            'datasets' => [[
                                'data' => $distribution['data'],
                                'backgroundColor' => $distribution['colors'],
                            ]]
                        ]"
                        :height="250"
                    />
                    
                    <div class="mt-4">
                        @foreach($distribution['distribution'] as $key => $item)
                            <div class="d-flex justify-content-between align-items-center {{ !$loop->last ? 'mb-2' : '' }}">
                                <div class="d-flex align-items-center">
                                    <span 
                                        class="tw-w-3 tw-h-3 tw-rounded-full me-2"
                                        style="background-color: {{ $distribution['colors'][$loop->index] ?? '#8094ae' }}"
                                    ></span>
                                    <span class="small">{{ $item['label'] }}</span>
                                </div>
                                <span class="badge bg-light text-dark">{{ $item['count'] }}</span>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-center text-muted py-5">
                        <x-ui.nicon name="pie" class="d-block mx-auto mb-2 tw-text-4xl tw-opacity-50"/>
                        {{ __('Pas assez de données') }}
                    </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Lead Order KPIs Table --}}
    <div class="col-12">
        @livewire('widgets.statistics.table-card', [
            'title' => __('KPI par commande'),
            'tableId' => 'lead-order-kpi-table',
            'filters' => [
                'showFilters' => false,
                'showDaterangeFilter' => false,
                'order_id' => $selectedOrderId,
                'start' => $dateFrom,
                'end' => $dateTo,
            ],
        ], key('lead-order-kpi-' . $selectedOrderId . '-' . $dateFrom . '-' . $dateTo))
    </div>

    @if(false)
        {{-- Conversion Funnel --}}
        <div class="col-xl-6">
            <div class="card card-bordered shadow-sm">
                <div class="card-header">
                    <h6 class="mb-0">
                        <x-ui.nicon name="filter-alt" class="me-2"/>
                        {{ __('Entonnoir de conversion') }}
                    </h6>
                </div>
                <div class="card-body">
                    @php
                        $funnel = $this->conversionFunnel;
                    @endphp
                    
                    <div class="funnel-visualization">
                        {{-- Total Received --}}
                        <div class="funnel-step mb-3">
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <span class="small fw-medium">{{ __('Leads reçus') }}</span>
                                <span class="fw-bold">{{ number_format($funnel['total_received']) }}</span>
                            </div>
                            <div class="progress" style="height: 30px;">
                                <div 
                                    class="progress-bar bg-primary" 
                                    style="width: 100%;"
                                >
                                    <span class="small">100%</span>
                                </div>
                            </div>
                        </div>
                        
                        {{-- Passed Filters --}}
                        <div class="funnel-step mb-3">
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <span class="small fw-medium">{{ __('Filtres passés') }}</span>
                                <span class="fw-bold">{{ number_format($funnel['passed_filters']) }}</span>
                            </div>
                            <div class="progress" style="height: 30px;">
                                <div 
                                    class="progress-bar bg-info" 
                                    style="width: {{ $funnel['filter_rate'] }}%;"
                                >
                                    <span class="small">{{ $funnel['filter_rate'] }}%</span>
                                </div>
                            </div>
                        </div>
                        
                        {{-- Classified --}}
                        <div class="funnel-step mb-3">
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <span class="small fw-medium">{{ __('Classifiés') }}</span>
                                <span class="fw-bold">{{ number_format($funnel['classified']) }}</span>
                            </div>
                            <div class="progress" style="height: 30px;">
                                <div 
                                    class="progress-bar bg-warning" 
                                    style="width: {{ $funnel['classification_rate'] }}%;"
                                >
                                    <span class="small">{{ $funnel['classification_rate'] }}%</span>
                                </div>
                            </div>
                        </div>
                        
                        {{-- Billable --}}
                        <div class="funnel-step">
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <span class="small fw-medium">{{ __('Facturables') }}</span>
                                <span class="fw-bold text-success">{{ number_format($funnel['billable']) }}</span>
                            </div>
                            <div class="progress" style="height: 30px;">
                                <div 
                                    class="progress-bar bg-success" 
                                    style="width: {{ $funnel['conversion_rate'] }}%;"
                                >
                                    <span class="small">{{ $funnel['conversion_rate'] }}%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Recent Activity --}}
        <div class="col-xl-6">
            <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="clock" class="me-2"/>
                        {{ __('Activité récente') }}
                    </h6>
                    <a 
                        href="javascript:void(0)" 
                        class="link link-primary small"
                        wire:click="setActiveTab('leads')"
                    >
                        {{ __('Voir tout') }}
                        <x-ui.nicon name="arrow-right" class="ms-1"/>
                    </a>
                </div>
                <div class="card-body p-0">
                    <div class="nk-activity">
                        @forelse($this->recentActivity as $activity)
                            <div class="nk-activity-item">
                                <div class="nk-activity-media user-avatar bg-{{ $activity->is_billable ? 'success' : 'danger' }}-dim">
                                    <x-ui.nicon :name="$activity->is_billable ? 'check' : 'cross'" class="text-{{ $activity->is_billable ? 'success' : 'danger' }}"/>
                                </div>
                                <div class="nk-activity-data flex-grow-1">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div class="d-flex align-items-center gap-2">
                                            <span class="fw-medium">{{ $activity->client?->firstname }} {{ strtoupper($activity->client?->lastname ?? '') }}</span>
                                            <span class="badge bg-dark text-white rounded-pill px-2 py-1" style="font-size: 10px;">{{ $activity->apiKey?->name }}</span>
                                        </div>
                                        <x-api.classification-badge :classification="$activity->classification" size="sm"/>
                                    </div>
                                    <span class="time text-muted small">{{ $activity->created_at->diffForHumans() }}</span>
                                </div>
                            </div>
                        @empty
                            <div class="text-center py-4 text-muted">
                                <x-ui.nicon name="clock" class="d-block mx-auto mb-2 tw-text-3xl tw-opacity-50"/>
                                {{ __('Aucune activité récente') }}
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    @endif
</div>