"use client";

import Link from "next/link";
import VillaLogo from "@/components/VillaLogo";
import { usePathname, useRouter } from "next/navigation";
import { useState } from "react";
import { useAuth } from "@/lib/auth-context";
import { homeForRole } from "@/lib/roles";

const NAV_LINKS: { href: string; label: string }[] = [
  { href: "/",          label: "Home" },
  { href: "/listings",  label: "Rent" },
  { href: "/stay",      label: "Stay" },
];

export default function SiteHeader() {
  const pathname = usePathname();
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const { user, loading, logout } = useAuth();

  const accountHref = homeForRole(user?.role);

  async function handleLogout() {
    await logout();
    setOpen(false);
    router.push("/");
    router.refresh();
  }

  const links = [...NAV_LINKS, { href: accountHref, label: "My Account" }];

  return (
    <header className="sticky top-0 z-50 bg-white border-b border-mist">
      <div className="max-w-6xl mx-auto px-6 h-[72px] flex items-center justify-between gap-6">
        <Link href="/"><VillaLogo size="sm" /></Link>

        <nav className="hidden md:flex items-center gap-6 flex-1 justify-end">
          <ul className="flex gap-6">
            {links.map((link) => {
              const active = pathname === link.href || (link.href === "/stay" && pathname.startsWith("/stay"));
              return (
                <li key={link.href}>
                  <Link href={link.href}
                    className={`text-sm font-medium transition-colors flex items-center gap-1.5 ${active ? "text-forest" : "text-ink-soft hover:text-forest"}`}>
                    {link.label}
                  </Link>
                </li>
              );
            })}
          </ul>
          <div className="flex items-center gap-3">
            {loading ? null : user ? (
              <>
                <Link href={accountHref} className="text-sm font-medium text-ink-soft hover:text-forest max-w-[140px] truncate">
                  {user.name}
                </Link>
                <button onClick={handleLogout}
                  className="inline-flex items-center justify-center gap-2 font-semibold text-sm px-6 py-3 rounded-pill border border-mist text-forest hover:bg-forest hover:border-forest hover:text-white transition-colors">
                  Log out
                </button>
              </>
            ) : (
              <>
                <Link href="/login" className="inline-flex items-center justify-center gap-2 font-semibold text-sm px-6 py-3 rounded-pill border border-mist text-forest hover:bg-forest hover:border-forest hover:text-white transition-colors">
                  Log in
                </Link>
                <Link href="/signup" className="inline-flex items-center justify-center gap-2 font-semibold text-sm px-6 py-3 rounded-pill bg-forest text-white hover:bg-forest-deep transition-colors">
                  Sign up
                </Link>
              </>
            )}
          </div>
        </nav>

        <button aria-label="Toggle menu" onClick={() => setOpen((o) => !o)} className="md:hidden p-2 text-ink">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="w-6 h-6">
            <path d={open ? "M6 18L18 6M6 6l12 12" : "M4 6h16M4 12h16M4 18h16"} strokeLinecap="round" />
          </svg>
        </button>
      </div>

      {open && (
        <nav className="md:hidden border-t border-mist bg-white">
          <ul className="px-6 py-4 flex flex-col gap-3">
            {links.map((link) => {
              const active = pathname === link.href;
              return (
                <li key={link.href}>
                  <Link href={link.href} onClick={() => setOpen(false)}
                    className={`flex items-center gap-2 text-sm font-medium py-1 ${active ? "text-forest" : "text-ink-soft"}`}>
                    {link.label}
                  </Link>
                </li>
              );
            })}
            <li className="pt-2 flex gap-3">
              {user ? (
                <button onClick={handleLogout} className="flex-1 text-center text-sm font-semibold px-4 py-2 rounded-pill border border-mist text-forest">Log out</button>
              ) : (
                <>
                  <Link href="/login" onClick={() => setOpen(false)} className="flex-1 text-center text-sm font-semibold px-4 py-2 rounded-pill border border-mist text-forest">Log in</Link>
                  <Link href="/signup" onClick={() => setOpen(false)} className="flex-1 text-center text-sm font-semibold px-4 py-2 rounded-pill bg-forest text-white">Sign up</Link>
                </>
              )}
            </li>
          </ul>
        </nav>
      )}
    </header>
  );
}