import { Head, Link, usePage } from '@inertiajs/react';
import { useState, type PropsWithChildren } from 'react';

type NavItem = {
    href: string;
    label: string;
};

const navItems: NavItem[] = [
    { href: '/', label: 'Beranda' },
    { href: '/tentang', label: 'Tentang' },
    { href: '/layanan', label: 'Layanan' },
    { href: '/lacak', label: 'Lacak' },
    { href: '/kontak', label: 'Kontak' },
];

const socialLabels: Record<string, string> = {
    facebook: 'Facebook',
    instagram: 'Instagram',
    twitter: 'X',
    linkedin: 'LinkedIn',
};

export default function PublicLayout({ children }: PropsWithChildren) {
    const { company, appUrl, name } = usePage().props;
    const pageUrl = usePage().url;
    const year = new Date().getFullYear();
    const [open, setOpen] = useState(false);

    const path = pageUrl.split('?')[0] || '/';
    const canonical = `${appUrl}${path === '/' ? '/' : path}`;
    const ogImage = `${appUrl}/logo-stb.png`;
    const isTracking = path.startsWith('/lacak/');
    const socialEntries = Object.entries(company.social ?? {}).filter(
        ([, url]) => typeof url === 'string' && url.length > 0,
    );

    const isActive = (href: string): boolean => {
        if (href === '/') {
            return pageUrl === '/' || pageUrl.startsWith('/?');
        }

        return pageUrl.startsWith(href);
    };

    return (
        <div className="flex min-h-screen flex-col bg-stb-surface text-stb-ink antialiased">
            {!isTracking ? (
                <Head>
                    <meta head-key="description" name="description" content={company.description} />
                    <link head-key="canonical" rel="canonical" href={canonical} />
                    <meta head-key="og:type" property="og:type" content="website" />
                    <meta head-key="og:site_name" property="og:site_name" content={name} />
                    <meta head-key="og:title" property="og:title" content={name} />
                    <meta
                        head-key="og:description"
                        property="og:description"
                        content={company.description}
                    />
                    <meta head-key="og:url" property="og:url" content={canonical} />
                    <meta head-key="og:image" property="og:image" content={ogImage} />
                    <meta head-key="twitter:card" name="twitter:card" content="summary" />
                    <meta head-key="twitter:title" name="twitter:title" content={name} />
                    <meta
                        head-key="twitter:description"
                        name="twitter:description"
                        content={company.description}
                    />
                    <meta head-key="twitter:image" name="twitter:image" content={ogImage} />
                </Head>
            ) : null}

            <a
                href="#content"
                className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-50 focus:rounded-[var(--stb-control-sm-radius)] focus:bg-stb-accent focus:px-[var(--stb-control-sm-px)] focus:py-2 focus:text-stb-ink"
            >
                Loncat ke isi
            </a>

            <header className="stb-fade sticky top-0 z-40 border-b border-stb-line/80 bg-stb-paper/90 backdrop-blur-md">
                <div className="stb-container flex items-center justify-between gap-[var(--stb-space-3)] py-[var(--stb-space-2)]">
                    <Link href="/" className="group inline-flex shrink-0 items-center">
                        <img
                            src="/logo-stb.png"
                            alt={company.legal_name}
                            width={874}
                            height={285}
                            className="h-[calc(var(--stb-control-h)*1.35)] w-auto max-w-[min(52vw,calc(var(--stb-control-h)*var(--phi)*var(--phi)*1.35))] object-contain object-left"
                            decoding="async"
                        />
                    </Link>

                    <nav aria-label="Utama" className="hidden items-center gap-[var(--stb-space-1)] md:flex">
                        {navItems.map((item) => (
                            <Link
                                key={item.href}
                                href={item.href}
                                className={
                                    isActive(item.href)
                                        ? 'stb-control-sm bg-stb-ink text-white'
                                        : 'stb-control-sm text-stb-muted hover:bg-black/5 hover:text-stb-ink'
                                }
                            >
                                {item.label}
                            </Link>
                        ))}
                    </nav>

                    <button
                        type="button"
                        className="stb-control-sm border border-stb-line md:hidden"
                        aria-expanded={open}
                        aria-controls="mobile-nav"
                        onClick={() => setOpen((value) => !value)}
                    >
                        {open ? 'Tutup' : 'Menu'}
                    </button>
                </div>

                {open ? (
                    <nav
                        id="mobile-nav"
                        aria-label="Mobile"
                        className="border-t border-stb-line bg-stb-paper px-[max(1rem,var(--stb-space-3))] py-[var(--stb-space-2)] md:hidden"
                    >
                        <ul className="flex flex-col gap-[var(--stb-space-1)]">
                            {navItems.map((item) => (
                                <li key={item.href}>
                                    <Link
                                        href={item.href}
                                        onClick={() => setOpen(false)}
                                        className={
                                            isActive(item.href)
                                                ? 'stb-control-sm w-full justify-start bg-stb-ink text-white'
                                                : 'stb-control-sm w-full justify-start text-stb-muted'
                                        }
                                    >
                                        {item.label}
                                    </Link>
                                </li>
                            ))}
                        </ul>
                    </nav>
                ) : null}
            </header>

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

            <footer className="mt-auto border-t border-stb-line bg-stb-hero text-white">
                <div className="stb-container stb-grid-phi-invert py-[var(--stb-space-6)]">
                    <div>
                        <p className="stb-type-section text-stb-accent">{company.short_name}</p>
                        <p className="stb-type-small mt-[var(--stb-space-2)] max-w-md text-white/70">
                            {company.legal_name} — ekspedisi darat domestik sejak 2018.
                        </p>
                        {socialEntries.length > 0 ? (
                            <ul className="mt-[var(--stb-space-3)] flex flex-wrap gap-[var(--stb-space-3)]">
                                {socialEntries.map(([key, url]) => (
                                    <li key={key}>
                                        <a
                                            href={url}
                                            className="stb-type-small transition hover:text-stb-accent"
                                            target="_blank"
                                            rel="noopener noreferrer"
                                        >
                                            {socialLabels[key] ?? key}
                                        </a>
                                    </li>
                                ))}
                            </ul>
                        ) : null}
                    </div>
                    <div className="stb-type-small space-y-[var(--stb-space-1)] text-white/70 md:text-right">
                        <p>
                            <a className="transition hover:text-stb-accent" href={`tel:${company.phone}`}>
                                {company.phone}
                            </a>
                        </p>
                        <p>
                            <a
                                className="transition hover:text-stb-accent"
                                href={`mailto:${company.email_support}`}
                            >
                                {company.email_support}
                            </a>
                        </p>
                        <p className="pt-[var(--stb-space-3)] text-white/40">
                            © {year} {company.legal_name}
                        </p>
                    </div>
                </div>
            </footer>
        </div>
    );
}
