@php
    use App\Models\Payment;
    use Illuminate\Support\Str;

    $money = fn ($value) => 'R '.number_format((float) $value, 2);
    $status = $filters['status'] ?? 'all';
    $period = $filters['period'] ?? 'all';
    $search = $filters['search'] ?? '';
    $paymentBadge = function ($payment) {
        return match ($payment->status) {
            Payment::STATUS_SUCCEEDED => 'status-badge status-paid',
            Payment::STATUS_PENDING => 'status-badge status-partially-paid',
            Payment::STATUS_FAILED => 'status-badge status-overdue',
            Payment::STATUS_REJECTED => 'status-badge status-void',
            Payment::STATUS_CANCELLED => 'status-badge status-cancelled',
            default => 'status-badge status-draft',
        };
    };
@endphp

<x-layouts.app title="Payments & Collections | Tarnova" page-title="Payments & Collections">
    <x-slot:headerActions>
        @can('view-financial-reports')
            <a href="{{ route('reports.exports.collections', request()->only(['status', 'period', 'search'])) }}" class="secondary-button">Export Collections</a>
            <a href="{{ route('reports.exports.payments', request()->only(['period', 'search'])) }}" class="secondary-button">Export Payments</a>
        @endcan
        <a href="{{ route('invoices.create') }}" class="primary-button">Create invoice</a>
    </x-slot:headerActions>

    <x-workspace-module-nav workspace="finance" />

    <section class="grid gap-4 sm:grid-cols-2 xl:grid-cols-5">
        <div class="metric-card">
            <p class="metric-label">Total Received</p>
            <p class="metric-value">{{ $money($summary['total_received']) }}</p>
            <p class="metric-helper">Approved payments.</p>
        </div>
        <div class="metric-card">
            <p class="metric-label">Outstanding Balance</p>
            <p class="metric-value">{{ $money($summary['outstanding_balance']) }}</p>
            <p class="metric-helper">Collectible balances.</p>
        </div>
        <div class="metric-card">
            <p class="metric-label">Overdue Balance</p>
            <p class="metric-value text-amber-700">{{ $money($summary['overdue_balance']) }}</p>
            <p class="metric-helper">Past-due balances.</p>
        </div>
        <div class="metric-card">
            <p class="metric-label">Partially Paid</p>
            <p class="metric-value">{{ $summary['partially_paid_count'] }}</p>
            <p class="metric-helper">{{ $money($summary['partially_paid_balance']) }} due.</p>
        </div>
        <div class="metric-card">
            <p class="metric-label">Pending Verification</p>
            <p class="metric-value">{{ $summary['pending_verification_count'] }}</p>
            <p class="metric-helper">{{ $money($summary['pending_verification_amount']) }} pending.</p>
        </div>
    </section>

    <section class="section-card profile-form-shell" aria-labelledby="collections-filter-title">
        <div class="profile-form-heading">
            <div class="profile-form-heading-icon" aria-hidden="true">
                <i class="fa-solid fa-filter"></i>
            </div>
            <div>
                <p class="profile-form-eyebrow">Collections register</p>
                <h2 id="collections-filter-title" class="profile-form-title">Filter records</h2>
                <p class="profile-form-heading-copy">Find balances and payment activity.</p>
            </div>
        </div>

        <form method="GET" action="{{ route('payments-collections.index') }}">
            <div class="profile-form-section">
                <div class="grid gap-4 lg:grid-cols-[minmax(0,1fr)_220px_220px] lg:items-end">
                    <div class="profile-form-field">
                        <label for="collections-search" class="profile-form-label">Search</label>
                        <div class="profile-form-control-wrap">
                            <i class="fa-solid fa-magnifying-glass profile-form-control-icon" aria-hidden="true"></i>
                            <input id="collections-search" type="search" name="search" value="{{ $search }}"
                                placeholder="Client, invoice, or reference" class="builder-input profile-form-control">
                        </div>
                    </div>

                    <div class="profile-form-field">
                        <label for="collections-status" class="profile-form-label">Collection status</label>
                        <div class="profile-form-control-wrap">
                            <i class="fa-solid fa-wallet profile-form-control-icon" aria-hidden="true"></i>
                            <select id="collections-status" name="status" class="builder-select profile-form-control">
                                @foreach ([
                                    'all' => 'All',
                                    'unpaid' => 'Unpaid',
                                    'partially_paid' => 'Partially Paid',
                                    'overdue' => 'Overdue',
                                    'pending_verification' => 'Pending Verification',
                                ] as $value => $label)
                                    <option value="{{ $value }}" @selected($status === $value)>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="profile-form-field">
                        <label for="collections-period" class="profile-form-label">Date range</label>
                        <div class="profile-form-control-wrap">
                            <i class="fa-solid fa-calendar-days profile-form-control-icon" aria-hidden="true"></i>
                            <select id="collections-period" name="period" class="builder-select profile-form-control">
                                @foreach ([
                                    'all' => 'All time',
                                    'this_month' => 'This month',
                                    'last_30_days' => 'Last 30 days',
                                    'last_12_months' => 'Last 12 months',
                                ] as $value => $label)
                                    <option value="{{ $value }}" @selected($period === $value)>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="profile-form-actions">
                <a href="{{ route('payments-collections.index') }}" class="secondary-button">Reset</a>
                <button type="submit" class="primary-button">
                    <i class="fa-solid fa-filter" aria-hidden="true"></i>
                    Apply filters
                </button>
            </div>
        </form>
    </section>

    <div class="space-y-6">
        <section id="needs-collection" class="section-card min-w-0 scroll-mt-6">
            <div class="section-header">
                <div>
                    <h3 class="section-title">Needs Collection</h3>
                    <p class="mt-2 text-sm leading-6 text-slate-500">Collect these balances.</p>
                </div>
            </div>

            @if ($needsCollection->isEmpty())
                <x-empty-state title="No invoices need collection" description="Unpaid invoices will appear here." />
            @else
                <div class="mt-6 grid gap-4 xl:grid-cols-2">
                    @foreach ($needsCollection as $invoice)
                        @php
                            $balanceDue = (float) ($invoice->balance_due ?? $invoice->remainingBalance());
                            $paidTotal = (float) ($invoice->paid_total ?? $invoice->totalPaid());
                            $creditedTotal = (float) ($invoice->credited_total ?? $invoice->totalCredited());
                            $payUrl = $invoice->publicPayUrl();
                            $lastReminder = $invoice->reminders->first();
                            $daysOverdue = $invoice->due_date->isPast() && ! $invoice->due_date->isToday() ? $invoice->due_date->diffInDays(today()) : 0;
                        @endphp
                        <article class="rounded-[1.35rem] border border-slate-200 bg-white p-5 shadow-[0_18px_54px_-38px_rgba(15,23,42,0.48)] transition hover:-translate-y-0.5 hover:border-slate-300 hover:shadow-[0_24px_68px_-44px_rgba(15,23,42,0.5)]">
                            <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
                                <div class="min-w-0">
                                    <a href="{{ route('invoices.show', $invoice) }}" class="text-sm font-bold text-slate-950 transition hover:text-brand-700">{{ $invoice->invoice_number }}</a>
                                    <p class="mt-1 text-sm font-semibold text-slate-700">{{ $invoice->client?->name }}</p>
                                    <p class="mt-1 break-all text-xs text-slate-400">{{ $invoice->client?->email ?: 'No email' }}</p>
                                </div>
                                <span class="{{ $invoice->statusBadgeClass() }} self-start">{{ $invoice->statusLabel() }}</span>
                            </div>

                            <dl class="mt-5 grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
                                <div class="rounded-2xl border border-slate-200 bg-slate-50/80 p-3">
                                    <dt class="text-[11px] font-bold uppercase tracking-[0.14em] text-slate-400">Invoice Total</dt>
                                    <dd class="mt-1 text-sm font-bold text-slate-950">{{ $money($invoice->grand_total) }}</dd>
                                </div>
                                <div class="rounded-2xl border border-slate-200 bg-slate-50/80 p-3">
                                    <dt class="text-[11px] font-bold uppercase tracking-[0.14em] text-slate-400">Paid</dt>
                                    <dd class="mt-1 text-sm font-bold text-green-700">{{ $money($paidTotal) }}</dd>
                                </div>
                                <div class="rounded-2xl border border-slate-200 bg-slate-50/80 p-3">
                                    <dt class="text-[11px] font-bold uppercase tracking-[0.14em] text-slate-400">Credited</dt>
                                    <dd class="mt-1 text-sm font-bold text-slate-950">{{ $money($creditedTotal) }}</dd>
                                </div>
                                <div class="rounded-2xl bg-slate-950 p-3 text-white">
                                    <dt class="text-[11px] font-bold uppercase tracking-[0.14em] text-white/50">Balance Due</dt>
                                    <dd class="mt-1 text-sm font-bold">{{ $money($balanceDue) }}</dd>
                                </div>
                            </dl>

                            <div class="mt-4 grid gap-3 rounded-2xl border border-slate-200 bg-slate-50/80 p-4 md:grid-cols-3">
                                <div>
                                    <p class="text-[11px] font-bold uppercase tracking-[0.14em] text-slate-400">Due Date</p>
                                    <p class="mt-1 text-sm font-semibold text-slate-950">{{ $invoice->due_date->format('d M Y') }}</p>
                                    @if ($daysOverdue > 0)
                                        <p class="mt-1 text-xs font-semibold text-amber-700">{{ $daysOverdue }} {{ Str::plural('day', $daysOverdue) }} overdue</p>
                                    @endif
                                </div>
                                <div>
                                    <p class="text-[11px] font-bold uppercase tracking-[0.14em] text-slate-400">Last Reminder</p>
                                    <p class="mt-1 text-sm font-semibold text-slate-950">{{ $lastReminder?->sent_at?->format('d M Y H:i') ?? 'None yet' }}</p>
                                    <p class="mt-1 text-xs text-slate-500">{{ $invoice->reminders->count() }} sent</p>
                                </div>
                                <div>
                                    <p class="text-[11px] font-bold uppercase tracking-[0.14em] text-slate-400">Next Action</p>
                                    <p class="mt-1 text-sm font-semibold text-slate-950">{{ $balanceDue > 0 ? 'Collect balance' : 'No action' }}</p>
                                </div>
                            </div>

                            <div class="mt-4 grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
                                @can('record-payments')
                                    <a href="{{ route('invoices.show', $invoice) }}#record-payment" class="primary-button w-full !min-h-10 !px-3 !py-2 text-xs">Record payment</a>
                                @endcan
                                @can('send-invoice-reminders')
                                    <form action="{{ route('invoices.reminder', $invoice) }}" method="POST" class="contents">
                                        @csrf
                                        <button type="submit" class="secondary-button w-full !min-h-10 !px-3 !py-2 text-xs">Send reminder</button>
                                    </form>
                                @endcan
                                <button type="button" class="secondary-button w-full !min-h-10 !px-3 !py-2 text-xs" data-copy-link="{{ $payUrl }}">Copy Pay link</button>
                                <a href="{{ route('invoices.show', $invoice) }}" class="secondary-button w-full !min-h-10 !px-3 !py-2 text-xs">View invoice</a>
                            </div>
                        </article>
                    @endforeach
                </div>
                <div class="mt-5">{{ $needsCollection->links() }}</div>
            @endif
        </section>

        <section class="section-card min-w-0">
            <div class="section-header">
                <div>
                    <h3 class="section-title">Recent Payments</h3>
                    <p class="mt-2 text-sm leading-6 text-slate-500">Approved payments only.</p>
                </div>
            </div>
            @if ($recentPayments->isEmpty())
                <x-empty-state title="No received payments yet" description="Approved payments will appear here." />
            @else
                <div class="mt-6 grid gap-4 lg:grid-cols-2">
                    @foreach ($recentPayments as $payment)
                        <article class="rounded-[1.25rem] border border-slate-200 bg-white p-5 shadow-[0_18px_54px_-38px_rgba(15,23,42,0.48)] transition hover:-translate-y-0.5 hover:border-slate-300 hover:shadow-[0_24px_68px_-44px_rgba(15,23,42,0.5)]">
                            <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
                                <div class="min-w-0">
                                    <p class="text-sm font-bold text-slate-950">{{ $payment->invoice?->client?->name ?? 'Client unavailable' }}</p>
                                    @if ($payment->invoice)
                                        <a href="{{ route('invoices.show', $payment->invoice) }}" class="mt-1 block text-xs font-semibold text-brand-700 transition hover:text-brand-800">{{ $payment->invoice->invoice_number }}</a>
                                    @else
                                        <p class="mt-1 text-xs font-semibold text-slate-400">Invoice unavailable</p>
                                    @endif
                                </div>
                                <span class="{{ $paymentBadge($payment) }} self-start">{{ $payment->statusLabel() }}</span>
                            </div>

                            <dl class="mt-5 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
                                <div class="rounded-2xl border border-slate-200 bg-slate-50/80 p-3">
                                    <dt class="text-[11px] font-bold uppercase tracking-[0.14em] text-slate-400">Method</dt>
                                    <dd class="mt-1 text-sm font-semibold text-slate-950">{{ $payment->methodLabel() }}</dd>
                                </div>
                                <div class="rounded-2xl border border-slate-200 bg-slate-50/80 p-3">
                                    <dt class="text-[11px] font-bold uppercase tracking-[0.14em] text-slate-400">Paid Date</dt>
                                    <dd class="mt-1 text-sm font-semibold text-slate-950">{{ $payment->paid_at?->format('d M Y') ?? 'Not set' }}</dd>
                                </div>
                                <div class="rounded-2xl border border-slate-200 bg-slate-50/80 p-3">
                                    <dt class="text-[11px] font-bold uppercase tracking-[0.14em] text-slate-400">Reference</dt>
                                    <dd class="mt-1 break-all text-sm font-semibold text-slate-950">{{ $payment->payment_reference ?: ($payment->gateway_reference ?: 'No reference') }}</dd>
                                </div>
                                <div class="rounded-2xl bg-slate-950 p-3 text-white">
                                    <dt class="text-[11px] font-bold uppercase tracking-[0.14em] text-white/50">Amount</dt>
                                    <dd class="mt-1 text-sm font-bold">{{ $money($payment->amount_paid) }}</dd>
                                </div>
                            </dl>
                        </article>
                    @endforeach
                </div>
                <div class="mt-5">{{ $recentPayments->links() }}</div>
            @endif
        </section>
        <section id="pending-verification" class="section-card scroll-mt-6">
                <h3 class="section-title">Pending verification</h3>
                <p class="mt-2 text-sm leading-6 text-slate-500">Approve before counting as received.</p>
                <div class="mt-5 space-y-3">
                    @forelse ($pendingVerification as $payment)
                        <div class="payment-verification-panel">
                            <div class="flex items-start justify-between gap-4">
                                <div>
                                    <p class="text-sm font-bold text-slate-950">{{ $payment->invoice?->invoice_number }}</p>
                                    <p class="mt-1 text-xs text-slate-500">{{ $payment->invoice?->client?->name }} - {{ $payment->methodLabel() }}</p>
                                </div>
                                <span class="{{ $paymentBadge($payment) }}">{{ $payment->statusLabel() }}</span>
                            </div>
                            <div class="mt-4 flex items-center justify-between text-sm">
                                <span class="text-slate-500">Submitted</span>
                                <strong class="text-slate-950">{{ $money($payment->amount_paid) }}</strong>
                            </div>
                            <p class="mt-2 text-xs leading-5 text-slate-400">
                                {{ $payment->created_at->format('d M Y H:i') }} - {{ $payment->payment_reference ?: ($payment->gateway_reference ?: 'No reference') }}
                            </p>
                            @if ($payment->hasProof())
                                <a href="{{ route('payments.proof', $payment) }}" target="_blank" class="payment-proof-link mt-3">View proof</a>
                            @endif
                            @can('record-payments')
                                <div class="payment-verification-actions">
                                    <form action="{{ route('payments.approve', $payment) }}" method="POST" class="payment-verification-form flex min-w-0 flex-1 flex-col gap-2">
                                        @csrf
                                        <input type="text" name="admin_note" maxlength="1000" placeholder="Optional note" class="builder-input !min-h-10 !px-3 !py-2 text-xs">
                                        <button type="submit" class="primary-button w-full !min-h-10 !px-3 !py-2 text-xs">Approve</button>
                                    </form>
                                    <form action="{{ route('payments.reject', $payment) }}" method="POST" class="payment-verification-form payment-verification-form-danger flex min-w-0 flex-1 flex-col gap-2">
                                        @csrf
                                        <input type="text" name="admin_note" maxlength="1000" placeholder="Reject note" class="builder-input !min-h-10 !px-3 !py-2 text-xs">
                                        <button type="submit" class="secondary-button w-full !min-h-10 !px-3 !py-2 text-xs">Reject</button>
                                    </form>
                                </div>
                            @endcan
                        </div>
                    @empty
                        <x-empty-state title="No pending verification" description="Pending payments will appear here." />
                    @endforelse
                </div>
            </section>

    </div>

    <div class="grid gap-6">
        <section class="section-card">
            <div class="section-header">
                <div>
                    <h3 class="section-title">Partially Paid</h3>
                    <p class="mt-2 text-sm leading-6 text-slate-500">Paid partly, balance due.</p>
                </div>
            </div>
            <div class="mt-5 space-y-3">
                @forelse ($partiallyPaidInvoices as $invoice)
                    @php
                        $payUrl = $invoice->publicPayUrl();
                        $paidTotal = (float) ($invoice->paid_total ?? $invoice->totalPaid());
                        $progress = min(100, round(($paidTotal / max(1, (float) $invoice->grand_total)) * 100));
                    @endphp
                    <div class="rounded-[1.15rem] border border-slate-200 bg-slate-50/80 p-4">
                        <div class="flex items-start justify-between gap-4">
                            <div>
                                <a href="{{ route('invoices.show', $invoice) }}" class="text-sm font-bold text-slate-950 hover:text-brand-700">{{ $invoice->invoice_number }}</a>
                                <p class="mt-1 text-xs text-slate-500">{{ $invoice->client?->name }}</p>
                            </div>
                            <div class="text-right">
                                <p class="text-[11px] font-bold uppercase tracking-[0.16em] text-slate-400">Remaining</p>
                                <p class="mt-1 text-sm font-bold text-slate-950">{{ $money($invoice->balance_due ?? $invoice->remainingBalance()) }}</p>
                            </div>
                        </div>
                        <div class="mt-4 h-2 overflow-hidden rounded-full bg-slate-200">
                            <div class="h-full rounded-full bg-slate-950" style="width: {{ $progress }}%"></div>
                        </div>
                        <div class="mt-3 flex flex-wrap items-center justify-between gap-2 text-xs text-slate-500">
                            <span>{{ $money($paidTotal) }} paid of {{ $money($invoice->grand_total) }}</span>
                            <button type="button" class="font-bold text-brand-700 hover:text-brand-800" data-copy-link="{{ $payUrl }}">Copy Pay Now link</button>
                        </div>
                    </div>
                @empty
                    <x-empty-state title="No partially paid invoices" description="Partial balances will appear here." />
                @endforelse
            </div>
        </section>
    </div>

    <script>
        document.addEventListener('click', async (event) => {
            const button = event.target.closest('[data-copy-link]');
            if (!button) return;

            const originalText = button.textContent;

            try {
                await navigator.clipboard.writeText(button.dataset.copyLink);
                button.textContent = 'Copied';
                setTimeout(() => button.textContent = originalText, 1400);
            } catch (error) {
                button.textContent = 'Copy failed';
                setTimeout(() => button.textContent = originalText, 1400);
            }
        });
    </script>
</x-layouts.app>