"use client";

import { useState, useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { RootState, AppDispatch } from "@/store/store";
import { logout } from "@/store/slices/auth-slice";
import Link from "next/link";
import { useParams, useRouter } from "next/navigation";
import { Package, User, LogOut } from "lucide-react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import toast from "react-hot-toast";
import Image from "next/image";
import { useTranslations } from "next-intl";
import { CiLogout } from "react-icons/ci";
import { CiLogin } from "react-icons/ci";

export default function UserMenu({ isMobile = false }: { isMobile?: boolean }) {
  const [isMounted, setIsMounted] = useState(false);
  const dispatch = useDispatch<AppDispatch>();
  const { user, isAuthenticated } = useSelector(
    (state: RootState) => state.auth
  );
  const params = useParams();
  const locale = (params?.locale as string) || "ar";
  const t = useTranslations("user-menu");
  const isRTL = locale === "ar";

  useEffect(() => {
    setIsMounted(true);
  }, []);

  const router = useRouter();

  const handleLogout = async () => {
    try {
      await dispatch(logout());
      toast.success(t("logged-out-successfully"));
      router.push(`/${locale}/home`);
    } catch (error) {
      toast.error(t("logout-failed"));
    }
  };

  // Don't render until mounted to avoid SSR issues
  if (!isMounted) {
    return (
      <User
        className={`w-[22px] h-[22px] ${isMobile ? "lg:hidden" : "hidden lg:flex"}`}
      />
    );
  }

  if (!isAuthenticated) {
    return (
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <button
            className={`flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 transition-colors hover:bg-gray-200 ${isMobile ? "lg:hidden" : "hidden lg:flex"
              }`}
            aria-label="User menu"
          >
            <User className="w-5 h-5" />
          </button>
        </DropdownMenuTrigger>
        <DropdownMenuContent className={isMobile ? "z-[80]" : ""}>
          <div className="flex items-center gap-2 p-2">
            <div className="flex flex-col space-y-1 leading-none">
              <p className="font-medium rtl:text-right ltr:text-left">
                {t("guest-user")}
              </p>
              <p className="w-[200px] truncate text-sm text-muted-foreground rtl:text-right ltr:text-left">
                {t("sign-in-to-access")}
              </p>
            </div>
          </div>
          <DropdownMenuSeparator />
          <DropdownMenuItem
            asChild
            className={`cursor-pointer flex gap-2 items-center`}
          >
            <Link
              href={`/${locale}/login`}
              className={`flex items-center ${isRTL ? "flex-row-reverse" : ""}`}
              prefetch={true}
            >
              <CiLogin className={`h-6 w-6`} />
              <span>{t("sign-in")}</span>
            </Link>
          </DropdownMenuItem>
          <DropdownMenuItem
            asChild
            className={`cursor-pointer flex gap-2 items-center ${isRTL ? "flex-row-reverse" : ""
              }`}
          >
            <Link
              href={`/${locale}/user-profile`}
              className={`flex items-center ${isRTL ? "flex-row-reverse" : ""}`}
              prefetch={true}
            >
              <User className="w-[22px] h-[22px]" />
              <span>{t("profile")}</span>
            </Link>
          </DropdownMenuItem>

          <DropdownMenuItem
            asChild
            className={`cursor-pointer flex gap-2 items-center ${isRTL ? "flex-row-reverse" : ""
              }`}
          >
            <Link
              href={`/${locale}/user-profile/orders`}
              className={`flex items-center ${isRTL ? "flex-row-reverse" : ""}`}
              prefetch={true}
            >
              <Package className="h-5 w-5" />
              <span>{t("orders")}</span>
            </Link>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    );
  }

  return (
    <DropdownMenu>
      <DropdownMenuTrigger
        asChild
        className="cursor-pointer flex gap-2 items-center"
      >
        <button
          className={`flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 transition-colors hover:bg-gray-200 ${isMobile ? "lg:hidden" : "hidden lg:flex"
            }`}
          aria-label="User menu"
        >
          <User className="w-5 h-5" />
        </button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className={`w-56${isMobile ? " z-[80]" : ""}`}>
        <div className="flex items-center gap-2 p-2">
          <div className="flex flex-col space-y-1 leading-none">
            <p className="font-medium">
              {user?.firstName} {user?.lastName}
            </p>
            <p className="w-[200px] truncate text-sm text-muted-foreground">
              {user?.email}
            </p>
          </div>
        </div>
        <DropdownMenuSeparator />
        <DropdownMenuItem
          asChild
          className={`cursor-pointer flex gap-2 items-center ${isRTL ? "flex-row-reverse" : ""
            }`}
        >
          <Link
            href={`/${locale}/user-profile`}
            className={`flex items-center ${isRTL ? "flex-row-reverse" : ""}`}
            prefetch={true}
          >
            <User className="w-[22px] h-[22px]" />
            <span>{t("profile")}</span>
          </Link>
        </DropdownMenuItem>

        <DropdownMenuItem
          asChild
          className={`cursor-pointer flex gap-2 items-center ${isRTL ? "flex-row-reverse" : ""
            }`}
        >
          <Link
            href={`/${locale}/user-profile/orders`}
            className={`flex items-center ${isRTL ? "flex-row-reverse" : ""}`}
            prefetch={true}
          >
            <Package className="h-5 w-5" />
            <span>{t("orders")}</span>
          </Link>
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem
          onClick={handleLogout}
          className={`cursor-pointer flex gap-2 items-center ${isRTL ? "flex-row-reverse" : ""
            }`}
        >
          <LogOut className={`${isRTL ? "ml-2" : "mr-2"} h-5 w-5`} />
          <span>{t("log-out")}</span>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}