@extends('layouts.app')

@section('title', 'Payments')

@php
use App\Enums\Currency;
use App\Enums\PaymentMethod;
use Illuminate\Support\Str;
@endphp

@section('content')
<div class="px-8 py-8 space-y-6">

    {{-- Page header --}}
    <div>
        <h1 class="text-xl font-semibold text-slate-900">Payments</h1>
        <p class="text-sm text-slate-400 mt-0.5">{{ number_format($totalCount) }} {{ Str::plural('payment', $totalCount) }} recorded</p>
    </div>

    {{-- Flash messages --}}
    @if(session('success'))
    <div class="rounded-lg bg-emerald-50 border border-emerald-200 px-4 py-3 text-sm text-emerald-700">{{ session('success') }}</div>
    @endif
    @if(session('error'))
    <div class="rounded-lg bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-700">{{ session('error') }}</div>
    @endif

    {{-- Stats row --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">

        <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-6">
            <p class="text-xs font-medium text-slate-400 uppercase tracking-wide">Total Collected</p>
            <p class="text-2xl font-bold text-slate-800 mt-1">
                {{ $defaultCurrency->symbol() }} {{ number_format((float) $totalCollected, 2) }}
            </p>
            <p class="text-xs text-slate-400 mt-1">All time</p>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-6">
            <p class="text-xs font-medium text-slate-400 uppercase tracking-wide">This Month</p>
            <p class="text-2xl font-bold mt-1 {{ (float) $thisMonth > 0 ? 'text-emerald-600' : 'text-slate-800' }}">
                {{ $defaultCurrency->symbol() }} {{ number_format((float) $thisMonth, 2) }}
            </p>
            <p class="text-xs text-slate-400 mt-1">{{ now()->format('F Y') }}</p>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-6">
            <p class="text-xs font-medium text-slate-400 uppercase tracking-wide">Payment Records</p>
            <p class="text-2xl font-bold text-slate-800 mt-1">{{ number_format($totalCount) }}</p>
            <p class="text-xs text-slate-400 mt-1">All time</p>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-6">
            <p class="text-xs font-medium text-slate-400 uppercase tracking-wide">Most Used Method</p>
            @if($mostUsedMethod)
            @php
                $pm = $mostUsedMethod->payment_method;
                $methodLabel = $pm instanceof \App\Enums\PaymentMethod
                    ? $pm->label()
                    : (\App\Enums\PaymentMethod::tryFrom((string) $pm)?->label() ?? (string) $pm ?? '—');
            @endphp
            <p class="text-2xl font-bold text-slate-800 mt-1">{{ $methodLabel }}</p>
            <p class="text-xs text-slate-400 mt-1">{{ $mostUsedMethod->count }} payments</p>
            @else
            <p class="text-2xl font-bold text-slate-800 mt-1">—</p>
            @endif
        </div>

    </div>

    {{-- Currency breakdown --}}
    @if($byCurrency->isNotEmpty())
    <div class="flex flex-wrap gap-2">
        @foreach($byCurrency as $bc)
        @php
            $bcRaw = $bc->payment_currency;
            $cur   = $bcRaw instanceof \App\Enums\Currency
                ? $bcRaw
                : \App\Enums\Currency::tryFrom((string) $bcRaw);
            $currSymbol  = $cur?->symbol() ?? (string) $bcRaw;
            $currDisplay = $cur?->value    ?? (string) $bcRaw;
        @endphp
        <div class="inline-flex items-center gap-2 px-3 py-2 bg-slate-50 rounded-lg border border-slate-100 text-sm">
            <span class="font-medium text-slate-700">{{ $currSymbol }} {{ $currDisplay }}</span>
            <span class="text-slate-500">{{ number_format((float) $bc->total_original, 2) }}</span>
            <span class="text-slate-300">&middot;</span>
            <span class="text-xs text-slate-400">{{ $bc->count }} {{ Str::plural('payment', $bc->count) }}</span>
        </div>
        @endforeach
    </div>
    @endif

    {{-- Filters --}}
    <form method="GET" action="{{ route('payments.index') }}" class="flex items-end gap-3 flex-wrap">

        <div class="flex flex-col gap-1">
            <label class="text-xs font-medium text-slate-500">Search</label>
            <input type="text" name="search"
                   value="{{ request('search') }}"
                   placeholder="Client or invoice…"
                   class="border border-slate-200 rounded-lg px-3 py-2 text-sm text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-sky-700 focus:border-transparent w-56">
        </div>

        <div class="flex flex-col gap-1">
            <label class="text-xs font-medium text-slate-500">Currency</label>
            <select name="currency"
                    class="border border-slate-200 rounded-lg px-3 py-2 text-sm text-slate-900 bg-white focus:outline-none focus:ring-2 focus:ring-sky-700 focus:border-transparent">
                <option value="">All currencies</option>
                @foreach(Currency::cases() as $c)
                <option value="{{ $c->value }}" {{ request('currency') === $c->value ? 'selected' : '' }}>
                    {{ $c->value }} ({{ $c->symbol() }})
                </option>
                @endforeach
            </select>
        </div>

        <div class="flex flex-col gap-1">
            <label class="text-xs font-medium text-slate-500">Method</label>
            <select name="method"
                    class="border border-slate-200 rounded-lg px-3 py-2 text-sm text-slate-900 bg-white focus:outline-none focus:ring-2 focus:ring-sky-700 focus:border-transparent">
                <option value="">All methods</option>
                @foreach(PaymentMethod::cases() as $pm)
                <option value="{{ $pm->value }}" {{ request('method') === $pm->value ? 'selected' : '' }}>
                    {{ $pm->label() }}
                </option>
                @endforeach
            </select>
        </div>

        <div class="flex flex-col gap-1">
            <label class="text-xs font-medium text-slate-500">Client</label>
            <select name="client_id"
                    class="border border-slate-200 rounded-lg px-3 py-2 text-sm text-slate-900 bg-white focus:outline-none focus:ring-2 focus:ring-sky-700 focus:border-transparent">
                <option value="">All clients</option>
                @foreach($clients as $client)
                <option value="{{ $client->id }}" {{ request('client_id') == $client->id ? 'selected' : '' }}>
                    {{ $client->name }}
                </option>
                @endforeach
            </select>
        </div>

        <div class="flex flex-col gap-1">
            <label class="text-xs font-medium text-slate-500">From</label>
            <input type="date" name="date_from"
                   value="{{ request('date_from') }}"
                   class="border border-slate-200 rounded-lg px-3 py-2 text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-sky-700 focus:border-transparent">
        </div>

        <div class="flex flex-col gap-1">
            <label class="text-xs font-medium text-slate-500">To</label>
            <input type="date" name="date_to"
                   value="{{ request('date_to') }}"
                   class="border border-slate-200 rounded-lg px-3 py-2 text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-sky-700 focus:border-transparent">
        </div>

        <div class="flex items-center gap-2 pb-0.5">
            <button type="submit"
                    class="px-4 py-2 bg-sky-700 hover:bg-sky-800 text-white text-sm font-medium rounded-lg transition-colors cursor-pointer">
                Filter
            </button>
            @if(request()->anyFilled(['search', 'currency', 'method', 'date_from', 'date_to', 'client_id']))
            <a href="{{ route('payments.index') }}"
               class="text-sm text-slate-500 hover:text-slate-700 hover:underline">
                Clear
            </a>
            @endif
        </div>

    </form>

    {{-- Table --}}
    <div class="bg-white border border-slate-100 rounded-xl overflow-hidden">

        @if($payments->isEmpty())
        <div class="py-20 text-center">
            <svg class="w-8 h-8 text-slate-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                      d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
            </svg>
            <p class="text-sm font-medium text-slate-500">No payments found</p>
            @if(request()->anyFilled(['search', 'currency', 'method', 'date_from', 'date_to', 'client_id']))
            <a href="{{ route('payments.index') }}" class="text-sm text-sky-600 hover:underline mt-1 inline-block">Clear filters</a>
            @endif
        </div>

        @else
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-slate-50 border-b border-slate-100">
                    <tr class="text-xs text-slate-400 uppercase tracking-wide">
                        <th class="text-left px-5 py-3.5 font-medium">Date</th>
                        <th class="text-left px-4 py-3.5 font-medium">Client</th>
                        <th class="text-left px-4 py-3.5 font-medium">Invoice</th>
                        <th class="text-left px-4 py-3.5 font-medium">Paid In</th>
                        <th class="text-right px-4 py-3.5 font-medium">Base ({{ $defaultCurrency->value }})</th>
                        <th class="text-left px-4 py-3.5 font-medium">Method</th>
                        <th class="text-left px-4 py-3.5 font-medium">Notes</th>
                        <th class="text-right px-5 py-3.5 font-medium">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-50">
                @foreach($payments as $payment)
                @php
                    $isCross = $payment->payment_currency
                               && $payment->currency
                               && $payment->payment_currency !== $payment->currency;

                    // Resolve payment_method to enum regardless of whether it arrived as string or enum
                    $pmEnum = $payment->payment_method instanceof \App\Enums\PaymentMethod
                        ? $payment->payment_method
                        : \App\Enums\PaymentMethod::tryFrom((string) ($payment->payment_method ?? ''));

                    $methodColor = match($pmEnum?->value) {
                        'bank_transfer' => 'bg-slate-100 text-slate-700',
                        'wise'          => 'bg-blue-100 text-blue-700',
                        'payoneer'      => 'bg-emerald-100 text-emerald-700',
                        'jazzcash'      => 'bg-orange-100 text-orange-700',
                        'easypaisa'     => 'bg-green-100 text-green-700',
                        'paypal'        => 'bg-indigo-100 text-indigo-700',
                        default         => 'bg-slate-100 text-slate-500',
                    };
                @endphp
                <tr class="hover:bg-slate-50 transition-colors duration-100">

                    <td class="px-5 py-3.5 whitespace-nowrap">
                        <p class="font-medium text-slate-700">{{ $payment->paid_at->format('d M Y') }}</p>
                        <p class="text-xs text-slate-400">{{ $payment->paid_at->format('H:i') }}</p>
                    </td>

                    <td class="px-4 py-3.5">
                        @if($payment->invoice?->client)
                        <a href="{{ route('clients.show', $payment->invoice->client) }}"
                           class="font-medium text-slate-700 hover:text-sky-600">
                            {{ $payment->invoice->client->name }}
                        </a>
                        @else
                        <span class="text-slate-400">—</span>
                        @endif
                    </td>

                    <td class="px-4 py-3.5 whitespace-nowrap">
                        @if($payment->invoice)
                        <a href="{{ route('invoices.show', $payment->invoice) }}"
                           class="font-medium text-slate-700 hover:text-sky-600">
                            {{ $payment->invoice->invoice_number }}
                        </a>
                        @if($payment->invoice->currency)
                        <span class="ml-1 inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-slate-100 text-slate-500">
                            {{ $payment->invoice->currency->value }}
                        </span>
                        @endif
                        @else
                        <span class="text-slate-400">—</span>
                        @endif
                    </td>

                    <td class="px-4 py-3.5 whitespace-nowrap">
                        @if($isCross)
                        <p class="font-medium text-amber-700">
                            {{ $payment->payment_currency->symbol() }} {{ number_format((float) $payment->payment_amount, 2) }}
                        </p>
                        <span class="text-xs text-amber-600 bg-amber-50 px-1.5 py-0.5 rounded">
                            @ {{ number_format((float) $payment->exchange_rate, 4) }}
                        </span>
                        @else
                        <span class="text-slate-600">
                            {{ $defaultCurrency->symbol() }} {{ number_format((float) $payment->amount, 2) }}
                        </span>
                        @endif
                    </td>

                    <td class="px-4 py-3.5 text-right whitespace-nowrap">
                        <span class="font-semibold text-slate-800">
                            {{ $defaultCurrency->symbol() }} {{ number_format((float) $payment->amount, 2) }}
                        </span>
                    </td>

                    <td class="px-4 py-3.5 whitespace-nowrap">
                        @if($pmEnum)
                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium {{ $methodColor }}">
                            {{ $pmEnum->label() }}
                        </span>
                        @else
                        <span class="text-slate-300 text-xs">—</span>
                        @endif
                    </td>

                    <td class="px-4 py-3.5 max-w-[160px]">
                        @if($payment->notes)
                        <span class="text-slate-500 text-xs" title="{{ $payment->notes }}">
                            {{ Str::limit($payment->notes, 30) }}
                        </span>
                        @else
                        <span class="text-slate-300 text-xs">—</span>
                        @endif
                    </td>

                    <td class="px-5 py-3.5 text-right whitespace-nowrap">
                        <div class="flex items-center justify-end gap-3">
                            @if($payment->invoice)
                            <a href="{{ route('invoices.show', $payment->invoice) }}"
                               class="text-xs text-sky-600 hover:text-sky-800 font-medium hover:underline">
                                View Invoice →
                            </a>
                            @endif
                            @can('invoices.record-payment')
                            <form method="POST" action="{{ route('payments.destroy', $payment) }}"
                                  onsubmit="return confirm('Remove this payment? The invoice status will be recalculated.')">
                                @csrf
                                @method('DELETE')
                                <button type="submit"
                                        class="text-red-400 hover:text-red-600 transition-colors cursor-pointer text-base leading-none"
                                        title="Remove payment">&times;</button>
                            </form>
                            @endcan
                        </div>
                    </td>

                </tr>
                @endforeach
                </tbody>
            </table>
        </div>

        @if($payments->hasPages())
        <div class="px-5 py-4 border-t border-slate-100">
            {{ $payments->links() }}
        </div>
        @endif

        @endif
    </div>

</div>
@endsection