import { useEffect, useState, useRef } from 'react';
import { FaEllipsisV } from 'react-icons/fa';
import api from '../../config/api';
import ContactFormModal from './ContactsFormModal';
import { Bounce, toast } from 'react-toastify';
import { IoMdAdd } from 'react-icons/io';

const Contacts = () => {
    const activeAccountId = JSON.parse(sessionStorage.getItem('activeAccountId') || 'null');
    const [contacts, setContacts] = useState([]);
    const [loading, setLoading] = useState(true);
    const [openMenuId, setOpenMenuId] = useState(null);
    const blurTimeoutRef = useRef(null);
    const [createAndInviteLoader, setCreateAndInviteLoader] = useState(false);
    const [showModal, setShowModal] = useState(false)

    const fetchContacts = async () => {
        try {
            const res = await api.get(`/api/accounts/${activeAccountId}/contacts`);
            setContacts(res.data.content || []);
        } catch (error) {
            console.error('Failed to fetch contacts:', error);
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        if (activeAccountId) {
            fetchContacts();
        }
    }, [activeAccountId]);

    const handleEdit = (contactId) => {
        console.log('Edit contact:', contactId);
        setOpenMenuId(null);
    };

    const handleDelete = async(contactId) => {
        console.log('Delete contact:', contactId);
        setOpenMenuId(null);
        try {
           let res = await api.delete(`/api/accounts/{accountId}/contacts/{contactId}`)
           if (res?.data) {
            
           } 
        } catch (error) {
            console.log(error)
        }
    };

    const toggleMenu = (contactId) => {
        // Cancel any pending blur timeout (prevents blinking)
        clearTimeout(blurTimeoutRef.current);
        setOpenMenuId((prevId) => (prevId === contactId ? null : contactId));
    };

    const handleBlur = () => {
        blurTimeoutRef.current = setTimeout(() => {
            setOpenMenuId(null);
        }, 100);
    };

    const handleContactSubmit = async (data: ContactData) => {
        try {
            setCreateAndInviteLoader(true);
            const res = await api.post(`/api/accounts/${activeAccountId}/contacts`, [data]);
            if (res.status === 200) {
                toast.success('Contact created successfully!', {
                    position: "top-center",
                    autoClose: 1500,
                    transition: Bounce,
                });
                setShowModal(false)
                 fetchContacts();
            }
            // return res;
        } catch (err) {
            console.error("Error creating contact", err);
            toast.error("Failed to create contact", {
                    position: "top-center",
                    autoClose: 1500,
                    transition: Bounce,
                });
            throw err;
        } finally {
            setCreateAndInviteLoader(false);
        }
    };

    return (
        <>
            <div className='flex justify-end my-2 cursor-pointer'>
                <div
                    onClick={() => setShowModal((prev) => !prev)}
                    className="flex items-center gap-2 bg-[var(--primary)] px-3 py-1.5 rounded-sm  hover:opacity-90 ">
                    <IoMdAdd className="text-white" />
                    <button
                        className="text-white rounded text-sm hover:opacity-90 cursor-pointer">
                        Add Contact
                    </button>
                </div>
            </div>
            <div className="overflow-y-auto max-h-[79vh] border border-gray-200 rounded shadow-sm  no-scrollbar">
                <table className="min-w-full text-sm bg-white">
                    <thead className="bg-gray-100 text-gray-700 uppercase text-xs tracking-wider sticky top-0 z-10">
                        <tr>
                            <th className="px-4 py-3 text-left">First Name</th>
                            <th className="px-4 py-3 text-left">Last Name</th>
                            <th className="px-4 py-3 text-left">Email</th>
                            <th className="px-4 py-3 text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody className="divide-y divide-gray-200">
                        {loading ? (
                            <tr>
                                <td colSpan="4" className="text-center py-4">Loading...</td>
                            </tr>
                        ) : contacts.length === 0 ? (
                            <tr>
                                <td colSpan="4" className="text-center py-4">No contacts found.</td>
                            </tr>
                        ) : (
                            contacts.map((contact) => (
                                <tr key={contact.id} className="hover:bg-gray-50">
                                    <td className="px-4 py-3">{contact.firstName}</td>
                                    <td className="px-4 py-3">{contact.lastName}</td>
                                    <td className="px-4 py-3">{contact.email}</td>
                                    <td className="px-4 py-3 text-center">
                                        <div
                                            className="relative inline-block"
                                            tabIndex={0}
                                            onBlur={handleBlur}
                                        >
                                            <button
                                                className="text-gray-600 hover:text-black p-1 focus:outline-none"
                                                onClick={() => toggleMenu(contact.id)}
                                            >
                                                <FaEllipsisV />
                                            </button>

                                            {openMenuId === contact.id && (
                                                <div className="absolute top-full right-0 mt-1 bg-white border border-gray-200 rounded shadow-lg z-20 min-w-[100px]">
                                                    <button
                                                        onClick={() => handleEdit(contact.id)}
                                                        className="block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 text-blue-600"
                                                    >
                                                        Edit
                                                    </button>
                                                    <button
                                                        onClick={() => handleDelete(contact.id)}
                                                        className="block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 text-red-600"
                                                    >
                                                        Delete
                                                    </button>
                                                </div>
                                            )}
                                        </div>
                                    </td>
                                </tr>
                            ))
                        )}
                    </tbody>
                </table>
                {showModal &&
                    <ContactFormModal onSubmit={handleContactSubmit}
                        loading={createAndInviteLoader} setShowModal={setShowModal}/>
                }
            </div>
        </>
    );
};

export default Contacts;