"use client";

import { usePathname, useRouter } from "next/navigation";
import { ArrowLeftIcon, EllipsisIcon } from "lucide-react";

import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { SidebarTrigger, useSidebar } from "@/components/ui/sidebar";
import { Typography } from "@/components/ui/typography";
import { useProfile } from "@/hooks/auth/useProfile";
import { useTranslation } from "@/hooks/useTranslation";
import { findActiveNavItem } from "@/lib/constants/nav";
import type { UserRole } from "@/types/auth";

/**
 * Role-aware header for authenticated routes.
 *
 * Desktop: sidebar toggle + current route name at inline-start, the user's
 * avatar (static, initials) at inline-end. Language switching lives in the
 * sidebar footer.
 *
 * Mobile (per Figma): back button at inline-start, centered screen title, "⋯"
 * at inline-end that opens the sidebar. Logical classes + `rtl:rotate-180` on
 * the arrow mirror the whole bar between English and Arabic with no JS
 * branching.
 */
export function AppHeader({ role }: { role: UserRole }) {
  const { t } = useTranslation();
  const pathname = usePathname();
  const router = useRouter();
  const { toggleSidebar } = useSidebar();
  const { data: user } = useProfile();

  const initials =
    `${user?.firstName?.[0] ?? ""}${user?.lastName?.[0] ?? ""}`.toUpperCase();
  const activeItem = findActiveNavItem(role, pathname);
  const title = activeItem ? t(activeItem.titleKey) : t("dashboard.title");

  return (
    // Fixed by the AppShell viewport lock — the content area scrolls under it
    <header className="flex h-14 shrink-0 items-center border-b border-border bg-white px-4">
      {/* Desktop */}
      <div className="hidden w-full items-center justify-between md:flex">
        <div className="flex items-center gap-2">
          <SidebarTrigger className="rtl:-scale-x-100" />
          <Typography as="h1" variant="h2">
            {title}
          </Typography>
        </div>
        <Avatar size="lg">
          <AvatarFallback>{initials}</AvatarFallback>
        </Avatar>
      </div>

      {/* Mobile — back / title / sidebar dots */}
      <div className="flex w-full items-center md:hidden">
        <div className="flex w-10 shrink-0 justify-start">
          <Button
            variant="ghost"
            size="icon-sm"
            onClick={() => router.back()}
            aria-label={t("common.back")}
          >
            <ArrowLeftIcon className="rtl:rotate-180" />
          </Button>
        </div>
        <Typography
          as="h1"
          variant="h3"
          className="flex-1 truncate text-center"
        >
          {title}
        </Typography>
        <div className="flex w-10 shrink-0 justify-end">
          <Button
            variant="ghost"
            size="icon-sm"
            onClick={toggleSidebar}
            aria-label={t("common.menu")}
          >
            <EllipsisIcon />
          </Button>
        </div>
      </div>
    </header>
  );
}