'use client';

import React from 'react';
import { Github, Twitter, Linkedin, Mail } from 'lucide-react';
import { BrandLogo } from '../ui/brand-logo';
import { useTranslation } from '@/hooks/use-translation';
import { cn } from '@/lib/utils';

/**
 * EN: Footer props
 * VI: Props cho Footer
 */
export interface FooterProps {
    /** Additional CSS classes / CSS classes bổ sung */
    className?: string;
}

/**
 * EN: Footer - Responsive footer with brand elements, navigation links, and social media
 * VI: Footer - Footer responsive với brand elements, navigation links và social media
 * 
 * Features:
 * - Responsive design (mobile: stacked, desktop: 4-column grid)
 * - Brand logo and tagline
 * - Navigation links (Product, Company, Support)
 * - Social media links
 * - Copyright notice with dynamic year
 * - i18n support (EN/VI)
 * - Accessibility (ARIA labels, semantic HTML)
 * 
 * @example
 * ```tsx
 * <Footer />
 * ```
 */
export function Footer({ className }: FooterProps) {
    // EN: Translation hook / VI: Hook translation
    const { t } = useTranslation();

    // EN: Current year for copyright / VI: Năm hiện tại cho copyright
    const currentYear = new Date().getFullYear();

    // EN: Navigation link sections / VI: Các section navigation links
    const navigationSections = [
        {
            title: t('footer.product'),
            links: [
                { label: t('footer.features'), href: '#features' },
                { label: t('footer.pricing'), href: '#pricing' },
                { label: t('footer.documentation'), href: '#docs' },
            ],
        },
        {
            title: t('footer.company'),
            links: [
                { label: t('footer.about'), href: '#about' },
                { label: t('footer.blog'), href: '#blog' },
                { label: t('footer.careers'), href: '#careers' },
            ],
        },
        {
            title: t('footer.support'),
            links: [
                { label: t('footer.helpCenter'), href: '#help' },
                { label: t('footer.contact'), href: '#contact' },
                { label: t('footer.status'), href: '#status' },
            ],
        },
    ];

    // EN: Social media links / VI: Links mạng xã hội
    const socialLinks = [
        { icon: Github, label: 'GitHub', href: 'https://github.com/goodgo', ariaLabel: 'Visit our GitHub' },
        { icon: Twitter, label: 'Twitter', href: 'https://twitter.com/goodgo', ariaLabel: 'Follow us on Twitter' },
        { icon: Linkedin, label: 'LinkedIn', href: 'https://linkedin.com/company/goodgo', ariaLabel: 'Connect on LinkedIn' },
        { icon: Mail, label: 'Email', href: 'mailto:hello@goodgo.com', ariaLabel: 'Send us an email' },
    ];

    return (
        <footer
            className={cn(
                'border-t border-border-primary bg-bg-secondary',
                'transition-all duration-normal',
                className
            )}
        >
            <div className="container-responsive py-12">
                {/* EN: Main footer content / VI: Nội dung footer chính */}
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
                    {/* EN: Column 1 - Brand / VI: Cột 1 - Thương hiệu */}
                    <div className="space-y-4">
                        <BrandLogo variant="wordmark" size="sm" />
                        <p className="text-sm text-text-secondary max-w-xs">
                            {t('footer.tagline')}
                        </p>

                        {/* EN: Social media links / VI: Links mạng xã hội */}
                        <div className="flex gap-3">
                            <p className="text-sm text-text-secondary sr-only">
                                {t('footer.followUs')}
                            </p>
                            {socialLinks.map((social) => {
                                const Icon = social.icon;
                                return (
                                    <a
                                        key={social.label}
                                        href={social.href}
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        aria-label={social.ariaLabel}
                                        className={cn(
                                            'p-2 rounded-md',
                                            'text-text-secondary hover:text-brand-primary',
                                            'bg-bg-tertiary hover:bg-bg-primary',
                                            'transition-colors duration-fast',
                                            'focus-visible:outline-2 focus-visible:outline-accent-primary',
                                            'btn-touch'
                                        )}
                                    >
                                        <Icon className="h-5 w-5" />
                                    </a>
                                );
                            })}
                        </div>
                    </div>

                    {/* EN: Columns 2-4 - Navigation sections / VI: Cột 2-4 - Các section navigation */}
                    {navigationSections.map((section) => (
                        <div key={section.title} className="space-y-4">
                            <h3 className="text-sm font-semibold text-text-primary uppercase tracking-wider">
                                {section.title}
                            </h3>
                            <ul className="space-y-3">
                                {section.links.map((link) => (
                                    <li key={link.label}>
                                        <a
                                            href={link.href}
                                            className={cn(
                                                'text-sm text-text-secondary hover:text-brand-primary',
                                                'transition-colors duration-fast',
                                                'focus-visible:outline-2 focus-visible:outline-accent-primary',
                                                'inline-block'
                                            )}
                                        >
                                            {link.label}
                                        </a>
                                    </li>
                                ))}
                            </ul>
                        </div>
                    ))}
                </div>

                {/* EN: Bottom bar - Copyright and legal links / VI: Bottom bar - Copyright và legal links */}
                <div className="border-t border-border-primary pt-8">
                    <div className="flex flex-col md:flex-row justify-between items-center gap-4">
                        {/* EN: Copyright notice / VI: Thông báo copyright */}
                        <p className="text-sm text-text-tertiary text-center md:text-left">
                            {t('footer.copyright', { year: currentYear })}
                        </p>

                        {/* EN: Legal links / VI: Legal links */}
                        <div className="flex gap-6">
                            <a
                                href="#privacy"
                                className={cn(
                                    'text-sm text-text-tertiary hover:text-white',
                                    'transition-colors duration-fast',
                                    'focus-visible:outline-2 focus-visible:outline-accent-primary'
                                )}
                            >
                                {t('footer.privacyPolicy')}
                            </a>
                            <a
                                href="#terms"
                                className={cn(
                                    'text-sm text-text-tertiary hover:text-white',
                                    'transition-colors duration-fast',
                                    'focus-visible:outline-2 focus-visible:outline-accent-primary'
                                )}
                            >
                                {t('footer.termsOfService')}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    );
}

/**
 * EN: Minimal Footer - Simplified version with just copyright
 * VI: Footer tối giản - Phiên bản đơn giản chỉ có copyright
 * 
 * @example
 * ```tsx
 * <MinimalFooter />
 * ```
 */
export function MinimalFooter({ className }: FooterProps) {
    const { t } = useTranslation();
    const currentYear = new Date().getFullYear();

    return (
        <footer
            className={cn(
                'border-t border-border-primary bg-bg-secondary',
                className
            )}
        >
            <div className="container-responsive py-6">
                <p className="text-sm text-text-secondary text-center">
                    {t('footer.copyright', { year: currentYear })}
                </p>
            </div>
        </footer>
    );
}
