"use client";

import { cn } from "@/lib/utils";
import { Conversation } from "@/types/conversations";
import { useAddContact } from "@/hooks/useWhatsApp";
import { Button } from "@/components/ui/button";
import { UserPlus, Loader2 } from "lucide-react";
import { useState } from "react";
import {
    Dialog,
    DialogContent,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog";
import { useForm } from 'react-hook-form';
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from './ui/form';
import { Input } from "./ui/input";
import { Combobox } from './ui/combobox';
import { Textarea } from './ui/textarea';
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { useBranch } from '@/hooks/useClientApp';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import api from '@/lib/axios';

interface MessageItemContactsProps {
    conversation: Conversation;
}

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 MessageItemContacts = ({ conversation }: MessageItemContactsProps) => {
    const addContactMutation = useAddContact();
    const [isDialogOpen, setIsDialogOpen] = useState(false);
    const {data:branchs} = useBranch();
    const queryClient = useQueryClient();

    const lines = (conversation.message_text || "").split('<br/>');
    let vcardName = '';
    let vcardPhone = '';

    if (lines.length >= 3) {
        vcardName = lines[1];
        vcardPhone = lines[2];
    } else if (lines.length >= 2) {
        vcardPhone = lines[1];
    }

    const cleanPhone = vcardPhone.replace(/[\+\s\-]/g, '');

    const form = useForm<z.infer<typeof schema>>({
        resolver:zodResolver(schema),
        defaultValues: {
            first_name: vcardName || cleanPhone,
            phone_number: cleanPhone
        }
    });

    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();
            queryClient.invalidateQueries({ queryKey: ["contacts-infinite"] });
        });
    }

    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="flex flex-col gap-2 pb-1 pt-1 min-w-[200px]">
            <div className="text-sm text-gray-800 dark:text-white flex flex-col bg-black/5 dark:bg-white/5 p-2 rounded-md">
                <span className="font-semibold text-gray-500 dark:text-gray-400 text-[10px] uppercase tracking-wider mb-1">
                    Kartu Kontak
                </span>
                {vcardName && <span className="font-medium text-[13px]">{vcardName}</span>}
                {vcardPhone && <span className="text-gray-600 dark:text-gray-300 text-[12px] mt-0.5">{vcardPhone}</span>}
            </div>
            
            {cleanPhone && (
                <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
                    <DialogTrigger asChild>
                        <Button 
                            variant="outline" 
                            size="sm" 
                            className="w-full flex items-center justify-center gap-2 mt-1 h-8 text-[11px] font-medium bg-white/50 dark:bg-black/20 hover:bg-white dark:hover:bg-black/40 border-gray-200 dark:border-gray-700 shadow-sm"
                            disabled={addContactMutation.isPending}
                        >
                            <UserPlus className="h-3 w-3 text-emerald-600" />
                            Simpan ke Kontak
                        </Button>
                    </DialogTrigger>
                    <DialogContent className="sm:max-w-[425px] bg-white dark:bg-[#202c33] text-foreground" onClick={(e) => e.stopPropagation()}>
                        <DialogHeader>
                            <DialogTitle>Tambah Kontak</DialogTitle>
                        </DialogHeader>
                        <Form {...form}>
                            <form onSubmit={form.handleSubmit(onSubmit)}>
                                <div className="grid gap-4 py-4 max-h-[60vh] overflow-y-auto px-1">
                                    <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 className="flex flex-col">
                                                        <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 className="flex flex-col">
                                                            <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);
                                                                        form.setValue("city_id",""); // reset city
                                                                    }}
                                                                    placeholder="Pilih Provinsi"/>
                                                            </FormControl>
                                                            <FormMessage/>
                                                        </FormItem>
                                                    )}
                                            />
                                        </div>
                                        <div className="grid gap-2">
                                            <FormField
                                                    control={form.control}
                                                    name="city_id"
                                                    render={({ field }) => (
                                                        <FormItem className="flex flex-col">
                                                            <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 className="mt-4">
                                    <Button disabled={addContactMutation.isPending} type="button" variant="outline" onClick={() => {
                                         setIsDialogOpen(false)
                                         form.reset();
                                    }}>
                                        Batal
                                    </Button>
                                    {
                                        addContactMutation.isPending ? 
                                        <Button type="button" className="flex flex-row gap-2" disabled>
                                            <Loader2 className="animate-spin h-4 w-4"/>
                                            Menyimpan
                                        </Button>
                                        :
                                        <Button type="submit">
                                            Simpan
                                        </Button>
                                    }
                                   
                                </DialogFooter>
                            </form>
                        </Form>
                    </DialogContent>
                </Dialog>
            )}
        </div>
    );
};

export default MessageItemContacts;