<x-filament-panels::page>

    {{-- ── Barra de filtros ────────────────────────────────────────────────── --}}
    <div class="flex flex-wrap items-end gap-3 mb-6">

        {{-- Presets --}}
        <div class="flex gap-1">
            @foreach(['month' => 'Este mes', 'lastmonth' => 'Mes pasado', 'months3' => 'Últ. 3 meses'] as $key => $label)
                <button wire:click="setPreset('{{ $key }}')"
                    class="px-3 py-1.5 rounded-lg text-sm font-medium transition-colors
                        {{ $preset === $key
                            ? 'bg-primary-600 text-white'
                            : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 hover:bg-gray-50' }}">
                    {{ $label }}
                </button>
            @endforeach
        </div>

        {{-- Desde / Hasta --}}
        <div class="flex items-center gap-2">
            <input type="date" wire:model.live="desde"
                class="rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white text-sm px-3 py-1.5 focus:ring-primary-500 focus:border-primary-500">
            <span class="text-gray-400 text-sm">—</span>
            <input type="date" wire:model.live="hasta"
                class="rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white text-sm px-3 py-1.5 focus:ring-primary-500 focus:border-primary-500">
        </div>

        {{-- Export --}}
        <a href="{{ $this->getExportUrl() }}" target="_blank"
            class="ml-auto inline-flex items-center gap-1.5 px-4 py-1.5 rounded-lg bg-success-600 hover:bg-success-700 text-white text-sm font-medium transition-colors">
            <x-heroicon-o-arrow-down-tray class="w-4 h-4"/>
            Exportar Excel
        </a>
    </div>

    @php $data = $this->getReportData(); @endphp

    {{-- ── KPI Cards ──────────────────────────────────────────────────────── --}}
    <div style="display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-bottom:1.5rem;">
        <div class="rounded-xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 p-4 shadow-sm">
            <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide"># Ventas</p>
            <p class="text-2xl font-bold text-gray-900 dark:text-white mt-1">{{ $data['grandTotal']['count'] }}</p>
            <p class="text-xs text-gray-400 mt-0.5">
                {{ \Carbon\Carbon::parse($data['desde'])->format('d/m/Y') }} —
                {{ \Carbon\Carbon::parse($data['hasta'])->format('d/m/Y') }}
            </p>
        </div>

        <div class="rounded-xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 p-4 shadow-sm">
            <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Bruto Total</p>
            @if($data['grandTotal']['usd']['bruto'] > 0)
                <p class="text-xl font-bold text-gray-900 dark:text-white mt-1">${{ number_format($data['grandTotal']['usd']['bruto'], 2) }}</p>
            @endif
            @if($data['grandTotal']['bob']['bruto'] > 0)
                <p class="text-xl font-bold text-amber-600 mt-0.5">Bs. {{ number_format($data['grandTotal']['bob']['bruto'], 2) }}</p>
            @endif
            @if($data['grandTotal']['usd']['bruto'] == 0 && $data['grandTotal']['bob']['bruto'] == 0)
                <p class="text-xl font-bold text-gray-400 mt-1">—</p>
            @endif
        </div>

        <div class="rounded-xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 p-4 shadow-sm">
            <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Fee Plataforma</p>
            @if($data['grandTotal']['usd']['fee'] > 0)
                <p class="text-xl font-bold text-orange-500 mt-1">−${{ number_format($data['grandTotal']['usd']['fee'], 2) }}</p>
            @else
                <p class="text-xl font-bold text-gray-400 mt-1">—</p>
            @endif
        </div>

        <div class="rounded-xl bg-primary-50 dark:bg-primary-900/30 border border-primary-200 dark:border-primary-700 p-4 shadow-sm">
            <p class="text-xs font-semibold text-primary-500 uppercase tracking-wide">Neto Total (Bs. equiv.)</p>
            <p class="text-2xl font-bold text-primary-600 dark:text-primary-400 mt-1">
                Bs. {{ number_format($data['grandTotal']['totalBs'], 2) }}
            </p>
            @if($data['grandTotal']['usd']['neto'] > 0)
                <p class="text-xs text-primary-400 mt-0.5">
                    ${{ number_format($data['grandTotal']['usd']['neto'], 2) }}
                    × {{ number_format($data['rate'], 2) }} = Bs. {{ number_format($data['grandTotal']['usd']['neto'] * $data['rate'], 2) }}
                </p>
            @endif
        </div>
    </div>

    {{-- ── Tablas por origen ───────────────────────────────────────────────── --}}
    @forelse($data['origins'] as $originKey => $group)
        <x-filament::section class="mb-4" collapsible>
            <x-slot name="heading">
                <span class="text-base font-semibold">
                    {{ $group['icon'] }} {{ $group['label'] }}
                    <span class="ml-2 text-sm font-normal text-gray-400">({{ $group['sales']->count() }} ventas)</span>
                </span>
            </x-slot>

            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b border-gray-200 dark:border-gray-700">
                            <th class="text-left py-2 px-3 text-xs font-semibold text-gray-500 uppercase">Fecha</th>
                            <th class="text-left py-2 px-3 text-xs font-semibold text-gray-500 uppercase">Cliente</th>
                            <th class="text-left py-2 px-3 text-xs font-semibold text-gray-500 uppercase">Venta</th>
                            <th class="text-center py-2 px-3 text-xs font-semibold text-gray-500 uppercase">Mon.</th>
                            <th class="text-right py-2 px-3 text-xs font-semibold text-gray-500 uppercase">Bruto</th>
                            <th class="text-right py-2 px-3 text-xs font-semibold text-gray-500 uppercase">Fee</th>
                            <th class="text-right py-2 px-3 text-xs font-semibold text-gray-500 uppercase">Neto</th>
                            <th class="text-center py-2 px-3 text-xs font-semibold text-gray-500 uppercase">Estado</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($group['sales'] as $sale)
                            <tr class="border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800/50">
                                <td class="py-2 px-3 text-gray-500 whitespace-nowrap">
                                    {{ $sale->sale_date?->format('d/m/Y') }}
                                </td>
                                <td class="py-2 px-3 font-medium text-gray-900 dark:text-white">
                                    {{ $sale->client?->name }}
                                </td>
                                <td class="py-2 px-3 text-gray-600 dark:text-gray-300 max-w-xs truncate" title="{{ $sale->title }}">
                                    {{ $sale->title }}
                                </td>
                                <td class="py-2 px-3 text-center">
                                    <span class="inline-flex px-1.5 py-0.5 rounded text-xs font-semibold
                                        {{ $sale->currency === \App\Enums\Currency::USD ? 'bg-green-100 text-green-700' : 'bg-amber-100 text-amber-700' }}">
                                        {{ $sale->currency?->value }}
                                    </span>
                                </td>
                                <td class="py-2 px-3 text-right font-mono text-gray-700 dark:text-gray-300">
                                    {{ $sale->currency?->symbol() }}{{ number_format((float)$sale->gross_amount, 2) }}
                                </td>
                                <td class="py-2 px-3 text-right font-mono text-orange-500">
                                    {{ $sale->platform_fee > 0 ? '−'.$sale->currency?->symbol().number_format((float)$sale->platform_fee, 2) : '—' }}
                                </td>
                                <td class="py-2 px-3 text-right font-mono font-semibold text-gray-900 dark:text-white">
                                    {{ $sale->currency?->symbol() }}{{ number_format($sale->net_expected, 2) }}
                                </td>
                                <td class="py-2 px-3 text-center">
                                    @php $status = $sale->payment_status; @endphp
                                    <span class="inline-flex px-2 py-0.5 rounded-full text-xs font-medium
                                        {{ $status === \App\Enums\PaymentStatus::Paid    ? 'bg-green-100 text-green-700' : '' }}
                                        {{ $status === \App\Enums\PaymentStatus::Partial ? 'bg-yellow-100 text-yellow-700' : '' }}
                                        {{ $status === \App\Enums\PaymentStatus::Unpaid  ? 'bg-red-100 text-red-700' : '' }}">
                                        {{ $status?->label() }}
                                    </span>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                    {{-- Subtotal fila --}}
                    <tfoot>
                        <tr class="border-t-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800/60 font-semibold">
                            <td colspan="4" class="py-2 px-3 text-right text-gray-600 dark:text-gray-300 text-xs uppercase">
                                Subtotal {{ $group['label'] }}
                            </td>
                            <td class="py-2 px-3 text-right font-mono text-gray-700 dark:text-gray-200">
                                @if($group['totals']['usd']['bruto'] > 0) ${{ number_format($group['totals']['usd']['bruto'], 2) }}@endif
                                @if($group['totals']['bob']['bruto'] > 0) <br><span class="text-amber-600">Bs. {{ number_format($group['totals']['bob']['bruto'], 2) }}</span>@endif
                            </td>
                            <td class="py-2 px-3 text-right font-mono text-orange-500">
                                @if($group['totals']['usd']['fee'] > 0) −${{ number_format($group['totals']['usd']['fee'], 2) }}@endif
                            </td>
                            <td class="py-2 px-3 text-right font-mono text-primary-600 dark:text-primary-400">
                                @if($group['totals']['usd']['neto'] > 0) ${{ number_format($group['totals']['usd']['neto'], 2) }}@endif
                                @if($group['totals']['bob']['neto'] > 0) <br><span class="text-amber-600">Bs. {{ number_format($group['totals']['bob']['neto'], 2) }}</span>@endif
                            </td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </x-filament::section>
    @empty
        <x-filament::section>
            <p class="text-center text-gray-400 py-8">No hay ventas en el período seleccionado.</p>
        </x-filament::section>
    @endforelse

    {{-- ── Grand Total ────────────────────────────────────────────────────── --}}
    @if($data['grandTotal']['count'] > 0)
        <div class="rounded-xl bg-primary-600 dark:bg-primary-700 p-4 flex flex-wrap items-center justify-between gap-4 mt-2">
            <div class="text-white">
                <p class="text-xs font-semibold uppercase tracking-wide opacity-80">TOTAL NETO DEL PERÍODO</p>
                <p class="text-3xl font-bold mt-0.5">Bs. {{ number_format($data['grandTotal']['totalBs'], 2) }}</p>
            </div>
            <div class="flex gap-6 text-white/90 text-sm">
                @if($data['grandTotal']['usd']['neto'] > 0)
                    <div>
                        <p class="text-xs opacity-70">USD Neto</p>
                        <p class="font-semibold">${{ number_format($data['grandTotal']['usd']['neto'], 2) }}</p>
                    </div>
                @endif
                @if($data['grandTotal']['bob']['neto'] > 0)
                    <div>
                        <p class="text-xs opacity-70">BOB Neto</p>
                        <p class="font-semibold">Bs. {{ number_format($data['grandTotal']['bob']['neto'], 2) }}</p>
                    </div>
                @endif
                @if($data['grandTotal']['usd']['fee'] > 0)
                    <div>
                        <p class="text-xs opacity-70">Fee Plataforma</p>
                        <p class="font-semibold text-orange-300">−${{ number_format($data['grandTotal']['usd']['fee'], 2) }}</p>
                    </div>
                @endif
            </div>
        </div>
    @endif

</x-filament-panels::page>
