import { Link, usePage } from '@inertiajs/react';
import { Facebook, Instagram, Phone, Youtube } from 'lucide-react';
import { type ReactNode } from 'react';

import SiteHeader from '@/components/site-header';
import { LangProvider, useLang } from '@/lib/lang';
import { type SharedData } from '@/types';

function LayoutInner({ children, headerVariant }: { children: ReactNode; headerVariant: 'default' | 'checkout' | 'success' }) {
    const { siteSettings } = usePage<SharedData>().props;
    const { t } = useLang();

    const s = siteSettings;
    const phone = s?.phone ?? '';
    const footerDesc = s?.footer_desc ?? '';
    const copyright = (s?.copyright ?? '© {year} Kapor Bikreta. All rights reserved.').replace('{year}', String(new Date().getFullYear()));
    const showAbout = s?.show_about ?? true;
    const showBlog = s?.show_blog ?? true;
    const logoPath = s?.logo_path;
    const siteName = s?.site_name ?? 'Kapor Bikreta';

    return (
        <div className="flex min-h-screen flex-col bg-white">
            <SiteHeader variant={headerVariant} />

            {/* Main content */}
            <main className="flex-1">{children}</main>

            {/* Footer */}
            <footer className="border-t bg-slate-900 text-slate-300">
                <div className="mx-auto max-w-7xl px-4 py-10">
                    <div className="grid gap-8 md:grid-cols-4">
                        {/* Brand */}
                        <div className="md:col-span-2">
                            <div className="mb-3 text-lg font-bold text-white">
                                {logoPath ? (
                                    <img src={`/storage/${logoPath}`} alt={siteName} className="h-8 w-auto brightness-0 invert" />
                                ) : (
                                    <>⚡ {siteName}</>
                                )}
                            </div>
                            {footerDesc ? (
                                <p className="text-sm leading-relaxed">{footerDesc}</p>
                            ) : (
                                <p className="text-sm">{t.nav.trusted}</p>
                            )}
                            {/* Social icons */}
                            {(s?.facebook || s?.instagram || s?.youtube) && (
                                <div className="mt-4 flex gap-3">
                                    {s?.facebook && (
                                        <a href={s.facebook} target="_blank" rel="noopener noreferrer" className="text-slate-400 transition hover:text-white">
                                            <Facebook size={18} />
                                        </a>
                                    )}
                                    {s?.instagram && (
                                        <a href={s.instagram} target="_blank" rel="noopener noreferrer" className="text-slate-400 transition hover:text-white">
                                            <Instagram size={18} />
                                        </a>
                                    )}
                                    {s?.youtube && (
                                        <a href={s.youtube} target="_blank" rel="noopener noreferrer" className="text-slate-400 transition hover:text-white">
                                            <Youtube size={18} />
                                        </a>
                                    )}
                                </div>
                            )}
                        </div>

                        {/* Quick Links */}
                        <div>
                            <div className="mb-3 font-semibold text-white">{t.nav.quickLinks}</div>
                            <ul className="space-y-1.5 text-sm">
                                <li><Link href="/" className="hover:text-white transition">{t.common.home}</Link></li>
                                <li><Link href="/products" className="hover:text-white transition">{t.common.products}</Link></li>
                                <li><Link href="/fragrance" className="hover:text-white transition">Fragrance</Link></li>
                                <li><Link href="/cart" className="hover:text-white transition">{t.common.cart}</Link></li>
                                <li><Link href="/track-order" className="hover:text-white transition">Track Order</Link></li>
                                {showAbout && <li><Link href="/about" className="hover:text-white transition">{t.nav.about ?? 'About Us'}</Link></li>}
                                {showBlog && <li><Link href="/blog" className="hover:text-white transition">{t.nav.blog ?? 'Blog'}</Link></li>}
                            </ul>
                        </div>

                        {/* Contact */}
                        <div>
                            <div className="mb-3 font-semibold text-white">{t.nav.contact}</div>
                            {phone && (
                                <div className="flex items-center gap-2 text-sm">
                                    <Phone size={14} />
                                    <span>{phone}</span>
                                </div>
                            )}
                            <p className="mt-1 text-sm">{t.nav.available}</p>
                        </div>
                    </div>

                    <div className="mt-8 border-t border-slate-700 pt-4 text-center text-xs text-slate-500">
                        {copyright}
                    </div>
                </div>
            </footer>
        </div>
    );
}

export default function FrontendLayout({ children, headerVariant = 'default' }: { children: ReactNode; headerVariant?: 'default' | 'checkout' | 'success' }) {
    return (
        <LangProvider>
            <LayoutInner headerVariant={headerVariant}>{children}</LayoutInner>
        </LangProvider>
    );
}