"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Menu } from "lucide-react";
import { LogoMark } from "@/components/ui/LogoMark";
import { useTranslations } from "next-intl";

import {
  NavbarLearnDropdown,
  NavbarMenuDropdown,
} from "@/components/layout/NavbarMenuDropdown";
import { NavbarMobileMenu } from "@/components/layout/NavbarMobileMenu";
import { LanguageSwitcher } from "@/components/layout/LanguageSwitcher";
import { UserMenu } from "@/components/layout/UserMenu";
import { Avatar } from "@/components/ui/Avatar";
import { Button } from "@/components/ui/button";
import type { NavUser } from "@/lib/auth/session";
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";

export function Navbar({ user }: { user?: NavUser | null }) {
  const t = useTranslations("nav");
  const pathname = usePathname();
  const [mobileOpen, setMobileOpen] = useState(false);

  useEffect(() => {
    setMobileOpen(false);
  }, [pathname]);

  const closeMobile = () => setMobileOpen(false);

  /** Translated nav data consumed by dropdown components */
  const videoMakerNav = {
    browseLabel: t("videoMakerBrowse"),
    browseHref: "/templates",
    items: [
      { label: t("videoMakerItems.animation"), href: "/templates?category=animation" },
      { label: t("videoMakerItems.intros"),    href: "/templates?category=intros" },
      { label: t("videoMakerItems.social"),    href: "/templates?category=social" },
      { label: t("videoMakerItems.slideshow"), href: "/templates?category=slideshow" },
      { label: t("videoMakerItems.ads"),       href: "/templates?category=ads" },
      { label: t("videoMakerItems.music"),     href: "/templates?category=music" },
      { label: t("videoMakerItems.featured"),  href: "/templates?category=featured" },
    ],
  };

  const imageMakerNav = {
    browseLabel: t("imageMakerBrowse"),
    browseHref: "/image-maker",
    items: [
      { label: t("imageMakerItems.social"),         href: "/image-maker?category=social" },
      { label: t("imageMakerItems.banners"),        href: "/image-maker?category=banners" },
      { label: t("imageMakerItems.presentations"),  href: "/image-maker?category=presentations" },
      { label: t("imageMakerItems.posters"),        href: "/image-maker?category=posters" },
      { label: t("imageMakerItems.logos"),          href: "/image-maker?category=logos" },
    ],
  };

  const learnItems = [
    { label: t("learnItems.blog"),      href: "/blog" },
    { label: t("learnItems.tutorials"), href: "/learn" },
    { label: t("learnItems.help"),      href: "/help" },
  ];

  return (
    <header className="sticky top-0 z-50 w-full border-b border-gray-100 bg-white/95 backdrop-blur-sm">
      <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
        {/* Logo */}
        <Link
          href="/"
          className="flex shrink-0 items-center gap-2 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2"
          aria-label={t("ariaLabel")}
        >
          <LogoMark size={36} />
          <span className="font-heading text-lg font-bold text-neutral-900">
            {t("brandName")}
          </span>
        </Link>

        {/* Desktop navigation */}
        <nav
          className="hidden items-center gap-1 lg:flex"
          aria-label="Main navigation"
        >
          <NavbarMenuDropdown
            label={t("videoMaker")}
            browseLabel={videoMakerNav.browseLabel}
            browseHref={videoMakerNav.browseHref}
            items={videoMakerNav.items}
          />
          <NavbarMenuDropdown
            label={t("imageMaker")}
            browseLabel={imageMakerNav.browseLabel}
            browseHref={imageMakerNav.browseHref}
            items={imageMakerNav.items}
          />
          <Link
            href="/pricing"
            className="rounded-md px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2"
          >
            {t("pricing")}
          </Link>
          <NavbarLearnDropdown items={learnItems} label={t("learn")} />
          {user?.isAdmin && (
            <Link
              href="/admin"
              className="rounded-md px-3 py-2 text-sm font-semibold text-indigo-600 transition-colors hover:bg-indigo-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2"
            >
              {t("menuAdminPanel")}
            </Link>
          )}
        </nav>

        {/* Right-side actions */}
        <div className="flex items-center gap-1">
          {/* Language switcher — desktop */}
          <LanguageSwitcher className="hidden sm:flex" />

          {user ? (
            <div className="hidden sm:flex">
              <UserMenu user={user} />
            </div>
          ) : (
            <>
              <Button variant="ghost" asChild className="hidden sm:inline-flex">
                <Link href="/auth">{t("signIn")}</Link>
              </Button>
              <Button
                asChild
                className="hidden bg-blue-600 text-white hover:bg-blue-700 sm:inline-flex"
              >
                <Link href="/auth?tab=sign-up">{t("tryForFree")}</Link>
              </Button>
            </>
          )}

          {/* Mobile menu trigger */}
          <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
            <SheetTrigger asChild>
              <Button
                variant="ghost"
                size="icon"
                className="h-10 w-10 lg:hidden"
                aria-label={t("openMenuAriaLabel")}
              >
                <Menu className="h-5 w-5" aria-hidden />
              </Button>
            </SheetTrigger>
            <SheetContent side="right" className="flex w-full flex-col sm:max-w-sm">
              <SheetHeader className="text-left">
                <SheetTitle className="font-heading">{t("mobileMenuTitle")}</SheetTitle>
              </SheetHeader>
              <NavbarMobileMenu onNavigate={closeMobile} />
              <div className="mt-auto flex flex-col gap-3 border-t border-gray-100 pb-8 pt-6">
                <LanguageSwitcher className="w-full justify-center border border-gray-200" />
                {user ? (
                  <>
                    <div className="flex items-center gap-3 px-1 py-2">
                      <Avatar src={user.avatarUrl} name={user.name} email={user.email} size={40} />
                      <div className="min-w-0">
                        <p className="truncate text-sm font-medium text-neutral-900">{user.name}</p>
                        <p className="truncate text-xs text-neutral-500">{user.email}</p>
                      </div>
                    </div>
                    <Button variant="outline" size="lg" className="w-full" asChild>
                      <Link href="/dashboard" onClick={closeMobile}>{t("menuDashboard")}</Link>
                    </Button>
                    {user.isAdmin && (
                      <Button variant="outline" size="lg" className="w-full" asChild>
                        <Link href="/admin" onClick={closeMobile}>{t("menuAdminPanel")}</Link>
                      </Button>
                    )}
                    <Button variant="outline" size="lg" className="w-full" asChild>
                      <Link href="/dashboard/settings" onClick={closeMobile}>{t("menuProfile")}</Link>
                    </Button>
                    <form action="/auth/sign-out" method="post" className="w-full">
                      <Button type="submit" variant="ghost" size="lg" className="w-full text-red-600 hover:bg-red-50 hover:text-red-700">
                        {t("menuSignOut")}
                      </Button>
                    </form>
                  </>
                ) : (
                  <>
                    <Button variant="outline" size="lg" className="w-full" asChild>
                      <Link href="/auth" onClick={closeMobile}>
                        {t("signIn")}
                      </Link>
                    </Button>
                    <Button
                      size="lg"
                      className="w-full bg-blue-600 text-white hover:bg-blue-700"
                      asChild
                    >
                      <Link href="/auth?tab=sign-up" onClick={closeMobile}>
                        {t("tryForFree")}
                      </Link>
                    </Button>
                  </>
                )}
              </div>
            </SheetContent>
          </Sheet>

          {/* Mobile CTA (outside sheet) */}
          {user ? (
            <Link
              href="/dashboard"
              className="rounded-full p-0.5 lg:hidden focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2"
              aria-label={t("accountMenu")}
            >
              <Avatar src={user.avatarUrl} name={user.name} email={user.email} size={32} />
            </Link>
          ) : (
            <Button
              asChild
              size="sm"
              className="bg-blue-600 text-white hover:bg-blue-700 lg:hidden"
            >
              <Link href="/auth?tab=sign-up">{t("tryForFree")}</Link>
            </Button>
          )}
        </div>
      </div>
    </header>
  );
}
