import { StatCard } from '@/components/card/stat-card';
import { TodayAttendanceAlert } from '@/components/card/today-attendance-alert';
import { CameraCapture } from '@/components/inputs';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, type ChartConfig } from '@/components/ui/chart';
import {
    Dialog,
    DialogContent,
} from '@/components/ui/dialog';
import { useCan } from '@/hooks/use-can';
import { formatRupiah } from '@/lib/rupiah';
import { store, update } from '@/routes/admin/hr/attendances';
import { Head, router, usePage } from '@inertiajs/react';
import {
    Clock,
    Moon,
    Sun,
    Sunrise,
    TrendingDown,
    TrendingUp,
    UserCheck,
} from 'lucide-react';
import { useEffect, useMemo, useState } from 'react';
import { Pie, PieChart } from 'recharts';
import { toast } from 'sonner';

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_cogs: number;
        total_deduction: number;
        total_orders: number;
    };
    expenseSummary: {
        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;
};

export default function Dashboard({
    attendance: attendanceStats,
    revenueSummary,
    expenseSummary,
    orderStats,
    todayAttendance,
    isOnLeave,
    canCheckIn,
}: DashboardProps) {
    const { can, hasRole } = useCan();
    const { auth } = usePage().props as { auth: { user?: { username?: string } } };
    const [currentTime, setCurrentTime] = useState(new Date());
    const [showCamera, setShowCamera] = useState(false);
    const [actionType, setActionType] = useState<'check-in' | 'check-out'>('check-in');
    const [locationLoading, setLocationLoading] = useState(false);

    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;

    const handleCheckIn = () => {
        setActionType('check-in');
        setShowCamera(true);
    };

    const handleCheckOut = () => {
        setActionType('check-out');
        setShowCamera(true);
    };

    const handleCameraCapture = (dataUrl: string) => {
        setShowCamera(false);
        setLocationLoading(true);

        if (!navigator.geolocation) {
            setLocationLoading(false);
            toast.error('Geolocation tidak didukung di browser ini.');

            return;
        }

        navigator.geolocation.getCurrentPosition(
            (position) => {
                setLocationLoading(false);
                const formData = new FormData();
                formData.append('photo', dataUrl);
                formData.append('latitude', position.coords.latitude.toString());
                formData.append('longitude', position.coords.longitude.toString());

                if (actionType === 'check-in') {
                    router.post(store(), formData, { preserveScroll: true });
                } else if (actionType === 'check-out' && todayAttendance) {
                    router.put(update(todayAttendance.id), formData, {
                        preserveScroll: true,
                    });
                }
            },
            () => {
                setLocationLoading(false);
                toast.error('Gagal mendapatkan lokasi. Pastikan izin lokasi diberikan.');
            },
            { enableHighAccuracy: true, timeout: 10000 },
        );
    };

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

            <div className="flex h-full flex-1 flex-col gap-6 p-4 md:p-6">
                <Card className="relative overflow-visible">
                    <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>

                {can('attendances.create') && !hasRole('developer') && !hasRole('owner') && (
                    <>
                        <TodayAttendanceAlert
                            todayAttendance={todayAttendance}
                            isOnLeave={isOnLeave}
                            canCheckIn={canCheckIn}
                            locationLoading={locationLoading}
                            onCheckIn={handleCheckIn}
                            onCheckOut={handleCheckOut}
                        />

                        <Dialog open={showCamera} onOpenChange={setShowCamera}>
                            <DialogContent className="sm:max-w-md">
                                <CameraCapture
                                    onCapture={handleCameraCapture}
                                    onClose={() => setShowCamera(false)}
                                />
                            </DialogContent>
                        </Dialog>
                    </>
                )}

                {visibleStatsCount > 0 && (
                    <div className={statsGridClass}>
                        {can('dashboard.attendance') && (
                            <StatCard
                                title="Kehadiran Hari Ini"
                                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 Hari Ini"
                                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_cogs - revenueSummary.total_deduction)}`,
                                    },
                                    {
                                        label: 'Potongan',
                                        value: `Rp${formatRupiah(revenueSummary.total_deduction)}`,
                                    },
                                    {
                                        label: 'Diskon',
                                        value: `Rp${formatRupiah(revenueSummary.total_discount)}`,
                                    },
                                ]}
                            />
                        )}

                        {can('dashboard.expense') && (
                            <StatCard
                                title="Pengeluaran Hari Ini"
                                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') && (
                            <DashboardPieChart
                                title="Pesanan per Channel Hari Ini"
                                data={orderStats.by_channel.map((item) => ({
                                    name: item.label,
                                    count: item.count,
                                }))}
                                dataKey="count"
                                nameKey="name"
                            />
                        )}

                        {can('dashboard.orders_payment') && (
                            <DashboardPieChart
                                title="Pesanan per Pembayaran Hari Ini"
                                data={orderStats.by_payment_type.map((item) => ({
                                    name: item.label,
                                    count: item.count,
                                }))}
                                dataKey="count"
                                nameKey="name"
                            />
                        )}

                        {can('dashboard.orders_marketing') && (
                            <DashboardPieChart
                                title="Pesanan per Marketing Hari Ini"
                                data={orderStats.by_marketing.map((item) => ({
                                    name: item.name,
                                    count: item.count,
                                }))}
                                dataKey="count"
                                nameKey="name"
                            />
                        )}

                        {can('dashboard.orders_status') && (
                            <DashboardPieChart
                                title="Pesanan per Status Hari Ini"
                                data={orderStats.by_status.map((item) => ({
                                    name: item.label,
                                    count: item.count,
                                }))}
                                dataKey="count"
                                nameKey="name"
                            />
                        )}
                    </div>
                )}
            </div>
        </>
    );
}

type PieChartItem = {
    name: string;
    count: number;
};

type DashboardPieChartProps = {
    title: string;
    data: PieChartItem[];
    dataKey: string;
    nameKey: string;
};

const PIE_COLORS = [
    'var(--chart-1)',
    'var(--chart-2)',
    'var(--chart-3)',
    'var(--chart-4)',
    'var(--chart-5)',
];

function DashboardPieChart({ title, data, dataKey, nameKey }: DashboardPieChartProps) {
    const hasData = data.length > 0 && data.some((d) => d.count > 0);

    const chartConfig = useMemo(() => {
        const config: ChartConfig = {};
        data.forEach((item, index) => {
            config[item.name] = {
                label: item.name,
                color: PIE_COLORS[index % PIE_COLORS.length],
            };
        });
        return config;
    }, [data]);

    const chartData = useMemo(() => {
        return data.map((item) => ({
            ...item,
            fill: PIE_COLORS[data.indexOf(item) % PIE_COLORS.length],
        }));
    }, [data]);

    return (
        <Card>
            <CardHeader className="items-center pb-0">
                <CardTitle className="text-base">{title}</CardTitle>
            </CardHeader>
            <CardContent className="flex-1 pb-0">
                {hasData ? (
                    <ChartContainer
                        config={chartConfig}
                        className="mx-auto aspect-square max-h-[250px]"
                    >
                        <PieChart>
                            <ChartTooltip
                                content={
                                    <ChartTooltipContent
                                        nameKey={nameKey}
                                        hideLabel
                                    />
                                }
                            />
                            <Pie
                                data={chartData}
                                dataKey={dataKey}
                                nameKey={nameKey}
                            />
                            <ChartLegend
                                content={<ChartLegendContent nameKey={nameKey} />}
                                className="-translate-y-2 flex-wrap gap-2 *:basis-1/4 *:justify-center"
                            />
                        </PieChart>
                    </ChartContainer>
                ) : (
                    <div className="flex h-[200px] items-center justify-center text-muted-foreground">
                        Belum ada data
                    </div>
                )}
            </CardContent>
        </Card>
    );
}