@php
    $money = fn ($value) => 'R '.number_format((float) $value, 2);
    $formatMetric = fn (array $metric) => $metric['currency'] ? $money($metric['current']) : number_format((float) $metric['current']);
    $trendClass = fn (array $metric) => match ($metric['direction']) {
        'up' => 'dashboard-trend-up',
        'down' => 'dashboard-trend-down',
        default => 'dashboard-trend-flat',
    };
@endphp

<x-layouts.app title="Dashboard | Tarnova" :compact-header="true">
    <x-slot:headerActions>
        @can('create-invoices')
            <a href="{{ route('invoices.create') }}" class="primary-button"><i class="fa-solid fa-plus" aria-hidden="true"></i>New invoice</a>
        @endcan
        @can('create-quotations')
            <a href="{{ route('quotations.create') }}" class="secondary-button"><i class="fa-solid fa-file-pen" aria-hidden="true"></i>New quotation</a>
        @endcan
        @can('record-payments')
            <a href="{{ route('payments-collections.index') }}#needs-collection" class="secondary-button"><i class="fa-solid fa-money-bill-transfer" aria-hidden="true"></i>Record payment</a>
        @endcan
    </x-slot:headerActions>
    <div class="executive-stats-grid">
        <div class="executive-stat-card">
            <div class="executive-stat-icon">
                <i class="fa-solid fa-wallet" aria-hidden="true"></i>
            </div>
            <div>
                <p class="executive-stat-label">Outstanding Balance</p>
                <p class="executive-stat-value">{{ $money($stats['outstanding_revenue']) }}</p>
                <p class="executive-stat-copy">Collectible unpaid balances.</p>
            </div>
        </div>

        <div class="executive-stat-card executive-stat-card-primary">
            <div class="executive-stat-icon executive-stat-icon-warning">
                <i class="fa-solid fa-clock" aria-hidden="true"></i>
            </div>
            <div>
                <p class="executive-stat-label">Overdue Balance</p>
                <p class="executive-stat-value">{{ $money($stats['overdue_revenue'] ?? $overdue['amount']) }}</p>
                <p class="executive-stat-copy">{{ $stats['overdue_invoices'] }} overdue {{ Str::plural('invoice', $stats['overdue_invoices']) }}.</p>
            </div>
        </div>

        <div class="executive-stat-card">
            <div class="executive-stat-icon">
                <i class="fa-solid fa-chart-line" aria-hidden="true"></i>
            </div>
            <div>
                <p class="executive-stat-label">Paid Revenue (This Month)</p>
                <p class="executive-stat-value">{{ $money($stats['paid_revenue']) }}</p>
                <p class="executive-stat-copy">Successful payments received this month.</p>
            </div>
        </div>

        <div class="executive-stat-card">
            <div class="executive-stat-icon">
                <i class="fa-solid fa-receipt" aria-hidden="true"></i>
            </div>
            <div>
                <p class="executive-stat-label">Total Credited</p>
                <p class="executive-stat-value">{{ $money($stats['total_credited'] ?? 0) }}</p>
                <p class="executive-stat-copy">Issued credits and refunds.</p>
            </div>
        </div>
    </div>
    <section id="needs-attention" class="executive-card dashboard-attention-card">
        <div class="executive-card-header">
            <div>
                <p class="executive-eyebrow">Operations</p>
                <h3 class="executive-card-title">Needs attention today</h3>
                <p class="executive-card-copy">Priority work with a clear next step.</p>
            </div>
            @if ($actionQueue['total'] > 0)
                <span class="status-badge status-overdue">{{ $actionQueue['total'] }} open</span>
            @else
                <span class="status-badge status-paid">All clear</span>
            @endif
        </div>

        @if (empty($actionQueue['items']))
            <div class="executive-empty-state">
                <span class="executive-empty-icon executive-empty-icon-success"><i class="fa-solid fa-check" aria-hidden="true"></i></span>
                <p class="executive-empty-title">No open actions</p>
                <p class="executive-empty-copy">Nothing requires attention right now.</p>
            </div>
        @else
            <div class="dashboard-action-queue">
                @foreach ($actionQueue['items'] as $item)
                    <a href="{{ $item['url'] }}" class="dashboard-action-item dashboard-action-item-{{ $item['tone'] }}">
                        <span class="dashboard-action-icon"><i class="{{ $item['icon'] }}" aria-hidden="true"></i></span>
                        <span class="dashboard-action-main">
                            <strong>{{ $item['title'] }}</strong>
                            <small>{{ $item['description'] }}</small>
                            <span class="dashboard-action-next"><span>Next</span>{{ $item['next_step'] }}</span>
                        </span>
                        <span class="dashboard-action-count" aria-label="{{ $item['count'] }} open items">{{ $item['count'] }}</span>
                        <span class="dashboard-action-link">{{ $item['action_label'] }} <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
                    </a>
                @endforeach
            </div>
        @endif
    </section>
    <section class="executive-card executive-card-wide">
        <div class="executive-card-header">
            <div>
                <p class="executive-eyebrow">Revenue trend</p>
                <h3 class="executive-card-title">Monthly Paid Revenue</h3>
                <p class="executive-card-copy">{{ $monthlyRevenue['range_label'] ?? 'Last 12 months' }}.</p>
            </div>
        </div>

        @if ($monthlyRevenue['total'] <= 0)
            <div class="executive-empty-state">
                <span class="executive-empty-icon"><i class="fa-solid fa-chart-simple" aria-hidden="true"></i></span>
                <p class="executive-empty-title">No revenue data yet</p>
                <p class="executive-empty-copy">Record a payment to show revenue.</p>
            </div>
        @else
            @php
                $chartPoints = collect($monthlyRevenue['points'])->values();
                $chartMax = max(1, (float) ($monthlyRevenue['max'] ?? $chartPoints->max('total') ?? 0));
                $chartCount = max(1, $chartPoints->count());
                $plotTop = 8;
                $plotHeight = 72;
                $linePoints = $chartPoints->map(function ($point, $index) use ($chartMax, $chartCount, $plotTop, $plotHeight) {
                    $x = $chartCount <= 1 ? 50 : 4 + (($index / ($chartCount - 1)) * 92);
                    $y = $plotTop + (1 - ((float) $point['total'] / $chartMax)) * $plotHeight;

                    return array_merge($point, [
                        'x' => round($x, 2),
                        'y' => round($y, 2),
                    ]);
                });
                $polylinePoints = $linePoints->map(fn ($point) => $point['x'].','.$point['y'])->implode(' ');
                $areaPath = 'M 0 88 L '.$linePoints->map(fn ($point) => $point['x'].' '.$point['y'])->implode(' L ').' L 100 88 Z';
                $yAxisTicks = collect([1, 0.75, 0.5, 0.25, 0])->map(fn ($ratio) => [
                    'label' => $money($chartMax * $ratio),
                    'top' => $plotTop + (1 - $ratio) * $plotHeight,
                ]);
            @endphp

            <div class="revenue-line-chart-shell" aria-label="Monthly paid revenue over the last 12 months">
                <div class="revenue-line-chart-y-axis" aria-hidden="true">
                    @foreach ($yAxisTicks as $tick)
                        <span style="top: {{ $tick['top'] }}%">{{ $tick['label'] }}</span>
                    @endforeach
                </div>

                <div class="revenue-line-chart-stage">
                    <div class="revenue-line-chart-grid" aria-hidden="true">
                        @foreach ($yAxisTicks as $tick)
                            <span style="top: {{ $tick['top'] }}%"></span>
                        @endforeach
                    </div>

                    <svg class="revenue-line-chart-svg" viewBox="0 0 100 100" preserveAspectRatio="none" role="img" aria-hidden="true">
                        <defs>
                            <linearGradient id="revenueAreaGradient" x1="0" x2="0" y1="0" y2="1">
                                <stop offset="0%" stop-color="currentColor" stop-opacity="0.16" />
                                <stop offset="100%" stop-color="currentColor" stop-opacity="0" />
                            </linearGradient>
                        </defs>
                        <path d="{{ $areaPath }}" class="revenue-line-chart-area"></path>
                        <polyline points="{{ $polylinePoints }}" class="revenue-line-chart-line"></polyline>
                    </svg>

                    <div class="revenue-line-chart-points">
                        @foreach ($linePoints as $point)
                            <div class="revenue-line-chart-point-wrap {{ $loop->last ? 'revenue-line-chart-point-wrap-current' : '' }}" style="left: {{ $point['x'] }}%; top: {{ $point['y'] }}%;">
                                <div class="revenue-line-chart-tooltip">{{ $point['full_label'] }} &middot; {{ $money($point['total']) }}</div>
                                <span class="revenue-line-chart-point"></span>
                            </div>
                        @endforeach
                    </div>

                    <div class="revenue-line-chart-months">
                        @foreach ($linePoints as $point)
                            <span class="{{ $loop->last ? 'is-current' : '' }}">{{ $point['label'] }}</span>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif
    </section>

    <div class="executive-dashboard-grid">
        <section class="executive-card">
            <div class="executive-card-header">
                <div>
                    <p class="executive-eyebrow">Activity</p>
                    <h3 class="executive-card-title">Recent payments</h3>
                    <p class="executive-card-copy">Latest received payments.</p>
                </div>
            </div>

            @if ($recentPayments->isEmpty())
                <div class="executive-empty-state">
                    <span class="executive-empty-icon"><i class="fa-solid fa-receipt" aria-hidden="true"></i></span>
                    <p class="executive-empty-title">No recent payments</p>
                    <p class="executive-empty-copy">Record a payment to show activity.</p>
                </div>
            @else
                <div class="executive-list">
                    @foreach ($recentPayments as $payment)
                        <a href="{{ route('invoices.show', $payment->invoice) }}" class="executive-list-row">
                            <span class="executive-list-icon executive-list-icon-success">
                                <i class="fa-solid fa-arrow-down" aria-hidden="true"></i>
                            </span>
                            <span class="executive-list-main">
                                <strong>{{ $payment->invoice->client->name }}</strong>
                                <small>{{ $payment->invoice->invoice_number }} &middot; {{ $payment->methodLabel() }} &middot; {{ $payment->payment_date->format('d M Y') }}</small>
                            </span>
                            <span class="executive-list-amount">{{ $money($payment->amount_paid) }}</span>
                        </a>
                    @endforeach
                </div>
            @endif
        </section>

        <section class="executive-card">
            <div class="executive-card-header">
                <div>
                    <p class="executive-eyebrow">Clients</p>
                    <h3 class="executive-card-title">Top clients by revenue</h3>
                    <p class="executive-card-copy">Ranked by received payments.</p>
                </div>
            </div>

            @if ($topClients->isEmpty())
                <div class="executive-empty-state">
                    <span class="executive-empty-icon"><i class="fa-solid fa-users" aria-hidden="true"></i></span>
                    <p class="executive-empty-title">No client revenue yet</p>
                    <p class="executive-empty-copy">Add payments to rank clients.</p>
                </div>
            @else
                <div class="top-client-list">
                    @foreach ($topClients as $client)
                        <a href="{{ route('clients.statement', $client) }}" class="top-client-row">
                            <span class="top-client-rank">{{ $loop->iteration }}</span>
                            <span class="top-client-main">
                                <strong>{{ $client->name }}</strong>
                                <small>{{ $client->invoice_count }} {{ Str::plural('invoice', $client->invoice_count) }} &middot; {{ $money($client->outstanding_balance ?? 0) }} outstanding</small>
                            </span>
                            <span class="top-client-revenue">{{ $money($client->revenue ?? 0) }}</span>
                        </a>
                    @endforeach
                </div>
            @endif
        </section>
    </div>

    <section class="executive-card">
        <div class="executive-card-header">
            <div>
                <p class="executive-eyebrow">Momentum</p>
                <h3 class="executive-card-title">This month vs last month</h3>
                <p class="executive-card-copy">Compare this month with last month.</p>
            </div>
        </div>

        <div class="comparison-grid">
            @foreach ($comparison as $metric)
                <div class="comparison-card">
                    <p class="comparison-label">{{ $metric['label'] }}</p>
                    <p class="comparison-value">{{ $formatMetric($metric) }}</p>
                    @if ($metric['change'] === null)
                        <p class="dashboard-trend dashboard-trend-flat">No previous data</p>
                    @else
                        <p class="dashboard-trend {{ $trendClass($metric) }}">
                            {{ $metric['change'] > 0 ? '+' : '' }}{{ $metric['change'] }}% vs last month
                        </p>
                    @endif
                </div>
            @endforeach
        </div>
    </section>
</x-layouts.app>