<script setup lang="ts">
import AdminLayout from '@/Layouts/AdminLayout.vue';
import admin from '@/routes/admin';
import { Link, router, usePage } from '@inertiajs/vue3';

import {
    Banknote,
    Calendar,
    CalendarCheck,
    Clock,
    Gift,
    HandCoins,
    ShieldCheck,
    TrendingUp,
    UserCheck,
    UserMinus,
    Users,
    Wallet,
} from 'lucide-vue-next';
import { computed, ref, watch } from 'vue';

const page = usePage();

const stats = computed(() => (page.props as any).stats);
const approvalHub = computed(() => (page.props as any).approvalHub);
const approvalQueue = computed(() => (page.props as any).approvalQueue);

const workforceStats = computed(() => [
    {
        label: 'Total',
        value: stats.value.total_employees,
        sub: 'Employee Count',
        icon: Users,
        classes: 'bg-indigo-50 dark:bg-indigo-900/20 text-indigo-600 dark:text-indigo-400',
        badge: 'text-indigo-600 dark:text-indigo-400 bg-indigo-50 dark:bg-indigo-900/20',
    },
    {
        label: stats.value.attendance_rate + '%',
        value: stats.value.present_today,
        sub: 'Present Today',
        icon: UserCheck,
        classes: 'bg-emerald-50 dark:bg-emerald-900/20 text-emerald-600 dark:text-emerald-400',
        badge: 'text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-900/20',
    },
    {
        label: 'Warning',
        value: stats.value.late_today,
        sub: 'Late Entry',
        icon: Clock,
        classes: 'bg-amber-50 dark:bg-amber-900/20 text-amber-600 dark:text-amber-400',
        badge: 'text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20',
    },
    {
        label: 'Critical',
        value: stats.value.absent_today,
        sub: 'Absent Today',
        icon: UserMinus,
        classes: 'bg-rose-50 dark:bg-rose-900/20 text-rose-600 dark:text-rose-400',
        badge: 'text-rose-600 dark:text-rose-400 bg-rose-50 dark:bg-rose-900/20',
    },
]);

const approvalMetrics = computed(() => [
    {
        label: 'Leave Requests',
        value: approvalHub.value.leave,
        icon: CalendarCheck,
        border: 'border-emerald-500',
        iconClasses: 'bg-emerald-50 dark:bg-emerald-900/20 text-emerald-600 dark:text-emerald-400',
        link: admin.leave.approvals.url(),
    },
    {
        label: 'Salary Approval',
        value: approvalHub.value.salary,
        icon: Banknote,
        border: 'border-blue-500',
        iconClasses: 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400',
        link: admin.payroll.approvals.index.url(),
    },

    {
        label: 'Loan Requests',
        value: approvalHub.value.loan,
        icon: HandCoins,
        border: 'border-amber-500',
        iconClasses: 'bg-amber-50 dark:bg-amber-900/20 text-amber-600 dark:text-amber-400',
        link: admin.loans.index.url(),
    },
    {
        label: 'Increments',
        value: approvalHub.value.increment,
        icon: TrendingUp,
        border: 'border-indigo-500',
        iconClasses: 'bg-indigo-50 dark:bg-indigo-900/20 text-indigo-600 dark:text-indigo-400',
        link: admin.payroll.approvals.index.url(),
    },
    {
        label: 'Bonus Payouts',
        value: approvalHub.value.bonus,
        icon: Gift,
        border: 'border-rose-500',
        iconClasses: 'bg-rose-50 dark:bg-rose-900/20 text-rose-600 dark:text-rose-400',
        link: admin.payroll.approvals.index.url(),
    },
]);

const todayDate = computed(() => {
    return new Date().toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' });
});

// Helper for dynamic colors in queue
const getQueueColors = (color: string) => {
    const maps: Record<string, string> = {
        emerald: 'bg-emerald-50 dark:bg-emerald-900/20 text-emerald-600 dark:text-emerald-400 border-emerald-100 dark:border-emerald-800',
        amber: 'bg-amber-50 dark:bg-amber-900/20 text-amber-600 dark:text-amber-400 border-amber-100 dark:border-amber-800',
        indigo: 'bg-indigo-50 dark:bg-indigo-900/20 text-indigo-600 dark:text-indigo-400 border-indigo-100 dark:border-indigo-800',
        rose: 'bg-rose-50 dark:bg-rose-900/20 text-rose-600 dark:text-rose-400 border-rose-100 dark:border-rose-800',
    };
    return maps[color] || maps['indigo'];
};

