"use client";
import axios from "axios";
import { FormEvent, useState } from "react";
import { Link, NavLink, useLocation } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { useToast } from "@/hooks/use-toast";
import { useMutation } from "@tanstack/react-query";
import { useLanguage } from "@/store/language-context";
import { Bomb } from "lucide-react";

import { Input } from "@/components/ui/input";

import LogoFooter from "@/assets/used-images/logo-footer.png";
import Tiktok from '@/assets/used-icons/Tiktok.svg';
import Facebook from "@/assets/used-icons/Facebook.svg";
import Insta from "@/assets/used-icons/Insta.svg";
import X from "@/assets/used-icons/X.svg";
import LinkedIn from "@/assets/used-icons/LinkedIn.svg";
import IvoryList from "@/assets/used-icons/IvoryList.svg";

const Footer = () => {
    const location = useLocation();
    const { URL } = useLanguage();
    const { t } = useTranslation();
    const { toast } = useToast();

    const [email, setEmail] = useState('');

    const subscribeInNews = useMutation({
        mutationKey: ['subscribe-in-news'],
        mutationFn: async (e: FormEvent<HTMLFormElement>) => {
            e.preventDefault();
            const response = await axios.post(`${URL}/subscriptions`, {
                body: { email: email }
            });
            if (response.status !== 200) throw new Error(t('custom.failed'));
            return response
        },
        onSuccess: () => {
            toast({
                variant: 'success',
                title: (
                    <p>
                        🎉 {t('custom.done')}
                    </p>
                ),
                description: t('custom.done-desc')
            });
        },
        onError: () => {
            toast({
                variant: "destructive",
                title: (
                    <div className='flex items-center gap-2'>
                        <Bomb size={19} />
                        <p>
                            {t('custom.failed')}
                        </p>
                    </div>
                ),
                description: t('custom.err')
            });
        }
    });

    const social = [
        { name: 'Linkedin', icon: LinkedIn, link: 'https://www.linkedin.com/company/ivorytraining/' },
        { name: 'Twitter', icon: X, link: 'https://x.com/ivorytraining' },
        { name: 'Instagram', icon: Insta, link: 'https://www.instagram.com/ivorytraining/' },
        { name: "Facebook", icon: Facebook, link: 'https://www.facebook.com/ivorytraining/' },
        { name: "Tiktok", icon: Tiktok, link: 'https://www.tiktok.com/@ivorytraining' },
        // { name: 'Youtube', icon: Youtube, link: '' },
    ];
    const maps = [
        { title: t('routes.training-courses'), link: '/training-courses?page=1' },
        { title: t('routes.training-plan'), link: '/training-plans' },
        { title: t('routes.accreditations'), link: '/accreditations' },
        { title: t('routes.podcasts'), link: '/podcasts' },
    ];
    const links = [
        { title: t('routes.about'), link: '/about' },
        { title: t('routes.privacy-policy'), link: '/privacy-policy' },
        { title: t('routes.certificate-verification'), link: '/certificate-verification' },
        { title: t('routes.contact-us'), link: '/contact-us' },
    ];

    if (location.pathname === '/login' || location.pathname === '/otp-code' || location.pathname === '/forget-password' || location.pathname === '/reset-password'|| location.pathname === '/ivory-event-profile') {
        return null
    };

    return (
        <>
            <footer className="bg-primary-tw relative z-0 text-white overflow-hidden px-20 max-lg:px-2 min-h-64">
                <div className="footer-logo-bg absolute w-full h-64"></div>
                <div className="mx-auto px-4 py-8">
                    <div className="grid grid-cols-4 justify-between gap-6 relative max-lg:grid-cols-2 max-md:grid-cols-1">
                        <div className="z-20">
                            <div className="mb-4">
                                <img src={LogoFooter} alt={t("ivory")} className="w-36" />
                            </div>
                            <p>Broaden Your Success</p>
                            <div className="flex justify-start items-center gap-2 mt-3">
                                {
                                    social.map((item, i: number) => (
                                        <NavLink key={i} target="_blank" to={item.link} className="text-white text-lg hover:opacity-80 cursor-pointer">
                                            <span>
                                                <img
                                                    src={item.icon}
                                                    alt={item.name}
                                                />
                                            </span>
                                        </NavLink>
                                    ))
                                }
                            </div>
                        </div>

                        {/* Site Map Section */}
                        <div className="flex justify-evenly items-start col-span-2 max-lg:justify-start max-lg:gap-12 z-20">
                            <div>
                                <h2 className="text-lg  mb-4">{t('footer.website-map')}</h2>
                                <ul className="space-y-2">
                                    {maps.map((item, i: number) => (
                                        <li key={i}>
                                            <Link to={item.link} className="flex items-center gap-2 cursor-pointer hover:underline">
                                                <span>
                                                    <img src={IvoryList} alt="" />
                                                </span>
                                                <span>
                                                    {item.title}
                                                </span>
                                            </Link>
                                        </li>
                                    ))}
                                </ul>
                            </div>

                            {/* Important Links Section */}
                            <div>
                                <h2 className="text-lg  mb-4">{t('footer.important-links')}</h2>
                                <ul className="space-y-2">
                                    {links.map((item, i: number) => (
                                        <li key={i}>
                                            <Link to={item.link} className="flex items-center gap-2 cursor-pointer hover:underline">
                                                <span>
                                                    <img src={IvoryList} alt="" />
                                                </span>
                                                <span>
                                                    {item.title}
                                                </span>
                                            </Link>
                                        </li>
                                    ))}
                                </ul>
                            </div>
                        </div>

                        {/* Contact Form Section */}
                        <div className="z-20">
                            <p className="text-lg  mb-4">{t('routes.contact-us')}</p>
                            <p className="text-start text-sm mb-3">{t('footer.subs-news')}</p>
                            <form onSubmit={(e) => subscribeInNews.mutate(e)} className="flex flex-col space-y-3">
                                <Input
                                    type="email"
                                    placeholder={t('footer.enter-email')}
                                    value={email ?? ''}
                                    onChange={(e) => setEmail(e.target.value)}
                                    className="focus:ring-secondary-tw text-common-text"
                                    required
                                />
                                <button
                                    disabled={subscribeInNews.isPending}
                                    type="submit"
                                    className="px-6 py-2 border border-white text-white bg-transparent hover:bg-[#7e2d39] transition-all rounded-md cursor-pointer"
                                >
                                    {subscribeInNews.isPending ? t('custom.sending') : t('custom.send')}
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </footer>
            <div className="text-center text-black py-3">
                <p>{t('footer.copyright')}</p>
            </div>
        </>
    );
};

export default Footer;