@extends('layouts.admin', [
    'title' => 'Invoices',
    'pageTitle' => 'Invoices',
    'active' => 'invoices',
])

@php
    $statusVariants = [
        'draft' => 'muted',
        'unpaid' => 'warning',
        'partial' => 'purple',
        'paid' => 'success',
        'overdue' => 'danger',
        'cancelled' => 'muted',
    ];

    $money = fn ($amount, $currency = 'USD') => $currency.' '.number_format((float) $amount, 2);

    $summary = [
        ['label' => 'Total Invoices', 'value' => number_format($stats['total']), 'note' => number_format($stats['this_month']).' this month', 'icon' => 'file-text', 'class' => 'bg-blue-50 text-booklio-primary'],
        ['label' => 'Paid Revenue', 'value' => $money($stats['paid_revenue'], $currentBusiness?->currency ?? 'USD'), 'note' => 'Recorded payments', 'icon' => 'dollar-sign', 'class' => 'bg-emerald-50 text-emerald-600'],
        ['label' => 'Outstanding', 'value' => $money($stats['outstanding'], $currentBusiness?->currency ?? 'USD'), 'note' => number_format($stats['due_count']).' invoices due', 'icon' => 'clock', 'class' => 'bg-amber-50 text-amber-600'],
        ['label' => 'Overdue', 'value' => number_format($stats['overdue_count']), 'note' => $money($stats['overdue_total'], $currentBusiness?->currency ?? 'USD').' needs action', 'icon' => 'alert-triangle', 'class' => 'bg-red-50 text-red-600'],
    ];
@endphp

