"use client";

import React, { useMemo, useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { format, parseISO } from "date-fns";
import { id as localeId } from "date-fns/locale";
import { Activity, MoreVertical } from "lucide-react";
import { Skeleton } from "@/components/ui/skeleton";
import { useReminderAnalysis, useResetReminder } from '@/hooks/useAnalysis';
import { useAuth } from '@/contexts/auth-context';
import { Button } from "@/components/ui/button";
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { useQueryClient } from "@tanstack/react-query";
import { toast } from "sonner";

const ReminderAnalysisView: React.FC = () => {
    const { data: users, isLoading } = useReminderAnalysis();
    const { user } = useAuth();
    const { user: currentUser } = useAuth();
    const isSuperAdmin = currentUser?.type?.id === 2;
    const queryClient = useQueryClient();
    const resetMutation = useResetReminder();

    const [resetDialog, setResetDialog] = useState<{
        isOpen: boolean;
        user: any;
        type: 'customer_linked' | 'response_time' | null;
    }>({ isOpen: false, user: null, type: null });

    const handleReset = async (e: React.MouseEvent) => {
        e.preventDefault();
        if (!resetDialog.user || !resetDialog.type) return;

        try {
            await resetMutation.mutateAsync({
                email: user?.email ?? '',
                user_id: resetDialog.user.id,
                type: resetDialog.type
            });
            toast.success("Reminder berhasil direset");
            queryClient.invalidateQueries({ queryKey: ["analysis", "reminder"] });
            setResetDialog({ isOpen: false, user: null, type: null });
        } catch (error: any) {
            toast.error(error.response?.data?.message || "Gagal mereset reminder");
            setResetDialog({ isOpen: false, user: null, type: null });
        }
    };

    if (isLoading) {
        return (
            <div className="h-full flex flex-col p-6 space-y-6 overflow-y-auto">
                <div>
                    <Skeleton className="h-8 w-64 mb-2" />
                    <Skeleton className="h-4 w-96" />
                </div>
                <Card>
                    <CardHeader>
                        <Skeleton className="h-6 w-48 mb-2" />
                        <Skeleton className="h-4 w-64" />
                    </CardHeader>
                    <CardContent>
                        <div className="space-y-4">
                            <Skeleton className="h-10 w-full" />
                            <Skeleton className="h-10 w-full" />
                            <Skeleton className="h-10 w-full" />
                        </div>
                    </CardContent>
                </Card>
            </div>
        );
    }

    return (
        <TooltipProvider>
        <div className="flex-1 flex flex-col h-full bg-[#efeae2] dark:bg-[#0b141a] overflow-hidden">
            <header className="min-h-16 p-4 md:px-4 md:py-0 bg-[#f0f2f5] dark:bg-[#202c33] flex flex-col md:flex-row items-start md:items-center justify-between gap-4 shadow-sm shrink-0">
                <div className="flex items-center gap-2">
                    <Activity className="h-5 w-5 text-gray-500 dark:text-gray-400" />
                    <h1 className="text-lg font-semibold text-gray-800 dark:text-gray-200">Reminder Analysis</h1>
                </div>
            </header>

            <div className="flex-1 overflow-y-auto p-4 md:p-6 space-y-6">

            <Card className="border-0 shadow-sm bg-white dark:bg-[#202c33]">
                <CardHeader className="pb-3 border-b border-gray-100 dark:border-gray-800">
                    <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
                        <div>
                            <CardTitle className="text-lg text-gray-900 dark:text-white">Data Reminder</CardTitle>
                            <CardDescription className="text-gray-500 dark:text-gray-400">
                                Total: {users?.length || 0} Pengguna
                            </CardDescription>
                        </div>
                    </div>
                </CardHeader>
                <CardContent className="px-0">
                    <div className="overflow-x-auto">
                        <table className="w-full text-sm text-left block md:table">
                            <thead className="hidden md:table-header-group bg-[#f0f2f5] dark:bg-[#202c33] text-gray-700 dark:text-gray-300 font-semibold border-b border-gray-200 dark:border-gray-700">
                                <tr>
                                    <th className="px-6 py-4 whitespace-nowrap">Nama User</th>
                                    <th className="px-6 py-4 whitespace-nowrap text-center">
                                        <Tooltip>
                                            <TooltipTrigger className="border-b border-dashed border-gray-400 cursor-help font-semibold">
                                                Code = Response Time
                                            </TooltipTrigger>
                                            <TooltipContent className="max-w-xs whitespace-normal font-normal">
                                                <p>Akumulasi jumlah waktu respon dalam menit yang melebihi standar 10 menit. Contoh: Jika user membalas 3 pesan pelanggan dengan waktu 8 menit, 15 dan 20 menit, maka Code = Response Time akan mencatat waktu 15+20 = 25 menit</p>
                                            </TooltipContent>
                                        </Tooltip>
                                    </th>
                                    <th className="px-6 py-4 whitespace-nowrap text-center">
                                        <Tooltip>
                                            <TooltipTrigger className="border-b border-dashed border-gray-400 cursor-help font-semibold">
                                                Code = Daftar Pelanggan
                                            </TooltipTrigger>
                                            <TooltipContent className="max-w-xs whitespace-normal font-normal">
                                                <p>Jumlah reminder untuk setiap pesan yang dikirimkan ke pelanggan dengan cabang selain Pusat dan belum ditambahkan ke Daftar Pelanggan</p>
                                            </TooltipContent>
                                        </Tooltip>
                                    </th>
                                    <th className="px-6 py-4 whitespace-nowrap text-center">Jumlah Reset</th>
                                    <th className="px-6 py-4 whitespace-nowrap">Waktu Reset</th>
                                    {isSuperAdmin && <th className="px-6 py-4 whitespace-nowrap"></th>}
                                </tr>
                            </thead>
                            <tbody className="block md:table-row-group divide-y divide-gray-100 dark:divide-gray-800">
                                {!users || users.length === 0 ? (
                                    <tr className="block md:table-row">
                                        <td colSpan={4} className="block md:table-cell px-6 py-8 text-center text-gray-500 dark:text-gray-400">
                                            Tidak ada data pengguna untuk reminder ini
                                        </td>
                                    </tr>
                                ) : (
                                    users.map((user: any, index: number) => (
                                        <tr key={user.id} className="block md:table-row border-b dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors p-4 md:p-0">
                                            <td className="block md:table-cell px-0 md:px-6 py-2 md:py-4">
                                                <span className="md:hidden font-semibold text-xs text-gray-500 mr-2 block mb-1">Nama User:</span>
                                                <span className="font-medium text-gray-900 dark:text-gray-100">
                                                    {user.name}
                                                </span>
                                            </td>
                                            <td className="block md:table-cell px-0 md:px-6 py-2 md:py-4 text-left md:text-center">
                                                <span className="md:hidden font-semibold text-xs text-gray-500 mr-2 block mb-1">Code = Response Time:</span>
                                                <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
                                                    user.reminder_response_late > 0 
                                                        ? 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400' 
                                                        : 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
                                                }`}>
                                                    {user.reminder_response_late} Menit
                                                </span>
                                            </td>
                                            <td className="block md:table-cell px-0 md:px-6 py-2 md:py-4 text-left md:text-center">
                                                <span className="md:hidden font-semibold text-xs text-gray-500 mr-2 block mb-1">Code = Daftar Pelanggan:</span>
                                                <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
                                                    user.reminder_customer_linked > 0 
                                                        ? 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400' 
                                                        : 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
                                                }`}>
                                                    {user.reminder_customer_linked} Reminder
                                                </span>
                                            </td>
                                            <td className="block md:table-cell px-0 md:px-6 py-2 md:py-4 text-left md:text-center">
                                                <span className="md:hidden font-semibold text-xs text-gray-500 mr-2 block mb-1">Jumlah Reset:</span>
                                                <span className="font-medium text-gray-900 dark:text-gray-100">
                                                    {user.reminder_counter || 0}
                                                </span>
                                            </td>
                                            <td className="block md:table-cell px-0 md:px-6 py-2 md:py-4">
                                                <span className="md:hidden font-semibold text-xs text-gray-500 mr-2 block mb-1">Waktu Reset:</span>
                                                <span className="text-gray-500 dark:text-gray-400 whitespace-nowrap">
                                                    {user.reminder_reset_date ? (
                                                        <span>{format(parseISO(user.reminder_reset_date), "dd MMM yyyy HH:mm", { locale: localeId })}</span>
                                                    ) : (
                                                        <span className="text-gray-400 dark:text-gray-500 italic">Belum diset</span>
                                                    )}
                                                </span>
                                            </td>
                                            {isSuperAdmin && (
                                                <td className="block md:table-cell px-0 md:px-6 py-2 md:py-4 text-right">
                                                    <DropdownMenu>
                                                        <DropdownMenuTrigger asChild>
                                                            <Button variant="ghost" className="h-8 w-8 p-0">
                                                                <span className="sr-only">Open menu</span>
                                                                <MoreVertical className="h-4 w-4" />
                                                            </Button>
                                                        </DropdownMenuTrigger>
                                                        <DropdownMenuContent align="end">
                                                            <DropdownMenuItem onClick={() => setResetDialog({ isOpen: true, user, type: 'customer_linked' })}>
                                                                Reset Code=Daftar Pelanggan
                                                            </DropdownMenuItem>
                                                            <DropdownMenuItem onClick={() => setResetDialog({ isOpen: true, user, type: 'response_time' })}>
                                                                Reset Code=Response Time
                                                            </DropdownMenuItem>
                                                        </DropdownMenuContent>
                                                    </DropdownMenu>
                                                </td>
                                            )}
                                        </tr>
                                    ))
                                )}
                            </tbody>
                        </table>
                    </div>
                </CardContent>
            </Card>
            </div>

            {/* Reset Confirmation Dialog */}
            <AlertDialog open={resetDialog.isOpen} onOpenChange={(isOpen) => !isOpen && setResetDialog({ isOpen: false, user: null, type: null })}>
                <AlertDialogContent>
                    <AlertDialogHeader>
                        <AlertDialogTitle>Konfirmasi Reset</AlertDialogTitle>
                        <AlertDialogDescription>
                            Apakah Anda ingin melakukan reset reminder {resetDialog.type === 'customer_linked' ? 'Code=Daftar Pelanggan' : 'Code=Response Time'} untuk user ini?
                        </AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                        <AlertDialogCancel disabled={resetMutation.isPending}>No</AlertDialogCancel>
                        <AlertDialogAction onClick={handleReset} disabled={resetMutation.isPending}>
                            Yes
                        </AlertDialogAction>
                    </AlertDialogFooter>
                </AlertDialogContent>
            </AlertDialog>
        </div>
        </TooltipProvider>
    );
};

export default ReminderAnalysisView;