import { Link, usePage } from '@inertiajs/react';
import { ArrowRight, Map, Menu } from 'lucide-react';
import AppLogoIcon from '@/components/app-logo-icon';

interface PortalHeaderProps {
    transparent?: boolean;
}

export function PortalHeader({ transparent = false }: PortalHeaderProps) {
    const { auth } = usePage().props;

    return (
        <header
            className={`relative z-30 border-b ${
                transparent
                    ? 'border-white/10 bg-[#153b32]/90 text-white backdrop-blur-xl'
                    : 'border-[#d9ded8] bg-[#f7f6f0]/90 text-[#17332b] backdrop-blur-xl'
            }`}
        >
            <div className="mx-auto flex h-18 max-w-7xl items-center justify-between px-5 lg:px-8">
                <Link href="/" className="flex items-center gap-3">
                    <div
                        className={`flex size-10 items-center justify-center rounded-xl text-base font-bold ${
                            transparent
                                ? 'bg-[#f0b28c] text-[#17332b]'
                                : 'bg-[#1f684f] text-white'
                        }`}
                    >
                        <AppLogoIcon className="size-5" />
                    </div>
                    <div>
                        <p className="text-lg leading-none font-semibold tracking-tight">
                            Lotea
                        </p>
                        <p
                            className={`mt-1 text-[9px] font-semibold tracking-[0.2em] uppercase ${
                                transparent ? 'text-white/60' : 'text-[#6c7b75]'
                            }`}
                        >
                            Terrenos seleccionados
                        </p>
                    </div>
                </Link>

                <nav className="hidden items-center gap-7 text-sm font-medium lg:flex">
                    <Link
                        href="/#desarrollos"
                        className="transition hover:opacity-65"
                    >
                        Desarrollos
                    </Link>
                </nav>

                <div className="flex items-center gap-2">
                    <Link
                        href="/explorador-3d"
                        className={`hidden items-center gap-2 rounded-xl px-4 py-2.5 text-sm font-semibold sm:inline-flex ${
                            transparent
                                ? 'bg-white text-[#17332b]'
                                : 'bg-[#17332b] text-white'
                        }`}
                    >
                        <Map className="size-4" />
                        Explorar en 3D
                    </Link>
                    <Link
                        href={
                            auth.user
                                ? auth.user.role === 'admin'
                                    ? '/admin'
                                    : '/mi-cuenta'
                                : '/login'
                        }
                        className={`hidden items-center gap-2 rounded-xl px-3 py-2.5 text-sm font-semibold md:inline-flex ${
                            transparent ? 'text-white/85' : 'text-[#38564c]'
                        }`}
                    >
                        {auth.user ? 'Panel' : 'Acceso profesional'}
                        <ArrowRight className="size-4" />
                    </Link>
                    <Link
                        href="/explorador-3d"
                        aria-label="Abrir el plano interactivo"
                        className={`flex size-10 items-center justify-center rounded-xl lg:hidden ${
                            transparent ? 'bg-white/10' : 'bg-white'
                        }`}
                    >
                        <Menu className="size-5" />
                    </Link>
                </div>
            </div>
        </header>
    );
}