const getQueueLink = (item: any) => {
    switch (item.type) {
        case 'Leave':
            return admin.leave.approvals.url();
        case 'Loan':
            return admin.loans.index.url();
        case 'Increment':
        case 'Bonus':
            return admin.payroll.approvals.index.url();
        default:
            return admin.leave.approvals.url();
    }
};

const selectedDate = ref((page.props as any).filters?.date || new Date().toISOString().split('T')[0]);

watch(selectedDate, (newDate) => {
    router.get('/admin/dashboard', { date: newDate }, { preserveState: true, replace: true });
});
</script>

<template>
    <AdminLayout>
        <div class="animate-fade-in flex-1 space-y-10 overflow-y-auto p-4 md:p-8">
            <!-- SECTION 1: WORKFORCE OVERVIEW -->
            <section>
                <div class="mb-6 flex items-center justify-between text-start">
                    <div>
                        <h3 class="text-sm font-bold tracking-widest text-slate-400 uppercase">{{ __('Workforce Overview') }}</h3>
                        <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">{{ __("Today's live attendance & personnel status.") }}</p>
                    </div>
                    <div
                        class="flex items-center gap-1.5 rounded-xl border border-slate-100 bg-white px-3 py-1.5 text-xs font-semibold text-slate-400 shadow-sm focus-within:ring-2 focus-within:ring-indigo-500 dark:border-slate-800 dark:bg-slate-900"
                    >
                        <Calendar :size="14" class="text-indigo-500" />
                        <input
                            v-model="selectedDate"
                            type="date"
                            class="cursor-pointer border-none bg-transparent p-0 text-slate-600 focus:ring-0 dark:text-slate-300"
                        />
                    </div>
                </div>

                <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
                    <div
                        v-for="stat in workforceStats"
                        :key="stat.sub"
                        class="hover-lift rounded-3xl border border-slate-200 bg-white px-6 py-5 text-start shadow-sm transition-all dark:border-slate-800 dark:bg-slate-900"
                    >
                        <div class="mb-4 flex items-center justify-between">
                            <div :class="`flex h-12 w-12 items-center justify-center rounded-2xl ${stat.classes}`">
                                <component :is="stat.icon" :size="24" />
                            </div>
                            <span :class="`rounded-lg px-2 py-1 text-[10px] font-bold ${stat.badge}`">{{ stat.label }}</span>
                        </div>
                        <h4 class="text-3xl leading-tight font-black text-slate-800 dark:text-white">{{ stat.value }}</h4>
                        <p class="mt-1 text-xs font-medium text-slate-500 dark:text-slate-400">{{ stat.sub }}</p>
                    </div>
                </div>
            </section>

            <!-- SECTION 2: APPROVAL HUB -->
            <section>
                <div class="mb-6 text-start">
                    <h3 class="text-sm font-bold tracking-widest text-slate-400 uppercase">{{ __('Pending Approval Hub') }}</h3>
                    <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">{{ __('Actions required to maintain workflow continuity.') }}</p>
                </div>

                <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-5">
                    <Link
                        v-for="hub in approvalMetrics"
                        :key="hub.label"
                        :href="hub.link"
                        class="hover-lift group relative flex cursor-pointer flex-col justify-between overflow-hidden rounded-2xl border border-slate-200 bg-white p-5 text-start shadow-sm transition-all dark:border-slate-800 dark:bg-slate-900"
                    >
                        <div :class="`absolute top-0 left-0 h-full w-1.5 ${hub.border}`"></div>
                        <div class="mb-4 flex items-start justify-between">
                            <div
                                :class="`rounded-xl p-2 transition-all duration-300 group-hover:scale-110 group-hover:bg-indigo-600 group-hover:text-white ${hub.iconClasses}`"
                            >
                                <component :is="hub.icon" :size="18" />
                            </div>

                            <span class="text-2xl leading-none font-black text-slate-800 dark:text-white">{{ hub.value }}</span>
                        </div>
                        <p class="text-[10px] font-bold tracking-tight text-slate-500 uppercase dark:text-slate-400">{{ hub.label }}</p>
                    </Link>
                </div>
            </section>

            <div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
                <!-- Recent Approval Requests Table -->
                <div class="lg:col-span-2">
                    <div class="overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
                        <div class="flex items-center justify-between border-b border-slate-50 px-6 py-5 dark:border-slate-800">
                            <h3 class="font-bold text-slate-800 dark:text-white">{{ __('Approval Queue') }}</h3>
                            <div class="flex gap-2">
                                <span class="rounded-lg bg-indigo-600 px-3 py-1 text-[10px] font-bold text-white shadow-md shadow-indigo-600/20">{{
                                    __('PENDING')
                                }}</span>
                                <Link
                                    :href="admin.leave.approvals.url()"
                                    class="rounded-lg bg-slate-100 px-3 py-1 text-[10px] font-bold text-slate-600 uppercase transition-colors hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-400 dark:hover:bg-slate-700"
                                    >{{ __('Manage All') }}</Link
                                >
                            </div>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="w-full border-collapse text-left">
                                <thead>
                                    <tr class="bg-slate-50/50 dark:bg-slate-800/30">
                                        <th class="px-6 py-4 text-[10px] font-bold tracking-widest text-slate-400 uppercase">
                                            {{ __('Requester') }}
                                        </th>
                                        <th class="px-6 py-4 text-[10px] font-bold tracking-widest text-slate-400 uppercase">{{ __('Type') }}</th>
                                        <th class="px-6 py-4 text-[10px] font-bold tracking-widest text-slate-400 uppercase">{{ __('Details') }}</th>
                                        <th class="px-6 py-4 text-center text-[10px] font-bold tracking-widest text-slate-400 uppercase">
                                            {{ __('Action') }}
                                        </th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                                    <tr
                                        v-for="item in approvalQueue"
                                        :key="item.id + item.type"
                                        class="group transition-colors hover:bg-slate-50/50 dark:hover:bg-slate-800/50"
                                    >
                                        <td class="px-6 py-4 text-start">
                                            <div class="flex items-center gap-3">
                                                <div
                                                    class="flex h-9 w-9 items-center justify-center rounded-xl border border-slate-200 bg-slate-100 text-xs font-bold text-slate-400 transition-all group-hover:bg-indigo-50 group-hover:text-indigo-600 dark:border-slate-700 dark:bg-slate-800"
                                                >
                                                    {{ (item as any).name.charAt(0) }}
                                                </div>
                                                <div>
                                                    <p class="text-sm leading-none font-bold text-slate-700 dark:text-slate-200">
                                                        {{ (item as any).name }}
                                                    </p>
                                                    <p class="mt-1 text-[9px] font-bold tracking-tighter text-slate-400 uppercase">
                                                        {{ (item as any).dept }}
                                                    </p>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 text-start">
                                            <span
                                                :class="`inline-flex items-center rounded-lg border px-2.5 py-1 text-[9px] font-black uppercase ${getQueueColors((item as any).color)}`"
                                            >
                                                <i :class="`fas ${(item as any).icon} mr-1.5`" /> {{ (item as any).type }}
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 text-start">
                                            <p class="line-clamp-1 text-xs font-medium text-slate-600 dark:text-slate-400">
                                                {{ (item as any).details }}
                                            </p>
                                        </td>
                                        <td class="px-6 py-4 text-center">
                                            <div class="flex justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-100">
                                                <Link
                                                    :href="getQueueLink(item)"
                                                    class="flex h-8 w-8 items-center justify-center rounded-xl bg-slate-100 text-slate-600 shadow-sm transition-all hover:bg-indigo-600 hover:text-white dark:bg-slate-800 dark:text-slate-400"
                                                >
                                                    <ShieldCheck :size="14" />
                                                </Link>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr v-if="approvalQueue.length === 0">
                                        <td colspan="4" class="px-6 py-12 text-center text-sm text-slate-400 italic">
                                            {{ __('No pending approvals found.') }}
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="border-t border-slate-100 bg-slate-50/50 p-4 text-center dark:border-slate-800 dark:bg-slate-800/30">
                            <Link
                                :href="admin.payroll.approvals.index.url()"
                                class="text-xs font-bold tracking-tight text-indigo-600 hover:underline dark:text-indigo-400"
                                >{{ __('Review All Pending Financial Records') }}</Link
                            >
                        </div>
                    </div>
                </div>

                <!-- Right Column Widgets -->
                <div class="space-y-8">
                    <!-- Efficiency Gauge -->
                    <div class="rounded-3xl border border-slate-200 bg-white p-6 text-start shadow-sm dark:border-slate-800 dark:bg-slate-900">
                        <h3 class="mb-6 flex items-center justify-between font-bold text-slate-800 dark:text-white">
                            {{ __('Turnaround Rate') }}
                            <span class="rounded bg-emerald-50 px-2 py-0.5 text-[10px] font-bold text-emerald-500 uppercase dark:bg-emerald-900/20">{{
                                __('Optimal')
                            }}</span>
                        </h3>
                        <div class="flex flex-col items-center">
                            <div class="relative mb-6 flex h-32 w-32 items-center justify-center">
                                <svg class="h-full w-full -rotate-90 transform drop-shadow-sm">
                                    <circle
                                        cx="64"
                                        cy="64"
                                        r="58"
                                        stroke="currentColor"
                                        stroke-width="10"
                                        fill="transparent"
                                        class="text-slate-100 dark:text-slate-800"
                                    ></circle>
                                    <circle
                                        cx="64"
                                        cy="64"
                                        r="58"
                                        stroke="currentColor"
                                        stroke-width="10"
                                        fill="transparent"
                                        stroke-dasharray="364.4"
                                        stroke-dashoffset="54.6"
                                        class="text-indigo-600 transition-all duration-1000 dark:text-indigo-500"
                                    ></circle>
                                </svg>
                                <div class="absolute inset-0 flex flex-col items-center justify-center">
                                    <span class="text-3xl font-black tracking-tighter text-slate-800 dark:text-white">85%</span>
                                    <span class="text-[8px] font-black tracking-widest text-slate-400 uppercase">{{ __('SLA Status') }}</span>
                                </div>
                            </div>
                            <p class="text-center text-xs font-medium text-slate-500 dark:text-slate-400">
                                {{ __('Average approval time:') }}
                                <span class="font-bold text-slate-700 italic dark:text-slate-200">4.2 {{ __('Hours') }}</span>
                            </p>
                        </div>
                    </div>

                    <!-- Budget Tracker -->
                    <div class="group relative overflow-hidden rounded-3xl bg-indigo-600 p-7 text-start text-white shadow-xl shadow-indigo-600/20">
                        <div class="relative z-10">
                            <h4 class="mb-4 flex items-center gap-2 font-bold"><Wallet :size="18" /> {{ __('Bonus Budget') }}</h4>
                            <p class="mb-6 text-[11px] leading-relaxed font-medium text-indigo-100">
                                You have <span class="font-black text-white">15%</span> of the quarterly allocation remaining.
                            </p>
                            <div class="mb-5 h-2.5 w-full overflow-hidden rounded-full border border-white/10 bg-indigo-800/40">
                                <div class="h-full w-[85%] rounded-full bg-white shadow-sm"></div>
                            </div>
                            <div class="mb-6 flex items-center justify-between text-[10px] font-black tracking-tighter uppercase opacity-80">
                                <span>{{ __('Spent') }}: $42.5k</span>
                                <span>{{ __('Rem') }}: $7.5k</span>
                            </div>
                            <button
                                class="w-full rounded-2xl bg-white py-3 text-xs font-black tracking-widest text-indigo-600 uppercase shadow-lg shadow-black/5 transition-all hover:bg-slate-50 active:scale-95"
                            >
                                {{ __('Adjust Budget') }}
                            </button>
                        </div>
                        <!-- Abstract shapes -->
                        <div
                            class="absolute -right-12 -bottom-12 h-40 w-40 rounded-full bg-white/10 blur-3xl transition-transform duration-700 group-hover:scale-110"
                        ></div>
                        <div class="absolute top-0 -left-12 h-24 w-24 rounded-full bg-indigo-400/20 blur-2xl"></div>
                    </div>
                </div>
            </div>
        </div>
    </AdminLayout>
</template>

<style scoped>
.hover-lift {
    transition:
        transform 0.2s ease-in-out,
        box-shadow 0.2s ease-in-out;
}
.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow:
        0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.animate-fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>
