import { NavLink } from "react-router-dom";
import { Film, Moon, Settings2, Sun, Video } from "lucide-react";
import type { ReactNode } from "react";
import { useTheme } from "@/hooks/useTheme";

function NavItem({
  to,
  label,
  icon,
  isDark,
}: {
  to: string;
  label: string;
  icon: ReactNode;
  isDark: boolean;
}) {
  return (
    <NavLink
      to={to}
      className={({ isActive }) =>
        [
          "inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition",
          isActive
            ? (isDark ? "bg-zinc-800 text-zinc-50" : "bg-zinc-200 text-zinc-900")
            : (isDark ? "text-zinc-300 hover:bg-zinc-900 hover:text-zinc-50" : "text-zinc-700 hover:bg-zinc-100"),
        ].join(" ")
      }
    >
      <span className="inline-flex h-4 w-4 items-center justify-center">{icon}</span>
      <span>{label}</span>
    </NavLink>
  );
}

export default function TopNav() {
  const { isDark, toggleTheme } = useTheme();

  return (
    <header
      className={[
        "border-b backdrop-blur",
        isDark ? "border-zinc-800 bg-zinc-950/70" : "border-zinc-300 bg-white/90",
      ].join(" ")}
    >
      <div className="mx-auto flex w-full max-w-7xl items-center justify-between gap-4 px-4 py-3 md:px-6">
        <div className="flex items-center gap-3">
          <div
            className={[
              "flex h-9 w-9 items-center justify-center rounded-lg ring-1",
              isDark ? "bg-zinc-900 ring-zinc-800" : "bg-zinc-100 ring-zinc-300",
            ].join(" ")}
          >
            <Video className="h-5 w-5" />
          </div>
          <div className="leading-tight">
            <div className="text-sm font-semibold">IPCam Dashboard</div>
            <div className={["text-xs", isDark ? "text-zinc-400" : "text-zinc-500"].join(" ")}>
              MediaMTX + Orange Pi
            </div>
          </div>
        </div>

        <nav className="flex items-center gap-1">
          <NavItem to="/live" label="Live" icon={<Video className="h-4 w-4" />} isDark={isDark} />
          <NavItem to="/playback" label="Playback" icon={<Film className="h-4 w-4" />} isDark={isDark} />
          <NavItem to="/settings" label="Settings" icon={<Settings2 className="h-4 w-4" />} isDark={isDark} />
          <button
            type="button"
            onClick={toggleTheme}
            className={[
              "ml-1 inline-flex h-9 items-center gap-2 rounded-md border px-3 text-sm font-medium transition",
              isDark
                ? "border-zinc-700 bg-zinc-900/70 text-zinc-100 hover:bg-zinc-800"
                : "border-zinc-300 bg-white text-zinc-900 hover:bg-zinc-100",
            ].join(" ")}
            title={isDark ? "Chuyen sang light mode" : "Chuyen sang dark mode"}
          >
            {isDark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
            {isDark ? "Light" : "Dark"}
          </button>
        </nav>
      </div>
    </header>
  );
}