@php
    $carbonLocale = \App\Support\AppLocale::carbon();
    $tx = $finance->transactions();
    $budgets = $finance->budgets();
    $goals = $finance->goals();
    $subs = $finance->subscriptions();
    $debts = $finance->debts();
    $totalBalance = collect($tx)->sum('amount');
    $monthIncome = collect($tx)->where('type', 'income')->sum('amount');
    $monthExpenses = collect($tx)->where('type', 'expense')->sum(fn ($t) => abs($t['amount']));
    $totalFlow = $monthIncome + $monthExpenses;
    $incomeShare = $totalFlow > 0 ? ($monthIncome / $totalFlow) * 100 : 0;
    $net = $monthIncome - $monthExpenses;
    $savingsRate = $monthIncome > 0 ? ($net / $monthIncome) * 100 : 0;
    $daysLeft = 14;
    $safeAmount = collect($budgets)->sum(fn ($b) => max(($b['limit'] ?? 0) - ($b['spent'] ?? 0), 0));
    $daily = $daysLeft > 0 ? $safeAmount / $daysLeft : 0;
    $emergency = collect($goals)->first(fn ($g) => str_contains(strtolower($g['name']), 'emergency'));
    $emergencyPct = $emergency && ($emergency['target'] ?? 0) > 0 ? (($emergency['saved'] ?? 0) / $emergency['target']) * 100 : 0;
    $txForRecent = array_values(array_filter($tx, static function (array $row): bool {
        return ! \App\Support\RelativeDayLabel::isFutureTransactionDate((string) ($row['date'] ?? ''));
    }));
    $txRecentGrouped = \App\Support\RelativeDayLabel::groupedTransactionSections(collect($txForRecent)->take(6)->values()->all(), $carbonLocale);
    $hasFinanceData = count($tx) > 0 || count($budgets) > 0 || count($goals) > 0 || count($subs) > 0 || count($debts) > 0;
    $aiDashboardTips = \App\Support\FinanceDataInsights::dashboardTips($tx, $budgets, $subs, $debts, $goals);
@endphp

<div>
<x-top-bar
    :title="__('budgets.dashboard_page.greeting')"
    :subtitle="__('budgets.dashboard_page.subtitle')"
/>

@if ($showPushPrompt)
    <div x-data="{ open: true }" x-show="open" x-cloak class="mb-4">
        <div class="rounded-[24px] border border-primary/25 bg-primary/10 p-4 shadow-sm">
            <div class="flex items-start justify-between gap-3">
                <div>
                    <p class="text-sm font-semibold text-foreground">{{ __('notifications.types.system_push_prompt_title') }}</p>
                    <p class="mt-1 text-xs text-foreground/70">{{ __('notifications.types.system_push_prompt_message') }}</p>
                </div>
                <button type="button" class="text-muted-foreground hover:text-foreground" @click="open = false; $wire.dismissPushPrompt()">
                    <i data-lucide="x" class="h-4 w-4"></i>
                </button>
            </div>
            <div class="mt-3 flex flex-wrap gap-2">
                <button
                    type="button"
                    class="inline-flex items-center rounded-full bg-primary px-3 py-1.5 text-xs font-semibold text-primary-foreground ios-transition-fast ios-press"
                    @click="window.dispatchEvent(new CustomEvent('budgets:request-push-permission')); open = false"
                >
                    {{ __('notifications.types.system_push_prompt_enable') }}
                </button>
                <button
                    type="button"
                    class="inline-flex items-center rounded-full border border-border/70 bg-background px-3 py-1.5 text-xs font-semibold text-foreground/75 ios-transition-fast ios-press"
                    @click="open = false; $wire.dismissPushPrompt()"
                >
                    {{ __('notifications.types.system_push_prompt_later') }}
                </button>
            </div>
        </div>
    </div>
@endif

<div class="mb-4 flex flex-wrap items-center justify-between gap-2">
    <div class="text-xs text-foreground/55">
        @if ($this->editing)
            <div>{{ __('budgets.dashboard_page.layout_hint_editing') }}</div>
            <div class="mt-0.5 text-[11px] text-foreground/50">{{ __('budgets.dashboard_page.layout_hint_sizes') }}</div>
        @elseif (count($this->hidden) > 0)
            {{ count($this->hidden) === 1
                ? __('budgets.dashboard_page.widgets_hidden_one', ['count' => count($this->hidden)])
                : __('budgets.dashboard_page.widgets_hidden_other', ['count' => count($this->hidden)]) }}
        @else
            {{ __('budgets.dashboard_page.layout_saved') }}
        @endif
    </div>
    <div class="flex items-center gap-2">
        @if ($this->editing)
            <button type="button" wire:click="resetLayout" class="rounded-full border border-border/70 bg-background/80 px-3 py-1.5 text-[11px] font-semibold text-foreground/65 hover:text-foreground ios-transition-fast ios-press">{{ __('budgets.dashboard_page.reset') }}</button>
        @endif
        <button
            type="button"
            wire:click="toggleEditing"
            class="inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-[11px] font-semibold ios-transition-fast ios-press {{ $this->editing ? 'border border-primary/30 bg-primary text-primary-foreground hover:bg-primary/90' : 'border border-border/70 bg-background/80 text-foreground/70 hover:text-foreground' }}"
        >
            @if ($this->editing)
                <i data-lucide="check" class="h-3.5 w-3.5"></i>
            @else
                <i data-lucide="settings-2" class="h-3.5 w-3.5"></i>
            @endif
            {{ $this->editing ? __('budgets.dashboard_page.done') : __('budgets.dashboard_page.edit_dashboard') }}
        </button>
    </div>
