@php
    $insights = is_array($insightCards ?? null) ? array_values(array_filter($insightCards, fn ($c) => is_array($c))) : [];
    $typeStyles = ['warning' => 'border-warning/20 bg-warning/5', 'success' => 'border-primary/20 bg-primary/5', 'info' => 'border-info/20 bg-info/5'];
    $iconStyles = ['warning' => 'text-warning bg-warning/10', 'success' => 'text-primary bg-primary/10', 'info' => 'text-info bg-info/10'];
    $warningInsights = collect($insights)->where('type', 'warning')->values()->all();
    $successInsights = collect($insights)->where('type', 'success')->values()->all();
    $infoInsights = collect($insights)->where('type', 'info')->values()->all();
    $priorityActions = collect($insights)
        ->filter(fn ($ins) => in_array(($ins['type'] ?? 'info'), ['warning', 'info'], true))
        ->take(3)
        ->values()
        ->all();
    $health = is_array($health ?? null) ? $health : ['show' => false];
    $score = $health['score'] ?? null;
    $dash = $score !== null ? min(100, max(0, (int) $score)) * 2.64 : 0;
@endphp

<div>
<x-top-bar
    :title="__('budgets.nav.insights')"
    :subtitle="__('budgets.insights_page.subtitle')"
/>

@if (! ($health['show'] ?? false))
    <div class="mb-6 rounded-3xl border border-dashed border-border/70 bg-muted/20 p-8 text-center">
        <p class="text-sm font-semibold text-foreground">{{ __('budgets.insights_page.health_empty_title') }}</p>
        <p class="mt-2 text-xs text-muted-foreground leading-relaxed">{{ __('budgets.insights_page.health_empty_body') }}</p>
    </div>
@else
    <div class="mb-6 grid gap-3 sm:grid-cols-3">
        <div class="bg-card/70 rounded-3xl border border-border/60 p-6 sm:col-span-2 backdrop-blur-sm shadow-none ios-transition ios-card-hover">
            <div class="flex items-center gap-6">
                <div class="relative">
                    <svg class="w-24 h-24 -rotate-90" viewBox="0 0 100 100">
                        <circle cx="50" cy="50" r="42" fill="none" stroke="hsl(var(--muted))" stroke-width="8" />
                        <circle cx="50" cy="50" r="42" fill="none" stroke="hsl(var(--primary))" stroke-width="8" stroke-dasharray="{{ $dash }} 264" stroke-linecap="round" />
                    </svg>
                    <div class="absolute inset-0 flex items-center justify-center">
                        <span class="text-2xl font-extrabold">{{ $score }}</span>
                    </div>
                </div>
                <div>
                    <h2 class="font-bold text-lg mb-1">{{ __('budgets.insights_page.health_title_live') }}</h2>
                    <p class="text-sm text-muted-foreground leading-relaxed">
                        {{ __('budgets.insights_page.health_body_live') }}
                    </p>
                </div>
            </div>
            <div class="mt-4 grid gap-2 sm:grid-cols-3">
                <div class="rounded-xl border border-primary/15 bg-primary/5 px-3 py-2 text-center">
                    <p class="text-sm font-bold text-primary">
                        {{ $health['savingsPct'] !== null ? number_format((float) $health['savingsPct'], 0).'%' : __('budgets.insights_page.metric_na') }}
                    </p>
                    <p class="text-[10px] text-muted-foreground">{{ __('budgets.insights_page.metric_savings') }}</p>
                </div>
                <div class="rounded-xl border border-primary/15 bg-primary/5 px-3 py-2 text-center">
                    <p class="text-sm font-bold text-primary">
                        {{ $health['debtIncomePct'] !== null ? number_format((float) $health['debtIncomePct'], 0).'%' : __('budgets.insights_page.metric_na') }}
                    </p>
                    <p class="text-[10px] text-muted-foreground">{{ __('budgets.insights_page.metric_debt_income') }}</p>
                </div>
                <div class="rounded-xl border border-warning/15 bg-warning/5 px-3 py-2 text-center">
                    <p class="text-sm font-bold text-warning">
                        @if (($health['subLoadLabelKey'] ?? null) !== null)
                            {{ __('budgets.insights_page.metric_sub_load_'.$health['subLoadLabelKey']) }}
                        @else
                            {{ __('budgets.insights_page.metric_na') }}
                        @endif
                    </p>
                    <p class="text-[10px] text-muted-foreground">{{ __('budgets.insights_page.metric_sub_load_label') }}</p>
                </div>
            </div>
        </div>
    </div>
@endif

