"use client";

import { Link, usePage } from "@inertiajs/react";
import { UserCircle2 } from "lucide-react";

export default function Header() {
    const { url, props } = usePage();
    const { consultant, consignee } = props.auth || {};
    const loggedInUser = consultant || consignee;

    const navLinks = [
        { href: "/", label: "Home" },
        { href: "/categories", label: "Categories" },
        { href: "/consultants", label: "Consultants" },
        { href: "/blogs", label: "Blogs" },
        { href: "/about-us", label: "About Us" },
        { href: "/contact-us", label: "Contact Us" },
    ];

    return (
        <header className="w-full">
            <nav className="bg-white shadow sticky top-0 z-50">
                <div className="mx-auto max-w-[1440px] lg:w-[90%] xl:w-[85%] flex justify-between items-center px-4 lg:px-0 py-4">
                    {/* Logo */}
                    <Link href="/">
                        <img
                            src="/web/logo.png"
                            alt="Website Logo"
                            className="h-12 w-auto object-contain"
                        />
                    </Link>

                    {/* Nav Links */}
                    <ul className="flex gap-6 items-center">
                        {navLinks.map((link) => {
                            const isActive =
                                url === link.href ||
                                (url.startsWith(link.href) && link.href !== "/");

                            return (
                                <li key={link.href}>
                                    <Link
                                        href={link.href}
                                        className={`pb-1 ${isActive
                                                ? "border-b-2 border-[#ff6600] text-[#ff6600]"
                                                : "hover:text-[#ff6600] text-gray-700"
                                            }`}
                                    >
                                        {link.label}
                                    </Link>
                                </li>
                            );
                        })}

                        {/* === Conditional Section === */}
                        {loggedInUser ? (
                            <li>
                                {/* Logged-in User Chip */}
                                <Link
                                    href={
                                        consultant
                                            ? route("consultant.dashboard")
                                            : route("consignee.dashboard")
                                    }
                                    className="bg-[#ff6600] text-white rounded-md px-3 py-1.5 flex items-center shadow-md space-x-3 select-none hover:opacity-90 transition-all"
                                >
                                    {loggedInUser.image ? (
                                        <img
                                            src={loggedInUser.image}
                                            alt={loggedInUser.name}
                                            className="w-8 h-8 rounded-full object-cover border border-white"
                                        />
                                    ) : (
                                        <div className="w-8 h-8 flex items-center justify-center rounded-full bg-white text-[#0F763C] font-semibold text-sm">
                                            {loggedInUser.name?.charAt(0)?.toUpperCase() || "U"}
                                        </div>
                                    )}

                                    <span className="font-medium text-white text-sm truncate">
                                        Hi, {loggedInUser.name?.split(" ")[0] || "User"}
                                    </span>
                                </Link>
                            </li>
                        ) : (
                            <li>
                                {/* Guest Buttons */}
                                <div className="bg-[#ff6600] text-white rounded-md px-2.5 py-2.5 flex items-center shadow-md space-x-3 select-none">
                                    <div className="flex items-center justify-center">
                                        <UserCircle2 className="w-6 h-6 text-white" />
                                    </div>

                                    <Link
                                        href="/login"
                                        className="font-medium hover:underline transition-all cursor-pointer"
                                    >
                                        Login
                                    </Link>

                                    <div className="h-5 border-l border-white/70"></div>

                                    <Link
                                        href="/register"
                                        className="font-medium hover:underline transition-all cursor-pointer"
                                    >
                                        Sign up
                                    </Link>
                                </div>
                            </li>
                        )}
                    </ul>
                </div>
            </nav>
        </header>
    );
}