"use client";

import { useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  Check,
  ChevronDown,
  Globe,
  LogOut,
  Menu,
  Monitor,
  Moon,
  Search,
  Settings,
  Sun,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Avatar } from "@/components/shared/avatar";
import { openCommandPalette } from "@/components/layout/command-palette";
import { useSession } from "@/features/auth/session";
import { useCan } from "@/features/auth/use-can";
import { NotificationBell } from "@/features/notifications/notification-bell";
import { useTheme, type ThemePreference } from "@/features/theme/theme-provider";
import { useI18n, useT } from "@/i18n";
import { cn } from "@/lib/cn";

export function Header({ onMenuClick }: { onMenuClick: () => void }) {
  const t = useT();
  const { locale, setLocale } = useI18n();
  const { admin, signOut } = useSession();
  const { can } = useCan();
  const theme = useTheme();
  const pathname = usePathname();
  const [signingOut, setSigningOut] = useState(false);

  const title =
    pathname === "/overview"
      ? t("dashboard.title")
      : pathname.startsWith("/orders")
        ? t("nav.orders")
        : pathname.startsWith("/captains")
          ? t("nav.captains")
          : pathname.startsWith("/applications")
            ? t("nav.applications")
            : pathname.startsWith("/notifications")
              ? t("nav.notifications")
              : pathname.startsWith("/settings")
                ? t("nav.settings")
                : t("common.appName");

  async function handleSignOut() {
    setSigningOut(true);
    await signOut();
  }

  return (
    <header
      className="sticky top-0 z-30 flex h-16 shrink-0 items-center gap-3 border-b bg-surface/80 px-4 backdrop-blur sm:px-6"
    >
      <Button
        variant="ghost"
        size="icon"
        className="lg:hidden"
        onClick={onMenuClick}
        aria-label="Open menu"
      >
        <Menu className="h-5 w-5" />
      </Button>

      <h2 className="min-w-0 flex-1 truncate text-base font-semibold text-foreground sm:text-lg">
        {title}
      </h2>

      {/* Command palette */}
      <button
        type="button"
        onClick={openCommandPalette}
        className="hidden md:inline-flex items-center gap-1.5 rounded-md px-2 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
        aria-label={t("widgets.commandPalette.title")}
      >
        <Search className="h-4 w-4" aria-hidden />
        <kbd className="hidden sm:inline-flex h-5 items-center rounded border border-input bg-surface px-1 font-mono text-[10px] text-muted-foreground">
          Ctrl K
        </kbd>
      </button>

      {/* Language switch */}
      <button
        type="button"
        onClick={() => setLocale(locale === "en" ? "ar" : "en")}
        className="inline-flex items-center gap-1.5 rounded-md px-2 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
        aria-label={t("auth.chooseLanguage")}
      >
        <Globe className="h-4 w-4" aria-hidden />
        <span className="hidden sm:inline">{locale === "en" ? "العربية" : "English"}</span>
      </button>

      {/* Internal notifications bell */}
      {can("notifications.view") ? <NotificationBell /> : null}

      {/* Theme switch */}
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <button
            className={cn(
              "inline-flex items-center rounded-md p-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
              "outline-none focus-visible:ring-2 focus-visible:ring-ring",
            )}
            aria-label={t("theme.label")}
          >
            {theme.theme === "dark" ? (
              <Moon className="h-4 w-4" aria-hidden />
            ) : theme.theme === "light" ? (
              <Sun className="h-4 w-4" aria-hidden />
            ) : (
              <Monitor className="h-4 w-4" aria-hidden />
            )}
          </button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" className="w-44">
          {(
            [
              { value: "light", label: t("theme.light"), icon: Sun },
              { value: "dark", label: t("theme.dark"), icon: Moon },
              { value: "system", label: t("theme.system"), icon: Monitor },
            ] as { value: ThemePreference; label: string; icon: React.ComponentType<{ className?: string }> }[]
          ).map(({ value, label, icon: Icon }) => (
            <DropdownMenuItem key={value} onSelect={() => theme.setTheme(value)}>
              <Icon className="h-4 w-4 text-muted-foreground" aria-hidden />
              <span className="flex-1">{label}</span>
              {theme.theme === value ? <Check className="h-4 w-4 text-primary" aria-hidden /> : null}
            </DropdownMenuItem>
          ))}
        </DropdownMenuContent>
      </DropdownMenu>

      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <button
            className={cn(
              "flex items-center gap-2 rounded-lg p-1.5 transition-colors hover:bg-muted",
              "outline-none focus-visible:ring-2 focus-visible:ring-ring",
            )}
          >
            <Avatar src={admin?.photo} name={admin?.name} size="sm" />
            <span className="hidden text-start leading-tight md:block" dir="ltr">
              <span className="block max-w-[10rem] truncate text-sm font-medium text-foreground">
                {admin?.name}
              </span>
              <span className="block max-w-[10rem] truncate text-[11px] text-muted-foreground">
                {admin?.email}
              </span>
            </span>
            <ChevronDown className="hidden h-3.5 w-3.5 text-muted-foreground md:block" aria-hidden />
          </button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" className="w-56">
          <DropdownMenuLabel>{admin?.name}</DropdownMenuLabel>
          <DropdownMenuSeparator />
          <DropdownMenuItem asChild>
            <Link href="/settings">
              <Settings className="h-4 w-4" aria-hidden />
              {t("nav.settings")}
            </Link>
          </DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem onSelect={(event) => event.preventDefault()} asChild>
            <button
              onClick={handleSignOut}
              disabled={signingOut}
              className="w-full text-destructive focus:text-destructive"
            >
              <LogOut className="h-4 w-4" aria-hidden />
              {t("auth.signOut")}
            </button>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </header>
  );
}