"use client";

import LanguageSwitcher from "@/components/language-switcher";
import { ThemeSwitcher } from "@/components/theme-switcher";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useAuth } from "@/contexts/auth-context";
import { useSettingsContext } from "@/contexts/settings-context";
import { Link } from "@/i18n/routing";
import { LogOut, User } from "lucide-react";
import { useLocale, useTranslations } from "next-intl";
import { Button } from "../ui/button";
import { NotificationsButton } from "./notifications-button";

type AppHeaderProps = {
  isOnline?: boolean;
  onMenuClick?: () => void;
};

function LiveIndicatorDot() {
  return (
    <span className="relative inline-flex h-4 w-4 items-center justify-center text-primary">
      <svg
        viewBox="0 0 12 12"
        className="absolute inset-0 h-full w-full overflow-visible drop-shadow-[0_0_8px_rgba(27,131,84,0.45)]"
        aria-hidden="true"
      >
        <circle cx="6" cy="6" r="3.6" fill="currentColor" opacity="0.32">
          <animate
            attributeName="r"
            values="3.2;6.6;3.2"
            dur="1.2s"
            repeatCount="indefinite"
          />
          <animate
            attributeName="opacity"
            values="0.4;0;0.4"
            dur="1.2s"
            repeatCount="indefinite"
          />
        </circle>
        <circle cx="6" cy="6" r="2.8" fill="currentColor">
          <animate
            attributeName="r"
            values="2.5;3.6;2.5"
            dur="1.2s"
            repeatCount="indefinite"
          />
          <animate
            attributeName="opacity"
            values="0.88;1;0.88"
            dur="1.2s"
            repeatCount="indefinite"
          />
        </circle>
      </svg>
    </span>
  );
}

export function AppHeader({ isOnline = true }: AppHeaderProps) {
  const t = useTranslations();
  const locale = useLocale();
  const { user, logout } = useAuth();
  const { showThemeSwitcher } = useSettingsContext();

  // Get user data from auth context
  const userName =
    user?.name_translations?.[locale as "ar" | "en"] || user?.name || "User";
  const userRole = user?.roles?.[0]
    ? user.roles[0].label || t(`roles.names.${user.roles[0].name}`)
    : "user";
  const userImage = user?.avatar || undefined;

  const handleLogout = () => {
    logout();
  };

  return (
    <>
      {/* User Menu & Language Switcher */}
      <div className="flex items-center justify-end w-full gap-2 sm:gap-4 ">
        {/* Notifications Button */}
        <NotificationsButton />
        {isOnline && (
          <div className="flex items-center gap-2">
            <LiveIndicatorDot />
            <span className="text-xs">
              {t("user.online")}
            </span>
          </div>
        )}
        {/* Theme Switcher */}
        {showThemeSwitcher ? <ThemeSwitcher /> : null}

        {/* Language Switcher */}
        <LanguageSwitcher />

        {/* User Menu */}
        <DropdownMenu>
          <DropdownMenuTrigger asChild suppressHydrationWarning>
            <Button
              variant={"ghost"}
              className="flex items-center gap-2 sm:gap-3 hover:bg-accent/30 rounded-lg px-2 sm:px-3 py-2 transition-colors"
              suppressHydrationWarning
            >
              {/* Avatar */}
              <div className="relative">
                <Avatar className="h-10 w-10">
                  <AvatarImage src={userImage} alt={userName} />
                  <AvatarFallback />
                </Avatar>
                {isOnline && (
                  <div className="absolute bottom-0 inline-end-0 h-3 w-3 rounded-full bg-accent border-2 border-card" />
                )}
              </div>

              {/* User Info - Hidden on small mobile */}
              <div className="hidden sm:flex flex-col items-start">
                <span className="text-sm font-medium text-foreground">
                  {userName}
                </span>
                <div className="flex items-center gap-2">
                  <span className="text-xs text-muted-foreground">
                    {userRole}
                  </span>

                </div>
              </div>
            </Button>
          </DropdownMenuTrigger>

          <DropdownMenuContent align="start" className="w-48">
            <DropdownMenuItem asChild>
              <Link href="/profile">
                <User className="me-2 h-4 w-4" />
                <span>{t("user.profile")}</span>
              </Link>
            </DropdownMenuItem>
            {/* <DropdownMenuItem asChild>
              <Link href="/settings">
                <Settings className="me-2 h-4 w-4" />
                <span>{t("user.settings")}</span>
              </Link>
            </DropdownMenuItem> */}
            <DropdownMenuSeparator />
            <DropdownMenuItem
              className="text-destructive cursor-pointer text-nowrap"
              onClick={handleLogout}
            >
              <LogOut className="me-2 h-4 w-4" />
              <span>{t("auth.logout")}</span>
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </>
  );
}