import { Head, usePage } from '@inertiajs/react';
import {
    Clock,
    Moon,
    Sunrise,
    Sun,
    TrendingDown,
    TrendingUp,
    UserCheck,
} from 'lucide-react';
import { useEffect, useMemo, useState } from 'react';
import { Pie, PieChart, Cell, ResponsiveContainer, Tooltip } from 'recharts';
import { AttendanceCard } from '@/components/card/attendance-card';
import { StatCard } from '@/components/card/stat-card';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { useCan } from '@/hooks/use-can';
import { formatRupiah } from '@/lib/rupiah';

type TodayAttendance = {
    id: number;
    attendance_date: string;
    check_in_at: string | null;
    check_out_at: string | null;
    check_in_photo: string | null;
    check_out_photo: string | null;
    check_in_latitude: number;
    check_in_longitude: number;
    check_out_latitude: number | null;
    check_out_longitude: number | null;
    work_duration_minutes: number | null;
} | null;

type DashboardProps = {
    attendance: {
        total_employees: number;
        percentage: number;
        present: number;
        absent: number;
        on_leave: number;
    };
    revenueSummary: {
        total_revenue: number;
        total_discount: number;
        total_marketplace_fees: number;
        total_deduction: number;
        total_orders: number;
        avg_order: number;
    };
    expenseSummary: {
        total: number;
        purchase_total: number;
        expense_total: number;
        advance_total: number;
    };
    orderStats: {
        by_channel: Array<{
            channel: string;
            label: string;
            count: number;
            total: number;
        }>;
        by_payment_type: Array<{
            payment_type: string;
            label: string;
            count: number;
            total: number;
        }>;
        by_marketing: Array<{
            name: string;
            count: number;
            total: number;
        }>;
        by_status: Array<{
            status: string;
            label: string;
            count: number;
        }>;
    };
    todayAttendance: TodayAttendance;
    isOnLeave: boolean;
    canCheckIn: boolean;
};

const CHART_COLORS = ['#60a5fa', '#f97316', '#22c55e', '#a855f7', '#ef4444'];

type CustomTooltipProps = {
    active?: boolean;
    payload?: Array<{
        name: string;
        value: number;
        payload: {
            label?: string;
            name?: string;
            count: number;
        };
    }>;
};

function ChartTooltip({ active, payload }: CustomTooltipProps) {
    if (!active || !payload?.length) {
        return null;
    }

    const data = payload[0].payload;

    return (
        <div className="rounded-lg border bg-background px-3 py-1.5 shadow-xl">
            <p className="text-sm">
                <span className="text-muted-foreground">{data.label ?? data.name ?? ''}</span>
                <span className="ml-2 font-medium">{data.count.toLocaleString('id-ID')}</span>
            </p>
        </div>
    );
}

