"use client"

import Image from 'next/image';
import { Link, usePathname } from '@/i18n/navigation';
import { useLocale, useTranslations } from 'next-intl';
import { useState } from 'react';
import axios from 'axios';
import { useMutation } from '@tanstack/react-query';
import { toast } from '@/hooks/use-toast';
import { BASE_URL } from '@/utils/url';

import { Mail, Phone, MapPin, Linkedin, Instagram, Facebook, Loader } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';

export function AppFooter() {
    const t = useTranslations();
    const locale = useLocale();
    const pathname = usePathname();
    const [email, setEmail] = useState('');

    const newsletterMutation = useMutation({
        mutationFn: async (email: string) => {
            const response = await axios.post(`${BASE_URL}/newsletter`, { email });
            return response.data;
        },
        onSuccess: (data) => {
            if (data?.status) {
                toast({
                    variant: "success",
                    title: data?.message || t('custom.done'),
                });
                setEmail('');
            } else {
                toast({
                    variant: "destructive",
                    title: t('custom.failed'),
                    description: data?.message || t('custom.try-again')
                });
            }
        },
        onError: () => {
            toast({
                variant: "destructive",
                title: t('custom.failed'),
                description: t('custom.try-again')
            });
        }
    });

    const handleSubscribe = (e: React.FormEvent) => {
        e.preventDefault();
        if (!email || !/\S+@\S+\.\S+/.test(email)) {
            toast({
                variant: "destructive",
                title: t('checkout.invalidEmail'),
            });
            return;
        }
        newsletterMutation.mutate(email);
    };

    const paymentMethods = [
        {
            alt: "cards",
            image: "/images/jeel-cards.png"
        },
        {
            alt: "fatoorah",
            image: "/images/myfatora.png"
        },
        {
            alt: "tabby",
            image: "/images/tabby.png"
        },
    ];

    const unWantedRoutes = ["/login", "/register"];
    if (unWantedRoutes.includes(pathname)) return null;

    return (
        <footer className="bg-[#0a0f1a] text-white mt-6 pt-20 pb-10 border-t border-white/5 relative overflow-hidden">
            {/* Ambient Background Elements */}
            <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-px bg-gradient-to-r from-transparent via-primary-tw-500/50 to-transparent" />
            <div className="absolute top-0 right-0 size-[500px] bg-primary-tw-900/5 blur-[120px] rounded-full -mr-64 -mt-32" />

            <div className="container box m-auto px-6">
                {/* Top Section: Newsletter Card */}
                <div className="mb-20">
                    <div className="bg-gradient-to-br from-white/[0.03] to-white/[0.01] border border-white/5 rounded-[2.5rem] p-8 md:p-12 flex flex-col lg:flex-row items-center justify-between gap-10 shadow-2xl">
                        <div className="text-center lg:text-start max-w-xl">
                            <h3 className="text-2xl md:text-3xl font-black mb-4 bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">
                                {t('footer.newsletter')}
                            </h3>
                            <p className="text-gray-400 text-lg">
                                {locale === 'ar' 
                                    ? 'انضم إلى نشرتنا البريدية لتصلك أحدث البرامج التدريبية والعروض الحصرية' 
                                    : 'Join our newsletter to receive the latest training programs and exclusive offers'}
                            </p>
                        </div>
                        <form onSubmit={handleSubscribe} className="flex flex-col sm:flex-row gap-4 w-full lg:w-auto min-w-[320px] sm:min-w-[450px]">
                            <Input
                                type="email"
                                placeholder={t('placeholder.email')}
                                className="bg-white/5 border-white/10 text-white h-14 px-6 rounded-2xl focus:ring-2 focus:ring-primary-tw-500/50 transition-all text-lg"
                                value={email}
                                onChange={(e) => setEmail(e.target.value)}
                                disabled={newsletterMutation.isPending}
                            />
                            <Button 
                                type="submit" 
                                className="h-14 px-10 bg-primary-tw-600 hover:bg-primary-tw-500 text-white font-bold rounded-2xl shadow-xl shadow-primary-tw-900/20 transition-all text-lg"
                                disabled={newsletterMutation.isPending}
                            >
                                {newsletterMutation.isPending ? <Loader className="animate-spin" /> : t('footer.subscribe')}
                            </Button>
                        </form>
                    </div>
                </div>

                {/* Middle Section: Main Links */}
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-12 mb-2">
                    {/* Brand Info */}
                    <div className="space-y-6 flex flex-col items-center sm:items-start">
                        <div className="w-44 p-2 bg-white rounded-2xl">
                            <Link href="/">
                                <Image
                                    src={locale === "ar" ? '/images/logo-3.png' : '/images/logo-en.png'}
                                    alt="Mwaheb"
                                    width={180}
                                    height={50}
                                    className="h-auto w-full"
                                />
                            </Link>
                        </div>
                        <p className="text-gray-400 leading-relaxed text-center sm:text-start">
                            {t('footer.desc')}
                        </p>
                    </div>

                    {/* Quick Navigation */}
                    <div className="text-center sm:text-start">
                        <h4 className="text-white font-bold text-lg mb-8 relative inline-block">
                            {t('footer.quick')}
                            <span className="absolute -bottom-2 left-0 w-8 h-1 bg-primary-tw-600 rounded-full" />
                        </h4>
                        <ul className="space-y-4">
                            {[
                                { label: t('routes.about'), href: "/about" },
                                { label: t('routes.programs'), href: "/programs" },
                                { label: t('routes.why-mwaheb'), href: "/why-mwaheb" }
                            ].map((link, idx) => (
                                <li key={idx}>
                                    <Link href={link.href} className="text-gray-400 hover:text-white hover:translate-x-2 transition-all inline-flex items-center gap-2">
                                        {link.label}
                                    </Link>
                                </li>
                            ))}
                        </ul>
                    </div>

                    {/* Support & Legal */}
                    <div className="text-center sm:text-start">
                        <h4 className="text-white font-bold text-lg mb-8 relative inline-block">
                            {t('footer.services')}
                            <span className="absolute -bottom-2 left-0 w-8 h-1 bg-primary-tw-600 rounded-full" />
                        </h4>
                        <ul className="space-y-4">
                            {[
                                { label: t('routes.privacy'), href: "/privacy" },
                                { label: t('routes.terms-conditions'), href: "/terms-conditions" },
                                { label: locale === 'ar' ? 'أدلة السياسات' : 'Policies', href: "/policies" }
                            ].map((link, idx) => (
                                <li key={idx}>
                                    <Link href={link.href} className="text-gray-400 hover:text-white hover:translate-x-2 transition-all inline-flex items-center gap-2">
                                        {link.label}
                                    </Link>
                                </li>
                            ))}
                        </ul>
                    </div>

                    {/* Contact Info */}
                    <div className="text-center sm:text-start">
                        <h4 className="text-white font-bold text-lg mb-8 relative inline-block">
                            {t('footer.contact')}
                            <span className="absolute -bottom-2 left-0 w-8 h-1 bg-primary-tw-600 rounded-full" />
                        </h4>
                        <div className="space-y-5">
                            <a href="mailto:info@mwaheblms.com" className="flex items-center gap-3 text-gray-400 hover:text-white justify-center sm:justify-start group">
                                <div className="size-10 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center group-hover:bg-primary-tw-600 transition-colors">
                                    <Mail className="size-4" />
                                </div>
                                <span className="text-sm">info@mwaheblms.com</span>
                            </a>
                            <a href="tel:+966533993220" className="flex items-center gap-3 text-gray-400 hover:text-white justify-center sm:justify-start group">
                                <div className="size-10 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center group-hover:bg-primary-tw-600 transition-colors">
                                    <Phone className="size-4" />
                                </div>
                                <span className="text-sm" dir="ltr">+966 533 993 220</span>
                            </a>
                            <div className="flex items-center gap-3 text-gray-400 justify-center sm:justify-start group">
                                <div className="size-10 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center group-hover:bg-primary-tw-600 transition-colors">
                                    <MapPin className="size-4" />
                                </div>
                                <span className="text-sm font-medium">{t('custom.riyadh')}</span>
                            </div>
                        </div>
                    </div>
                </div>

                {/* Bottom Section: Payments, Social & Copyright */}
                <div className="pt-8 border-t border-white/5 flex flex-col lg:flex-row items-center justify-between gap-10">
                    {/* Payments */}
                    <div className="flex flex-col items-center lg:items-start gap-4">
                        <p className="text-[10px] font-bold text-gray-600 uppercase tracking-widest">{t('footer.payment')}</p>
                        <div className="flex flex-wrap justify-center gap-3">
                            {paymentMethods.map((method, idx) => (
                                <div key={idx} className="h-10 px-4 bg-white rounded-xl flex items-center justify-center shadow-lg transition-transform hover:-translate-y-1">
                                    <Image src={method.image} alt={method.alt} width={60} height={20} className="h-full w-auto object-contain py-2" />
                                </div>
                            ))}
                        </div>
                    </div>

                    {/* Copyright */}
                    <div className="text-center order-3 lg:order-2">
                        <p className="text-gray-500 text-sm font-medium">{t('footer.rights')}</p>
                        <div className="mt-2 flex items-center justify-center gap-4 text-[10px] font-bold text-gray-700">
                             <span>POWERED BY</span>
                             <div className="h-4 w-px bg-white/5" />
                             <span className="text-gray-500">MWAHEB LMS</span>
                        </div>
                    </div>

                    {/* Socials */}
                    <div className="flex flex-col items-center lg:items-end gap-4 order-2 lg:order-3">
                        <p className="text-[10px] font-bold text-gray-600 uppercase tracking-widest">{t('footer.follow')}</p>
                        <a
                            href="https://www.linkedin.com/company/ivorytraining/"
                            target="_blank"
                            className="size-12 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center hover:bg-[#0077b5] hover:text-white text-gray-400 transition-all shadow-xl group"
                        >
                            <Linkedin className="size-5 group-hover:scale-110 transition-transform" />
                        </a>
                    </div>
                </div>
            </div>
        </footer>
    );
}