"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useState } from "react";
import { logoutAction } from "@/app/logout/actions";
import { HomeModernIcon } from "@heroicons/react/24/outline";

const links = [
  { href: "/", label: "Početna" },
  { href: "/lokacija", label: "Lokacija" },
  { href: "/vodic", label: "Vodič kroz kuću" },
  { href: "/okolina", label: "Okolina" },
  { href: "/blog", label: "Blog" },
];

export default function Navbar() {
  const pathname = usePathname();
  const [open, setOpen] = useState(false);

  return (
    <nav className="bg-white/90 backdrop-blur-md shadow-sm sticky top-0 z-50">
      <div className="max-w-5xl mx-auto px-4 flex items-center justify-between h-16">
        <Link href="/" className="flex items-center gap-2 font-semibold text-sky-700 text-lg">
          <HomeModernIcon className="w-6 h-6" />
          <span>Angolo di Pace</span>
        </Link>

        {/* Desktop */}
        <div className="hidden md:flex gap-1">
          {links.map((l) => (
            <Link
              key={l.href}
              href={l.href}
              className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${
                pathname === l.href
                  ? "bg-sky-100 text-sky-700"
                  : "text-gray-600 hover:text-sky-700 hover:bg-sky-50"
              }`}
            >
              {l.label}
            </Link>
          ))}
        </div>

        <div className="flex items-center gap-2">
          {/* Logout — desktop */}
          <form action={logoutAction} className="hidden md:block">
            <button
              type="submit"
              className="px-3 py-1.5 rounded-md text-sm font-medium text-gray-500 hover:text-red-600 hover:bg-red-50 transition-colors"
            >
              Odjava
            </button>
          </form>

          {/* Mobile hamburger */}
          <button
            className="md:hidden p-2 rounded text-gray-600"
            onClick={() => setOpen(!open)}
            aria-label="Menu"
          >
            <div className="w-5 h-0.5 bg-current mb-1" />
            <div className="w-5 h-0.5 bg-current mb-1" />
            <div className="w-5 h-0.5 bg-current" />
          </button>
        </div>
      </div>

      {open && (
        <div className="md:hidden border-t border-gray-100 px-4 pb-3">
          {links.map((l) => (
            <Link
              key={l.href}
              href={l.href}
              onClick={() => setOpen(false)}
              className={`block px-3 py-2 rounded-md text-sm font-medium my-1 ${
                pathname === l.href
                  ? "bg-sky-100 text-sky-700"
                  : "text-gray-600 hover:bg-sky-50"
              }`}
            >
              {l.label}
            </Link>
          ))}
          <form action={logoutAction}>
            <button
              type="submit"
              className="block w-full text-left px-3 py-2 rounded-md text-sm font-medium text-red-600 hover:bg-red-50 my-1"
            >
              Odjava
            </button>
          </form>
        </div>
      )}
    </nav>
  );
}
