import { Head, usePage } from '@inertiajs/react';
import { useEffect, useState } from 'react';
import { PlaceholderPattern } from '@/components/ui/placeholder-pattern';
import { dashboard } from '@/routes';
import { Auth } from '@/types';
import { Sun, Moon, Cloud, Trees, CloudRain, Stars, Bird } from 'lucide-react';

interface PageProps {
    auth: Auth;
    [key: string]: any;
}

const DynamicScene = ({ hour }: { hour: number }) => {
    if (hour >= 5 && hour < 11) {
        return (
            <div className="relative h-24 w-32 overflow-hidden">
                <Sun className="absolute bottom-0 left-4 h-16 w-16 animate-pulse text-amber-400" fill="currentColor" />
                <Cloud className="absolute top-2 right-2 h-10 w-10 animate-bounce text-white/80" fill="currentColor" />
                <Cloud className="absolute top-8 left-0 h-8 w-8 animate-bounce text-white/60 [animation-delay:1s]" fill="currentColor" />
            </div>
        );
    }
    if (hour >= 11 && hour < 15) {
        return (
            <div className="relative h-24 w-32 overflow-hidden">
                <Sun className="absolute top-0 right-4 h-14 w-14 animate-spin-slow text-yellow-400" fill="currentColor" />
                <Trees className="absolute bottom-0 left-2 h-14 w-14 text-green-600 dark:text-green-500" />
                <Cloud className="absolute top-4 left-4 h-8 w-8 animate-pulse text-white/80" fill="currentColor" />
            </div>
        );
    }
    if (hour >= 15 && hour < 19) {
        return (
            <div className="relative h-24 w-32 overflow-hidden">
                <Sun className="absolute bottom-[-10px] left-8 h-16 w-16 text-orange-500" fill="currentColor" />
                <Bird className="absolute top-4 left-4 h-6 w-6 animate-bounce text-orange-800 dark:text-orange-200" />
                <Bird className="absolute top-8 right-8 h-5 w-5 animate-bounce text-orange-800 dark:text-orange-200 [animation-delay:0.5s]" />
            </div>
        );
    }
    return (
        <div className="relative h-24 w-32 overflow-hidden">
            <Moon className="absolute top-2 left-6 h-14 w-14 rotate-12 text-indigo-200" fill="currentColor" />
            <Stars className="absolute top-4 right-4 h-6 w-6 animate-pulse text-yellow-200" />
            <Stars className="absolute bottom-4 left-2 h-4 w-4 animate-pulse text-yellow-100 [animation-delay:1s]" />
            <div className="absolute bottom-2 right-6 h-1 w-1 animate-ping rounded-full bg-white"></div>
        </div>
    );
};

