"use client";

import React, { useEffect, useState } from "react";
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
} from "./ui/dialog";
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
} from "./ui/alert-dialog";
import { useGetBookmarks, useLabel } from "@/hooks/useWhatsApp";
import { Button } from "./ui/button";
import { Camera, FileText, Image as ImageIcon, Loader2, MapPin, Mic, Video } from "lucide-react";
import { useChatStore } from "@/store/useChatStore";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
import { Trash2 } from "lucide-react";
import { useAuth } from "@/contexts/auth-context";
import { useRemoveBookmarkMessage } from "@/hooks/useWhatsApp";

import MessageItemImage from "./message-item-image";
import MessageItemVideo from "./message-item-video";
import MessageItemAudio from "./message-item-audio";
import MessageItemText from "./message-item-text";
import MessageItemLocation from "./message-item-location";
import MessageItemTemplate from "./message-item-template";
import MessageItemDocument from "./message-item-document";
import MessageItemCall from "./message-item-call";
import { cn, fLimitation, parseMessage } from "@/lib/utils";
import * as TooltipPrimitive from "@radix-ui/react-tooltip"
import { useQueryClient } from "@tanstack/react-query";

interface BookmarkListModalProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
}

export const BookmarkListModal: React.FC<BookmarkListModalProps> = ({ open, onOpenChange }) => {
    const [page, setPage] = useState(1);
    const { data, isLoading } = useGetBookmarks(page);
    const { data: labels } = useLabel();
    const { setSelectedContact, setPageSelectedMessage, setPageMessageId, setPaginationWindow, setLoadingFirstConversation, setLightBoxImages } = useChatStore();
    const queryClient = useQueryClient();
    const { user } = useAuth();
    const removeBookmarkMutation = useRemoveBookmarkMessage();
    const [deleteMessageId, setDeleteMessageId] = useState<string | null>(null);

    const handleRemoveBookmark = (messageId: string, e: React.MouseEvent) => {
        e.stopPropagation();
        setDeleteMessageId(messageId);
    };

    const confirmRemoveBookmark = () => {
        if (deleteMessageId) {
            removeBookmarkMutation.mutate(deleteMessageId);
            setDeleteMessageId(null);
        }
    };

    const handleMessageClick = (conversation: any) => {
        if (conversation.contacts) {
            setSelectedContact(conversation.contacts);
        } else  {
            // fallback if contacts relation is not loaded
            setPaginationWindow(false);
            setLoadingFirstConversation(true);
            setLightBoxImages([]);
            setSelectedContact(conversation.message?.contacts as any);

            setPageMessageId(conversation.message.id);
            queryClient.invalidateQueries({queryKey:['page-message']});
            
            setTimeout(() => {
                window.location.hash = `#${conversation.message.id.toString()}`;
            }, 300);
        }
        console.log(conversation);
        onOpenChange(false);
    };

    const renderMessageContent = (conv: any) => {
        return (
            <div className="w-full text-sm">
                <div className="pointer-events-none">
                    {conv.message.message_type === "image" ? 
                        <MessageItemImage conversation={conv.message} />
                        :
                        conv.message.message_type === "document" ? <MessageItemDocument conversation={conv.message} />
                        :
                        conv.message.message_type === "sticker" ? <MessageItemImage conversation={conv.message} />
                        :
                        conv.message.message_type === "video" ? <MessageItemVideo conversation={conv.message} />
                        :
                        conv.message.message_type === "audio" ? <MessageItemAudio conversation={conv.message} />
                        :
                        conv.message.message_type === "location" ? <MessageItemLocation conversation={conv.message} />
                        :
                        conv.message.message_type === "template" ? <MessageItemTemplate conversation={conv.message} />
                        :
                        conv.message.message_type === "call" ? <MessageItemCall conversation={conv.message} />
                        :
                        <MessageItemText conversation={conv.message} />
                    }
                </div>
            </div>
        );
    };

    const renderSimpleMessage = (conv: any) => {
        switch (conv.message.message_type) {
            case 'image':
                return <div className="flex items-center gap-2"><ImageIcon className="h-4 w-4 text-gray-500 shrink-0" /> <span className="truncate">{fLimitation(conv.message.message_text, 0, 90) || 'Image'}</span></div>;
            case 'video':
                return <div className="flex items-center gap-2"><Video className="h-4 w-4 text-gray-500 shrink-0" /> <span className="truncate">{fLimitation(conv.message.message_text, 0, 90) || 'Video'}</span></div>;
            case 'audio':
                return <div className="flex items-center gap-2"><Mic className="h-4 w-4 text-gray-500 shrink-0" /> <span className="truncate">Audio</span></div>;
            case 'document':
                return <div className="flex items-center gap-2"><FileText className="h-4 w-4 text-gray-500 shrink-0" /> <span className="truncate">{fLimitation(conv.message.message_text, 0, 90) || 'Document'}</span></div>;
            case 'location':
                return <div className="flex items-center gap-2"><MapPin className="h-4 w-4 text-gray-500 shrink-0" /> <span className="truncate">Location</span></div>;
            case 'sticker':
                return <div className="flex items-center gap-2"><ImageIcon className="h-4 w-4 text-gray-500 shrink-0" /> <span className="truncate">Sticker</span></div>;
            case 'template':
                return <div className="flex items-center gap-2"><FileText className="h-4 w-4 text-gray-500 shrink-0" /> <span className="truncate">Template</span></div>;
            default:
                return <span className="truncate block">{fLimitation(conv.message.message_text, 0, 90)}</span>;
        }
    };

    return (
        <>
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="sm:max-w-4xl max-h-[80vh] flex flex-col">
                <DialogHeader>
                    <DialogTitle>Daftar Bookmark</DialogTitle>
                </DialogHeader>

                <div className="flex-1 overflow-auto no-scrollbar -mx-4 px-4">
                    {isLoading ? (
                        <div className="flex justify-center items-center h-32">
                            <Loader2 className="h-8 w-8 animate-spin" />
                        </div>
                    ) : (
                        <table className="w-full text-sm text-left block md:table">
                            <thead className="hidden md:table-header-group text-xs uppercase bg-gray-50 dark:bg-zinc-800">
                                <tr>
                                    <th className="px-4 py-2">Di-bookmark Oleh</th>
                                    <th className="px-4 py-2">Nama Kontak</th>
                                    <th className="px-4 py-2">No Hp</th>
                                    <th className="px-4 py-2">Waktu Pesan</th>
                                    <th className="px-4 py-2 w-1/3">Pesan</th>
                                    <th className="px-4 py-2">Cabang</th>
                                    <th className="px-4 py-2">Waktu Bookmark</th>
                                </tr>
                            </thead>
                            <tbody className="block md:table-row-group divide-y divide-gray-100 dark:divide-zinc-700">
                                {data?.result?.map((conv: any, idx: number) => {
                                    let bookmarkData = conv;
                                    let madedBy = null;
                                    try {
                                        madedBy = JSON.parse(bookmarkData?.maded_by || "{}");
                                    } catch (e) { }

                                    const labelForBookmark = labels?.find((l: any) => {
                                        if (!l.name || !madedBy?.name) return false;
                                        
                                        // Ekstrak hanya kata (huruf dan angka), abaikan tanda baca
                                        const labelWords = l.name.toLowerCase().match(/[a-z0-9]+/g);
                                        const madedByWords = madedBy.name.toLowerCase().match(/[a-z0-9]+/g);
                                        
                                        if (!labelWords || !madedByWords) return false;

                                        // Pastikan SEMUA kata di label punya awalan yang cocok dengan kata di madedBy
                                        // ATAU jika label memiliki keyword(s), cek apakah ada salah satu keyword yang match
                                        const matchByName = labelWords.every((lWord: string) => {
                                            return madedByWords.some((mWord: string) => mWord.startsWith(lWord) || lWord.startsWith(mWord));
                                        });

                                        let matchByKeyword = false;
                                        if (l.keywords && Array.isArray(l.keywords)) {
                                            matchByKeyword = l.keywords.some((kw: string) => {
                                                const kwWords = kw.toLowerCase().match(/[a-z0-9]+/g);
                                                if (!kwWords) return false;
                                                return kwWords.every((kwWord: string) => madedByWords.some((mWord: string) => mWord.startsWith(kwWord) || kwWord.startsWith(mWord)));
                                            });
                                        }

                                        return matchByName || matchByKeyword;
                                    });

                                    return (
                                        <tr
                                            key={idx}
                                            className="block md:table-row border-b md:border-none dark:border-zinc-700 cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-800 p-4 md:p-0"
                                            onClick={() => handleMessageClick(conv)}
                                        >
                                            <td className="block md:table-cell px-0 md:px-4 py-1 md:py-2">
                                                <span className="md:hidden font-semibold text-xs text-gray-500 mr-2">Di-bookmark Oleh:</span>
                                                <div className="flex items-center gap-2">
                                                    {(user?.type?.id === 2 || madedBy?.id === user?.id) && (
                                                        <Button
                                                            variant="ghost"
                                                            size="icon"
                                                            className="h-6 w-6 text-red-500 hover:text-red-700 hover:bg-red-50"
                                                            onClick={(e) => handleRemoveBookmark(conv.message.id, e)}
                                                            disabled={removeBookmarkMutation.isPending}
                                                        >
                                                            <Trash2 className="h-4 w-4" />
                                                        </Button>
                                                    )}
                                                    {madedBy?.name ? (
                                                        <span 
                                                            className={cn(
                                                                "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium whitespace-nowrap",
                                                                !labelForBookmark && "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400"
                                                            )}
                                                            style={labelForBookmark ? { backgroundColor: labelForBookmark.color, color: labelForBookmark.text_color } : undefined}
                                                        >
                                                            {madedBy.name}
                                                        </span>
                                                    ) : '-'}
                                                </div>
                                            </td>
                                            <td className="block md:table-cell px-0 md:px-4 py-1 md:py-2">
                                                <span className="md:hidden font-semibold text-xs text-gray-500 mr-2">Nama Kontak:</span>
                                                {conv.message?.contacts?.name} {conv.message?.contacts?.last_name}
                                            </td>
                                            <td className="block md:table-cell px-0 md:px-4 py-1 md:py-2">
                                                <span className="md:hidden font-semibold text-xs text-gray-500 mr-2">No Hp:</span>
                                                {conv.message?.contacts?.phone_number}
                                            </td>
                                            <td className="block md:table-cell px-0 md:px-4 py-1 md:py-2 whitespace-nowrap">
                                                <span className="md:hidden font-semibold text-xs text-gray-500 mr-2">Waktu Pesan:</span>
                                                {conv.message?.created_at_date?.format}
                                            </td>
                                            <td className="block md:table-cell px-0 md:px-4 py-1 md:py-2 w-full md:w-auto" onClick={(e) => e.stopPropagation()}>
                                                <span className="md:hidden font-semibold text-xs text-gray-500 block mb-1">Pesan:</span>
                                                 <TooltipProvider>
                                                    <Tooltip>
                                                        <TooltipTrigger asChild>
                                                               <div className="cursor-pointer max-w-full">
                                                                {renderSimpleMessage(conv)}
                                                            </div>
                                                        </TooltipTrigger>
                                                          <TooltipPrimitive.Portal>
                                                            <TooltipPrimitive.Content
                                                                data-slot="tooltip-content"
                                                                side="right"
                                                                className={cn(
                                                                "bg-white dark:bg-zinc-800 max-w-sm animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance"
                                                                )}
                                                            >
                                                                {renderMessageContent(conv)}
                                                                <TooltipPrimitive.Arrow className="bg-white dark:bg-zinc-800 fill-white dark:fill-zinc-800 z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
                                                            </TooltipPrimitive.Content>
                                                            </TooltipPrimitive.Portal>
                                                    </Tooltip>
                                                </TooltipProvider>
                                            </td>
                                            <td className="block md:table-cell px-0 md:px-4 py-1 md:py-2">
                                                <span className="md:hidden font-semibold text-xs text-gray-500 mr-2">Cabang:</span>
                                                {conv.message?.contacts?.branch_name || '-'}
                                            </td>
                                            <td className="block md:table-cell px-0 md:px-4 py-1 md:py-2 text-gray-500 md:text-inherit">
                                                <span className="md:hidden font-semibold text-xs text-gray-500 mr-2">Waktu Bookmark:</span>
                                                {new Date(bookmarkData?.created_at).toLocaleString('id-ID')}
                                            </td>
                                        </tr>
                                    );
                                })}
                                {(!data?.result || data.result.length === 0) && (
                                    <tr className="block md:table-row">
                                        <td colSpan={7} className="block md:table-cell text-center py-8 text-gray-500">Tidak ada pesan yang dibookmark.</td>
                                    </tr>
                                )}
                            </tbody>
                        </table>
                    )}
                </div>

                {data?.meta && (
                    <div className="flex justify-between items-center mt-4">
                        <Button
                            variant="outline"
                            size="sm"
                            onClick={() => setPage(p => Math.max(1, p - 1))}
                            disabled={page === 1}
                        >
                            Previous
                        </Button>
                        <span className="text-sm">
                            Halaman {page} dari {data.meta.last_page}
                        </span>
                        <Button
                            variant="outline"
                            size="sm"
                            onClick={() => setPage(p => p + 1)}
                            disabled={page >= data.meta.last_page}
                        >
                            Next
                        </Button>
                    </div>
                )}
            </DialogContent>
        </Dialog>

        <AlertDialog open={!!deleteMessageId} onOpenChange={(open) => !open && setDeleteMessageId(null)}>
            <AlertDialogContent>
                <AlertDialogHeader>
                    <AlertDialogTitle>Hapus Bookmark</AlertDialogTitle>
                    <AlertDialogDescription>
                        Apakah Anda yakin ingin menghapus bookmark ini? Tindakan ini tidak dapat dibatalkan.
                    </AlertDialogDescription>
                </AlertDialogHeader>
                <AlertDialogFooter>
                    <AlertDialogCancel>Batal</AlertDialogCancel>
                    <AlertDialogAction onClick={confirmRemoveBookmark} className="bg-red-500 hover:bg-red-600 text-white">Hapus</AlertDialogAction>
                </AlertDialogFooter>
            </AlertDialogContent>
        </AlertDialog>
        </>
    );
};