<div class="space-y-6">
    <div class="rounded-3xl border border-border/60 bg-card/70 p-5 backdrop-blur-sm">
        <div class="mb-3 flex items-center justify-between">
            <h3 class="text-sm font-semibold">{{ __('budgets.insights_page.priority_actions') }}</h3>
            <span class="text-[11px] text-muted-foreground">{{ count($priorityActions) }} {{ __('budgets.insights_page.priority_actions_count_suffix') }}</span>
        </div>
        @if (count($priorityActions) === 0)
            <p class="text-xs text-muted-foreground">{{ __('budgets.insights_page.cards_empty_hint') }}</p>
        @else
            <div class="space-y-2">
                @foreach ($priorityActions as $index => $ins)
                    @php $t = $ins['type'] ?? 'info'; @endphp
                    <div class="flex items-start gap-3 rounded-2xl border p-3 {{ $typeStyles[$t] ?? $typeStyles['info'] }} ios-transition-fast">
                        <div class="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg {{ $iconStyles[$t] ?? $iconStyles['info'] }}">
                            <i data-lucide="{{ $ins['icon'] ?? 'sparkles' }}" class="h-4 w-4"></i>
                        </div>
                        <div class="min-w-0 flex-1">
                            <p class="text-xs font-semibold">{{ __('budgets.insights_page.action_prefix', ['number' => $index + 1]) }} · {{ $ins['title'] ?? '' }}</p>
                            <p class="mt-0.5 text-xs text-muted-foreground leading-relaxed">{{ $ins['text'] ?? '' }}</p>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </div>

    @if (count($insights) === 0)
        <div class="rounded-2xl border border-dashed border-border/70 bg-muted/20 px-6 py-12 text-center shadow-card">
            <p class="text-sm font-semibold text-foreground">{{ __('budgets.insights_page.cards_empty_title') }}</p>
            <p class="mt-2 text-xs text-muted-foreground">{{ __('budgets.insights_page.cards_empty_hint') }}</p>
        </div>
    @else
        <div class="grid gap-4 lg:grid-cols-3">
            <div class="space-y-3">
                <h4 class="text-xs font-semibold uppercase tracking-[0.08em] text-warning">{{ __('budgets.insights_page.section_watch') }}</h4>
                @foreach ($warningInsights as $ins)
                    <div class="rounded-2xl border p-4 {{ $typeStyles['warning'] }} ios-transition ios-card-hover">
                        <div class="mb-2 flex items-center gap-2">
                            <div class="flex h-8 w-8 items-center justify-center rounded-lg {{ $iconStyles['warning'] }}">
                                <i data-lucide="{{ $ins['icon'] ?? 'alert-circle' }}" class="h-4 w-4"></i>
                            </div>
                            <p class="text-sm font-semibold">{{ $ins['title'] ?? '' }}</p>
                        </div>
                        <p class="text-xs text-muted-foreground leading-relaxed">{{ $ins['text'] ?? '' }}</p>
                    </div>
                @endforeach
            </div>
            <div class="space-y-3">
                <h4 class="text-xs font-semibold uppercase tracking-[0.08em] text-primary">{{ __('budgets.insights_page.section_wins') }}</h4>
                @foreach ($successInsights as $ins)
                    <div class="rounded-2xl border p-4 {{ $typeStyles['success'] }} ios-transition ios-card-hover">
                        <div class="mb-2 flex items-center gap-2">
                            <div class="flex h-8 w-8 items-center justify-center rounded-lg {{ $iconStyles['success'] }}">
                                <i data-lucide="{{ $ins['icon'] ?? 'sparkles' }}" class="h-4 w-4"></i>
                            </div>
                            <p class="text-sm font-semibold">{{ $ins['title'] ?? '' }}</p>
                        </div>
                        <p class="text-xs text-muted-foreground leading-relaxed">{{ $ins['text'] ?? '' }}</p>
                    </div>
                @endforeach
            </div>
            <div class="space-y-3">
                <h4 class="text-xs font-semibold uppercase tracking-[0.08em] text-info">{{ __('budgets.insights_page.section_focus') }}</h4>
                @foreach ($infoInsights as $ins)
                    <div class="rounded-2xl border p-4 {{ $typeStyles['info'] }} ios-transition ios-card-hover">
                        <div class="mb-2 flex items-center gap-2">
                            <div class="flex h-8 w-8 items-center justify-center rounded-lg {{ $iconStyles['info'] }}">
                                <i data-lucide="{{ $ins['icon'] ?? 'sparkles' }}" class="h-4 w-4"></i>
                            </div>
                            <p class="text-sm font-semibold">{{ $ins['title'] ?? '' }}</p>
                        </div>
                        <p class="text-xs text-muted-foreground leading-relaxed">{{ $ins['text'] ?? '' }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    @endif
</div>
</div>