import { Head, usePage } from '@inertiajs/react';
import { useEffect, useState } from 'react';
import { cn } from '@/lib/utils';
import { dashboard } from '@/routes';
import { StatItem, DashboardPageProps } from '@/types';
import {
    Sun, Moon, Cloud, Trees, Stars, Bird,
    TrendingUp, TrendingDown, ShoppingBag, DollarSign,
    Wallet, Receipt, Percent, BarChart3, CreditCard,
    ArrowUpRight, ArrowDownRight, Package, Users, ShoppingCart
} from 'lucide-react';
import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardFooter } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';

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, stats } = usePage<DashboardPageProps>().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',
    });

    const formatCurrency = (value: number) => {
        return new Intl.NumberFormat('id-ID', {
            style: 'currency',
            currency: 'IDR',
            minimumFractionDigits: 0,
        }).format(value);
    };

    const formatNumber = (value: number) => {
        return new Intl.NumberFormat('id-ID').format(value);
    };

    const StatCard = ({
        title,
        stat,
        icon: Icon,
        isCurrency = true,
        isPercentage = false,
        className
    }: {
        title: string;
        stat: StatItem;
        icon: any;
        isCurrency?: boolean;
        isPercentage?: boolean;
        className?: string;
    }) => {
        const isPositive = stat.change >= 0;

        return (
            <Card className={cn("@container/card", className)}>
                <CardHeader>
                    <div className="flex items-center justify-between">
                        <CardDescription>{title}</CardDescription>
                    </div>
                    <CardTitle className="text-2xl font-bold tabular-nums @[250px]/card:text-3xl">
                        {isPercentage ? `${stat.value}%` : (isCurrency ? formatCurrency(stat.value) : formatNumber(stat.value))}
                    </CardTitle>
                    <CardAction>
                        <Badge variant="default" className={`flex gap-1 px-1.5 py-0.5 text-xs font-bold ${isPositive ? 'bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300' : 'bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300'}`}>
                            {isPositive ? <TrendingUp className="size-3" /> : <TrendingDown className="size-3" />}
                            {stat.change === null
                                ? '∞'
                                : `${Math.abs(stat.change)}%`}
                        </Badge>
                    </CardAction>
                </CardHeader>
                <CardFooter className="flex-col items-start gap-1.5 text-xs">
                    <div className="text-muted-foreground">
                        Kemarin: <span className="font-semibold">{isPercentage ? `${stat.yesterday}%` : (isCurrency ? formatCurrency(stat.yesterday) : formatNumber(stat.yesterday))}</span>
                    </div>
                </CardFooter>
            </Card>
        );
    };

    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 @container/main`}>
                {/* 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>

                {/* Stats Grid */}
                <div className="grid grid-cols-1 gap-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs @xl/main:grid-cols-2 @4xl/main:grid-cols-4 dark:*:data-[slot=card]:bg-card">
                    {[
                        { title: "Total Penjualan", stat: stats.total_sales, icon: ShoppingBag, isCurrency: false },
                        { title: "Total Pendapatan", stat: stats.total_revenue, icon: DollarSign },
                        { title: "Total Pengeluaran", stat: stats.total_expenses, icon: Wallet },
                        { title: "HPP (Modal)", stat: stats.cogs, icon: Receipt },
                        { title: "AOV (Avg Order Value)", stat: stats.aov, icon: CreditCard },
                        { title: "Profit Margin", stat: stats.profit_margin, icon: Percent, isPercentage: true },
                        { title: "Total Diskon", stat: stats.total_discount, icon: Percent },
                        { title: "Laba Kotor", stat: stats.gross_profit, icon: BarChart3 },
                        { title: "Laba Bersih", stat: stats.net_profit, icon: TrendingUp },
                        { title: "Total Pembelian", stat: stats.total_purchases, icon: ShoppingCart },
                        { title: "Produk Terjual", stat: stats.products_sold, icon: Package, isCurrency: false },
                        { title: "Total Pelanggan", stat: stats.total_customers, icon: Users, isCurrency: false },
                    ].map((item, index) => (
                        <div
                            key={index}
                            className="animate-in fade-in slide-in-from-bottom-4 fill-mode-both"
                            style={{ animationDelay: `${index * 100}ms` }}
                        >
                            <StatCard
                                {...item}
                                className="transition-all duration-300 hover:scale-[1.03] hover:shadow-xl hover:-translate-y-1"
                            />
                        </div>
                    ))}
                </div>
            </div>
        </>
    );
}

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