import { useEffect, useState } from "react";
import { PiDotsThreeOutlineVerticalFill } from "react-icons/pi";
import AccountNav from "./AccountNav";
import api from "../../config/api";
import { useNavigate, useParams } from "react-router-dom";
import { FaCheck, FaClock } from "react-icons/fa";
import Cards from "../home/Cards";
import AddInviteModal from "./AddInviteModal";
import { Bounce, toast } from "react-toastify";
import { FiFileText, FiClock, FiAlertTriangle, FiCheckCircle } from "react-icons/fi";
import TransactionDataTable from "./TransactionDataTable";
import { useSelector } from "react-redux";
import { RootState } from "../../store/store";

interface Transaction {
    id: number;
    status: string;
    active: boolean;
    subject: string | null;
    createdAt: number;
    expireAfter: number | null;
}

const Account = () => {
    const mapApiDataToCards = (data: any): CardData[] => {
        return [
            {
                title: "Action Required",
                count: data.actionNeeded || 0,
                icon: <FiFileText className="w-5 h-5 text-sky-500" />,
                iconBg: "bg-sky-100 border-sky-200",
                textColor: "text-sky-600",
                gradient: "bg-white",
                shadowColor: "shadow-sky-100",
            },
            {
                title: "Waiting for Response",
                count: data.waitingForOthers || 0,
                icon: <FiClock className="w-5 h-5 text-yellow-500" />,
                iconBg: "bg-yellow-100 border-yellow-200",
                textColor: "text-yellow-600",
                gradient: "bg-white",
                shadowColor: "shadow-yellow-100",
            },
            {
                title: "Expiring Soon",
                count: data.expiring || 0,
                icon: <FiAlertTriangle className="w-5 h-5 text-red-500" />,
                iconBg: "bg-red-100 border-red-200",
                textColor: "text-red-600",
                gradient: "bg-white",
                shadowColor: "shadow-red-100",
            },
            {
                title: "Completed",
                count: data.completed || 0,
                icon: <FiCheckCircle className="w-5 h-5 text-green-500" />,
                iconBg: "bg-green-100 border-green-200",
                textColor: "text-green-600",
                gradient: "bg-white",
                shadowColor: "shadow-green-100",
            },
            // {
            //     title: 'Waiting for Others',
            //     count: data.waitingForOthers || 0,
            //     icon: <FaClock size={18} className="text-stone-600" />,
            //     gradient: 'bg-gradient-to-br from-blue-50 to-blue-100',
            //     shadowColor: 'shadow-blue-200/50',
            //     iconBg: 'bg-blue-100 border-blue-200',
            //     textColor: 'text-blue-700',
            //     trend: 'down'
            // },
            // {
            //     title: 'declined',
            //     count: data.declined || 0,
            //     icon: <FaClock size={18} className="text-purple-600" />,
            //     gradient: 'bg-gradient-to-br from-purple-50 to-purple-100',
            //     shadowColor: 'shadow-purple-200/50',
            //     iconBg: 'bg-purple-100 border-purple-200',
            //     textColor: 'text-purple-700',
            //     trend: 'down'
            // },
            // {
            //     title: 'cancelled',
            //     count: data.cancelled || 0,
            //     icon: <FaClock size={18} className="text-green-600" />,
            //     gradient: 'bg-gradient-to-br from-green-50 to-green-100',
            //     shadowColor: 'shadow-green-200/50',
            //     iconBg: 'bg-green-100 border-green-200',
            //     textColor: 'text-green-700',
            //     trend: 'down'
            // },
            // {
            //     title: 'draft',
            //     count: data.draft || 0,
            //     icon: <FaClock size={18} className="text-stone-600" />,
            //     gradient: 'bg-gradient-to-br from-stone-50 to-stone-100',
            //     shadowColor: 'shadow-stone-200/50',
            //     iconBg: 'bg-stone-100 border-stone-200',
            //     textColor: 'text-stone-700',
            //     trend: 'down'
            // }
            // Add more cards here if needed
        ];
    };

    const [activeAccountId, setActiveAccountId] = useState<string | null>(
        JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
    );

    // const { accountId } = useParams<{ accountId: string }>();
    const [transactions, setTransactions] = useState<Transaction[]>([]);
    const [accountsData, setAccountsData] = useState([])
    const [inviteLoading, setInviteLoading] = useState(false);
    const [cards, setCards] = useState<CardData[]>([]);
    const [accountID, setAccountID] = useState<number>()
    const [isLoading, setIsLoading] = useState<boolean>(false);

    const [isModalOpen, setIsModalOpen] = useState(false);

    const userData = useSelector((state: RootState) => state.user);

    // const getUserDetails = async () => {
    //     try {
    //         let res = await api.get('/api/user/details')
    //         let accountIDData = res?.data?.account?.id
    //         setAccountID(accountIDData)
    //     } catch (error) {
    //         console.log(error)
    //     }
    // }

    // useEffect(() => {
    //     getUserDetails()
    // }, [])

    // Listen for sessionStorage changes
    useEffect(() => {
        const handleStorageChange = (e: StorageEvent) => {
            if (e.key === 'activeAccountId') {
                const newActiveAccountId = e.newValue ? JSON.parse(e.newValue) : null;
                setActiveAccountId(newActiveAccountId);
            }
        };

        // Listen for storage events (works for changes from other tabs)
        window.addEventListener('storage', handleStorageChange);

        // Custom event listener for same-tab changes
        const handleCustomStorageChange = (e: CustomEvent) => {
            if (e.detail.key === 'activeAccountId') {
                setActiveAccountId(e.detail.newValue);
            }
        };

        window.addEventListener('sessionStorageChange', handleCustomStorageChange as EventListener);

        return () => {
            window.removeEventListener('storage', handleStorageChange);
            window.removeEventListener('sessionStorageChange', handleCustomStorageChange as EventListener);
        };
    }, []);


    const getDashboardData = async () => {
        setIsLoading(true)
        const payload = {
            account: activeAccountId
        };

        try {
            const res = await api.get(`/api/accounts/${userData.account.id}/dashboard`, { params: payload });
            console.log("Dashboard Data:", res.data);
            const cardDataArray = mapApiDataToCards(res.data);
            setCards(cardDataArray);
        } catch (error) {
            console.error("Error fetching dashboard data:", error);
        } finally {
            setIsLoading(false)
        }
    };

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

    const handleOpenModal = () => {
        setIsModalOpen(true);
    };


    // useEffect(() => {
    //     if (accountID) fetchTransactions();
    // }, [accountID]);

    // const getAccountDetails = async () => {
    //     try {
    //         let res = await api.get('/api/user/accounts')
    //         let items = res?.data
    //         setAccountsData(items)
    //     } catch (error) {
    //         console.log(error)
    //     }
    // }

    // useEffect(() => {
    //     getAccountDetails()
    // }, [])


    const navigate = useNavigate();

    const handleInvite = async (data: { i_accountName: number; email: string; role: string }) => {
        setInviteLoading(true);
        try {
            const payloadInvite = {
                email: data.email,
                role: data.role
            }
            let res = await api.post(`/api/accounts/${data.i_accountName}/invite`, payloadInvite)
            if (res?.data) {
                toast.success("Invite Sent Successfully...!", {
                    position: "top-center",
                    autoClose: 1500,
                    hideProgressBar: false,
                    closeOnClick: false,
                    pauseOnHover: true,
                    draggable: true,
                    progress: undefined,
                    theme: "light",
                    transition: Bounce,
                });
                await fetchTransactions()
                setIsModalOpen(false);
            }
        } catch (err) {
            console.error('Failed to invite', err);
        } finally {
            setInviteLoading(false);
        }
    };

    return (
        <>

            <Cards type="transactions" onOpenModal={handleOpenModal} cards={cards}
                isLoading={isLoading} />
            <section className="my-4 mx-3">
                <TransactionDataTable activeAccountId={activeAccountId}/>
            </section>

            {isModalOpen && <AddInviteModal onClose={() => setIsModalOpen(false)} onInvite={handleInvite} inviteLoading={inviteLoading}
                accountOptions={accountsData} />}
        </>
    );
};

export default Account;