"use client";

import React, { useState, useEffect, useRef } from 'react';
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Loader2, Search, UserPlus, X } from "lucide-react";
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { useAddContact, useInfiniteConversations, useInfiniteContacts } from "@/hooks/useWhatsApp";
import { Contact } from '@/types/contacts';
import { useChatStore } from '@/store/useChatStore';
import { useForm } from 'react-hook-form';
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from './ui/form';
import { Combobox } from './ui/combobox';
import { useBranch } from '@/hooks/useClientApp';
import { z } from "zod"
import { zodResolver } from "@hookform/resolvers/zod";
import { useQuery } from '@tanstack/react-query';
import api from '@/lib/axios';
import { Textarea } from './ui/textarea';


interface ContactsProps {
    onClose: () => void;
    onSelectContact?: () => void;
}

const schema = z.object({
    first_name:z.string({ message:'Nama Depan Tidak boleh kosong'}).min(1, { message:'Nama Depan Tidak boleh kosong'}),
    last_name:z.string().optional(),
    phone_number: z.string({ message: 'No Telepon Tidak boleh kosong' })
        .min(1, { message: 'No Telepon Tidak boleh kosong' })
        .regex(/^62\d+$/, { message: 'No Telepon harus diawali dengan 62' }),
    branch:z.string({ message:'Cabang Tidak boleh kosong'}),
    address:z.string().optional(),
    province_id:z.string().optional(),
    city_id:z.string().optional()
})


