@extends('layouts.app')

@section('title', 'Dashboard')
@section('heading', 'Dashboard')

@section('content')
    @php
        $ctx = $homeContext ?? [];
        $kpis = $ctx['kpis'] ?? [];
        $actionQueue = $ctx['action_queue'] ?? [];
        $quickActions = $ctx['quick_actions'] ?? [];
        $secondaryStats = $ctx['secondary_stats'] ?? [];
        $toneClasses = [
            'sky' => 'bg-sky-100 text-sky-600',
            'emerald' => 'bg-emerald-100 text-emerald-600',
            'amber' => 'bg-amber-100 text-amber-600',
            'slate' => 'bg-slate-100 text-slate-600',
            'rose' => 'bg-rose-100 text-rose-600',
            'violet' => 'bg-violet-100 text-violet-600',
            'indigo' => 'bg-indigo-100 text-indigo-600',
        ];
        $kpiLeftAccents = [
            'sky' => 'bg-sky-500',
            'emerald' => 'bg-emerald-500',
            'amber' => 'bg-amber-500',
            'slate' => 'bg-slate-400',
            'rose' => 'bg-rose-500',
            'violet' => 'bg-violet-500',
            'indigo' => 'bg-indigo-500',
        ];
    @endphp

    <div class="space-y-4">
        {{-- Workspace header --}}
        <div class="rounded-xl border border-slate-200 bg-gradient-to-r from-slate-800 via-slate-700 to-slate-800 px-4 py-4 text-white shadow-sm">
            <div class="flex flex-wrap items-start justify-between gap-3">
                <div>
                    <p class="text-xs font-semibold uppercase tracking-wider text-white/60">{{ $ctx['zone'] ?? 'Overview' }}</p>
                    <h2 class="mt-1 text-xl font-semibold">{{ $ctx['greeting'] ?? 'Welcome' }}</h2>
                    <p class="mt-1 text-sm text-white/75">{{ $ctx['date_label'] ?? now()->format('l, j F Y') }}</p>
                </div>
                @if(! empty($secondaryStats))
                    <div class="flex flex-wrap gap-3">
                        @foreach($secondaryStats as $stat)
                            <div class="rounded-lg bg-white/10 px-3 py-2 text-center">
                                <p class="text-xs text-white/70">{{ $stat['label'] }}</p>
                                <p class="text-lg font-semibold">{{ $stat['value'] }}</p>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>

        <div class="grid gap-4 xl:grid-cols-3">
            <div class="space-y-4 xl:col-span-2">
                {{-- Needs attention --}}
                @if(! empty($actionQueue))
                    <div class="rounded-xl border border-amber-200 bg-amber-50/60 p-4 shadow-sm">
                        <div class="mb-3 flex items-center justify-between gap-2">
                            <h3 class="text-sm font-semibold text-amber-900">Needs your attention</h3>
                            <span class="rounded-full bg-amber-200 px-2 py-0.5 text-xs font-medium text-amber-900">{{ count($actionQueue) }}</span>
                        </div>
                        <div class="grid gap-3 lg:grid-cols-2">
                            @foreach($actionQueue as $item)
                                <div class="rounded-lg border border-amber-100 bg-white p-3">
                                    <div class="flex items-center justify-between gap-2">
                                        <a href="{{ $item['href'] }}" class="text-sm font-semibold text-slate-900 hover:text-primary">{{ $item['title'] }}</a>
                                        <span class="rounded-full bg-slate-100 px-2 py-0.5 text-xs font-medium text-slate-700">{{ $item['count'] }}</span>
                                    </div>
                                    @if(! empty($item['rows']))
                                        <ul class="mt-2 space-y-1.5">
                                            @foreach($item['rows'] as $row)
                                                <li>
                                                    <a href="{{ $row['href'] ?? $item['href'] }}" class="flex items-center justify-between gap-2 rounded-md px-2 py-1.5 text-xs hover:bg-slate-50">
                                                        <span class="font-medium text-slate-800">{{ $row['name'] }}</span>
                                                        <span class="text-slate-500">{{ $row['meta'] ?? '' }}</span>
                                                    </a>
                                                </li>
                                            @endforeach
                                        </ul>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif

                {{-- KPI strip --}}
                @if(! empty($kpis))
                    <div class="grid gap-4 sm:grid-cols-2">
                        @foreach($kpis as $kpi)
                            @php
                                $iconTone = $toneClasses[$kpi['tone'] ?? 'slate'] ?? $toneClasses['slate'];
                                $leftAccent = $kpiLeftAccents[$kpi['tone'] ?? 'slate'] ?? $kpiLeftAccents['slate'];
                                $isLeaveKpi = ($kpi['key'] ?? '') === 'leave';
                                $leaveRows = collect($kpi['leave_rows'] ?? [])->filter();
                            @endphp
                            <a href="{{ $kpi['href'] ?? '#' }}"
                               @if($isLeaveKpi && $leaveRows->isNotEmpty())
                                   x-data="{ leaveOpen: false }"
                                   @click.outside="leaveOpen = false"
                                   :class="leaveOpen ? 'z-20' : ''"
                               @endif
                               class="group relative block rounded-2xl border border-slate-200 bg-white p-4 pl-5 shadow-sm transition hover:-translate-y-0.5 hover:border-slate-300 hover:shadow-md {{ $isLeaveKpi ? 'overflow-visible z-10 hover:z-20 focus-within:z-20' : 'overflow-hidden' }}">
                                {{-- Clip wrapper keeps the left accent visible even when the card is overflow-visible for the leave popup --}}
                                <span class="pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-2xl" aria-hidden="true">
                                    <span class="absolute inset-y-0 left-0 w-1.5 {{ $leftAccent }}"></span>
                                </span>
                                <div class="relative z-10 flex items-start justify-between gap-3">
                                    <div class="min-w-0">
                                        <p class="text-sm font-medium text-slate-500">{{ $kpi['title'] }}</p>
                                        <p class="mt-1 text-xl font-semibold text-slate-900">{{ $kpi['value'] }}</p>
                                        @if(! empty($kpi['hint']) && ! $isLeaveKpi)
                                            <p class="mt-1 text-xs text-slate-500">{{ $kpi['hint'] }}</p>
                                        @endif
                                    </div>
                                    <div class="flex shrink-0 items-center gap-1">
                                        <div class="flex h-9 w-9 items-center justify-center rounded-lg {{ $iconTone }}">
                                            <i class="bi {{ $kpi['icon'] ?? 'bi-graph-up' }} text-lg"></i>
                                        </div>
                                        @if($isLeaveKpi && $leaveRows->isNotEmpty())
                                            <button type="button"
                                                    class="inline-flex h-7 w-7 items-center justify-center rounded-md text-slate-400 transition hover:bg-amber-50 hover:text-amber-600"
                                                    :class="leaveOpen ? 'bg-amber-50 text-amber-600' : 'group-hover:text-amber-600'"
                                                    @click.prevent.stop="leaveOpen = !leaveOpen"
                                                    :aria-expanded="leaveOpen.toString()"
                                                    aria-label="Show people on leave">
                                                <i class="bi bi-chevron-right text-sm transition" :class="leaveOpen ? 'rotate-90' : ''" aria-hidden="true"></i>
                                            </button>
                                        @endif
                                    </div>
                                </div>
                                @if($isLeaveKpi && $leaveRows->isNotEmpty())
                                    <div class="absolute left-full top-1/2 z-30 ml-2 w-max max-w-[min(24rem,calc(100vw-8rem))] -translate-y-1/2 rounded-xl border border-slate-200 bg-white p-4 shadow-lg transition"
                                         :class="leaveOpen
                                            ? 'pointer-events-auto visible opacity-100'
                                            : 'pointer-events-none invisible opacity-0 group-hover:pointer-events-auto group-hover:visible group-hover:opacity-100'"
                                         @click.prevent.stop>
                                        {{-- Tooltip arrow (left side, pointing toward card) --}}
                                        <span class="absolute left-0 top-1/2 h-3.5 w-3.5 -translate-x-1/2 -translate-y-1/2 rotate-45 border-b border-l border-slate-200 bg-white" aria-hidden="true"></span>
                                        <p class="mb-3 px-1 text-xs font-semibold uppercase tracking-wide text-slate-400">On leave today</p>
                                        <div class="flex flex-nowrap items-start gap-3">
                                            @foreach($leaveRows->take(6) as $row)
                                                <div class="flex w-16 flex-col items-center gap-1.5 text-center">
                                                    <x-user-avatar :user="$row['user'] ?? null" size="md" class="shrink-0" />
                                                    <span class="w-full truncate text-xs font-medium leading-tight text-slate-700">{{ $row['name'] ?? '—' }}</span>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                            </a>
                        @endforeach
                    </div>
                @endif

                {{-- Quick actions --}}
                @if(! empty($quickActions))
                    @php
                        $quickActionStyles = [
                            'sky' => 'border-sky-200 bg-sky-50 text-sky-800 hover:bg-sky-100',
                            'rose' => 'border-rose-200 bg-rose-50 text-rose-800 hover:bg-rose-100',
                            'violet' => 'border-violet-200 bg-violet-50 text-violet-800 hover:bg-violet-100',
                            'emerald' => 'border-emerald-200 bg-emerald-50 text-emerald-800 hover:bg-emerald-100',
                            'amber' => 'border-amber-200 bg-amber-50 text-amber-900 hover:bg-amber-100',
                            'teal' => 'border-teal-200 bg-teal-50 text-teal-800 hover:bg-teal-100',
                            'indigo' => 'border-indigo-200 bg-indigo-50 text-indigo-800 hover:bg-indigo-100',
                            'orange' => 'border-orange-200 bg-orange-50 text-orange-800 hover:bg-orange-100',
                            'slate' => 'border-slate-200 bg-slate-100 text-slate-700 hover:bg-slate-200',
                        ];
                        $quickActionCycle = array_keys($quickActionStyles);
                    @endphp
                    <div>
                        <h2 class="mb-3 text-sm font-semibold uppercase tracking-wider text-slate-500">Quick actions</h2>
                        <div class="flex flex-wrap gap-3">
                            @foreach($quickActions as $index => $action)
                                @php
                                    $tone = $action['tone'] ?? $quickActionCycle[$index % count($quickActionCycle)];
                                    $toneClass = $quickActionStyles[$tone] ?? $quickActionStyles['slate'];
                                @endphp
                                <a href="{{ $action['href'] }}"
                                   class="inline-flex items-center gap-2 rounded-full border px-3.5 py-1.5 text-sm font-medium shadow-sm transition {{ $toneClass }}">
                                    <i class="bi {{ $action['icon'] }} text-sm"></i>
                                    {{ $action['label'] }}
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif

                {{-- Charts --}}
                <div class="grid gap-4 lg:grid-cols-2">
                    <x-card class="group min-w-0 rounded-2xl border border-slate-200/70 bg-gradient-to-br from-white via-emerald-50/20 to-slate-50/80 p-4 shadow-sm">
                        <div class="mb-3">
                            <p class="text-xs font-semibold uppercase tracking-[0.18em] text-emerald-600">Attendance</p>
                            <h3 class="mt-1 text-base font-semibold text-slate-900">7-day trend</h3>
                            <p class="mt-1 text-sm text-slate-500">Distinct employees clocked in per day.</p>
                        </div>
                        <div class="rounded-xl border border-slate-200/70 bg-white/90 p-3 shadow-sm">
                            <div class="h-56 w-full">
                                <canvas id="attendanceChart" class="h-full w-full"></canvas>
                            </div>
                        </div>
                    </x-card>

                    <x-card class="group min-w-0 rounded-2xl border border-slate-200/70 bg-gradient-to-br from-white via-sky-50/20 to-slate-50/80 p-4 shadow-sm">
                        <div class="mb-3">
                            <p class="text-xs font-semibold uppercase tracking-[0.18em] text-sky-600">Departments</p>
                            <h3 class="mt-1 text-base font-semibold text-slate-900">Headcount mix</h3>
                            <p class="mt-1 text-sm text-slate-500">Active employees by department.</p>
                        </div>
                        <div class="rounded-xl border border-slate-200/70 bg-white/90 p-3 shadow-sm">
                            <div class="h-56 w-full">
                                <canvas id="departmentChart" class="h-full w-full"></canvas>
                            </div>
                        </div>
                    </x-card>

                    <x-card class="group min-w-0 rounded-2xl border border-slate-200/70 bg-gradient-to-br from-white via-blue-50/20 to-slate-50/80 p-4 shadow-sm lg:col-span-2">
                        <div class="mb-3">
                            <p class="text-xs font-semibold uppercase tracking-[0.18em] text-blue-600">Leaves</p>
                            <h3 class="mt-1 text-base font-semibold text-slate-900">Leave utilization</h3>
                            <p class="mt-1 text-sm text-slate-500">Approved leave days by type.</p>
                        </div>
                        <div class="rounded-xl border border-slate-200/70 bg-white/90 p-3 shadow-sm">
                            <div class="h-56 w-full">
                                <canvas id="leaveTypesChart" class="h-full w-full"></canvas>
                            </div>
                        </div>
                    </x-card>
                </div>
            </div>

            <aside class="xl:col-span-1">
                <div class="xl:sticky xl:top-20">
                    <div class="xl:max-h-[calc(100vh-7rem)] xl:overflow-y-auto xl:pr-1">
                        @include('dashboard.partials.mixed-feed')
                    </div>
                </div>
            </aside>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            if (typeof Chart === 'undefined') return;

            var palette = {
                text: '#334155',
                muted: '#94a3b8',
                grid: 'rgba(148, 163, 184, 0.2)',
                border: '#ffffff',
                tooltipBg: 'rgba(255, 255, 255, 0.98)',
                tooltipText: '#0f172a'
            };

            Chart.defaults.color = palette.text;
            Chart.defaults.font.family = 'ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif';
            Chart.defaults.font.size = 12;
            Chart.defaults.borderColor = palette.grid;

            var baseOptions = {
                responsive: true,
                maintainAspectRatio: false,
                normalized: true,
                animation: { duration: 700, easing: 'easeOutQuart' },
                interaction: { mode: 'index', intersect: false },
                plugins: {
                    legend: {
                        labels: {
                            color: palette.text,
                            boxWidth: 10,
                            boxHeight: 10,
                            padding: 16,
                            usePointStyle: true,
                            pointStyle: 'circle'
                        }
                    },
                    tooltip: {
                        backgroundColor: palette.tooltipBg,
                        titleColor: palette.tooltipText,
                        bodyColor: palette.tooltipText,
                        borderColor: palette.grid,
                        borderWidth: 1,
                        padding: 10,
                        displayColors: true
                    }
                }
            };

            var attendanceLabels = @json($chartAttendance['labels'] ?? []);
            var attendanceData = @json($chartAttendance['data'] ?? []);
            var ctx1 = document.getElementById('attendanceChart');
            if (ctx1) {
                var lineCtx = ctx1.getContext('2d');
                var lineGradient = lineCtx.createLinearGradient(0, 0, 0, ctx1.height || 260);
                lineGradient.addColorStop(0, 'rgba(16, 185, 129, 0.35)');
                lineGradient.addColorStop(1, 'rgba(16, 185, 129, 0.02)');

                new Chart(ctx1.getContext('2d'), {
                    type: 'line',
                    data: {
                        labels: attendanceLabels,
                        datasets: [{
                            label: 'Present employees',
                            data: attendanceData,
                            borderColor: '#10b981',
                            borderWidth: 2.5,
                            tension: 0.42,
                            fill: true,
                            backgroundColor: lineGradient,
                            pointRadius: 0,
                            pointHoverRadius: 5,
                            pointHoverBorderWidth: 2,
                            pointHoverBackgroundColor: '#ffffff',
                            pointHoverBorderColor: '#10b981'
                        }]
                    },
                    options: Object.assign({}, baseOptions, {
                        plugins: { legend: { display: false }, tooltip: baseOptions.plugins.tooltip },
                        scales: {
                            x: { grid: { display: false }, ticks: { color: palette.muted } },
                            y: { beginAtZero: true, ticks: { color: palette.muted, precision: 0 } }
                        }
                    })
                });
            }

            var deptLabels = @json($chartDepartments['labels'] ?? []);
            var deptData = @json($chartDepartments['data'] ?? []);
            var ctx2 = document.getElementById('departmentChart');
            if (ctx2) {
                var isTabletOrMobile = window.innerWidth < 1280;
                var deptPalette = [
                    '#10b981', '#0ea5e9', '#f59e0b', '#ef4444', '#8b5cf6',
                    '#14b8a6', '#f97316', '#3b82f6', '#ec4899', '#84cc16',
                    '#06b6d4', '#a855f7', '#eab308', '#22c55e', '#6366f1',
                    '#fb7185', '#2dd4bf', '#f472b6', '#38bdf8', '#4ade80'
                ];
                var deptColors = deptLabels.map(function(_, index) {
                    if (index < deptPalette.length) {
                        return deptPalette[index];
                    }
                    var hue = Math.round((index * 137.508) % 360);
                    return 'hsl(' + hue + ' 70% 48%)';
                });
                var deptHoverColors = deptColors.map(function(color) {
                    if (color.indexOf('hsl(') === 0) {
                        return color.replace('48%', '40%');
                    }
                    return color;
                });

                new Chart(ctx2.getContext('2d'), {
                    type: 'doughnut',
                    data: {
                        labels: deptLabels,
                        datasets: [{
                            data: deptData,
                            backgroundColor: deptColors,
                            hoverBackgroundColor: deptHoverColors,
                            borderColor: palette.border,
                            borderWidth: 2,
                            hoverOffset: 8
                        }]
                    },
                    options: Object.assign({}, baseOptions, {
                        interaction: { mode: 'nearest', intersect: true },
                        cutout: '58%',
                        plugins: {
                            legend: Object.assign({}, baseOptions.plugins.legend, {
                                position: isTabletOrMobile ? 'bottom' : 'right',
                                align: 'center'
                            }),
                            tooltip: Object.assign({}, baseOptions.plugins.tooltip, {
                                callbacks: {
                                    label: function(context) {
                                        return context.label + ': ' + context.formattedValue;
                                    }
                                }
                            })
                        }
                    })
                });
            }

            var leaveLabels = @json($chartLeaveTypes['labels'] ?? []);
            var leaveData = @json($chartLeaveTypes['data'] ?? []);
            var ctx3 = document.getElementById('leaveTypesChart');
            if (ctx3) {
                new Chart(ctx3.getContext('2d'), {
                    type: 'bar',
                    data: {
                        labels: leaveLabels,
                        datasets: [{
                            label: 'Days taken',
                            data: leaveData,
                            backgroundColor: ['#10b981', '#0ea5e9', '#3b82f6', '#64748b', '#14b8a6', '#1d4ed8'],
                            hoverBackgroundColor: ['#059669', '#0284c7', '#2563eb', '#475569', '#0f766e', '#1e40af'],
                            borderRadius: 10,
                            borderSkipped: false,
                            maxBarThickness: 34
                        }]
                    },
                    options: Object.assign({}, baseOptions, {
                        scales: {
                            x: { grid: { display: false }, ticks: { color: palette.muted } },
                            y: { beginAtZero: true, ticks: { color: palette.muted, precision: 0 } }
                        },
                        plugins: { legend: { display: false }, tooltip: baseOptions.plugins.tooltip }
                    })
                });
            }
        });
    </script>
@endpush