<x-filament-panels::page>
    @php($report = $this->reportData)

    <div class="space-y-6">
        <section class="rounded-3xl bg-gradient-to-r from-slate-950 via-teal-900 to-cyan-700 p-6 text-white shadow-sm">
            <div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
                <div class="space-y-2">
                    <p class="text-sm uppercase tracking-[0.3em] text-cyan-100">Money insights</p>
                    <h2 class="text-3xl font-semibold">Know where your money stands before the week ends.</h2>
                    <p class="text-sm text-cyan-50">
                        Track spend, income, receivables, payables, and overdue follow-ups in one place.
                    </p>
                </div>

                <div class="flex flex-wrap gap-2">
                    @foreach ($this->rangeOptions as $key => $label)
                        <button
                            wire:click="setRange('{{ $key }}')"
                            type="button"
                            class="{{ $this->range === $key ? 'bg-white text-slate-900' : 'bg-white/15 text-white hover:bg-white/25' }} rounded-full px-4 py-2 text-sm font-medium transition"
                        >
                            {{ $label }}
                        </button>
                    @endforeach
                </div>
            </div>
        </section>

        <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
            @foreach ([
                ['label' => 'Estimated Balance', 'value' => $report['totals']['estimated_balance'], 'tone' => 'emerald'],
                ['label' => 'Net Cash Flow', 'value' => $report['totals']['net_cash_flow'], 'tone' => 'cyan'],
                ['label' => 'Pending Receivables', 'value' => $report['totals']['pending_receivables'], 'tone' => 'amber'],
                ['label' => 'Pending Payables', 'value' => $report['totals']['pending_payables'], 'tone' => 'rose'],
            ] as $card)
                <div class="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm dark:border-white/10 dark:bg-gray-900">
                    <div class="text-xs uppercase tracking-[0.25em] text-gray-400">{{ $card['label'] }}</div>
                    <div class="mt-3 text-3xl font-semibold text-gray-950 dark:text-white">
                        Rs. {{ number_format((float) $card['value'], 2) }}
                    </div>
                </div>
            @endforeach
        </section>

        <section class="grid gap-6 xl:grid-cols-[1.2fr,0.8fr]">
            <div class="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm dark:border-white/10 dark:bg-gray-900">
                <div class="mb-4">
                    <h3 class="text-lg font-semibold text-gray-950 dark:text-white">Financial summary</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">
                        {{ $report['from']->format('d M Y') }} to {{ $report['to']->format('d M Y') }}
                    </p>
                </div>

                <div class="grid gap-3 sm:grid-cols-2">
                    @foreach ([
                        'Opening Balance' => $report['totals']['opening_balance'],
                        'Income' => $report['totals']['income'],
                        'Expenses' => $report['totals']['expenses'],
                        'Receivables' => $report['totals']['receivables'],
                        'Payables' => $report['totals']['payables'],
                        'Net Position Change' => $report['totals']['net_position_change'],
                    ] as $label => $value)
                        <div class="rounded-2xl bg-gray-50 p-4 dark:bg-gray-950">
                            <div class="text-xs uppercase tracking-[0.2em] text-gray-400">{{ $label }}</div>
                            <div class="mt-2 text-lg font-semibold text-gray-950 dark:text-white">
                                Rs. {{ number_format((float) $value, 2) }}
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm dark:border-white/10 dark:bg-gray-900">
                <div class="mb-4">
                    <h3 class="text-lg font-semibold text-gray-950 dark:text-white">Follow-up health</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">A quick view of reminders and overdue items.</p>
                </div>

                <div class="space-y-3">
                    @foreach ([
                        ['label' => 'Pending', 'value' => $report['follow_ups']['pending'], 'bar' => 'bg-amber-400'],
                        ['label' => 'Done', 'value' => $report['follow_ups']['done'], 'bar' => 'bg-emerald-400'],
                        ['label' => 'Overdue', 'value' => $report['follow_ups']['overdue'], 'bar' => 'bg-rose-400'],
                    ] as $item)
                        <div class="rounded-2xl bg-gray-50 p-4 dark:bg-gray-950">
                            <div class="flex items-center justify-between text-sm">
                                <span class="text-gray-500 dark:text-gray-400">{{ $item['label'] }}</span>
                                <span class="font-semibold text-gray-950 dark:text-white">{{ $item['value'] }}</span>
                            </div>
                            <div class="mt-3 h-2 rounded-full bg-gray-200 dark:bg-white/10">
                                <div class="{{ $item['bar'] }} h-2 rounded-full" style="width: {{ min(100, max(12, $item['value'] * 12)) }}%"></div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>

        <section class="grid gap-6 xl:grid-cols-2">
            <div class="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm dark:border-white/10 dark:bg-gray-900">
                <div class="mb-4">
                    <h3 class="text-lg font-semibold text-gray-950 dark:text-white">Expense categories</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">See exactly where the money is going.</p>
                </div>

                <div class="space-y-3">
                    @forelse ($report['categories']['expenses'] as $row)
                        <div class="flex items-center justify-between rounded-2xl bg-gray-50 p-4 dark:bg-gray-950">
                            <div>
                                <div class="font-medium text-gray-950 dark:text-white">{{ $row->category }}</div>
                                <div class="text-sm text-gray-500 dark:text-gray-400">{{ $row->subcategory ?: 'General' }}</div>
                            </div>
                            <div class="text-right text-sm font-semibold text-gray-950 dark:text-white">
                                Rs. {{ number_format((float) $row->total, 2) }}
                            </div>
                        </div>
                    @empty
                        <div class="rounded-2xl border border-dashed border-gray-300 p-6 text-sm text-gray-500 dark:border-white/10 dark:text-gray-400">
                            No expense data available in this range.
                        </div>
                    @endforelse
                </div>
            </div>

            <div class="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm dark:border-white/10 dark:bg-gray-900">
                <div class="mb-4">
                    <h3 class="text-lg font-semibold text-gray-950 dark:text-white">Money tied up with people</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Track who owes you and who you owe.</p>
                </div>

                <div class="space-y-5">
                    <div>
                        <div class="mb-2 text-xs uppercase tracking-[0.2em] text-gray-400">Receivables</div>
                        <div class="space-y-2">
                            @forelse ($report['parties']['receivables'] as $row)
                                <div class="flex items-center justify-between rounded-2xl bg-emerald-50 p-4 dark:bg-emerald-950/30">
                                    <span class="font-medium text-gray-950 dark:text-white">{{ $row->counterparty_name }}</span>
                                    <span class="text-sm font-semibold text-emerald-700 dark:text-emerald-300">
                                        Rs. {{ number_format((float) $row->total, 2) }}
                                    </span>
                                </div>
                            @empty
                                <div class="rounded-2xl border border-dashed border-gray-300 p-4 text-sm text-gray-500 dark:border-white/10 dark:text-gray-400">
                                    No receivables in this range.
                                </div>
                            @endforelse
                        </div>
                    </div>

                    <div>
                        <div class="mb-2 text-xs uppercase tracking-[0.2em] text-gray-400">Payables</div>
                        <div class="space-y-2">
                            @forelse ($report['parties']['payables'] as $row)
                                <div class="flex items-center justify-between rounded-2xl bg-rose-50 p-4 dark:bg-rose-950/30">
                                    <span class="font-medium text-gray-950 dark:text-white">{{ $row->counterparty_name }}</span>
                                    <span class="text-sm font-semibold text-rose-700 dark:text-rose-300">
                                        Rs. {{ number_format((float) $row->total, 2) }}
                                    </span>
                                </div>
                            @empty
                                <div class="rounded-2xl border border-dashed border-gray-300 p-4 text-sm text-gray-500 dark:border-white/10 dark:text-gray-400">
                                    No payables in this range.
                                </div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</x-filament-panels::page>
