"use client";

import * as React from "react";
import { useRouter } from "next/navigation";
import { CircleUserRound, LogOut } from "lucide-react";
import { cn } from "@/lib/utils";
import {
  Combobox,
  ComboboxContent,
  ComboboxItem,
  ComboboxList,
  ComboboxTrigger,
} from "@/components/ui/combobox";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { UserAvatar } from "@/components/ui/user-avatar";
import type { AuthUser } from "@/api/auth/types";
import { PROFILE_SETTINGS_PATH } from "@/lib/app-paths";

interface SidebarUserMenuProps {
  profile: AuthUser | undefined;
  isCollapsed: boolean;
  onLogout: () => void;
}

export function SidebarUserMenu({
  profile,
  isCollapsed,
  onLogout,
}: SidebarUserMenuProps) {
  const router = useRouter();

  return (
    <div className="p-2 group-data-[collapsible=icon]:px-2 group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:justify-center">
      <Combobox
        items={["Profile", "Log out"]}
        value={null}
        onValueChange={(v) => {
          if (v === "Profile") {
            router.push(PROFILE_SETTINGS_PATH);
            return;
          }
          if (v === "Log out") {
            onLogout();
          }
        }}
      >
        <Tooltip>
          <TooltipTrigger asChild>
            <ComboboxTrigger
              className={cn(
                "w-full flex items-center gap-[10px] rounded-[10px] border-none p-2 font-['Lexend_Deca'] text-left",
                "bg-transparent hover:bg-[#1d1d39]/80 transition-all duration-150",
                "group-data-[collapsible=icon]:h-8! group-data-[collapsible=icon]:min-h-8! group-data-[collapsible=icon]:w-8! group-data-[collapsible=icon]:min-w-8! group-data-[collapsible=icon]:shrink-0! group-data-[collapsible=icon]:justify-center! group-data-[collapsible=icon]:p-2!"
              )}
            >
              <UserAvatar
                avatar={profile?.avatar}
                name={profile?.name}
                className="size-8 shrink-0 rounded-full"
                fallbackClassName="bg-[#26284a] text-[11px]"
              />
              <div className="flex flex-col overflow-hidden group-data-[collapsible=icon]:hidden flex-1 min-w-0">
                <span className="text-xs font-semibold text-[#101828] truncate">
                  {profile?.name ?? "Loading…"}
                </span>
                <span className="text-[10px] text-[#575a62] truncate">
                  {profile?.role?.name
                    ? `${profile.role.name}`
                    : profile?.email ?? ""}
                </span>
              </div>
            </ComboboxTrigger>
          </TooltipTrigger>
          <TooltipContent side="right" align="center" hidden={!isCollapsed}>
            {profile?.name ?? "Account"}
          </TooltipContent>
        </Tooltip>
        <ComboboxContent
          side="top"
          sideOffset={8}
          align="start"
          className="bg-white/95 backdrop-blur-md border-white/30 shadow-xl min-w-[200px]"
        >
          <div className="px-2 py-2 border-b border-black/6 mb-1">
            <p className="text-xs font-semibold text-[#101828] truncate">
              {profile?.name ?? "—"}
            </p>
            <p className="text-[10px] text-[#575a62] truncate">
              {profile?.email ?? ""}
            </p>
            {profile?.role?.name && (
              <p className="text-[10px] text-[#575a62] mt-0.5">
                Role: {profile.role.name}
              </p>
            )}
          </div>
          <ComboboxList>
            <ComboboxItem value="Profile">
              <CircleUserRound className="size-4 shrink-0" />
              Profile
            </ComboboxItem>
            <ComboboxItem
              value="Log out"
              className="text-red-600 hover:bg-red-50 data-highlighted:bg-red-50"
            >
              <LogOut className="size-4 shrink-0" />
              Log out
            </ComboboxItem>
          </ComboboxList>
        </ComboboxContent>
      </Combobox>
    </div>
  );
}