"use client";

import { useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { LogOut, Menu, X } from "lucide-react";
import { UserProfile } from "@/lib/types";
import { logoutAction } from "@/app/(protected)/logout-action";
import { navItems } from "./sidebar";

type TopBarProps = {
  user: UserProfile;
};

export default function TopBar({ user }: TopBarProps) {
  const [mobileOpen, setMobileOpen] = useState(false);
  const pathname = usePathname();

  return (
    <header className="sticky top-0 z-10 border-b border-slate-200 bg-white/80 backdrop-blur dark:border-white/5 dark:bg-slate-950/70">
      <div className="flex items-center justify-between px-4 py-4 lg:px-8">
        <div className="flex items-center gap-3">
          <button
            type="button"
            onClick={() => setMobileOpen((prev) => !prev)}
            className="rounded-2xl border border-slate-200 bg-slate-50 p-2 text-slate-900 dark:border-white/10 dark:bg-white/5 dark:text-white lg:hidden"
            aria-label="Toggle navigation"
          >
            <Menu className="h-5 w-5" />
          </button>
          <div>
            <p className="text-xs uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400">Active user</p>
            <p className="text-lg font-semibold text-slate-900 dark:text-white">{user.name}</p>
          </div>
        </div>

        <form action={logoutAction}>
          <button
            type="submit"
            className="flex items-center gap-2 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-2 text-sm font-medium text-slate-900 transition hover:bg-slate-100 dark:border-white/10 dark:bg-white/5 dark:text-white dark:hover:bg-white/10"
          >
            <LogOut className="h-4 w-4" />
            Sign out
          </button>
        </form>
      </div>

      {mobileOpen ? (
        <div className="lg:hidden">
          <div className="fixed inset-0 z-50 bg-slate-950/50" onClick={() => setMobileOpen(false)} aria-hidden="true" />
          <div className="fixed inset-x-0 top-0 z-50 rounded-b-3xl border-b border-slate-200 bg-white p-4 shadow-2xl dark:border-white/10 dark:bg-slate-950">
            <div className="flex items-center justify-between">
              <p className="text-xs uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400">Navigation</p>
              <button
                type="button"
                onClick={() => setMobileOpen(false)}
                className="rounded-2xl border border-slate-200 bg-slate-50 p-2 text-slate-900 dark:border-white/10 dark:bg-white/5 dark:text-white"
                aria-label="Close navigation"
              >
                <X className="h-4 w-4" />
              </button>
            </div>

            <nav className="mt-4 flex flex-col gap-2 text-sm font-medium">
              {navItems.map((item) => {
                const isActive = pathname.startsWith(item.href);
                const Icon = item.icon;
                return (
                  <Link
                    key={item.href}
                    href={item.href}
                    onClick={() => setMobileOpen(false)}
                    className={`flex items-center gap-3 rounded-2xl px-4 py-3 transition ${
                      isActive
                        ? "bg-orange-500/15 text-slate-900 shadow-lg shadow-orange-500/30 dark:text-white"
                        : "text-slate-600 hover:bg-orange-500/10 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white"
                    }`}
                  >
                    <Icon className="h-4 w-4" />
                    {item.label}
                  </Link>
                );
              })}
            </nav>
          </div>
        </div>
      ) : null}
    </header>
  );
}