export default function Dashboard() {
    const { auth } = usePage<PageProps>().props;
    const [time, setTime] = useState(new Date());

    useEffect(() => {
        const timer = setInterval(() => setTime(new Date()), 1000);
        return () => clearInterval(timer);
    }, []);

    const getTimeTheme = () => {
        const hour = time.getHours();
        if (hour >= 5 && hour < 11) return {
            greeting: 'Selamat Pagi',
            class: 'bg-gradient-to-br from-amber-50 to-orange-100 dark:from-amber-950/40 dark:to-orange-900/40 border-amber-200 dark:border-amber-800/30 shadow-sm',
            text: 'text-amber-950 dark:text-amber-50',
            subtext: 'text-amber-900/70 dark:text-amber-200/70',
            decoration: 'bg-amber-500/10 dark:bg-amber-500/20',
            pageBackground: 'bg-amber-50/50 dark:bg-amber-950/10',
            card: 'bg-white/80 dark:bg-amber-900/10 backdrop-blur-sm border-amber-200/50 dark:border-amber-800/20',
            placeholder: 'stroke-amber-500/20 dark:stroke-amber-400/20'
        };

        if (hour >= 11 && hour < 15) return {
            greeting: 'Selamat Siang',
            class: 'bg-gradient-to-br from-sky-50 to-blue-100 dark:from-sky-950/40 dark:to-blue-900/40 border-sky-200 dark:border-sky-800/30 shadow-sm',
            text: 'text-sky-950 dark:text-sky-50',
            subtext: 'text-sky-900/70 dark:text-sky-200/70',
            decoration: 'bg-sky-500/10 dark:bg-sky-500/20',
            pageBackground: 'bg-sky-50/50 dark:bg-sky-950/10',
            card: 'bg-white/80 dark:bg-sky-900/10 backdrop-blur-sm border-sky-200/50 dark:border-sky-800/20',
            placeholder: 'stroke-sky-500/20 dark:stroke-sky-400/20'
        };

        if (hour >= 15 && hour < 19) return {
            greeting: 'Selamat Sore',
            class: 'bg-gradient-to-br from-orange-50 to-purple-100 dark:from-orange-950/40 dark:to-purple-900/40 border-orange-200 dark:border-orange-800/30 shadow-sm',
            text: 'text-orange-950 dark:text-orange-50',
            subtext: 'text-orange-900/70 dark:text-orange-200/70',
            decoration: 'bg-orange-500/10 dark:bg-orange-500/20',
            pageBackground: 'bg-orange-50/50 dark:bg-orange-950/10',
            card: 'bg-white/80 dark:bg-orange-900/10 backdrop-blur-sm border-orange-200/50 dark:border-orange-800/20',
            placeholder: 'stroke-orange-500/20 dark:stroke-orange-400/20'
        };

        return {
            greeting: 'Selamat Malam',
            class: 'bg-gradient-to-br from-slate-900 via-indigo-950 to-black text-white border-indigo-500/20 shadow-indigo-950',
            text: 'text-indigo-50 drop-shadow-md',
            subtext: 'text-indigo-200/70 drop-shadow-sm',
            decoration: 'bg-indigo-500/20',
            pageBackground: 'bg-slate-100 dark:bg-slate-950',
            card: 'bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-800',
            placeholder: 'stroke-slate-300 dark:stroke-slate-700'
        };
    };

    const theme = getTimeTheme();
    const hour = time.getHours();

    const formattedTime = time.toLocaleTimeString('id-ID', {
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
    });

    const formattedDate = time.toLocaleDateString('id-ID', {
        weekday: 'long',
        day: 'numeric',
        month: 'long',
        year: 'numeric',
    });

    return (
        <>
            <Head title="Dashboard" />
            <div className={`flex h-full min-h-screen flex-1 flex-col gap-4 overflow-x-auto rounded-xl p-4 transition-colors duration-1000`}>
                {/* Welcome Section */}
                <div className={`relative flex flex-col justify-between gap-4 overflow-hidden rounded-xl border p-6 shadow-2xl transition-all duration-1000 md:flex-row md:items-center ${theme.class}`}>
                    {/* Decorative Elements */}
                    <div className={`absolute -right-10 -top-10 h-40 w-40 rounded-full blur-3xl ${theme.decoration} opacity-60`} />
                    <div className={`absolute -bottom-10 left-1/3 h-32 w-32 rounded-full blur-3xl ${theme.decoration} opacity-40`} />

                    <div className="z-10">
                        <h1 className={`text-3xl font-extrabold tracking-tight ${theme.text}`}>
                            {theme.greeting}, {auth.user.name}!
                        </h1>
                        <p className={`mt-1 text-lg font-medium ${theme.subtext}`}>
                            Senang melihat Anda kembali. Berikut adalah ringkasan bisnis Anda hari ini.
                        </p>
                    </div>

                    <div className="z-10 flex flex-col items-start gap-4 md:flex-row md:items-center md:gap-8">
                        <DynamicScene hour={hour} />
                        <div className="flex flex-col items-start gap-1 md:items-end">
                            <div className={`text-4xl font-mono font-black tracking-tighter ${theme.text}`}>
                                {formattedTime}
                            </div>
                            <div className={`text-sm font-bold uppercase tracking-wider ${theme.subtext}`}>
                                {formattedDate}
                            </div>
                        </div>
                    </div>
                </div>

                <div className="grid auto-rows-min gap-4 md:grid-cols-3">
                    <div className={`relative aspect-video overflow-hidden rounded-xl border transition-all duration-1000`}>
                        <PlaceholderPattern className={`absolute inset-0 size-full transition-colors duration-1000`} />
                    </div>
                    <div className={`relative aspect-video overflow-hidden rounded-xl border transition-all duration-1000`}>
                        <PlaceholderPattern className={`absolute inset-0 size-full transition-colors duration-1000`} />
                    </div>
                    <div className={`relative aspect-video overflow-hidden rounded-xl border transition-all duration-1000`}>
                        <PlaceholderPattern className={`absolute inset-0 size-full transition-colors duration-1000`} />
                    </div>
                </div>
                <div className={`relative min-h-[100vh] flex-1 overflow-hidden rounded-xl border transition-all duration-1000 md:min-h-min`}>
                    <PlaceholderPattern className={`absolute inset-0 size-full transition-colors duration-1000`} />
                </div>
            </div>
        </>
    );
}

Dashboard.layout = {
    breadcrumbs: [
        {
            title: 'Dasbor',
            href: dashboard(),
        },
    ],
};