'use client';

import {
    Mail,
    Phone,
    MapPin,
    Globe,
    Facebook,
    Twitter,
    Linkedin,
    Youtube,
    ArrowUp,
} from 'lucide-react';
import { useState, useEffect } from 'react';

interface FooterProps {
    currentLang: string;
    translations: any;
}

export function Footer({ currentLang, translations }: FooterProps) {
    const [showScrollTop, setShowScrollTop] = useState(false);

    const t = translations[currentLang];

    // Show scroll to top button when user scrolls down
    useEffect(() => {
        const handleScroll = () => {
            setShowScrollTop(window.scrollY > 300);
        };

        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);

    const scrollToTop = () => {
        window.scrollTo({
            top: 0,
            behavior: 'smooth',
        });
    };

    const footerLinks = {
        products: {
            title:
                currentLang === 'zh'
                    ? '产品服务'
                    : currentLang === 'zh-tw'
                      ? '產品服務'
                      : 'Products & Services',
            links: [
                {
                    name:
                        currentLang === 'zh'
                            ? '云服务器 ECS'
                            : currentLang === 'zh-tw'
                              ? '雲伺服器 ECS'
                              : 'Cloud Server ECS',
                    href: '/products/ecs',
                },
                {
                    name:
                        currentLang === 'zh'
                            ? '云数据库 RDS'
                            : currentLang === 'zh-tw'
                              ? '雲資料庫 RDS'
                              : 'Cloud Database RDS',
                    href: '/products/rds',
                },
                {
                    name:
                        currentLang === 'zh'
                            ? '负载均衡 SLB'
                            : currentLang === 'zh-tw'
                              ? '負載平衡 SLB'
                              : 'Load Balancer SLB',
                    href: '/products/slb',
                },
                {
                    name:
                        currentLang === 'zh'
                            ? '对象存储 OSS'
                            : currentLang === 'zh-tw'
                              ? '物件儲存 OSS'
                              : 'Object Storage OSS',
                    href: '/products/oss',
                },
                {
                    name:
                        currentLang === 'zh'
                            ? 'CDN 加速'
                            : currentLang === 'zh-tw'
                              ? 'CDN 加速'
                              : 'CDN Acceleration',
                    href: '/products/cdn',
                },
            ],
        },
        solutions: {
            title:
                currentLang === 'zh'
                    ? '解决方案'
                    : currentLang === 'zh-tw'
                      ? '解決方案'
                      : 'Solutions',
            links: [
                {
                    name:
                        currentLang === 'zh'
                            ? '企业上云'
                            : currentLang === 'zh-tw'
                              ? '企業上雲'
                              : 'Enterprise Cloud',
                    href: '/solutions/enterprise',
                },
                {
                    name:
                        currentLang === 'zh'
                            ? '数据备份'
                            : currentLang === 'zh-tw'
                              ? '資料備份'
                              : 'Data Backup',
                    href: '/solutions/backup',
                },
                {
                    name:
                        currentLang === 'zh'
                            ? '灾难恢复'
                            : currentLang === 'zh-tw'
                              ? '災難恢復'
                              : 'Disaster Recovery',
                    href: '/solutions/recovery',
                },
                {
                    name:
                        currentLang === 'zh'
                            ? '混合云'
                            : currentLang === 'zh-tw'
                              ? '混合雲'
                              : 'Hybrid Cloud',
                    href: '/solutions/hybrid',
                },
                {
                    name:
                        currentLang === 'zh'
                            ? '容器服务'
                            : currentLang === 'zh-tw'
                              ? '容器服務'
                              : 'Container Service',
                    href: '/solutions/container',
                },
            ],
        },
        support: {
            title:
                currentLang === 'zh'
                    ? '支持与服务'
                    : currentLang === 'zh-tw'
                      ? '支援與服務'
                      : 'Support & Service',
            links: [
                {
                    name:
                        currentLang === 'zh'
                            ? '技术文档'
                            : currentLang === 'zh-tw'
                              ? '技術文件'
                              : 'Documentation',
                    href: '/docs',
                },
                {
                    name:
                        currentLang === 'zh'
                            ? '帮助中心'
                            : currentLang === 'zh-tw'
                              ? '幫助中心'
                              : 'Help Center',
                    href: '/help',
                },
                {
                    name:
                        currentLang === 'zh'
                            ? '服务状态'
                            : currentLang === 'zh-tw'
                              ? '服務狀態'
                              : 'Service Status',
                    href: '/status',
                },
                {
                    name:
                        currentLang === 'zh'
                            ? '培训认证'
                            : currentLang === 'zh-tw'
                              ? '培訓認證'
                              : 'Training & Certification',
                    href: '/training',
                },
                {
                    name:
                        currentLang === 'zh'
                            ? '社区论坛'
                            : currentLang === 'zh-tw'
                              ? '社群論壇'
                              : 'Community Forum',
                    href: '/community',
                },
            ],
        },
        company: {
            title:
                currentLang === 'zh'
                    ? '关于我们'
                    : currentLang === 'zh-tw'
                      ? '關於我們'
                      : 'About Us',
            links: [
                {
                    name:
                        currentLang === 'zh'
                            ? '公司介绍'
                            : currentLang === 'zh-tw'
                              ? '公司介紹'
                              : 'Company Profile',
                    href: '/about',
                },
                {
                    name:
                        currentLang === 'zh'
                            ? '新闻动态'
                            : currentLang === 'zh-tw'
                              ? '新聞動態'
                              : 'News & Events',
                    href: '/news',
                },
                {
                    name:
                        currentLang === 'zh'
                            ? '招贤纳士'
                            : currentLang === 'zh-tw'
                              ? '招賢納士'
                              : 'Careers',
                    href: '/careers',
                },
                {
                    name:
                        currentLang === 'zh'
                            ? '合作伙伴'
                            : currentLang === 'zh-tw'
                              ? '合作夥伴'
                              : 'Partners',
                    href: '/partners',
                },
                {
                    name:
                        currentLang === 'zh'
                            ? '联系我们'
                            : currentLang === 'zh-tw'
                              ? '聯絡我們'
                              : 'Contact Us',
                    href: '/contact',
                },
            ],
        },
    };

    const contactInfo = [
        {
            icon: <Phone className="w-5 h-5" />,
            label:
                currentLang === 'zh'
                    ? '客服热线'
                    : currentLang === 'zh-tw'
                      ? '客服熱線'
                      : 'Hotline',
            value: '+86 400-123-4567',
            href: 'tel:+864001234567',
        },
        {
            icon: <Mail className="w-5 h-5" />,
            label:
                currentLang === 'zh' ? '邮箱地址' : currentLang === 'zh-tw' ? '郵箱地址' : 'Email',
            value: 'support@cloudpro.com',
            href: 'mailto:support@cloudpro.com',
        },
        {
            icon: <MapPin className="w-5 h-5" />,
            label:
                currentLang === 'zh'
                    ? '公司地址'
                    : currentLang === 'zh-tw'
                      ? '公司地址'
                      : 'Address',
            value:
                currentLang === 'zh'
                    ? '北京市朝阳区科技园区'
                    : currentLang === 'zh-tw'
                      ? '北京市朝陽區科技園區'
                      : 'Beijing Chaoyang Tech Park',
            href: '#',
        },
    ];

    const socialLinks = [
        { icon: <Facebook className="w-5 h-5" />, href: '#', label: 'Facebook' },
        { icon: <Twitter className="w-5 h-5" />, href: '#', label: 'Twitter' },
        { icon: <Linkedin className="w-5 h-5" />, href: '#', label: 'LinkedIn' },
        { icon: <Youtube className="w-5 h-5" />, href: '#', label: 'YouTube' },
    ];

    return (
        <footer className="bg-gradient-to-br from-amber-950 via-amber-900 to-yellow-900 text-yellow-100 relative">
            {/* Main Footer Content */}
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-8">
                    {/* Company Info */}
                    <div className="lg:col-span-2">
                        <div className="mb-6">
                            <h3 className="text-2xl font-bold text-yellow-300 mb-4">CloudPro</h3>
                            <p className="text-yellow-200 leading-relaxed mb-6">
                                {currentLang === 'zh'
                                    ? '专业的云服务器代理商，致力于为企业提供稳定、高效、安全的云计算解决方案，助力数字化转型。'
                                    : currentLang === 'zh-tw'
                                      ? '專業的雲伺服器代理商，致力於為企業提供穩定、高效、安全的雲端運算解決方案，助力數位化轉型。'
                                      : 'Professional cloud server reseller dedicated to providing stable, efficient, and secure cloud computing solutions for enterprises.'}
                            </p>

                            {/* Contact Info */}
                            <div className="space-y-3">
                                {contactInfo.map((contact, index) => (
                                    <a
                                        key={index}
                                        href={contact.href}
                                        className="flex items-center space-x-3 text-yellow-200 hover:text-yellow-300 transition-colors duration-200 group"
                                    >
                                        <div className="text-yellow-400 group-hover:text-yellow-300 transition-colors">
                                            {contact.icon}
                                        </div>
                                        <div>
                                            <div className="text-xs text-yellow-300 font-medium">
                                                {contact.label}
                                            </div>
                                            <div className="text-sm">{contact.value}</div>
                                        </div>
                                    </a>
                                ))}
                            </div>
                        </div>
                    </div>

                    {/* Products Links */}
                    <div>
                        <h4 className="text-lg font-semibold text-yellow-300 mb-4">
                            {footerLinks.products.title}
                        </h4>
                        <ul className="space-y-2">
                            {footerLinks.products.links.map((link, index) => (
                                <li key={index}>
                                    <a
                                        href={link.href}
                                        className="text-yellow-200 hover:text-yellow-300 transition-colors duration-200 text-sm"
                                    >
                                        {link.name}
                                    </a>
                                </li>
                            ))}
                        </ul>
                    </div>

                    {/* Solutions Links */}
                    <div>
                        <h4 className="text-lg font-semibold text-yellow-300 mb-4">
                            {footerLinks.solutions.title}
                        </h4>
                        <ul className="space-y-2">
                            {footerLinks.solutions.links.map((link, index) => (
                                <li key={index}>
                                    <a
                                        href={link.href}
                                        className="text-yellow-200 hover:text-yellow-300 transition-colors duration-200 text-sm"
                                    >
                                        {link.name}
                                    </a>
                                </li>
                            ))}
                        </ul>
                    </div>

                    {/* Support Links */}
                    <div>
                        <h4 className="text-lg font-semibold text-yellow-300 mb-4">
                            {footerLinks.support.title}
                        </h4>
                        <ul className="space-y-2">
                            {footerLinks.support.links.map((link, index) => (
                                <li key={index}>
                                    <a
                                        href={link.href}
                                        className="text-yellow-200 hover:text-yellow-300 transition-colors duration-200 text-sm"
                                    >
                                        {link.name}
                                    </a>
                                </li>
                            ))}
                        </ul>
                    </div>

                    {/* Company Links */}
                    <div>
                        <h4 className="text-lg font-semibold text-yellow-300 mb-4">
                            {footerLinks.company.title}
                        </h4>
                        <ul className="space-y-2">
                            {footerLinks.company.links.map((link, index) => (
                                <li key={index}>
                                    <a
                                        href={link.href}
                                        className="text-yellow-200 hover:text-yellow-300 transition-colors duration-200 text-sm"
                                    >
                                        {link.name}
                                    </a>
                                </li>
                            ))}
                        </ul>
                    </div>
                </div>

                {/* Newsletter Subscription */}
                <div className="mt-12 pt-8 border-t border-yellow-800">
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
                        <div>
                            <h4 className="text-lg font-semibold text-yellow-300 mb-2">
                                {currentLang === 'zh'
                                    ? '订阅我们的资讯'
                                    : currentLang === 'zh-tw'
                                      ? '訂閱我們的資訊'
                                      : 'Subscribe to Our Newsletter'}
                            </h4>
                            <p className="text-yellow-200 text-sm">
                                {currentLang === 'zh'
                                    ? '获取最新的产品更新、技术资讯和优惠活动信息'
                                    : currentLang === 'zh-tw'
                                      ? '獲取最新的產品更新、技術資訊和優惠活動信息'
                                      : 'Get the latest product updates, technical insights, and promotional offers'}
                            </p>
                        </div>
                        <div className="flex flex-col sm:flex-row gap-3">
                            <input
                                type="email"
                                placeholder={
                                    currentLang === 'zh'
                                        ? '请输入您的邮箱地址'
                                        : currentLang === 'zh-tw'
                                          ? '請輸入您的郵箱地址'
                                          : 'Enter your email address'
                                }
                                className="flex-1 px-4 py-3 bg-amber-800 border border-yellow-600 rounded-lg text-yellow-100 placeholder-yellow-300 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:border-transparent"
                            />

                            <button className="px-6 py-3 bg-yellow-500 hover:bg-yellow-600 text-white font-semibold rounded-lg transition-colors duration-200 whitespace-nowrap">
                                {currentLang === 'zh'
                                    ? '订阅'
                                    : currentLang === 'zh-tw'
                                      ? '訂閱'
                                      : 'Subscribe'}
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            {/* Bottom Bar */}
            <div className="border-t border-yellow-800 bg-amber-950">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
                    <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
                        {/* Copyright */}
                        <div className="text-sm text-yellow-300">
                            © 2024 CloudPro.{' '}
                            {currentLang === 'zh'
                                ? '版权所有'
                                : currentLang === 'zh-tw'
                                  ? '版權所有'
                                  : 'All rights reserved'}
                            .<span className="mx-2">|</span>
                            <a href="/privacy" className="hover:text-yellow-200 transition-colors">
                                {currentLang === 'zh'
                                    ? '隐私政策'
                                    : currentLang === 'zh-tw'
                                      ? '隱私政策'
                                      : 'Privacy Policy'}
                            </a>
                            <span className="mx-2">|</span>
                            <a href="/terms" className="hover:text-yellow-200 transition-colors">
                                {currentLang === 'zh'
                                    ? '服务条款'
                                    : currentLang === 'zh-tw'
                                      ? '服務條款'
                                      : 'Terms of Service'}
                            </a>
                        </div>

                        {/* Social Links */}
                        <div className="flex items-center space-x-4">
                            <span className="text-sm text-yellow-300 mr-2">
                                {currentLang === 'zh'
                                    ? '关注我们:'
                                    : currentLang === 'zh-tw'
                                      ? '關注我們:'
                                      : 'Follow us:'}
                            </span>
                            {socialLinks.map((social, index) => (
                                <a
                                    key={index}
                                    href={social.href}
                                    className="text-yellow-300 hover:text-yellow-200 transition-colors duration-200 p-2 hover:bg-amber-800 rounded-full"
                                    aria-label={social.label}
                                >
                                    {social.icon}
                                </a>
                            ))}
                        </div>
                    </div>
                </div>
            </div>

            {/* Scroll to Top Button */}
            {showScrollTop && (
                <button
                    onClick={scrollToTop}
                    className="fixed bottom-8 right-8 p-3 bg-yellow-500 hover:bg-yellow-600 text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-200 transform hover:scale-110 z-50"
                    aria-label="Scroll to top"
                >
                    <ArrowUp className="w-5 h-5" />
                </button>
            )}
        </footer>
    );
}