<script setup lang="ts">
import { Head, usePage } from '@inertiajs/vue3';
import { Clock, Sun, Sunrise, Moon } from '@lucide/vue';
import { computed, onMounted, onUnmounted, ref } from 'vue';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import AdminLayout from '@/layouts/AdminLayout.vue';

const page = usePage();
const user = computed(() => page.props.auth.user);

const currentTime = ref(new Date());
let timer: ReturnType<typeof setInterval>;

onMounted(() => {
    timer = setInterval(() => {
        currentTime.value = new Date();
    }, 1000);
});

onUnmounted(() => {
    clearInterval(timer);
});

const timeStr = computed(() => {
    return currentTime.value.toLocaleTimeString('id-ID', {
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false,
    });
});

const dateStr = computed(() => {
    return currentTime.value.toLocaleDateString('id-ID', {
        weekday: 'long',
        year: 'numeric',
        month: 'long',
        day: 'numeric',
    });
});

const greeting = computed(() => {
    const hour = currentTime.value.getHours();

    if (hour >= 4 && hour < 11) {
        return { text: 'Selamat Pagi', icon: Sunrise };
    }

    if (hour >= 11 && hour < 15) {
        return { text: 'Selamat Siang', icon: Sun };
    }

    if (hour >= 15 && hour < 18) {
        return { text: 'Selamat Sore', icon: Sun };
    }

    return { text: 'Selamat Malam', icon: Moon };
});
</script>

<template>

    <Head title="Dashboard" />

    <AdminLayout>
        <div class="flex flex-1 flex-col gap-4">
            <!-- Welcome Card -->
            <Card class="relative overflow-hidden">
                <div class="from-primary/5 to-background absolute inset-0 bg-linear-to-br" />
                <CardHeader class="relative">
                    <div class="flex items-center gap-3">
                        <div class="bg-primary/10 flex size-12 items-center justify-center rounded-full">
                            <component :is="greeting.icon" class="text-primary size-6" />
                        </div>
                        <div>
                            <CardTitle class="text-2xl font-bold">
                                {{ greeting.text }}, {{ user?.username }}!
                            </CardTitle>
                            <CardDescription class="mt-1">
                                Selamat datang di dasbor aplikasi.
                            </CardDescription>
                        </div>
                    </div>
                </CardHeader>
                <CardContent class="relative">
                    <div class="text-muted-foreground flex items-center gap-2 text-sm">
                        <span>{{ dateStr }}</span>
                        <span>•</span>
                        <span class="flex items-center gap-1">
                            <Clock class="size-3.5" />
                            {{ timeStr }}
                        </span>
                    </div>
                </CardContent>
            </Card>

            <!-- Placeholder for future content -->
            <div class="grid auto-rows-min gap-4 md:grid-cols-3">
                <div class="bg-muted/50 aspect-video rounded-xl" />
                <div class="bg-muted/50 aspect-video rounded-xl" />
                <div class="bg-muted/50 aspect-video rounded-xl" />
            </div>
        </div>
    </AdminLayout>
</template>