export default function Dashboard({
    attendance: attendanceStats,
    revenueSummary,
    expenseSummary,
    orderStats,
    todayAttendance,
    isOnLeave,
    canCheckIn,
}: DashboardProps) {
    const { can } = useCan();
    const { auth } = usePage().props as { auth: { user?: { username?: string } } };
    const [currentTime, setCurrentTime] = useState(new Date());

    useEffect(() => {
        const timer = setInterval(() => setCurrentTime(new Date()), 1000);

        return () => clearInterval(timer);
    }, []);

    const greeting = useMemo(() => {
        const hour = currentTime.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 };
    }, [currentTime]);

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

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

    const visibleStatsCount = useMemo(() => {
        let count = 0;

        if (can('dashboard.attendance')) {
            count++;
        }

        if (can('dashboard.revenue')) {
            count++;
        }

        if (can('dashboard.expense')) {
            count++;
        }

        return count;
    }, [can]);

    const statsGridClass = useMemo(() => {
        if (visibleStatsCount === 1) {
            return 'grid gap-4 grid-cols-1 md:max-w-md';
        }

        if (visibleStatsCount === 2) {
            return 'grid gap-4 grid-cols-1 md:grid-cols-2';
        }

        if (visibleStatsCount === 3) {
            return 'grid gap-4 grid-cols-1 md:grid-cols-3';
        }

        return 'grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-4';
    }, [visibleStatsCount]);

    const visibleChartsCount = useMemo(() => {
        let count = 0;

        if (can('dashboard.orders_channel')) {
            count++;
        }

        if (can('dashboard.orders_payment')) {
            count++;
        }

        if (can('dashboard.orders_marketing')) {
            count++;
        }

        if (can('dashboard.orders_status')) {
            count++;
        }

        return count;
    }, [can]);

    const chartsGridClass = useMemo(() => {
        if (visibleChartsCount === 1) {
            return 'grid gap-4 grid-cols-1 md:max-w-xl';
        }

        if (visibleChartsCount === 2) {
            return 'grid gap-4 grid-cols-1 md:grid-cols-2';
        }

        if (visibleChartsCount === 3) {
            return 'grid gap-4 grid-cols-1 md:grid-cols-3';
        }

        return 'grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-4';
    }, [visibleChartsCount]);

    const GreetingIcon = greeting.icon;

    return (
        <>
            <Head title="Dasbor" />

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

                <AttendanceCard
                    todayAttendance={todayAttendance}
                    isOnLeave={isOnLeave}
                    canCheckIn={canCheckIn}
                />

                {visibleStatsCount > 0 && (
                    <div className={statsGridClass}>
                        {can('dashboard.attendance') && (
                            <StatCard
                                title="Kehadiran"
                                icon={UserCheck}
                                mainLabel="Total Karyawan"
                                mainValue={attendanceStats.total_employees}
                                subLabel={`${attendanceStats.percentage}% hadir`}
                                items={[
                                    { label: 'Hadir', value: attendanceStats.present },
                                    { label: 'Tidak Hadir', value: attendanceStats.absent },
                                    { label: 'Cuti', value: attendanceStats.on_leave },
                                ]}
                            />
                        )}

                        {can('dashboard.revenue') && (
                            <StatCard
                                title="Pendapatan"
                                icon={TrendingUp}
                                mainLabel="Total"
                                mainValue={`Rp${formatRupiah(revenueSummary.total_revenue)}`}
                                subLabel={`${revenueSummary.total_orders} transaksi selesai`}
                                items={[
                                    {
                                        label: 'Bersih',
                                        value: `Rp${formatRupiah(revenueSummary.total_revenue - revenueSummary.total_deduction)}`,
                                    },
                                    {
                                        label: 'Potongan',
                                        value: `Rp${formatRupiah(revenueSummary.total_marketplace_fees ?? 0)}`,
                                    },
                                    {
                                        label: 'Diskon',
                                        value: `Rp${formatRupiah(revenueSummary.total_discount)}`,
                                    },
                                ]}
                            />
                        )}

                        {can('dashboard.expense') && (
                            <StatCard
                                title="Pengeluaran"
                                icon={TrendingDown}
                                mainLabel="Total"
                                mainValue={`Rp${formatRupiah(expenseSummary.total)}`}
                                items={[
                                    {
                                        label: 'Pengeluaran',
                                        value: `Rp${formatRupiah(expenseSummary.expense_total)}`,
                                    },
                                    {
                                        label: 'Kasbon',
                                        value: `Rp${formatRupiah(expenseSummary.advance_total)}`,
                                    },
                                ]}
                            />
                        )}
                    </div>
                )}

                {visibleChartsCount > 0 && (
                    <div className={chartsGridClass}>
                        {can('dashboard.orders_channel') && (
                            <DashboardDonutChart
                                title="Pesanan per Channel"
                                data={orderStats.by_channel.map((item, index) => ({
                                    ...item,
                                    color: CHART_COLORS[index % CHART_COLORS.length],
                                }))}
                                dataKey="count"
                                nameKey="label"
                            />
                        )}

                        {can('dashboard.orders_payment') && (
                            <DashboardDonutChart
                                title="Pesanan per Pembayaran"
                                data={orderStats.by_payment_type.map((item, index) => ({
                                    ...item,
                                    color: CHART_COLORS[index % CHART_COLORS.length],
                                }))}
                                dataKey="count"
                                nameKey="label"
                            />
                        )}

                        {can('dashboard.orders_marketing') && (
                            <DashboardDonutChart
                                title="Pesanan per Marketing"
                                data={orderStats.by_marketing.map((item, index) => ({
                                    ...item,
                                    label: item.name,
                                    color: CHART_COLORS[index % CHART_COLORS.length],
                                }))}
                                dataKey="count"
                                nameKey="label"
                            />
                        )}

                        {can('dashboard.orders_status') && (
                            <DashboardDonutChart
                                title="Pesanan per Status"
                                data={orderStats.by_status.map((item, index) => ({
                                    ...item,
                                    color: CHART_COLORS[index % CHART_COLORS.length],
                                }))}
                                dataKey="count"
                                nameKey="label"
                            />
                        )}
                    </div>
                )}
            </div>
        </>
    );
}

type DonutChartItem = {
    label: string;
    count: number;
    color: string;
};

type DashboardDonutChartProps = {
    title: string;
    data: DonutChartItem[];
    dataKey: string;
    nameKey: string;
};

function DashboardDonutChart({ title, data }: DashboardDonutChartProps) {
    const hasData = data.length > 0 && data.some((d) => d.count > 0);

    return (
        <Card>
            <CardHeader>
                <CardTitle className="text-base">{title}</CardTitle>
            </CardHeader>
            <CardContent>
                {hasData ? (
                    <>
                        <div className="mx-auto aspect-square max-h-[200px]">
                            <ResponsiveContainer width="100%" height="100%">
                                <PieChart>
                                    <Pie
                                        data={data}
                                        dataKey="count"
                                        nameKey="label"
                                        cx="50%"
                                        cy="50%"
                                        outerRadius={80}
                                        innerRadius={50}
                                        strokeWidth={2}
                                        stroke="#374151"
                                    >
                                        {data.map((entry, index) => (
                                            <Cell
                                                key={`cell-${index}`}
                                                fill={entry.color ?? CHART_COLORS[index % CHART_COLORS.length]}
                                            />
                                        ))}
                                    </Pie>
                                    <Tooltip content={<ChartTooltip />} />
                                </PieChart>
                            </ResponsiveContainer>
                        </div>
                        <div className="mt-3 flex flex-wrap justify-center gap-3">
                            {data.map((item, index) => (
                                <div key={item.label} className="flex items-center gap-1.5">
                                    <span
                                        className="size-2.5 rounded-full"
                                        style={{ backgroundColor: item.color ?? CHART_COLORS[index % CHART_COLORS.length] }}
                                    />
                                    <span className="text-xs text-muted-foreground">{item.label}</span>
                                    <span className="text-xs font-medium">{item.count}</span>
                                </div>
                            ))}
                        </div>
                    </>
                ) : (
                    <div className="flex h-[200px] items-center justify-center text-muted-foreground">
                        Belum ada data
                    </div>
                )}
            </CardContent>
        </Card>
    );
}