"use client";

import { useTranslations } from "next-intl";
import type { Session } from "next-auth";
import { ChevronRight, Menu } from "lucide-react";
import { Link, usePathname } from "@/i18n/navigation";
import LanguageSwitcher from "@/components/layout/LanguageSwitcher";
import UserMenu from "@/components/layout/UserMenu";
import DevModeToggle from "@/components/layout/DevModeToggle";
import { useBrand } from "@/components/providers/BrandProvider";

const PAGE_KEYS: Record<
  string,
  "dashboard" | "users" | "employees" | "roles" | "profile" | "branding" | "settings" | "help" | "businesses" | "businessPanel" | "businessLocations" | "businessFranchises" | "businessStaff" | "businessRoles" | "businessHelp"
> = {
  "/dashboard": "dashboard",
  "/dashboard/employees": "employees",
  "/dashboard/users": "users",
  "/dashboard/roles": "roles",
  "/dashboard/profile": "profile",
  "/dashboard/help": "help",
  "/dashboard/settings/branding": "branding",
  "/dashboard/settings": "settings",
  "/dashboard/branding": "branding",
  "/dashboard/businesses": "businesses",
  "/dashboard/business": "businessPanel",
  "/dashboard/business/locations": "businessLocations",
  "/dashboard/business/franchises": "businessFranchises",
  "/dashboard/business/staff": "businessStaff",
  "/dashboard/business/roles": "businessRoles",
  "/dashboard/business/help": "businessHelp",
};

function getPageKey(pathname: string) {
  if (PAGE_KEYS[pathname]) return PAGE_KEYS[pathname];
  for (const [path, key] of Object.entries(PAGE_KEYS)) {
    if (path !== "/dashboard" && pathname.startsWith(path)) return key;
  }
  return "dashboard";
}

function isBusinessPanelPath(pathname: string) {
  return pathname.startsWith("/dashboard/business");
}

interface HeaderProps {
  session: Session;
  onMenuOpen?: () => void;
}

export default function Header({ session, onMenuOpen }: HeaderProps) {
  const tc = useTranslations("common");
  const tn = useTranslations("nav");
  const pathname = usePathname();
  const pageKey = getPageKey(pathname);
  const isRoot = pathname === "/dashboard";
  const brand = useBrand();

  return (
    <header className="sticky top-0 z-20 h-14 shrink-0 border-b border-[var(--border)] bg-[var(--bg)]/95 backdrop-blur-sm">
      <div className="flex h-full items-center justify-between gap-3 px-4 sm:gap-4 sm:px-5 lg:px-6">
        <div className="flex min-w-0 flex-1 items-center gap-2.5">
          <button
            type="button"
            onClick={onMenuOpen}
            aria-label={tc("openMenu")}
            className="inline-flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-md text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)]/35 lg:hidden"
          >
            <Menu className="h-5 w-5" />
          </button>

          <span className="truncate text-sm font-medium text-[var(--text)] lg:hidden">
            {tn(pageKey)}
          </span>

          <nav aria-label="Breadcrumb" className="hidden min-w-0 items-center gap-2 lg:flex">
            <Link
              href="/dashboard"
              className="truncate cursor-pointer text-sm text-[var(--text-faint)] transition-colors hover:text-[var(--text-muted)]"
            >
              {brand.name}
            </Link>
            <ChevronRight
              className="h-3.5 w-3.5 shrink-0 text-[var(--text-faint)] rtl-flip"
              aria-hidden
            />
            {isRoot ? (
              <span className="truncate text-sm font-medium text-[var(--text)]">
                {tn(pageKey)}
              </span>
            ) : isBusinessPanelPath(pathname) ? (
              pathname === "/dashboard/business" ? (
                <span className="truncate text-sm font-medium text-[var(--text)]">
                  {tn("businessPanel")}
                </span>
              ) : (
                <>
                  <Link
                    href="/dashboard/business"
                    className="truncate cursor-pointer text-sm text-[var(--text-faint)] transition-colors hover:text-[var(--text-muted)]"
                  >
                    {tn("businessPanel")}
                  </Link>
                  <ChevronRight
                    className="h-3.5 w-3.5 shrink-0 text-[var(--text-faint)] rtl-flip"
                    aria-hidden
                  />
                  <span className="truncate text-sm font-medium text-[var(--text)]">
                    {tn(pageKey)}
                  </span>
                </>
              )
            ) : pathname.startsWith("/dashboard/settings") ? (
              <>
                {pathname === "/dashboard/settings" ? (
                  <span className="truncate text-sm font-medium text-[var(--text)]">
                    {tn("settings")}
                  </span>
                ) : (
                  <>
                    <Link
                      href="/dashboard/settings"
                      className="truncate cursor-pointer text-sm text-[var(--text-faint)] transition-colors hover:text-[var(--text-muted)]"
                    >
                      {tn("settings")}
                    </Link>
                    <ChevronRight
                      className="h-3.5 w-3.5 shrink-0 text-[var(--text-faint)] rtl-flip"
                      aria-hidden
                    />
                    <span className="truncate text-sm font-medium text-[var(--text)]">
                      {tn(pageKey)}
                    </span>
                  </>
                )}
              </>
            ) : pathname.startsWith("/dashboard/branding") ? (
              <>
                <Link
                  href="/dashboard/settings"
                  className="truncate cursor-pointer text-sm text-[var(--text-faint)] transition-colors hover:text-[var(--text-muted)]"
                >
                  {tn("settings")}
                </Link>
                <ChevronRight
                  className="h-3.5 w-3.5 shrink-0 text-[var(--text-faint)] rtl-flip"
                  aria-hidden
                />
                <span className="truncate text-sm font-medium text-[var(--text)]">
                  {tn("branding")}
                </span>
              </>
            ) : (
              <>
                <Link
                  href="/dashboard"
                  className="truncate cursor-pointer text-sm text-[var(--text-faint)] transition-colors hover:text-[var(--text-muted)]"
                >
                  {tn("dashboard")}
                </Link>
                <ChevronRight
                  className="h-3.5 w-3.5 shrink-0 text-[var(--text-faint)] rtl-flip"
                  aria-hidden
                />
                <span className="truncate text-sm font-medium text-[var(--text)]">
                  {tn(pageKey)}
                </span>
              </>
            )}
          </nav>
        </div>

        <div className="flex shrink-0 items-center gap-2">
          <DevModeToggle />
          <LanguageSwitcher variant="header" />
          <div className="mx-1.5 h-5 w-px bg-[var(--border)] sm:mx-2" aria-hidden />
          <UserMenu session={session} />
        </div>
      </div>
    </header>
  );
}