import { Link, usePage } from '@inertiajs/react';
import {
    ChevronRight,
    Facebook,
    Instagram,
    Linkedin,
    Mail,
    MapPin,
    Menu,
    MessageCircle,
    Phone,
    Send,
    ShoppingBag,
    Sparkles,
    Twitter,
    Youtube,
    X,
} from 'lucide-react';
import { useState } from 'react';
import type { PropsWithChildren } from 'react';
import FrontendProductSearch from '@/components/frontend-product-search';
import { Button } from '@/components/ui/button';

type PublicPage = {
    id: number;
    title: string;
    slug: string;
};

type AppSettings = {
    shop_name: string;
    logo_url: string | null;
    support_email?: string | null;
    support_phone?: string | null;
    address?: string | null;
    facebook_url?: string | null;
    instagram_url?: string | null;
    x_url?: string | null;
    linkedin_url?: string | null;
    youtube_url?: string | null;
    whatsapp_url?: string | null;
    telegram_url?: string | null;
};

type PageProps = {
    appSettings?: AppSettings;
    settings?: AppSettings;
    pages?: PublicPage[];
};

const primaryLinks = [
    { label: 'Home', href: '/' },
    { label: 'Shop', href: '/shop' },
    { label: 'Blog', href: '/blog' },
    { label: 'About', href: '/about' },
    { label: 'Contact', href: '/contact' },
];

