"use client";

import { usePathname } from "next/navigation";
import { Menu, Search, Bell } from "lucide-react";
import type { Session } from "next-auth";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { LanguageSelector } from "@/components/language-selector";
import { UserMenu } from "@/components/auth/user-menu";
import { DashboardSidebar } from "@/components/dashboard/dashboard-sidebar";
import { useLanguage } from "@/lib/i18n/context";
import { PLANS } from "@/config/plans";
import type { PlanCode } from "@prisma/client";

/** Shared mobile-only drawer trigger — the persistent in-grid .sidebar is
 * hidden below the reference's 820px breakpoint (see toknext-reference.css),
 * so every /dashboard/* route needs some way to open it on mobile. Wrapped
 * in .tn-dashboard-reference itself because Sheet content is portaled to
 * document.body, escaping the page's own reference-scope wrapper. */
function MobileNavTrigger({
  user,
  plan,
  hasPaidAccess,
  showBillingWarning,
}: {
  user: Session["user"];
  plan: PlanCode;
  hasPaidAccess: boolean;
  showBillingWarning: boolean;
}) {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline" size="icon" className="dashboard-mobile-trigger" aria-label="Open menu">
          <Menu className="size-5" />
        </Button>
      </SheetTrigger>
      <SheetContent side="left" className="tn-dashboard-reference w-[280px] border-0 bg-transparent p-0">
        <SheetHeader className="sr-only">
          <SheetTitle>Navigation</SheetTitle>
        </SheetHeader>
        <SheetClose asChild>
          <DashboardSidebar
            user={user}
            plan={plan}
            hasPaidAccess={hasPaidAccess}
            showBillingWarning={showBillingWarning}
            inDrawer
          />
        </SheetClose>
      </SheetContent>
    </Sheet>
  );
}

export function DashboardTopbar({
  user,
  plan,
  hasPaidAccess = false,
  showBillingWarning = false,
}: {
  user: Session["user"];
  plan: PlanCode;
  hasPaidAccess?: boolean;
  showBillingWarning?: boolean;
}) {
  const { t } = useLanguage();
  const top = t.dashboard.topbar;
  const planName = t.plans[PLANS[plan].translationKey].name;
  // The approved overview reference renders its own header (greeting,
  // date-window control, notifications, avatar) as part of the page
  // content itself, not a separate persistent bar — see the .topbar markup
  // inside DashboardOverview. This shared topbar is skipped there (only the
  // mobile drawer trigger remains, since the reference's own mobile
  // behavior of stacking the whole sidebar inline was intentionally not
  // ported — see toknext-reference.css). Every other /dashboard/* route
  // keeps this full topbar; search/plan badge/language switch remain real,
  // reachable functionality there.
  const pathname = usePathname();
  const isOverview = pathname === "/dashboard";
  const isProductDetail = /^\/dashboard\/products\/[^/]+$/.test(pathname);
  const isReferenceIndex =
    pathname === "/dashboard/creators" ||
    pathname === "/dashboard/market-explorer" ||
    pathname === "/dashboard/products" ||
    pathname === "/dashboard/trends" ||
    pathname === "/dashboard/stores" ||
    pathname === "/dashboard/videos" ||
    pathname === "/dashboard/saved" ||
    pathname === "/dashboard/connected-stores" ||
    pathname === "/dashboard/tiktok-account" ||
    pathname === "/dashboard/reports" ||
    pathname === "/dashboard/assistant" ||
    pathname === "/dashboard/ai" ||
    pathname === "/dashboard/billing" ||
    pathname === "/dashboard/integrations" ||
    pathname === "/dashboard/settings";

  if (isOverview || isProductDetail || isReferenceIndex) {
    return (
      <div className={`mobile-nav-strip${isProductDetail ? " product-mobile-topbar" : ""}`}>
        <MobileNavTrigger
          user={user}
          plan={plan}
          hasPaidAccess={hasPaidAccess}
          showBillingWarning={showBillingWarning}
        />
      </div>
    );
  }

  return (
    <header className="sticky top-0 z-40 flex h-16 items-center gap-3 border-b border-border bg-background/80 px-4 backdrop-blur-lg sm:px-6">
      <MobileNavTrigger
        user={user}
        plan={plan}
        hasPaidAccess={hasPaidAccess}
        showBillingWarning={showBillingWarning}
      />

      <label className="relative hidden max-w-sm flex-1 sm:block">
        <Search className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
        <Input
          type="search"
          placeholder={top.searchPlaceholder}
          aria-label={top.searchPlaceholder}
          className="h-9 pl-9"
        />
      </label>

      <div className="ml-auto flex items-center gap-2 sm:gap-3">
        <Badge variant="outline" className="hidden border-brand-cyan/30 bg-primary/10 text-primary sm:inline-flex">
          {planName}
        </Badge>

        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" size="icon" aria-label={top.notifications} className="relative">
              <Bell className="size-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-72">
            <DropdownMenuLabel>{top.notifications}</DropdownMenuLabel>
            <p className="px-2 py-3 text-sm text-muted-foreground">{top.noNotifications}</p>
          </DropdownMenuContent>
        </DropdownMenu>

        <LanguageSelector />
        <UserMenu user={user} />
      </div>
    </header>
  );
}