</div>

@if (count($visibleWidgets) > 0 && ! $hasFinanceData)
    <div class="mb-4 rounded-[18px] border border-primary/20 bg-gradient-to-br from-primary/[0.07] to-transparent px-4 py-3.5 sm:px-5">
        <p class="text-sm font-semibold tracking-[-0.02em] text-foreground">{{ __('budgets.dashboard_page.empty_finance_title') }}</p>
        <p class="mt-1 max-w-2xl text-xs leading-relaxed text-foreground/60">{{ __('budgets.dashboard_page.empty_finance_body') }}</p>
        <div class="mt-3 flex flex-wrap gap-2">
            <a href="{{ url('/transactions') }}" wire:navigate class="inline-flex items-center gap-1 rounded-full border border-primary/30 bg-primary px-3 py-1.5 text-[11px] font-semibold text-primary-foreground ios-transition-fast ios-press hover:bg-primary/90">
                {{ __('budgets.dashboard_page.empty_finance_link_tx') }}
                <i data-lucide="chevron-right" class="h-3.5 w-3.5"></i>
            </a>
            <a href="{{ url('/import') }}" wire:navigate class="inline-flex items-center gap-1 rounded-full border border-border/70 bg-background/90 px-3 py-1.5 text-[11px] font-semibold text-foreground/75 ios-transition-fast ios-press hover:border-border hover:text-foreground">
                {{ __('budgets.dashboard_page.empty_finance_link_import') }}
                <i data-lucide="chevron-right" class="h-3.5 w-3.5"></i>
            </a>
        </div>
    </div>
@endif