@section('content')
    <div class="space-y-5">
        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <p class="text-sm font-medium text-booklio-muted">Manage invoice billing, payments, balances, and PDF previews.</p>
            <x-ui.button href="{{ route('admin.invoices.create') }}">
                <x-ui.icon name="plus" class="h-4 w-4" />
                Create Invoice
            </x-ui.button>
        </div>

        <section class="grid gap-5 sm:grid-cols-2 xl:grid-cols-4">
            @foreach ($summary as $item)
                <x-ui.card class="min-w-0 overflow-hidden">
                    <div class="flex items-start justify-between gap-4">
                        <div class="min-w-0">
                            <p class="truncate text-sm font-semibold text-slate-600">{{ $item['label'] }}</p>
                            <p class="mt-3 truncate text-3xl font-extrabold leading-none">{{ $item['value'] }}</p>
                            <p class="mt-4 truncate text-xs font-semibold text-booklio-muted">{{ $item['note'] }}</p>
                        </div>
                        <div class="hidden h-12 w-12 shrink-0 items-center justify-center rounded-xl sm:flex {{ $item['class'] }}">
                            <x-ui.icon :name="$item['icon']" class="h-6 w-6" />
                        </div>
                    </div>
                </x-ui.card>
            @endforeach
        </section>

        <x-ui.card>
            <form method="GET" action="{{ route('admin.invoices.index') }}" class="grid gap-3 lg:grid-cols-[minmax(0,1fr)_160px_160px_160px_160px_auto_auto]">
                <div class="relative min-w-0">
                    <x-ui.icon name="search" class="pointer-events-none absolute right-3 top-1/2 h-5 w-5 -translate-y-1/2 text-slate-400" />
                    <input name="q" value="{{ $filters['q'] ?? '' }}" class="h-11 w-full rounded-lg border border-booklio-border bg-white pl-4 pr-11 text-sm font-medium shadow-soft outline-none placeholder:text-slate-400 focus:border-booklio-primary focus:ring-4 focus:ring-blue-100" placeholder="Search invoice, customer, email..." />
                </div>
                <select name="status" class="h-11 rounded-lg border border-booklio-border bg-white px-3 text-sm font-semibold text-slate-700 shadow-soft outline-none focus:border-booklio-primary focus:ring-4 focus:ring-blue-100">
                    <option value="">All Statuses</option>
                    @foreach ($statusOptions as $value => $label)
                        <option value="{{ $value }}" @selected(($filters['status'] ?? '') === $value)>{{ $label }}</option>
                    @endforeach
                </select>
                <select name="customer_id" class="h-11 rounded-lg border border-booklio-border bg-white px-3 text-sm font-semibold text-slate-700 shadow-soft outline-none focus:border-booklio-primary focus:ring-4 focus:ring-blue-100">
                    <option value="">All Customers</option>
                    @foreach ($customers as $customer)
                        <option value="{{ $customer->id }}" @selected((string) ($filters['customer_id'] ?? '') === (string) $customer->id)>{{ $customer->name }}</option>
                    @endforeach
                </select>
                <input name="date_from" type="date" value="{{ $filters['date_from'] ?? '' }}" class="h-11 rounded-lg border border-booklio-border bg-white px-3 text-sm font-semibold text-slate-700 shadow-soft outline-none focus:border-booklio-primary focus:ring-4 focus:ring-blue-100" />
                <select name="amount" class="h-11 rounded-lg border border-booklio-border bg-white px-3 text-sm font-semibold text-slate-700 shadow-soft outline-none focus:border-booklio-primary focus:ring-4 focus:ring-blue-100">
                    <option value="">All Amounts</option>
                    <option value="under_100" @selected(($filters['amount'] ?? '') === 'under_100')>Under 100</option>
                    <option value="100_500" @selected(($filters['amount'] ?? '') === '100_500')>100 - 500</option>
                    <option value="over_500" @selected(($filters['amount'] ?? '') === 'over_500')>Over 500</option>
                </select>
                <x-ui.button variant="secondary" type="submit">
                    <x-ui.icon name="filter" class="h-4 w-4" />
                    Filter
                </x-ui.button>
                <x-ui.button variant="ghost" href="{{ route('admin.invoices.index') }}">Reset</x-ui.button>
            </form>
        </x-ui.card>

        @if ($invoices->isEmpty())
            <x-ui.empty-state
                icon="file-text"
                title="No invoices found"
                description="Create an invoice or adjust your filters to see matching billing records."
            />
        @else
            <x-ui.card title="Invoice List" padding="p-0">
                <div class="hidden overflow-x-auto md:block booklio-scrollbar">
                    <table class="min-w-[1280px] w-full divide-y divide-booklio-border">
                        <thead class="bg-slate-50">
                            <tr>
                                @foreach (['Invoice', 'Customer', 'Issue Date', 'Due Date', 'Amount', 'Paid', 'Balance', 'Status', 'Actions'] as $heading)
                                    <th class="px-5 py-4 text-left text-xs font-bold uppercase tracking-wide text-booklio-muted">{{ $heading }}</th>
                                @endforeach
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-booklio-border bg-white">
                            @foreach ($invoices as $invoice)
                                <tr class="transition hover:bg-slate-50/80">
                                    <td class="px-5 py-4">
                                        <p class="max-w-[150px] truncate text-sm font-extrabold text-booklio-primary">{{ $invoice->invoice_number }}</p>
                                        <p class="text-xs font-medium text-booklio-muted">{{ $invoice->items_count ?? $invoice->items->count() }} item(s)</p>
                                    </td>
                                    <td class="px-5 py-4">
                                        <p class="max-w-[170px] truncate text-sm font-extrabold text-booklio-dark">{{ $invoice->customer?->name ?? 'Walk-in customer' }}</p>
                                        <p class="max-w-[190px] truncate text-xs font-medium text-booklio-muted">{{ $invoice->customer?->email ?? $invoice->customer?->phone ?? 'No contact' }}</p>
                                    </td>
                                    <td class="px-5 py-4 text-sm font-semibold text-slate-700">{{ $invoice->issue_date?->format('M d, Y') ?? '-' }}</td>
                                    <td class="px-5 py-4 text-sm font-semibold text-slate-700">{{ $invoice->due_date?->format('M d, Y') ?? '-' }}</td>
                                    <td class="px-5 py-4 text-sm font-extrabold">{{ $money($invoice->total, $invoice->currency) }}</td>
                                    <td class="px-5 py-4 text-sm font-extrabold text-emerald-600">{{ $money($invoice->paid_total, $invoice->currency) }}</td>
                                    <td class="px-5 py-4 text-sm font-extrabold {{ (float) $invoice->balance_due > 0 ? 'text-booklio-danger' : 'text-booklio-dark' }}">{{ $money($invoice->balance_due, $invoice->currency) }}</td>
                                    <td class="px-5 py-4"><x-ui.badge :variant="$statusVariants[$invoice->status_value] ?? 'muted'">{{ $invoice->status_label }}</x-ui.badge></td>
                                    <td class="px-5 py-4">
                                        <div class="flex items-center gap-2">
                                            <x-ui.button size="sm" variant="secondary" href="{{ route('admin.invoices.show', $invoice) }}">View</x-ui.button>
                                            <x-ui.button size="sm" variant="ghost" data-modal-open="#record-payment-modal-{{ $invoice->id }}">Payment</x-ui.button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="divide-y divide-booklio-border md:hidden">
                    @foreach ($invoices as $invoice)
                        <div class="p-5">
                            <div class="flex items-start justify-between gap-4">
                                <div class="min-w-0">
                                    <p class="truncate text-sm font-extrabold text-booklio-primary">{{ $invoice->invoice_number }}</p>
                                    <p class="truncate text-xs font-medium text-booklio-muted">{{ $invoice->customer?->name ?? 'Walk-in customer' }}</p>
                                </div>
                                <x-ui.badge :variant="$statusVariants[$invoice->status_value] ?? 'muted'">{{ $invoice->status_label }}</x-ui.badge>
                            </div>
                            <div class="mt-4 grid grid-cols-2 gap-3 text-sm">
                                <div><p class="text-xs font-bold text-booklio-muted">Amount</p><p class="font-bold">{{ $money($invoice->total, $invoice->currency) }}</p></div>
                                <div><p class="text-xs font-bold text-booklio-muted">Balance</p><p class="font-bold">{{ $money($invoice->balance_due, $invoice->currency) }}</p></div>
                                <div><p class="text-xs font-bold text-booklio-muted">Issued</p><p class="font-bold">{{ $invoice->issue_date?->format('M d, Y') ?? '-' }}</p></div>
                                <div><p class="text-xs font-bold text-booklio-muted">Due</p><p class="font-bold">{{ $invoice->due_date?->format('M d, Y') ?? '-' }}</p></div>
                            </div>
                            <div class="mt-4 flex gap-2">
                                <x-ui.button size="sm" variant="secondary" href="{{ route('admin.invoices.show', $invoice) }}" class="flex-1">View</x-ui.button>
                                <x-ui.button size="sm" variant="ghost" data-modal-open="#record-payment-modal-{{ $invoice->id }}" class="flex-1">Payment</x-ui.button>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="border-t border-booklio-border px-5 py-4">
                    <x-ui.pagination :paginator="$invoices" />
                </div>
            </x-ui.card>
        @endif
    </div>

    @push('modals')
        @foreach ($invoices as $invoice)
            @include('admin.invoices.partials.payment-modal', ['invoice' => $invoice, 'paymentMethods' => $paymentMethods])
        @endforeach
    @endpush
@endsection