import { Icon } from '@/components/icon';
import { Button } from '@/components/ui/button';
import { Separator } from '@/components/ui/separator';
import { dashboard, login, register } from '@/routes';
import { Link, usePage } from '@inertiajs/react';
import { Facebook, Instagram, Linkedin, Mail, MapPin, Phone, Twitter, Youtube } from 'lucide-react';
import { useLaravelReactI18n } from 'laravel-react-i18n';
import AppLogo from './app-logo';
import LanguageSwitcher from './language-switcher';

const footerLinks = {
    product: [
        { name: 'Features', href: '/features' },
        { name: 'Pricing', href: '/pricing' },
        { name: 'API', href: '/api' },
        { name: 'Documentation', href: '/docs' },
    ],
    company: [
        { name: 'About', href: '/about' },
        { name: 'Blog', href: '/blog' },
        { name: 'Careers', href: '/careers' },
        { name: 'Press', href: '/press' },
    ],
    support: [
        { name: 'Help Center', href: '/help' },
        { name: 'Contact', href: '/contact' },
        { name: 'Status', href: '/status' },
        { name: 'Community', href: '/community' },
    ],
    legal: [
        { name: 'Privacy Policy', href: '/privacy' },
        { name: 'Terms of Service', href: '/terms' },
        { name: 'Cookie Policy', href: '/cookies' },
        { name: 'GDPR', href: '/gdpr' },
    ],
};

const socialLinks = [
    { name: 'Twitter', href: 'https://twitter.com/smartsense', icon: Twitter },
    { name: 'Facebook', href: 'https://facebook.com/smartsense', icon: Facebook },
    { name: 'Instagram', href: 'https://instagram.com/smartsense', icon: Instagram },
    { name: 'LinkedIn', href: 'https://linkedin.com/company/smartsense', icon: Linkedin },
    { name: 'YouTube', href: 'https://youtube.com/smartsense', icon: Youtube },
];

export function AppFooter() {
    const { auth } = usePage<{ auth: { user: any } }>().props;
    const { t } = useLaravelReactI18n();
    const isAuthenticated = !!auth.user;

    return (
        <footer className="bg-background border-t border-border">
            <div className="mx-auto max-w-[1400px] px-4 py-12 sm:px-6 lg:px-8">
                {/* Main Footer Content */}
                <div className="grid grid-cols-1 gap-8 lg:grid-cols-4">
                    {/* Company Info */}
                    <div className="lg:col-span-1">
                        <div className="flex items-center space-x-2 mb-4">
                            <AppLogo />
                        </div>
                        <p className="text-sm text-muted-foreground mb-4 max-w-xs">
                            {t('Smart software applications for tourism. Discover amazing places, plan your journey, and get local insights.')}
                        </p>
                        <div className="flex space-x-4">
                            {socialLinks.map((social) => (
                                <a
                                    key={social.name}
                                    href={social.href}
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    className="text-muted-foreground hover:text-foreground transition-colors"
                                    aria-label={social.name}
                                >
                                    <Icon iconNode={social.icon} className="h-5 w-5" />
                                </a>
                            ))}
                        </div>
                    </div>

                    {/* Product Links */}
                    <div>
                        <h3 className="text-sm font-semibold text-foreground mb-4">{t('Product')}</h3>
                        <ul className="space-y-3">
                            {footerLinks.product.map((link) => (
                                <li key={link.name}>
                                    <Link
                                        href={link.href}
                                        className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                                    >
                                        {t(link.name)}
                                    </Link>
                                </li>
                            ))}
                        </ul>
                    </div>

                    {/* Company Links */}
                    <div>
                        <h3 className="text-sm font-semibold text-foreground mb-4">{t('Company')}</h3>
                        <ul className="space-y-3">
                            {footerLinks.company.map((link) => (
                                <li key={link.name}>
                                    <Link
                                        href={link.href}
                                        className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                                    >
                                        {t(link.name)}
                                    </Link>
                                </li>
                            ))}
                        </ul>
                    </div>

                    {/* Support & Legal */}
                    <div className="space-y-6">
                        <div>
                            <h3 className="text-sm font-semibold text-foreground mb-4">{t('Support')}</h3>
                            <ul className="space-y-3">
                                {footerLinks.support.map((link) => (
                                    <li key={link.name}>
                                        <Link
                                            href={link.href}
                                            className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                                        >
                                            {t(link.name)}
                                        </Link>
                                    </li>
                                ))}
                            </ul>
                        </div>
                        <div>
                            <h3 className="text-sm font-semibold text-foreground mb-4">{t('Legal')}</h3>
                            <ul className="space-y-3">
                                {footerLinks.legal.map((link) => (
                                    <li key={link.name}>
                                        <Link
                                            href={link.href}
                                            className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                                        >
                                            {t(link.name)}
                                        </Link>
                                    </li>
                                ))}
                            </ul>
                        </div>
                    </div>
                </div>

                <Separator className="my-8" />

                {/* Bottom Section */}
                <div className="grid grid-cols-1 gap-6 lg:grid-cols-3 lg:items-center">
                    {/* Contact Info */}
                    <div className="space-y-3">
                        <div className="flex items-center space-x-2 text-sm text-muted-foreground">
                            <Icon iconNode={Mail} className="h-4 w-4" />
                            <span>hello@smartsense.com</span>
                        </div>
                        <div className="flex items-center space-x-2 text-sm text-muted-foreground">
                            <Icon iconNode={Phone} className="h-4 w-4" />
                            <span>+1 (555) 123-4567</span>
                        </div>
                        <div className="flex items-center space-x-2 text-sm text-muted-foreground">
                            <Icon iconNode={MapPin} className="h-4 w-4" />
                            <span>123 Tourism St, Travel City, TC 12345</span>
                        </div>
                    </div>

                    {/* Newsletter Signup */}
                    <div className="lg:col-span-1">
                        <h3 className="text-sm font-semibold text-foreground mb-3">{t('Stay updated')}</h3>
                        <p className="text-sm text-muted-foreground mb-3">
                            {t('Get the latest updates and insights delivered to your inbox.')}
                        </p>
                        <div className="flex space-x-2">
                            <input
                                type="email"
                                placeholder={t('Enter your email')}
                                className="flex-1 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                            />
                            <Button size="sm" className="px-4">
                                {t('Subscribe')}
                            </Button>
                        </div>
                    </div>

                    {/* CTA Buttons */}
                    <div className="lg:col-span-1 lg:text-right">
                        {!isAuthenticated ? (
                            <div className="flex flex-col space-y-2 sm:flex-row sm:space-y-0 sm:space-x-2 lg:justify-end">
                                <Button variant="outline" size="sm" asChild>
                                    <Link href={login()}>{t('Sign In')}</Link>
                                </Button>
                                <Button size="sm" asChild>
                                    <Link href={register()}>{t('Get Started')}</Link>
                                </Button>
                            </div>
                        ) : (
                            <Button variant="outline" size="sm" asChild>
                                <Link href={dashboard()}>{t('Go to Dashboard')}</Link>
                            </Button>
                        )}
                    </div>
                </div>

                {/* Copyright */}
                <Separator className="my-8" />
                <div className="flex flex-col items-center justify-between space-y-4 text-center lg:flex-row lg:space-y-0">
                    <p className="text-sm text-muted-foreground">
                        {t('© {year} Smartsense. All rights reserved.', { year: new Date().getFullYear() })}
                    </p>
                    <div className="flex items-center">
                        <LanguageSwitcher />
                    </div>
                </div>
            </div>
        </footer>
    );
}