@if (count($visibleWidgets) > 0)
    <div x-data="{ draggingId: null, overId: null }" class="{{ $gridClass }} mb-2">
        @foreach ($visibleWidgets as $id)
            @php
                $size = $this->sizeFor($id);
                $cell = $this->cellClass($id);
                $isHidden = in_array($id, $this->hidden, true);
                $widgetDelay = match ($id) {
                    'balance' => 0.05,
                    'income-expense' => 0.10,
                    'safe-to-spend' => 0.15,
                    'upcoming' => 0.20,
                    'recent-transactions' => 0.22,
                    'budgets' => 0.25,
                    'goals' => 0.30,
                    'subscriptions' => 0.35,
                    'debts' => 0.40,
                    'ai' => 0.45,
                    default => 0.05,
                };
            @endphp
            <div
                wire:key="widget-{{ $id }}"
                @if ($this->editing)
                    draggable="true"
                    x-on:dragstart="draggingId = @js($id); overId = null; event.dataTransfer?.setData('text/plain', @js($id)); event.dataTransfer?.setDragImage(event.currentTarget, 20, 20); $wire.dragStart(@js($id))"
                    x-on:dragover.prevent="if (draggingId && draggingId !== @js($id)) { overId = @js($id) }"
                    x-on:drop.prevent.stop="if (draggingId && draggingId !== @js($id)) { $wire.dropByIds(draggingId, @js($id)) }; draggingId = null; overId = null"
                    x-on:dragend="draggingId = null; overId = null; $wire.dragEnd()"
                @endif
                class="relative flex min-h-0 flex-col transition-[opacity,transform,box-shadow] {{ $cell }} {{ $this->editing ? 'cursor-grab active:cursor-grabbing' : '' }} {{ $isHidden ? 'opacity-50' : '' }}"
                x-bind:class="{
                    'scale-[0.99] opacity-40': draggingId === @js($id),
                    'z-10 rounded-[18px] ring-2 ring-primary/55 ring-offset-2 ring-offset-background': overId === @js($id)
                }"
            >
                @if ($this->editing)
                    <div class="absolute -top-2 left-2 right-2 z-20 flex flex-wrap items-center gap-2 rounded-[14px] border border-border/70 bg-background/95 px-2 py-1.5 shadow-md backdrop-blur supports-[backdrop-filter]:bg-background/90">
                        <div class="flex min-w-0 flex-1 items-center gap-1.5 text-[10px] font-semibold text-foreground/70">
                            <i data-lucide="grip-vertical" class="h-3 w-3 shrink-0"></i>
                            <span class="truncate">{{ __('budgets.dashboard_page.widget_labels.' . $id) }}</span>
                        </div>
                        <div class="flex flex-wrap items-center justify-end gap-1.5 sm:flex-nowrap">
                            <label for="widget-width-{{ $id }}" class="sr-only">{{ __('budgets.dashboard_page.sr_width', ['label' => __('budgets.dashboard_page.widget_labels.' . $id)]) }}</label>
                            <select id="widget-width-{{ $id }}" x-on:mousedown.stop x-on:change="$wire.patchWidgetWidth('{{ $id }}', $event.target.value)" class="h-7 max-w-[9rem] cursor-pointer rounded-lg border border-border/80 bg-background px-1.5 text-[10px] font-semibold text-foreground/80 shadow-sm">
                                @foreach (['full', 'two-thirds', 'half', 'third', 'quarter'] as $val)
                                    <option value="{{ $val }}" @selected($size['width'] === $val)>{{ __('budgets.dashboard_page.width_labels.' . $val) }}</option>
                                @endforeach
                            </select>
                            <label for="widget-height-{{ $id }}" class="sr-only">{{ __('budgets.dashboard_page.sr_height', ['label' => __('budgets.dashboard_page.widget_labels.' . $id)]) }}</label>
                            <select id="widget-height-{{ $id }}" x-on:mousedown.stop x-on:change="$wire.patchWidgetHeight('{{ $id }}', $event.target.value)" class="h-7 max-w-[8.5rem] cursor-pointer rounded-lg border border-border/80 bg-background px-1.5 text-[10px] font-semibold text-foreground/80 shadow-sm">
                                @foreach (['compact', 'standard', 'expanded'] as $val)
                                    <option value="{{ $val }}" @selected($size['height'] === $val)>{{ __('budgets.dashboard_page.height_labels.' . $val) }}</option>
                                @endforeach
                            </select>
                            <button type="button" x-on:mousedown.stop x-on:click.stop wire:click="toggleHidden(@js($id))" aria-label="{{ $isHidden ? __('budgets.dashboard_page.aria_show_widget', ['label' => __('budgets.dashboard_page.widget_labels.' . $id)]) : __('budgets.dashboard_page.aria_hide_widget', ['label' => __('budgets.dashboard_page.widget_labels.' . $id)]) }}" class="flex h-7 shrink-0 items-center gap-1 rounded-lg border border-border/60 px-2 text-[10px] font-semibold text-foreground/65 ios-transition-fast ios-press hover:bg-foreground/[0.06] hover:text-foreground">
                                @if ($isHidden)
                                    <i data-lucide="eye" class="h-3 w-3"></i> {{ __('budgets.dashboard_page.show') }}
                                @else
                                    <i data-lucide="eye-off" class="h-3 w-3"></i> {{ __('budgets.dashboard_page.hide') }}
                                @endif
                            </button>
                        </div>
                    </div>
                @endif
                <div class="min-h-0 flex flex-1 flex-col">
                    @include('livewire.partials.dashboard-widget-body', [
                        'id' => $id,
                        'tx' => $tx,
                        'txRecentGrouped' => $txRecentGrouped,
                        'budgets' => $budgets,
                        'goals' => $goals,
                        'subs' => $subs,
                        'debts' => $debts,
                        'locale' => $carbonLocale,
                        'totalBalance' => $totalBalance,
                        'monthIncome' => $monthIncome,
                        'monthExpenses' => $monthExpenses,
                        'incomeShare' => $incomeShare,
                        'net' => $net,
                        'savingsRate' => $savingsRate,
                        'daysLeft' => $daysLeft,
                        'safeAmount' => $safeAmount,
                        'daily' => $daily,
                        'emergency' => $emergency,
                        'emergencyPct' => $emergencyPct,
                        'delay' => $widgetDelay,
                        'aiTips' => $aiDashboardTips,
                    ])
                </div>
            </div>
        @endforeach
    </div>
@else
    <div class="flex flex-col items-center justify-center rounded-[20px] border border-dashed border-border/70 bg-foreground/[0.02] px-6 py-14 text-center">
        <span class="mb-3 flex h-12 w-12 items-center justify-center rounded-2xl border border-primary/20 bg-primary/10 text-primary">
            <i data-lucide="layout-grid" class="h-6 w-6"></i>
        </span>
        <p class="text-base font-semibold tracking-[-0.02em] text-foreground">{{ __('budgets.dashboard_page.empty_widgets_title') }}</p>
        <p class="mt-2 max-w-md text-sm text-foreground/55">{{ __('budgets.dashboard_page.empty_widgets_body') }}</p>
        <button
            type="button"
            wire:click="toggleEditing"
            class="mt-5 inline-flex items-center gap-1.5 rounded-full border border-primary/30 bg-primary px-4 py-2 text-xs font-semibold text-primary-foreground ios-transition-fast ios-press hover:bg-primary/90"
        >
            <i data-lucide="settings-2" class="h-3.5 w-3.5"></i>
            {{ __('budgets.dashboard_page.empty_widgets_cta') }}
        </button>
    </div>
@endif
</div>