import { SocialLinks } from '@frontend/components/layout/SocialLinks';
import { siteLogoAlt, siteLogoSrc, siteLogoWhiteSrc } from '@frontend/lib/site-logo';
import { useSiteChrome } from '@frontend/lib/site-chrome';
import { siteNav, type SiteNavItem } from '@frontend/lib/site-nav';
import { Link, usePage } from '@inertiajs/react';

function NavLink({ item }: { item: SiteNavItem }) {
    if (item.href === '#') {
        return <a href="#">{item.label}</a>;
    }

    return <Link href={item.href}>{item.label}</Link>;
}

function HeaderTop() {
    const { address, phone, phoneHref, socials } = useSiteChrome();

    return (
        <div className="header-top d-none d-xl-block">
            <div className="container-fluid">
                <div className="row justify-content-center justify-content-lg-between align-items-center">
                    <div className="col-auto">
                        <div className="header-top-left">
                            <div className="header-contact-info">
                                <ul>
                                    {address !== '' && (
                                        <li>
                                            <p><i className="fa-solid fa-location-dot"></i> {address}</p>
                                        </li>
                                    )}
                                    {phone !== '' && (
                                        <li>
                                            <p><i className="fa-solid fa-phone-volume"></i> <a href={phoneHref}>{phone}</a></p>
                                        </li>
                                    )}
                                </ul>
                            </div>
                        </div>
                    </div>
                    {socials.length > 0 && (
                        <div className="col-auto">
                            <div className="header-top-right">
                                <div className="header-social-icon">
                                    <SocialLinks />
                                </div>
                            </div>
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
}

function HomeHeader() {
    return (
        <header className="header header-2">
            <HeaderTop />
            <div className="header-lower">
                <div className="container-fluid">
                    <div className="row align-items-center justify-content-between g-0">
                        <div className="col-12">
                            <div className="header-content d-flex justify-content-between align-items-center">
                                <div className="header-left">
                                    <div className="logo-box">
                                        <div className="logo">
                                            <Link href="/">
                                                <figure>
                                                    <img src={siteLogoWhiteSrc} alt={siteLogoAlt} />
                                                </figure>
                                            </Link>
                                        </div>
                                    </div>
                                </div>

                                <div className="header-navigation d-flex align-items-center">
                                    <div className="main-menu">
                                        <nav id="mobile-menu">
                                            <ul>
                                                {siteNav.map((item) => (
                                                    <li key={item.label}>
                                                        <NavLink item={item} />
                                                    </li>
                                                ))}
                                            </ul>
                                        </nav>
                                    </div>
                                </div>

                                <div className="header-right d-flex align-items-center gap-lg-4 gap-3">
                                    <div className="header-sidebar">
                                        <a className="sidebar-toggler color-one" data-bs-toggle="offcanvas" href="#offcanvas-sidebar" aria-label="sidebar toggler" role="button" aria-controls="offcanvas-sidebar">
                                            <span></span>
                                            <span></span>
                                        </a>
                                    </div>

                                    <div className="header-search">
                                        <a href="#" className="search-btn" aria-label="search">
                                            <i className="fa-solid fa-magnifying-glass"></i>
                                        </a>
                                    </div>

                                    <div className="header-button">
                                        <Link href="/book" className="theme-button style-1" aria-label="Book Now">
                                            Book Now
                                        </Link>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="search-box">
                <span className="close">
                    <i className="fa-solid fa-xmark"></i>
                </span>
                <div className="search-wapper">
                    <form action="#" className="search-form" id="search-form">
                        <div className="input-group">
                            <input type="text" id="search" name="search" placeholder="Type to search" autoComplete="off" required />
                        </div>
                        <button type="submit" className="search-submit-btn" data-text="search submit">
                            <i className="fa-solid fa-magnifying-glass"></i>
                        </button>
                    </form>
                </div>
            </div>
        </header>
    );
}

function InnerHeader() {
    const menuItems = siteNav.filter((item) => item.href !== '/book');
    const splitAt = Math.ceil(menuItems.length / 2);
    const leading = menuItems.slice(0, splitAt);
    const trailing = menuItems.slice(splitAt);

    return (
        <header className="header header-1 background-one">
            <HeaderTop />
            <div className="header-lower">
                <div className="container-fluid">
                    <div className="row align-items-center justify-content-between g-0">
                        <div className="col-12">
                            <div className="header-content d-flex justify-content-between align-items-center">
                                <div className="logo-box">
                                    <div className="logo">
                                        <Link href="/">
                                            <figure>
                                                <img src={siteLogoSrc} alt={siteLogoAlt} />
                                            </figure>
                                        </Link>
                                    </div>
                                </div>

                                <div className="header-left">
                                    <div className="header-sidebar">
                                        <a className="sidebar-toggler color-one" data-bs-toggle="offcanvas" href="#offcanvas-sidebar" aria-label="sidebar toggler" role="button" aria-controls="offcanvas-sidebar">
                                            <span></span>
                                            <span></span>
                                        </a>
                                    </div>
                                </div>

                                <div className="header-navigation d-flex align-items-center">
                                    <div className="main-menu">
                                        <nav id="mobile-menu">
                                            <ul>
                                                {leading.map((item) => (
                                                    <li key={item.label}>
                                                        <NavLink item={item} />
                                                    </li>
                                                ))}
                                                <li className="center-logo">
                                                    <div className="logo">
                                                        <svg className="logo-shape" viewBox="0 0 180 30" aria-hidden="true">
                                                            <path className="logo-shape-fill" d="M0 0 C10 0 50 30 90 30 C130 30 170 0 180 0 Z" />
                                                            <path className="logo-shape-edge" d="M1 0 C11 0 51 29 90 29 C129 29 169 0 179 0" />
                                                        </svg>
                                                        <Link href="/">
                                                            <figure>
                                                                <img src={siteLogoSrc} alt={siteLogoAlt} />
                                                            </figure>
                                                        </Link>
                                                    </div>
                                                </li>
                                                {trailing.map((item) => (
                                                    <li key={item.label}>
                                                        <NavLink item={item} />
                                                    </li>
                                                ))}
                                            </ul>
                                        </nav>
                                    </div>
                                </div>

                                <div className="header-right d-flex align-items-center">
                                    <div className="header-button">
                                        <Link href="/book" className="theme-button style-1" aria-label="Book Now">
                                            Book Now
                                        </Link>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
    );
}

export function Header() {
    const { url } = usePage();
    const path = url.split('?')[0] ?? '/';

    if (path === '/') {
        return <HomeHeader />;
    }

    return <InnerHeader />;
}