@php
    use Illuminate\Support\Str;

    $money = fn ($value) => 'R '.number_format((float) $value, 2);
    $activeTotal = (float) ($summary['active_credit_total'] ?? 0);
    $draftTotal = (float) ($summary['draft_amount'] ?? 0);
    $registerTotal = (float) ($summary['register_total'] ?? 0);
    $activeCount = (int) ($summary['issued_count'] ?? 0) + (int) ($summary['applied_count'] ?? 0);
    $maxBreakdownTotal = max(1, (float) collect($statusBreakdown)->max('total'), (float) collect($typeBreakdown)->max('total'));
    $statusBadge = fn (string $status) => (new \App\Models\CreditNote(['status' => $status]))->statusBadgeClass();
@endphp

<x-layouts.app title="Credit Note Report | Tarnova" page-title="Credit note report">
    <x-slot:headerActions>
        <a href="{{ route('credit-notes.index') }}" class="secondary-button">Back</a>
        @can('view-financial-reports')
            <a href="{{ route('reports.exports.credit-notes') }}" class="secondary-button">Export CSV</a>
        @endcan
        @can('manage-credit-notes')
            <a href="{{ route('credit-notes.create') }}" class="primary-button">Create credit note</a>
        @endcan
    </x-slot:headerActions>

    <x-sales-module-nav />

    <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        <div class="metric-card">
            <p class="metric-label">Active Credits</p>
            <p class="metric-value">{{ $money($activeTotal) }}</p>
            <p class="metric-helper">Affects balances.</p>
        </div>
        <div class="metric-card">
            <p class="metric-label">Adjustments</p>
            <p class="metric-value">{{ $money($summary['active_adjustment_total'] ?? 0) }}</p>
            <p class="metric-helper">No cash returned.</p>
        </div>
        <div class="metric-card">
            <p class="metric-label">Refunds</p>
            <p class="metric-value">{{ $money($summary['active_refund_total'] ?? 0) }}</p>
            <p class="metric-helper">Refund scenarios.</p>
        </div>
        <div class="metric-card border-dashed">
            <p class="metric-label">Draft Value</p>
            <p class="metric-value">{{ $money($draftTotal) }}</p>
            <p class="metric-helper">Not applied yet.</p>
        </div>
    </section>

    <div class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_minmax(340px,0.75fr)]">
        <section class="section-card min-w-0">
            <div class="section-header">
                <div>
                    <h3 class="section-title">Status breakdown</h3>
                    <p class="mt-2 text-sm leading-6 text-slate-500">Drafts do not reduce balances.</p>
                </div>
            </div>

            <div class="mt-6 space-y-3">
                @foreach ($statusBreakdown as $row)
                    @php
                        $width = min(100, ((float) $row['total'] / $maxBreakdownTotal) * 100);
                    @endphp
                    <div class="rounded-[1.25rem] border border-slate-200 bg-white p-4 shadow-[0_14px_38px_-34px_rgba(15,23,42,0.5)]">
                        <div class="flex flex-wrap items-center justify-between gap-3">
                            <div class="flex items-center gap-3">
                                <span class="{{ $statusBadge($row['status']) }}">{{ $row['label'] }}</span>
                                <span class="text-xs font-semibold uppercase tracking-[0.14em] text-slate-400">{{ number_format($row['count']) }} {{ Str::plural('note', $row['count']) }}</span>
                            </div>
                            <p class="text-sm font-bold text-slate-950">{{ $money($row['total']) }}</p>
                        </div>
                        <div class="mt-4 h-2 overflow-hidden rounded-full bg-slate-100">
                            <div class="h-full rounded-full {{ $row['is_active'] ? 'bg-slate-950' : 'bg-slate-300' }}" style="width: {{ $width }}%"></div>
                        </div>
                    </div>
                @endforeach
            </div>
        </section>

        <section class="section-card min-w-0">
            <div class="section-header">
                <div>
                    <h3 class="section-title">Active credit mix</h3>
                    <p class="mt-2 text-sm leading-6 text-slate-500">Issued and applied only.</p>
                </div>
            </div>

            <div class="mt-6 space-y-3">
                @foreach ($typeBreakdown as $row)
                    @php
                        $width = min(100, ((float) $row['total'] / $maxBreakdownTotal) * 100);
                    @endphp
                    <div class="rounded-[1.25rem] border border-slate-200 bg-slate-50/80 p-4">
                        <div class="flex items-center justify-between gap-4">
                            <div>
                                <p class="text-sm font-bold text-slate-950">{{ $row['label'] }}</p>
                                <p class="mt-1 text-xs font-semibold uppercase tracking-[0.14em] text-slate-400">{{ number_format($row['count']) }} active {{ Str::plural('note', $row['count']) }}</p>
                            </div>
                            <p class="text-sm font-bold text-slate-950">{{ $money($row['total']) }}</p>
                        </div>
                        <div class="mt-4 h-2 overflow-hidden rounded-full bg-white">
                            <div class="h-full rounded-full bg-slate-950" style="width: {{ $width }}%"></div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="mt-5 rounded-[1.25rem] border border-slate-200 bg-white p-4">
                <div class="flex items-center justify-between gap-4">
                    <span class="text-xs font-semibold uppercase tracking-[0.16em] text-slate-400">Register total</span>
                    <span class="text-sm font-bold text-slate-950">{{ $money($registerTotal) }}</span>
                </div>
                <div class="mt-3 flex items-center justify-between gap-4">
                    <span class="text-xs font-semibold uppercase tracking-[0.16em] text-slate-400">Draft value</span>
                    <span class="text-sm font-bold text-slate-950">{{ $money($draftTotal) }}</span>
                </div>
            </div>
        </section>
    </div>

    <div class="grid gap-6 2xl:grid-cols-[minmax(0,1.2fr)_minmax(360px,0.8fr)]">
        <section class="section-card min-w-0">
            <div class="section-header">
                <div>
                    <h3 class="section-title">Active credits</h3>
                    <p class="mt-2 text-sm leading-6 text-slate-500">Already affecting invoice balances.</p>
                </div>
            </div>

            @if ($recentActiveCredits->isEmpty())
                <x-empty-state title="No active credits" description="Issued credits will appear here." />
            @else
                <div class="mt-5 overflow-hidden rounded-[1.25rem] border border-slate-200 bg-white">
                    <div class="overflow-x-auto">
                        <table class="responsive-data-table min-w-full">
                            <thead class="bg-slate-50 text-left text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">
                                <tr>
                                    <th class="px-5 py-4">Credit note</th>
                                    <th class="px-5 py-4">Invoice</th>
                                    <th class="px-5 py-4">Client</th>
                                    <th class="px-5 py-4">Status</th>
                                    <th class="px-5 py-4 text-right">Amount</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-100">
                                @foreach ($recentActiveCredits as $creditNote)
                                    <tr class="transition hover:bg-slate-50/80">
                                        <td data-label="Credit note" class="px-5 py-4">
                                            <a href="{{ route('credit-notes.show', $creditNote) }}" class="text-sm font-bold text-slate-950 hover:text-brand-700">{{ $creditNote->credit_note_number }}</a>
                                            <span class="mt-1 block text-xs text-slate-400">{{ $creditNote->issue_date->format('d M Y') }}</span>
                                        </td>
                                        <td data-label="Invoice" class="px-5 py-4 text-sm text-slate-600">{{ $creditNote->invoice?->invoice_number ?? 'Unavailable' }}</td>
                                        <td data-label="Client" class="px-5 py-4 text-sm text-slate-600">{{ $creditNote->client?->name ?? 'Client unavailable' }}</td>
                                        <td data-label="Status" class="px-5 py-4"><span class="{{ $creditNote->statusBadgeClass() }}">{{ $creditNote->statusLabel() }}</span></td>
                                        <td data-label="Amount" class="px-5 py-4 text-right text-sm font-bold text-slate-950">{{ $money($creditNote->amount) }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @endif
        </section>

        <section class="section-card min-w-0">
            <div class="section-header">
                <div>
                    <h3 class="section-title">Draft credits</h3>
                    <p class="mt-2 text-sm leading-6 text-slate-500">Prepared, not applied.</p>
                </div>
            </div>

            @if ($draftCredits->isEmpty())
                <x-empty-state title="No draft credits" description="Drafts will appear here." />
            @else
                <div class="mt-5 space-y-3">
                    @foreach ($draftCredits as $creditNote)
                        <a href="{{ route('credit-notes.show', $creditNote) }}" class="block rounded-[1.25rem] border border-dashed border-slate-200 bg-slate-50/80 p-4 transition hover:border-slate-300 hover:bg-white">
                            <div class="flex items-start justify-between gap-4">
                                <div>
                                    <p class="text-sm font-bold text-slate-950">{{ $creditNote->credit_note_number }}</p>
                                    <p class="mt-1 text-xs font-semibold uppercase tracking-[0.14em] text-slate-400">{{ $creditNote->invoice?->invoice_number ?? 'Unavailable invoice' }}</p>
                                    <p class="mt-2 text-sm text-slate-500">{{ $creditNote->client?->name ?? 'Client unavailable' }}</p>
                                </div>
                                <div class="text-right">
                                    <span class="{{ $creditNote->statusBadgeClass() }}">Draft</span>
                                    <p class="mt-3 text-sm font-bold text-slate-950">{{ $money($creditNote->amount) }}</p>
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>
            @endif
        </section>
    </div>
</x-layouts.app>