"use client";

import { Button } from "@/components/ui/button";
import { usePathname, useRouter } from "@/i18n/routing";
import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
import { Bell, ChevronDown, Globe, Menu, Moon, Sun } from "lucide-react";
import { cn } from "@/lib/utils";
import { useLocale, useTranslations } from "next-intl";
import { useTheme } from "next-themes";
import Image from "next/image";
import * as React from "react";
import { isRtlLocale, type Locale } from "@/lib/i18n-utils";
import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem } from "../ui/dropdown-menu";
import { useUserStore } from "@/store/userStore";
import { clearAuthSession } from "@/swr/auth-config";

interface DashboardHeaderProps {
  onMenuClick?: () => void;
}

export function DashboardHeader({ onMenuClick }: DashboardHeaderProps = {}) {
  const { theme, setTheme } = useTheme();
  const t = useTranslations("dashboard.header");
  const locale = useLocale() as Locale;
  const isRtl = isRtlLocale(locale);
  const router = useRouter();
  const pathname = usePathname();
  const [mounted, setMounted] = React.useState(false);
  const [isPending, startTransition] = React.useTransition();

  React.useEffect(() => {
    setMounted(true);
  }, []);

  const switchLocale = () => {
    startTransition(() => {
      router.replace(pathname, { locale: locale === "ar" ? "en" : "ar" });
    });
  };

  const user = useUserStore((state) => state.user);
  const profile = user?.profile;

  const firstName = profile?.first_name as string | undefined;
  const lastName = profile?.last_name as string | undefined;
  const displayName = firstName && lastName ? `${firstName} ${lastName}` : undefined;
  const displayInitials = displayName
    ? displayName.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2)
    : t("userInitials");
  const avatarSrc =
    (typeof profile?.image === "string" && profile.image) || null;

  if (!mounted) {
    return null;
  }

  return (
    <header className="flex h-[72px] items-center justify-between border-b border-border bg-card px-4 sm:px-6">
      <Button
        variant="ghost"
        size="icon"
        className="h-10 w-10 rounded-lg lg:hidden"
        onClick={onMenuClick}
        aria-label={t("openMenu")}
      >
        <Menu className="h-5 w-5" />
      </Button>

      <div className={cn("flex flex-1 items-center  gap-2 sm:gap-3","justify-end")}>
        <Button
          variant="outline"
          size="icon"
          className="relative h-10 w-10 rounded-lg border-border text-muted-foreground hover:bg-accent hover:text-foreground active:bg-primary/10"
        >
          <Bell className="h-5 w-5" />
          <span className="absolute end-[7px] top-[6px] h-1.5 w-1.5 rounded-full bg-red-500" />
        </Button>

        <Button
          variant="outline"
          size="icon"
          onClick={switchLocale}
          disabled={isPending}
          className="h-10 w-10 rounded-lg border-border hover:bg-accent active:bg-primary/10 disabled:opacity-70"
        >
          <Image
            src="/images/login/icons/sa-flag.svg"
            alt={locale === "ar" ? t("arabic") : t("english")}
            width={20}
            height={16}
            className="h-4 w-5 object-contain"
          />
        </Button>

        <Button
          variant="outline"
          size="icon"
          className="h-10 w-10 rounded-lg border-border text-muted-foreground hover:bg-accent hover:text-foreground active:bg-primary/10"
          onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
        >
          {theme === "dark" ? (
            <Sun className="h-5 w-5" />
          ) : (
            <Moon className="h-5 w-5" />
          )}
        </Button>

        <Button
          variant="outline"
          size="icon"
          className="h-10 w-10 rounded-lg border-border text-muted-foreground hover:bg-accent hover:text-foreground active:bg-primary/10"
        >
          <Globe className="h-5 w-5" />
        </Button>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button
              variant="ghost"
              className={cn(
                "h-auto gap-2 rounded-lg px-2 py-1 hover:bg-accent active:bg-primary/10",
                "flex-row" 
              )}
            >

              <div className="relative">
                <Avatar className="h-10 w-10 border border-border">
                  {avatarSrc ? (
                    <AvatarImage src={avatarSrc} alt={displayName ?? t("userInitials")} />
                  ) : null}
                  <AvatarFallback>{displayInitials}</AvatarFallback>
                </Avatar>
                <div className="absolute bottom-0 end-0 h-2.5 w-2.5 rounded-full border-2 border-white bg-status-green" />
              </div>
              <div className="hidden sm:flex sm:flex-col sm:gap-1">
                <span className="text-[13px] font-bold leading-none text-foreground">
                  {displayName ?? t("userName")}
                </span>
                <span className="text-[10px] leading-none text-muted-foreground">
                  {t("userRole")}
                </span>
              </div>
              <ChevronDown className="h-4 w-4 text-foreground" />

            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="start" className="w-48">
            <DropdownMenuItem className="cursor-pointer text-foreground hover:bg-accent active:bg-primary/10">{t("profile")}</DropdownMenuItem>
            <DropdownMenuItem className="cursor-pointer text-foreground hover:bg-accent active:bg-primary/10">{t("settings")}</DropdownMenuItem>
            <DropdownMenuItem
              className="cursor-pointer text-red-500 hover:bg-accent active:bg-primary/10"
              onClick={async () => {
                await clearAuthSession();
                router.refresh();
                router.replace("/login");
              }}
            >
              {t("logout")}
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </header>
  );
}