const Contacts: React.FC<ContactsProps> = ({ onClose, onSelectContact }) => {
    const {searchContact, setSearchContact, setContact, contact} = useChatStore();
    const {data:branchs, isFetching} = useBranch();
    const [searchQuery, setSearchQuery] = useState("");
    const [isDialogOpen, setIsDialogOpen] = useState(false);
    const [newContactName, setNewContactName] = useState("");
    const [newContactPhone, setNewContactPhone] = useState("");

    // Use TanStack Query hooks
    const {
        data,
        dataUpdatedAt,
        isLoading,
        error,
        fetchNextPage,
        refetch,
        hasNextPage,
        isFetchingNextPage,
    } = useInfiniteContacts();

    const contacts = data?.pages.flatMap(page => page.result) || [];
    const loadMoreRef = useRef<HTMLDivElement>(null);


     // Infinite scroll handler using Intersection Observer
     useEffect(() => {
        const loadMoreElement = loadMoreRef.current;
        if (!loadMoreElement || !hasNextPage || isFetchingNextPage) return;

        // Find the ScrollArea viewport element
        const scrollAreaViewport = loadMoreElement.closest('[data-slot="scroll-area"]')?.querySelector('[data-slot="scroll-area-viewport"]') as HTMLElement | null;

        const observer = new IntersectionObserver(
            (entries) => {
                if (entries[0].isIntersecting) {
                    fetchNextPage();
                }
            },
            {
                root: scrollAreaViewport || null,
                rootMargin: '100px',
                threshold: 0.1,
            }
        );

        observer.observe(loadMoreElement);

        return () => {
            observer.disconnect();
        };
    }, [hasNextPage, isFetchingNextPage, fetchNextPage, contacts.length]);
    
    const addContactMutation = useAddContact();

    const handleAddContact = async () => {
        if (!newContactName.trim() || !newContactPhone.trim()) return;
        try {
         

            setNewContactName("");
            setNewContactPhone("");
            setIsDialogOpen(false);
        } catch (err) {
            console.error('Error adding contact:', err);
        }
    };

    const form = useForm<z.infer<typeof schema>>({
        resolver:zodResolver(schema)
    });

    const onSubmit =  async (values: z.infer<typeof schema>) => {
        await addContactMutation.mutateAsync({
            first_name: values?.first_name,
            last_name: values.last_name ?? '',
            phone_number:values.phone_number,
            branch:values.branch,
            account_id:process.env.NEXT_PUBLIC_APP_ACCOUNT_ID_WHATSAPP_SERVICE ?? '',
            province_id:values.province_id ?? '',
            city_id:values.city_id ?? '',
            address:values.address ?? ''
        }).then((res) => {
            setIsDialogOpen(false);
            form.reset();
        });
    }   

    const { data: cities, isFetching: isCitiesFetching } = useQuery({
        queryKey: ['cities', form?.watch('province_id')],
        queryFn: () => api.get('/api/administrative/cities', {
            params: {
                province_id: form?.watch('province_id')
            }
        }).then((res) => res.data.data),
        enabled:!!form?.watch('province_id')
    })

    const { data: provinces } = useQuery({
        queryKey: ['provinces'],
        queryFn: () => api.get('/api/administrative/provinces').then((res) => res.data.data),
        enabled:true
    })

    return (
        <div className="w-full md:w-[400px] h-full flex flex-col border-r border-gray-200 dark:border-gray-800 bg-white dark:bg-[#111b21]">
            {/* Header */}
            <div className="h-16 px-4 flex items-center justify-between bg-[#f0f2f5] dark:bg-[#202c33] shrink-0">
                <div className="flex items-center gap-3">
                    <Button variant="ghost" size="icon" onClick={onClose} className="text-gray-500 dark:text-gray-400">
                        <X className="h-5 w-5" />
                    </Button>
                    <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Kontak</h2>
                </div>
                <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
                    <DialogTrigger asChild>
                        <Button variant="ghost" size="icon" className="text-gray-500 dark:text-gray-400">
                            <UserPlus className="h-5 w-5" />
                        </Button>
                    </DialogTrigger>
                    <DialogContent className="sm:max-w-[425px] bg-white dark:bg-[#202c33] text-foreground">
                        <DialogHeader>
                            <DialogTitle>Tambah Kontak</DialogTitle>
                        </DialogHeader>
                        <Form {...form}>
                            <form onSubmit={form.handleSubmit(onSubmit)}>
                                <div className="grid gap-4 py-4">
                                    <div className="grid gap-2">
                                        <FormField
                                            control={form.control}
                                            name="first_name"
                                            render={({ field }) => (
                                                <FormItem>
                                                    <FormLabel>Nama Depan <span className="text-red-600">*</span></FormLabel>
                                                    <FormControl>
                                                        <Input  {...field} type="text"  placeholder="Nama Depan" />
                                                    </FormControl>
                                                    <FormMessage/>
                                                </FormItem>
                                            )}
                                        />  
                                    </div>
                                    <div className="grid gap-2">
                                        <FormField
                                            control={form.control}
                                            name="last_name"
                                            render={({ field }) => (
                                                <FormItem>
                                                    <FormLabel>Nama Akhir</FormLabel>
                                                    <FormControl>
                                                        <Input  {...field} type="text"  placeholder="Nama Akhir"/>
                                                    </FormControl>
                                                    <FormMessage/>
                                                </FormItem>
                                            )}
                                        />  
                                    </div>
                                    <div className="grid gap-2">
                                        <FormField
                                            control={form.control}
                                            name="phone_number"
                                            render={({ field }) => (
                                                <FormItem>
                                                    <FormLabel>No Telepon <span className="text-red-600">*</span></FormLabel>
                                                    <FormControl>
                                                        <Input  {...field} type="text"  placeholder="No Telepon"/>
                                                    </FormControl>
                                                    <FormMessage/>
                                                </FormItem>
                                            )}
                                        />  
                                    </div>
                                    <div className="grid gap-2">
                                        <FormField
                                                control={form.control}
                                                name="branch"
                                                render={({ field }) => (
                                                    <FormItem>
                                                        <FormLabel>Cabang <span className="text-red-600">*</span></FormLabel>
                                                        <FormControl>
                                                            <Combobox {...field} data={branchs?.map((item: any) => ({value:item.id.toString(), label:item.name})) ?? []}
                                                                onChange={(e) => {
                                                                    form.setValue("branch",e);
                                                                }}
                                                                placeholder="Pilih Branch"/>
                                                        </FormControl>
                                                        <FormMessage/>
                                                    </FormItem>
                                                )}
                                    />
                                    </div>
                                    <div className="grid gap-2">
                                            <FormField
                                                    control={form.control}
                                                    name="province_id"
                                                    render={({ field }) => (
                                                        <FormItem>
                                                            <FormLabel>Provinsi</FormLabel>
                                                            <FormControl>
                                                                <Combobox {...field} data={provinces?.map((item: any) => ({value:item.id.toString(), label:item.name})) ?? []}
                                                                    onChange={(e) => {
                                                                        form.setValue("province_id",e);
                                                                    }}
                                                                    placeholder="Pilih Provinsi"/>
                                                            </FormControl>
                                                            <FormMessage/>
                                                        </FormItem>
                                                    )}
                                            />
                                        </div>
                                        <div className="grid gap-2">
                                            <FormField
                                                    control={form.control}
                                                    name="city_id"
                                                    render={({ field }) => (
                                                        <FormItem>
                                                            <FormLabel>Kota</FormLabel>
                                                            <FormControl>
                                                                <Combobox {...field} data={cities?.map((item: any) => ({value:item.id.toString(), label:item.name})) ?? []}
                                                                    onChange={(e) => {
                                                                        form.setValue("city_id",e);
                                                                    }}
                                                                    loading={isCitiesFetching}
                                                                    placeholder="Pilih Kota"/>
                                                            </FormControl>
                                                            <FormMessage/>
                                                        </FormItem>
                                                    )}
                                            />
                                        </div>
                                        <div className="grid gap-2">
                                            <FormField
                                                    control={form.control}
                                                    name="address"
                                                    render={({ field }) => (
                                                        <FormItem>
                                                            <FormLabel>Lokasi</FormLabel>
                                                            <FormControl>
                                                                <Textarea {...field} placeholder="Alamat" />
                                                            </FormControl>
                                                            <FormMessage/>
                                                        </FormItem>
                                                    )}
                                            />
                                        </div>
                                </div>
                                <DialogFooter>
                                    <Button disabled={addContactMutation.isPending} type="button" variant="outline" onClick={() => {
                                         setIsDialogOpen(false)
                                         form.reset();
                                    }}>
                                        Cancel
                                    </Button>
                                    {
                                        addContactMutation.isPending ? 
                                        <Button type="button" className="flex flex-row gap-2" disabled>
                                            <Loader2 className="animate-spin"/>
                                            Simpan
                                        </Button>
                                        :
                                        <Button type="submit" onClick={handleAddContact}>
                                            Simpan
                                        </Button>
                                    }
                                   
                                </DialogFooter>
                            </form>
                        </Form>
                    </DialogContent>
                </Dialog>
            </div>

            {/* Search */}
            <div className="p-2 bg-white dark:bg-[#111b21] shrink-0">
                <div className="relative">
                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-500 dark:text-gray-400" />
                    <Input
                        placeholder="Cari..."
                        onChange={(e) => setSearchContact(e.target.value)}
                        className="pl-10 bg-[#f0f2f5] dark:bg-[#202c33] border-none focus-visible:ring-0 h-9"
                    />
                </div>
            </div>

            {/* Contacts List */}
            <ScrollArea className="flex-1 h-0">
                {isLoading ? (
                    <div className="flex items-center justify-center h-full">
                        <p className="text-gray-500 dark:text-gray-400">Loading contacts...</p>
                    </div>
                ) : error ? (
                    <div className="flex flex-col items-center justify-center h-full gap-2 px-4">
                        <p className="text-red-500 dark:text-red-400 text-sm text-center">{error.message || 'Failed to load contacts'}</p>
                        <Button variant="outline" size="sm" onClick={() => refetch()}>
                            Retry
                        </Button>
                    </div>
                ) : (
                    <>
                        {contacts.map((item: Contact, index: number) => (
                            <div
                                key={index}
                                onClick={() => {
                                    setContact(item);
                                    if (onSelectContact) {
                                        onSelectContact();
                                    }
                                }}
                                className={`flex items-center gap-3 p-3 px-4 cursor-pointer hover:bg-[#f5f6f6] dark:hover:bg-[#202c33] transition-colors
                                    ${contact?.id === item.id ? 'bg-[#f0f2f5] dark:bg-[#2a3942]' : ''}`}
                            >
                                <Avatar className="h-12 w-12">
                                    <AvatarImage src={item.profile_pic_url || undefined} />
                                    <AvatarFallback>{item.name[0]}</AvatarFallback>
                                </Avatar>
                                <div className="flex-1 overflow-hidden flex flex-col">
                                    <h3 className="font-medium text-gray-900 dark:text-gray-100 truncate">{item.name} {item?.last_name}</h3>
                                    <p className="text-sm text-gray-600 dark:text-gray-400 truncate">{item.phone_number}</p>
                                    <span className="text-xs text-gray-600 dark:text-gray-400 truncate">Cabang {item.branch_name}</span>
                                    <span className="text-xs text-gray-600 dark:text-gray-400 truncate">{item.address} {item.city?.name}{item.city?.name && item.province?.name ? ', ' : ''} {item.province?.name}</span>
                                </div>
                            </div>
                        ))}
                        {hasNextPage && (
                            <div ref={loadMoreRef} className="h-1" />
                        )}
                        {isFetchingNextPage && (
                            <div className="flex items-center justify-center py-4">
                                <Loader2 className="h-5 w-5 animate-spin text-gray-500" />
                            </div>
                        )}
                    </>
                )}
            </ScrollArea>
        </div>
    );
};

export default Contacts;