"use client";

import Link from "next/link";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import {
  Bell,
  Heart,
  Wallet,
  ChartPie,
  CalendarClock,
  Calendar,
} from "lucide-react";
// import { LogoutButton } from "@/components/auth/logoutButton";
// import { useUserRole } from "@/hooks/useUserRole";
import CustomTooltip from "../custom-tooltips";

interface AuthenticatedComponentsProps {
  uid: string;
  avatarUrl?: string | null;
  notificationCount: number;
}

export const AuthenticatedComponents = ({
  uid,
  avatarUrl,
  notificationCount,
}: AuthenticatedComponentsProps) => {
  //   const { data } = useUserRole();

  //   const businessClass =
  //     data?.role === "business"
  //       ? "border-2 border-[#FFD700] bg-[#FFF8DC] dark:bg-[#4B3E2B] rounded-md p-1"
  //       : "";

  return (
    // <div className={`flex gap-3 pl-2 items-center ${businessClass}`}></div>
    <div className={`flex gap-3 pl-2 items-center`}>
      <CustomTooltip message="Notification">
        <Link href={"/notification"}>
          <div className="relative inline-block">
            <Bell className="h-6 w-6 " />
            {notificationCount >= 1 && (
              <div>
                <span className="absolute -top-1 -right-1 inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white bg-red-600 rounded-full animate-ping"></span>
                <span className="absolute -top-1 -right-1 inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white bg-red-600 rounded-full  ">
                  {notificationCount}
                </span>
              </div>
            )}
          </div>
        </Link>
      </CustomTooltip>
      <CustomTooltip message="Followed">
        <Link href="/follow">
          <Heart />
        </Link>
      </CustomTooltip>
      <CustomTooltip message="Portfolio">
        <Link href={"/portfolio/" + uid}>
          <Wallet className="cursor-pointer" />
        </Link>
      </CustomTooltip>
      {/* {data?.role === "investor" && (
        <div className="flex gap-2">
          <CustomTooltip message="Calendar">
            <Link href="/calendar/">
              <CalendarClock />
            </Link>
          </CustomTooltip>
        </div>
      )} */}
      <CustomTooltip message="Calendar">
        <Link href={"/calendar"}>
          <Calendar className="cursor-pointer" />
        </Link>
      </CustomTooltip>
      {/*chart pie icon for bussiness's dashboard */}
      {/* {data?.role === "business" && (
        <div className="flex gap-2">
          <CustomTooltip message="Dashboard">
            <Link href="/dashboard">
              <ChartPie />
            </Link>
          </CustomTooltip>
        </div>
      )} */}
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button
            variant="outline"
            size="icon"
            className="overflow-hidden rounded-full"
          >
            <Avatar>
              {avatarUrl ? (
                <AvatarImage src={avatarUrl} alt="profile" />
              ) : (
                <AvatarImage
                  src="https://api.dicebear.com/9.x/pixel-art/svg"
                  alt="profile"
                />
              )}

              <AvatarFallback>1</AvatarFallback>
            </Avatar>
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end">
          <DropdownMenuItem>
            <Link href={`/profile/${uid}`}>Profile</Link>
          </DropdownMenuItem>
          <DropdownMenuSeparator />
          {/* {data?.role === "admin" && (
            <DropdownMenuItem>
              <Link href="/admin">Admin</Link>
            </DropdownMenuItem>
          )}
          {data?.role === "business" && (
            <>
              <DropdownMenuItem>
                <Link href="/calendar/manage">Calendar</Link>
              </DropdownMenuItem>
              <DropdownMenuSeparator />
            </>
          )} */}
          {/* {data != null && data != undefined && data.role === "business" && (
            <DropdownMenuItem>
              <Link href="/dataroom/manage">Dataroom</Link>
            </DropdownMenuItem>
          )} */}
          <DropdownMenuSeparator />
          <DropdownMenuItem>{/* <LogoutButton /> */}</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
};