"use client";

import React, { useState } from "react";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "./ui/dialog";
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
} from "./ui/alert-dialog";
import { Button } from "./ui/button";
import { Input } from "./ui/input";
import { ScrollArea } from "./ui/scroll-area";
import { useQuery } from "@tanstack/react-query";
import api from "@/lib/axiosClient";
import { useAuth } from "@/contexts/auth-context";
import { Loader2, Send, Search, ChevronLeft } from "lucide-react";
import { useChatStore } from "@/store/useChatStore";
import { useSendMessage } from "@/hooks/useWhatsApp";
import Image from "next/image";

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

export default function MarketingKitBannerDialog({ open, onOpenChange }: MarketingKitBannerDialogProps) {
    const { user } = useAuth();
    const { selectedContact, setLightBoxImages, setSelectedLightBoxImage, selectedLightBoxImage } = useChatStore();
    const sendMessageMutation = useSendMessage();

    const [selectedKit, setSelectedKit] = useState<any>(null);
    const [search, setSearch] = useState("");
    const [confirmSend, setConfirmSend] = useState<{ open: boolean; item: any }>({ open: false, item: null });

    const { data: kits, isLoading } = useQuery({
        queryKey: ["marketing-kit-banner", user?.email],
        queryFn: async () => {
            const res = await api.post("/v1.0/manage/marketing-banner/service/get", {
                email: user?.email,
                page: 1,
                rpp: 50,
                sort:['name','asc'],
                category:null
            });
            console.log(res.data.result);
            return res.data?.result || [];
        },
        enabled: open && !!user?.email,
    });

    const handleSend = (item: any) => {
        if (!selectedContact) return;
        setConfirmSend({ open: true, item });
    };

    const executeSend = async () => {
        const item = confirmSend.item;
        if (!selectedContact || !item) return;
        
        try {
            // Ambil nama file dari URL
            const urlParts = item.image_display.split('/');
            const filename = urlParts[urlParts.length - 1] || 'banner.png';

            // Ambil gambar melalui endpoint rumapedia-api/marketing-banner/{filename}
            const baseUrl = process.env.NEXT_PUBLIC_API_HOST_CLIENT || 'https://api.rumapedia.in';
            const fetchUrl = `${baseUrl}/marketing-banner/${filename}`;
            const response = await fetch(fetchUrl);
            
            if (!response.ok) throw new Error("Gagal load gambar dari server");
            
            const blob = await response.blob();
            
            // Konversi Blob ke File agar ekstensi dan namanya terbaca dengan benar
            const file = new File([blob], filename, { type: blob.type || "image/jpeg" });
            
            const formData = new FormData();
            formData.append('type', 'image');
            formData.append('account_id', process.env.NEXT_PUBLIC_APP_ACCOUNT_ID_WHATSAPP_SERVICE as string);
            formData.append('phone_number', selectedContact.phone_number);
            formData.append('maded_by', JSON.stringify(user));
            formData.append('message', item.description || item.caption || item.text || "");
            formData.append('image', file);
            formData.append('filename', filename);

            sendMessageMutation.mutate(formData as any, {
                onSuccess: () => {
                    onOpenChange(false);
                },
            });
        } catch (error) {
            console.error("Gagal mendownload dan mengirim gambar:", error);
            alert("Gagal memuat gambar banner. Pastikan link gambar bisa diakses.");
        } finally {
            setConfirmSend({ open: false, item: null });
        }
    };

    return (
        <>
        <Dialog open={open} onOpenChange={onOpenChange} modal={!selectedLightBoxImage}>
            <DialogContent 
                className="sm:max-w-6xl max-h-[80vh] flex flex-col"
                onInteractOutside={(e) => {
                    // Mencegah dialog tertutup jika pengguna mengklik area luar yang sebenarnya adalah Lightbox
                    if (selectedLightBoxImage) {
                        e.preventDefault();
                    }
                }}
            >
                <DialogHeader className="flex flex-col md:flex-row md:justify-between items-start md:items-center pr-8 space-y-2 md:space-y-0">
                    <DialogTitle>Marketing Kit Banner</DialogTitle>
                    {selectedContact && (
                        <DialogDescription className="mt-0 flex flex-col items-start md:items-end gap-1 text-left md:text-right w-full md:w-auto">
                            <div>
                                Kirim ke: <span className="font-semibold text-gray-900 dark:text-gray-100">{selectedContact.name || 'Tidak diketahui'}</span> ({selectedContact.phone_number})
                            </div>
                            <div className="flex items-center gap-1 flex-wrap justify-start md:justify-end">
                                {selectedContact.labels?.map((item: any, index: number) => (
                                    <span
                                        key={index}
                                        className="h-4"
                                        style={{
                                            backgroundColor: item.color,
                                            color: item.text_color ?? "#fff",
                                            padding: "1px 6px",
                                            borderRadius: "4px",
                                            fontSize:'9px',
                                            display: "inline-block",
                                            whiteSpace: 'nowrap'
                                        }}
                                    >
                                        {item.name}
                                    </span>
                                ))}
                                {selectedContact?.branch_id && (
                                    <span className="text-[10px] border px-1 rounded-md h-[18px] text-white flex items-center justify-center" style={{backgroundColor:selectedContact?.branch_bg_color ?? '#666666'}}>
                                        {selectedContact?.branch_alias ?? selectedContact?.branch_name}
                                    </span>
                                )}
                            </div>
                        </DialogDescription>
                    )}
                </DialogHeader>

                <div className="flex flex-col gap-4 flex-1 min-h-0 mt-4 md:mt-0">
                    {isLoading ? (
                        <div className="flex justify-center items-center py-8 h-full">
                            <Loader2 className="h-8 w-8 animate-spin text-gray-500" />
                        </div>
                    ) : (
                        <div className="grid grid-cols-1 md:grid-cols-[300px_1fr] gap-4 flex-1 min-h-0 h-full">
                            {/* List of Kits */}
                            <div className={`flex-col md:border-r md:pr-4 h-full min-h-0 ${selectedKit ? 'hidden md:flex' : 'flex'}`}>
                                <h3 className="font-semibold mb-2 shrink-0">Pilih Kit</h3>
                                <div className="relative mb-3 shrink-0">
                                    <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
                                    <Input 
                                        type="text" 
                                        placeholder="Cari kit..." 
                                        className="pl-8"
                                        value={search}
                                        onChange={(e) => setSearch(e.target.value)}
                                    />
                                </div>
                                <ScrollArea className="flex-1 h-0">
                                    <div className="flex flex-col gap-2">
                                        {kits?.filter((kit: any) => kit.name.toLowerCase().includes(search.toLowerCase())).length === 0 && <p className="text-sm text-gray-500">Tidak ada data</p>}
                                        {kits?.filter((kit: any) => kit.name.toLowerCase().includes(search.toLowerCase())).map((kit: any) => (
                                            <Button
                                                key={kit.id}
                                                variant={selectedKit?.id === kit.id ? "default" : "outline"}
                                                className="justify-start text-left h-auto py-2"
                                                onClick={() => setSelectedKit(kit)}
                                            >
                                                <span>{kit.name}</span>
                                            </Button>
                                        ))}
                                    </div>
                                </ScrollArea>
                            </div>

                            {/* List of Versions/Items */}
                            <div className={`flex-col md:pl-2 h-full min-h-0 ${!selectedKit ? 'hidden md:flex' : 'flex'}`}>
                                <div className="flex items-center gap-2 mb-2 shrink-0">
                                    <Button variant="ghost" size="icon" className="md:hidden h-8 w-8" onClick={() => setSelectedKit(null)}>
                                        <ChevronLeft className="h-4 w-4" />
                                    </Button>
                                    <h3 className="font-semibold">Pilih Versi Banner</h3>
                                </div>
                                <ScrollArea className="flex-1 h-0 md:pr-4">
                                    {!selectedKit ? (
                                        <p className="text-sm text-gray-500">Pilih kit terlebih dahulu</p>
                                    ) : (
                                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                            {selectedKit.images?.length === 0 && (
                                                <p className="text-sm text-gray-500">Belum ada versi banner untuk kit ini.</p>
                                            )}
                                            {selectedKit.images?.map((item: any) => (
                                                <div key={item.id} className="border rounded-lg p-3 flex flex-col gap-3 bg-gray-50 dark:bg-gray-800">
                                                    <div 
                                                        className="relative w-full h-40 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden flex items-center justify-center cursor-pointer group"
                                                        onClick={(e) => {
                                                            e.preventDefault();
                                                            e.stopPropagation();
                                                            if (item.image_display) {
                                                                const imagesForLightbox = selectedKit.images.map((img: any) => ({ src: img.image_display }));
                                                                setLightBoxImages(imagesForLightbox);
                                                                setSelectedLightBoxImage(item.image_display);
                                                            }
                                                        }}
                                                    >
                                                        {item.image_display ? (
                                                            <>
                                                                <img 
                                                                    src={item.image_display} 
                                                                    alt="Banner Preview" 
                                                                    className="w-full h-full object-contain transition-transform group-hover:scale-105"
                                                                />
                                                                <div className="absolute inset-0 bg-black/20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                                                                    <Search className="text-white h-8 w-8" />
                                                                </div>
                                                            </>
                                                        ) : (
                                                            <span className="text-gray-400">No Image</span>
                                                        )}
                                                    </div>
                                                    {item.caption && (
                                                        <p className="font-semibold text-sm">{item.caption}</p>
                                                    )}
                                                     {!item.caption && <p className="font-semibold text-sm">Versi {item.position}</p>}
                                                    <Button 
                                                        size="sm" 
                                                        className="mt-auto" 
                                                        onClick={() => handleSend(item)}
                                                        disabled={sendMessageMutation.isPending}
                                                    >
                                                        {sendMessageMutation.isPending ? <Loader2 className="h-4 w-4 animate-spin mr-2" /> : <Send className="h-4 w-4 mr-2" />}
                                                        Kirim Banner
                                                    </Button>
                                                </div>
                                            ))}
                                        </div>
                                    )}
                                </ScrollArea>
                            </div>
                        </div>
                    )}
                </div>
            </DialogContent>
        </Dialog>
        
        <AlertDialog open={confirmSend.open} onOpenChange={(open) => setConfirmSend((prev) => ({ ...prev, open }))}>
            <AlertDialogContent>
                <AlertDialogHeader>
                    <AlertDialogTitle>Konfirmasi Pengiriman</AlertDialogTitle>
                    <AlertDialogDescription>
                        Apakah anda ingin mengirimkan pesan [{selectedKit?.name}] - [{confirmSend.item?.title || confirmSend.item?.caption  || "Versi " + confirmSend.item?.position || "Versi ini"}]?
                    </AlertDialogDescription>
                </AlertDialogHeader>
                <AlertDialogFooter>
                    <AlertDialogCancel>Batal</AlertDialogCancel>
                    <AlertDialogAction onClick={executeSend} disabled={sendMessageMutation.isPending}>
                        {sendMessageMutation.isPending && <Loader2 className="h-4 w-4 animate-spin mr-2" />}
                        Kirim
                    </AlertDialogAction>
                </AlertDialogFooter>
            </AlertDialogContent>
        </AlertDialog>
        </>
    );
}