@extends('layouts.app')

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

@php
    $meta = $selfMeta ?? [];
    $quickLinks = $meta['quick_links'] ?? [];
@endphp

@section('content')
    <div class="flex min-h-full flex-col space-y-6">
        <x-card class="overflow-hidden p-0">
            <div class="relative bg-gradient-to-r from-slate-800 via-slate-700 to-slate-800 px-6 py-5 text-white">
                <div class="flex flex-wrap items-center justify-between gap-4">
                    <div class="flex items-center gap-3">
                        <x-user-avatar :user="auth()->user()" size="xl" class="shrink-0 ring-2 ring-white/30" />
                        <div>
                            <p class="text-xs font-semibold uppercase tracking-wider text-white/60">{{ $meta['greeting'] ?? 'Welcome' }}</p>
                            <h2 class="text-xl font-semibold">{{ $meta['display_name'] ?? auth()->user()->name ?? 'Employee' }}</h2>
                            <p class="text-sm text-white/80">{{ $meta['subtitle'] ?? '' }}</p>
                        </div>
                    </div>
                    @if(($profileCompletion ?? 0) < 100)
                        <div class="rounded-lg bg-white/10 px-4 py-2 text-right">
                            <p class="text-xs uppercase tracking-wide text-white/75">Profile completion</p>
                            <p class="text-xl font-semibold">{{ $profileCompletion }}%</p>
                            <a href="{{ route('settings.profile') }}" class="text-xs text-white underline underline-offset-2">Complete profile</a>
                        </div>
                    @endif
                </div>
                @if(! empty($quickLinks))
                    <div class="mt-4 flex flex-wrap gap-3 border-t border-white/10 pt-4">
                        @foreach($quickLinks as $link)
                            <a href="{{ $link['href'] }}" class="inline-flex items-center gap-2 rounded-full bg-white/10 px-3.5 py-1.5 text-sm font-medium text-white hover:bg-white/20">
                                <i class="bi {{ $link['icon'] }} text-sm"></i>
                                {{ $link['label'] }}
                            </a>
                        @endforeach
                    </div>
                @endif
            </div>
        </x-card>

        <div class="grid gap-6 xl:grid-cols-12">
            {{-- Today: attendance, inbox, leaves --}}
            <div class="space-y-4 xl:col-span-5">
                <x-card>
                    <div class="flex items-start justify-between gap-3">
                        <div class="min-w-0">
                            <h3 class="text-sm font-semibold text-slate-800">Time today</h3>
                            <p class="mt-0.5 text-xs text-slate-500">{{ now()->format('D, d M Y') }}</p>
                        </div>
                        <div class="topbar-punch shrink-0">
                            @include('attendance.partials.punch-forms', [
                                'variant' => 'compact',
                                'prefix' => 'selfdash',
                                'showSummary' => false,
                            ])
                        </div>
                    </div>

                    <div class="mt-4">
                        <p class="text-xs font-medium uppercase tracking-wide text-slate-500">Current time</p>
                        <p class="mt-1 text-xl font-semibold tracking-wide text-slate-900 md:text-3xl" id="live-clock">--:--:-- --</p>
                    </div>

                    @php
                        $clockedInToday = $todayAttendance && $todayAttendance->clock_in_date_time;
                        $sessionTypeLabel = match ($todayAttendance->attendance_type ?? null) {
                            'office' => 'Office',
                            'remote' => 'Remote',
                            'normal' => 'Normal',
                            default => null,
                        };
                        $workingSecondsToday = ($clockedInToday && empty($todayAttendance->clock_out_date_time))
                            ? $todayAttendance->clock_in_date_time->diffInSeconds(now())
                            : (int) ($todayAttendance->total_duration ?? 0);
                    @endphp

                    @if($clockedInToday)
                        <div class="mt-3 flex flex-wrap gap-x-4 gap-y-1 border-t border-slate-100 pt-3 text-sm text-slate-600">
                            <span>In: {{ $todayAttendance->clock_in_date_time->format('g:i A') }}</span>
                            @if($sessionTypeLabel)
                                <span>{{ $sessionTypeLabel }}{{ $todayAttendance->clockInOffice?->name ? ' · '.$todayAttendance->clockInOffice->name : '' }}</span>
                            @endif
                            @if(($todayAttendance->remote_approval_status ?? null) === 'pending')
                                <span class="text-amber-700">Remote pending approval</span>
                            @endif
                            <span
                                id="selfdash-working-duration"
                                data-started-at="{{ $todayAttendance->clock_out_date_time ? '' : $todayAttendance->clock_in_date_time->toIso8601String() }}"
                                data-total-seconds="{{ $workingSecondsToday }}"
                            >
                                Duration: {{ intdiv($workingSecondsToday, 3600) }}h {{ intdiv($workingSecondsToday % 3600, 60) }}m
                            </span>
                        </div>
                    @endif

                    <div class="mt-3">
                        <a href="{{ route('attendance.index') }}" class="text-xs font-medium text-primary hover:underline">View attendance history</a>
                    </div>
                </x-card>

                @if(($pendingApprovals ?? 0) > 0)
                    <x-card class="border-amber-200 bg-amber-50/50">
                        <div class="flex items-center justify-between">
                            <h3 class="text-sm font-semibold text-amber-900">Inbox</h3>
                            <span class="rounded-full bg-amber-200 px-2 py-0.5 text-xs font-medium text-amber-900">{{ $pendingApprovals }}</span>
                        </div>
                        <p class="mt-2 text-sm text-amber-900/80">{{ $pendingApprovals }} leave request{{ $pendingApprovals === 1 ? '' : 's' }} waiting for your approval.</p>
                        <a href="{{ route('leaves.index', ['status' => 'pending']) }}" class="mt-3 inline-flex items-center rounded-lg bg-primary px-3 py-1.5 text-xs font-medium text-white hover:opacity-90">
                            Review requests
                        </a>
                    </x-card>
                @endif

                <x-card>
                    <div class="flex items-center justify-between">
                        <h3 class="text-sm font-semibold text-slate-800">Leave balances</h3>
                        <a href="{{ route('leaves.create') }}" class="text-xs font-medium text-primary hover:underline">Apply leave</a>
                    </div>
                    @if($leaveBalances->isEmpty())
                        <p class="mt-2 text-sm text-slate-500">No leave types configured.</p>
                    @else
                        <ul class="mt-3 grid grid-cols-2 gap-4 sm:grid-cols-3">
                            @foreach($leaveBalances as $balance)
                                @php
                                    $pct = max(0, min(100, (int) ($balance['progress'] ?? 0)));
                                    $ringRadius = 34;
                                    $ringStroke = 12;
                                    $ringCircumference = 2 * M_PI * $ringRadius;
                                    $ringOffset = $ringCircumference * (1 - ($pct / 100));
                                    $nameLower = strtolower((string) ($balance['name'] ?? ''));
                                    $codeLower = strtolower((string) ($balance['short_code'] ?? ''));
                                    if (str_contains($nameLower, 'casual') || $codeLower === 'cl') {
                                        $ringColor = '#10b981'; // emerald
                                    } elseif (str_contains($nameLower, 'sick') || str_contains($nameLower, 'medical') || $codeLower === 'sl') {
                                        $ringColor = '#0ea5e9'; // sky
                                    } elseif (str_contains($nameLower, 'paid') || $codeLower === 'paid') {
                                        $ringColor = '#8b5cf6'; // violet
                                    } elseif (str_contains($nameLower, 'earned') || str_contains($nameLower, 'privilege') || str_contains($nameLower, 'annual') || in_array($codeLower, ['el', 'pl', 'al'], true)) {
                                        $ringColor = '#f59e0b'; // amber
                                    } elseif (str_contains($nameLower, 'comp') || str_contains($nameLower, 'coff') || $codeLower === 'co') {
                                        $ringColor = '#f43f5e'; // rose
                                    } else {
                                        $ringColor = '#0c6e6d'; // primary
                                    }
                                @endphp
                                <li class="flex flex-col items-center text-center">
                                    <div class="relative h-28 w-28">
                                        <svg class="h-full w-full -rotate-90" viewBox="0 0 100 100" aria-hidden="true">
                                            <circle cx="50" cy="50" r="{{ $ringRadius }}" fill="none" stroke="#e2e8f0" stroke-width="{{ $ringStroke }}"></circle>
                                            <circle
                                                cx="50"
                                                cy="50"
                                                r="{{ $ringRadius }}"
                                                fill="none"
                                                stroke="{{ $ringColor }}"
                                                stroke-width="{{ $ringStroke }}"
                                                stroke-linecap="round"
                                                stroke-dasharray="{{ $ringCircumference }}"
                                                stroke-dashoffset="{{ $ringOffset }}"
                                            ></circle>
                                        </svg>
                                        <div class="pointer-events-none absolute inset-0 flex flex-col items-center justify-center">
                                            <span class="text-base font-bold text-slate-900">{{ $balance['remaining'] }}</span>
                                            <span class="text-[10px] text-slate-500">left</span>
                                        </div>
                                    </div>
                                    <p class="mt-2 max-w-[7rem] truncate text-sm font-medium text-slate-700">{{ $balance['name'] }}</p>
                                    <p class="text-xs text-slate-500">of {{ $balance['allocated'] }}</p>
                                </li>
                            @endforeach
                        </ul>
                    @endif
                </x-card>

                <x-card class="overflow-hidden">
                    <div class="flex items-center justify-between">
                        <h3 class="text-sm font-semibold text-slate-800">Holidays</h3>
                        <a href="{{ route('holidays.index') }}" class="inline-flex items-center gap-1 text-xs font-medium text-sky-600 hover:underline">
                            View all <i class="bi bi-chevron-right text-[10px]"></i>
                        </a>
                    </div>
                    @if($upcomingHolidays->isEmpty())
                        <p class="mt-3 text-sm text-slate-500">No upcoming holidays.</p>
                    @else
                        @php
                            $holidayCarouselItems = $upcomingHolidays->take(8)->map(static function ($holiday) {
                                return [
                                    'name' => $holiday->name,
                                    'date' => $holiday->date?->format('D, d F, Y'),
                                ];
                            })->values();
                        @endphp
                        <div
                            class="relative mt-3"
                            x-data='{ "i": 0, "items": @json($holidayCarouselItems) }'
                        >
                            <div class="flex items-center gap-2 pr-16">
                                <button
                                    type="button"
                                    class="shrink-0 text-sky-600 disabled:opacity-30"
                                    :disabled="i <= 0"
                                    x-on:click="i = Math.max(0, i - 1)"
                                    aria-label="Previous holiday"
                                >
                                    <i class="bi bi-chevron-left text-lg"></i>
                                </button>
                                <div class="min-w-0 flex-1">
                                    <p class="truncate text-lg font-bold text-sky-700" x-text="items[i]?.name"></p>
                                    <p class="mt-0.5 text-sm font-medium text-sky-600" x-text="items[i]?.date"></p>
                                </div>
                                <button
                                    type="button"
                                    class="shrink-0 text-sky-600 disabled:opacity-30"
                                    :disabled="i >= items.length - 1"
                                    x-on:click="i = Math.min(items.length - 1, i + 1)"
                                    aria-label="Next holiday"
                                >
                                    <i class="bi bi-chevron-right text-lg"></i>
                                </button>
                            </div>
                            <div class="pointer-events-none absolute -bottom-1 -right-1 text-[4.5rem] leading-none text-orange-400/90" aria-hidden="true">
                                <i class="bi bi-balloon-heart"></i>
                            </div>
                        </div>
                    @endif
                </x-card>
            </div>

            {{-- Team pulse --}}
            <div class="space-y-4 xl:col-span-4">
                <div x-data='{ "tab": "birthdays" }'>
                <x-card>
                    <div class="mb-4 flex flex-wrap items-center gap-5 border-b border-slate-200 pb-2 text-sm text-slate-700">
                        <button
                            type="button"
                            x-on:click="tab = 'birthdays'"
                            class="relative inline-flex items-center gap-2 pb-2"
                            :class="tab === 'birthdays' ? 'font-semibold text-slate-900' : 'font-medium text-slate-600'"
                        >
                            <i class="bi bi-cake2 text-lg text-[#F08A8A]"></i>
                            <span>{{ ($birthdays->count() + $todayBirthdays->count()) }} Birthday{{ ($birthdays->count() + $todayBirthdays->count()) === 1 ? '' : 's' }}</span>
                            <span
                                class="absolute inset-x-0 -bottom-2 h-0.5 rounded-full bg-sky-500"
                                x-show="tab === 'birthdays'"
                                x-cloak
                            ></span>
                        </button>
                        <button
                            type="button"
                            x-on:click="tab = 'anniversaries'"
                            class="relative inline-flex items-center gap-2 pb-2"
                            :class="tab === 'anniversaries' ? 'font-semibold text-slate-900' : 'font-medium text-slate-600'"
                        >
                            <i class="bi bi-stars text-lg text-[#B9A8DE]"></i>
                            <span>{{ ($anniversaries->count() + $todayAnniversaries->count()) }} Work Anniversar{{ ($anniversaries->count() + $todayAnniversaries->count()) === 1 ? 'y' : 'ies' }}</span>
                            <span
                                class="absolute inset-x-0 -bottom-2 h-0.5 rounded-full bg-sky-500"
                                x-show="tab === 'anniversaries'"
                                x-cloak
                            ></span>
                        </button>
                        <button
                            type="button"
                            x-on:click="tab = 'joinees'"
                            class="relative inline-flex items-center gap-2 pb-2"
                            :class="tab === 'joinees' ? 'font-semibold text-slate-900' : 'font-medium text-slate-600'"
                        >
                            <i class="bi bi-people text-lg text-[#D39BB8]"></i>
                            <span>{{ $newJoinees->count() }} New joinee{{ $newJoinees->count() === 1 ? '' : 's' }}</span>
                            <span
                                class="absolute inset-x-0 -bottom-2 h-0.5 rounded-full bg-sky-500"
                                x-show="tab === 'joinees'"
                                x-cloak
                            ></span>
                        </button>
                    </div>

                    <div x-show="tab === 'birthdays'">
                        @if($todayBirthdays->count() > 0)
                            <h4 class="mb-2 text-xs font-semibold uppercase text-slate-500">Today</h4>
                            <div class="mb-4 flex flex-wrap gap-3 text-center">
                                @foreach($todayBirthdays as $row)
                                    <div class="text-sm text-slate-700">
                                        <x-user-avatar :user="$row" size="l" class="mx-auto shrink-0" />
                                        <div class="mt-1 max-w-[4.5rem] truncate text-xs">{{ $row->name }}</div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                        <h4 class="mb-2 text-xs font-semibold uppercase text-slate-500">Upcoming</h4>
                        <div class="flex flex-wrap gap-3 text-center">
                            @forelse($birthdays->take(10) as $row)
                                <div class="text-sm text-slate-700">
                                    <x-user-avatar :user="$row" size="l" class="mx-auto shrink-0" />
                                    <div class="mt-1 max-w-[4.5rem] truncate text-xs">{{ $row->name }}</div>
                                    <div class="text-xs text-slate-500">{{ $row->dob?->format('d M') }}</div>
                                </div>
                            @empty
                                <p class="text-sm text-slate-500">No upcoming birthdays.</p>
                            @endforelse
                        </div>
                    </div>

                    <div x-show="tab === 'anniversaries'" x-cloak>
                        @if($todayAnniversaries->count() > 0)
                            <h4 class="mb-2 text-xs font-semibold uppercase text-slate-500">Today</h4>
                            <div class="mb-4 flex flex-wrap gap-3 text-center">
                                @foreach($todayAnniversaries as $row)
                                    <div class="text-sm text-slate-700">
                                        <x-user-avatar :user="$row" size="l" class="mx-auto shrink-0" />
                                        <div class="mt-1 max-w-[4.5rem] truncate text-xs">{{ $row->name }}</div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                        <h4 class="mb-2 text-xs font-semibold uppercase text-slate-500">Upcoming</h4>
                        <div class="flex flex-wrap gap-3 text-center">
                            @forelse($anniversaries->take(10) as $row)
                                <div class="text-sm text-slate-700">
                                    <x-user-avatar :user="$row" size="l" class="mx-auto shrink-0" />
                                    <div class="mt-1 max-w-[4.5rem] truncate text-xs">{{ $row->name }}</div>
                                    <div class="text-xs text-slate-500">{{ $row->joining_date?->format('d M') }}</div>
                                </div>
                            @empty
                                <p class="text-sm text-slate-500">No upcoming anniversaries.</p>
                            @endforelse
                        </div>
                    </div>

                    <div x-show="tab === 'joinees'" x-cloak>
                        <div class="flex flex-wrap gap-3 text-center">
                            @forelse($newJoinees->take(8) as $row)
                                <div class="text-sm text-slate-700">
                                    <x-user-avatar :user="$row" size="l" class="mx-auto shrink-0" />
                                    <div class="mt-1 max-w-[4.5rem] truncate text-xs">{{ $row->name }}</div>
                                    <div class="text-xs text-slate-500">{{ $row->joining_date?->format('d M') }}</div>
                                </div>
                            @empty
                                <p class="text-sm text-slate-500">No new joinees this month.</p>
                            @endforelse
                        </div>
                    </div>
                </x-card>
                </div>

                <div class="grid gap-4 sm:grid-cols-2">
                    <x-card class="relative overflow-hidden pl-5">
                        <span class="absolute inset-y-0 left-0 w-1.5 rounded-l-2xl bg-amber-500" aria-hidden="true"></span>
                        <h3 class="text-sm font-semibold text-slate-800">On leave today</h3>
                        <p class="mt-2 text-xl font-semibold text-slate-900">{{ $onLeaveTodayCount }}</p>
                        <p class="mt-1 text-xs text-slate-500">{{ $onLeaveTodayCount > 0 ? 'colleague(s) away' : 'Everyone is in' }}</p>
                        @if(($onLeaveTodayPeople ?? collect())->isNotEmpty())
                            <div class="mt-3 flex flex-wrap gap-3 text-center">
                                @foreach($onLeaveTodayPeople->take(8) as $row)
                                    <div class="text-sm text-slate-700">
                                        <x-user-avatar :user="$row" size="l" class="mx-auto shrink-0" />
                                        <div class="mt-1 max-w-[4.5rem] truncate text-xs">{{ $row->name }}</div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </x-card>
                    <x-card class="relative overflow-hidden pl-5">
                        <span class="absolute inset-y-0 left-0 w-1.5 rounded-l-2xl bg-sky-500" aria-hidden="true"></span>
                        <h3 class="text-sm font-semibold">Working remotely</h3>
                        <p class="mt-2 text-xl font-semibold text-slate-900">{{ $workingRemote->count() }}</p>
                        @if($workingRemote->isNotEmpty())
                            <p class="mt-1 truncate text-xs text-slate-500">{{ $workingRemote->take(3)->pluck('name')->join(', ') }}</p>
                        @endif
                    </x-card>
                </div>
            </div>

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

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        function updateLiveClock() {
            var el = document.getElementById('live-clock');
            if (!el) return;
            var now = new Date();
            var h = now.getHours();
            var m = now.getMinutes();
            var s = now.getSeconds();
            var ampm = h >= 12 ? 'pm' : 'am';
            h = h % 12 || 12;
            el.innerHTML = (h < 10 ? '0' : '') + h + ':' + (m < 10 ? '0' : '') + m + '<span class="text-xl">:' + (s < 10 ? '0' : '') + s + ' ' + ampm + '</span>';
        }
        updateLiveClock();
        setInterval(updateLiveClock, 1000);

        var durationEl = document.getElementById('selfdash-working-duration');
        if (durationEl && durationEl.getAttribute('data-started-at')) {
            var started = Date.parse(durationEl.getAttribute('data-started-at'));
            setInterval(function () {
                if (!started) return;
                var seconds = Math.max(0, Math.floor((Date.now() - started) / 1000));
                var h = Math.floor(seconds / 3600);
                var m = Math.floor((seconds % 3600) / 60);
                durationEl.textContent = 'Duration: ' + h + 'h ' + m + 'm';
            }, 30000);
        }
    });
</script>
@endpush