export default function FrontendLayout({ children }: PropsWithChildren) {
    const { appSettings, settings, pages = [] } = usePage<PageProps>().props;
    const [mobileOpen, setMobileOpen] = useState(false);
    const shopName =
        settings?.shop_name ?? appSettings?.shop_name ?? 'Marketplace';
    const logoUrl = settings?.logo_url ?? appSettings?.logo_url;
    const contact = settings ?? appSettings;
    const socialLinks = [
        { label: 'Facebook', href: contact?.facebook_url, icon: Facebook },
        { label: 'Instagram', href: contact?.instagram_url, icon: Instagram },
        { label: 'X', href: contact?.x_url, icon: Twitter },
        { label: 'LinkedIn', href: contact?.linkedin_url, icon: Linkedin },
        { label: 'YouTube', href: contact?.youtube_url, icon: Youtube },
        {
            label: 'WhatsApp',
            href: contact?.whatsapp_url,
            icon: MessageCircle,
        },
        { label: 'Telegram', href: contact?.telegram_url, icon: Send },
    ].filter((link) => link.href);

    return (
        <div className="min-h-svh bg-[#fbfcfe] text-slate-950 dark:bg-slate-950 dark:text-slate-50">
            <div className="bg-slate-950 text-slate-300">
                <div className="mx-auto flex max-w-7xl items-center justify-between gap-4 px-4 py-2 text-xs">
                    <div className="flex items-center gap-2">
                        <Sparkles className="size-3.5 text-cyan-400" />
                        Discover products and compare store availability
                    </div>
                    <div className="hidden items-center gap-5 sm:flex">
                        {contact?.support_phone && (
                            <span className="flex items-center gap-1.5">
                                <Phone className="size-3" />
                                {contact.support_phone}
                            </span>
                        )}
                        {contact?.support_email && (
                            <span className="flex items-center gap-1.5">
                                <Mail className="size-3" />
                                {contact.support_email}
                            </span>
                        )}
                    </div>
                </div>
            </div>

            <header className="sticky top-0 z-40 border-b border-slate-200/80 bg-white/95 backdrop-blur-xl dark:border-slate-800 dark:bg-slate-950/95">
                <div className="mx-auto flex max-w-7xl items-center gap-4 px-4 py-3">
                    <Link href="/" className="flex shrink-0 items-center gap-3">
                        <span className="flex size-11 items-center justify-center overflow-hidden rounded-xl bg-slate-950 text-white shadow-lg shadow-slate-950/15 dark:bg-white dark:text-slate-950">
                            {logoUrl ? (
                                <img
                                    src={logoUrl}
                                    alt={shopName}
                                    className="size-9 object-contain"
                                />
                            ) : (
                                <ShoppingBag className="size-5" />
                            )}
                        </span>
                        <span className="hidden text-lg font-bold tracking-tight sm:block">
                            {shopName}
                        </span>
                    </Link>

                    <div className="mx-auto max-w-2xl flex-1">
                        <FrontendProductSearch />
                    </div>

                    <Button
                        variant="outline"
                        size="icon"
                        className="shrink-0 rounded-full lg:hidden"
                        onClick={() => setMobileOpen(!mobileOpen)}
                    >
                        {mobileOpen ? <X /> : <Menu />}
                        <span className="sr-only">Toggle menu</span>
                    </Button>
                </div>

                <div className="border-t border-slate-100 dark:border-slate-800">
                    <nav className="mx-auto hidden max-w-7xl items-center gap-7 px-4 py-3 text-sm font-medium lg:flex">
                        {primaryLinks.map((link) => (
                            <Link
                                key={link.href}
                                href={link.href}
                                className="transition-colors hover:text-cyan-600 dark:hover:text-cyan-400"
                            >
                                {link.label}
                            </Link>
                        ))}
                        {pages.map((page) => (
                            <Link
                                key={page.id}
                                href={`/${page.slug}`}
                                className="transition-colors hover:text-cyan-600 dark:hover:text-cyan-400"
                            >
                                {page.title}
                            </Link>
                        ))}
                    </nav>

                    {mobileOpen && (
                        <nav className="grid gap-1 px-4 py-3 lg:hidden">
                            {[
                                ...primaryLinks,
                                ...pages.map((page) => ({
                                    label: page.title,
                                    href: `/${page.slug}`,
                                })),
                            ].map((link) => (
                                <Link
                                    key={link.href}
                                    href={link.href}
                                    onClick={() => setMobileOpen(false)}
                                    className="flex items-center justify-between rounded-xl px-3 py-3 text-sm font-medium hover:bg-slate-100 dark:hover:bg-slate-900"
                                >
                                    {link.label}
                                    <ChevronRight className="size-4 text-muted-foreground" />
                                </Link>
                            ))}
                        </nav>
                    )}
                </div>
            </header>

            <main>{children}</main>

            <footer className="mt-16 bg-slate-950 text-slate-300">
                <div className="mx-auto grid max-w-7xl gap-10 px-4 py-14 md:grid-cols-[1.2fr_0.8fr_0.8fr]">
                    <div>
                        <div className="flex items-center gap-3 text-white">
                            <span className="flex size-11 items-center justify-center rounded-xl bg-white/10">
                                <ShoppingBag className="size-5" />
                            </span>
                            <span className="text-xl font-bold">
                                {shopName}
                            </span>
                        </div>
                        <p className="mt-4 max-w-sm text-sm leading-6 text-slate-400">
                            Search the complete catalog, compare availability,
                            and see exactly which store has what you need.
                        </p>
                        {socialLinks.length > 0 && (
                            <div className="mt-5 flex flex-wrap gap-2">
                                {socialLinks.map((link) => (
                                    <a
                                        key={link.label}
                                        href={link.href ?? undefined}
                                        target="_blank"
                                        rel="noreferrer"
                                        aria-label={link.label}
                                        className="flex size-9 items-center justify-center rounded-full bg-white/10 transition hover:bg-cyan-500 hover:text-slate-950"
                                    >
                                        <link.icon className="size-4" />
                                    </a>
                                ))}
                            </div>
                        )}
                    </div>

                    <div>
                        <h2 className="font-semibold text-white">Explore</h2>
                        <div className="mt-4 grid gap-2 text-sm">
                            {primaryLinks.slice(1).map((link) => (
                                <Link
                                    key={link.href}
                                    href={link.href}
                                    className="w-fit hover:text-white"
                                >
                                    {link.label}
                                </Link>
                            ))}
                        </div>
                    </div>

                    <div>
                        <h2 className="font-semibold text-white">
                            Get in touch
                        </h2>
                        <div className="mt-4 grid gap-3 text-sm text-slate-400">
                            {contact?.support_phone && (
                                <div className="flex gap-2">
                                    <Phone className="mt-0.5 size-4 shrink-0" />
                                    {contact.support_phone}
                                </div>
                            )}
                            {contact?.support_email && (
                                <div className="flex gap-2">
                                    <Mail className="mt-0.5 size-4 shrink-0" />
                                    {contact.support_email}
                                </div>
                            )}
                            {contact?.address && (
                                <div className="flex gap-2">
                                    <MapPin className="mt-0.5 size-4 shrink-0" />
                                    {contact.address}
                                </div>
                            )}
                        </div>
                    </div>
                </div>
                <div className="border-t border-white/10">
                    <div className="mx-auto max-w-7xl px-4 py-5 text-xs text-slate-500">
                        © {new Date().getFullYear()} {shopName}. Product
                        availability is shown by store.
                    </div>
                </div>
            </footer>
        </div>
    );
}