import { useAuth } from "@/contexts/useAuth";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { StrictModeToggle } from "@/components/admin/StrictModeToggle";
import {
  useIdentity,
  isAdminIdentity,
  isEnterpriseIdentity,
} from "@/data/identity";
import { User, LogOut, Building2 } from "lucide-react";
import { FC } from "react";
import { useStrictness } from "@/data/strictness";

export const UserDetails: FC = () => {
  const { user, logout } = useAuth();
  const { data: identityData } = useIdentity();
  const { data, isLoading } = useStrictness();

  const identity = identityData?.identity;
  const isAdmin = identity ? isAdminIdentity(identity) : false;
  const isEnterprise = identity ? isEnterpriseIdentity(identity) : false;

  const username = user?.name || "User";
  const userEmail = user?.email || "";

  return (
    <div className="relative">
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <button className="w-full text-left cursor-pointer rounded-lg outline-hidden ring-sidebar-ring focus-visible:ring-2 hover:bg-white/10 transition-colors">
            <div className="flex flex-row items-center gap-3 pl-2 min-w-0">
              <div className="w-9 h-9 bg-pink-500 rounded-full flex items-center justify-center shadow-md shrink-0">
                <User className="h-5 w-5 text-white" />
              </div>
              <div className="flex-1 min-w-0 overflow-hidden">
                <div className="text-sm truncate">{username}</div>
                <div className="text-sm text-white/65 truncate">
                  {userEmail}
                </div>
              </div>
            </div>
          </button>
        </DropdownMenuTrigger>

        <DropdownMenuContent
          align="end"
          className="w-[200px] mt-2 bg-white shadow-[0_6px_20px_0_rgba(30,27,75,0.20)] ml-[5px]"
          side="top"
          sideOffset={8}
        >
          <div className="flex flex-col items-center gap-3 bg-white p-2 py-4">
            <div className="w-[54px] h-[54px] bg-pink-500 rounded-full flex items-center justify-center shadow-md shrink-0">
              <User className="h-7 w-7 text-white" />
            </div>
            <div className="flex-1 min-w-0 w-full text-center px-2">
              <div className="text-md font-semibold truncate pb-1 w-full">
                {username}
              </div>
              <div className="text-xs text-gray-600 truncate w-full">
                {userEmail}
              </div>
            </div>
          </div>

          {data?.strictnessFeatureEnabled &&
            isAdmin && ( // toggle is visible only when strictness is enabled and only for admins
              <>
                <div className="px-2">
                  <DropdownMenuSeparator />
                </div>
                <StrictModeToggle
                  isLoading={isLoading}
                  strictnessData={{
                    strictnessFeatureEnabled: true,
                    isStrict: data.isStrict,
                    adminOverride: data.adminOverride,
                  }}
                />
              </>
            )}

          {isEnterprise && (
            <>
              <div className="px-2">
                <DropdownMenuSeparator />
              </div>
              <div className="flex items-center gap-2 px-3 py-2">
                <Building2 className="h-4 w-4 text-gray-500" />
                <span className="text-sm text-gray-600">
                  {isAdmin ? "Enterprise Admin" : "Enterprise user"}
                </span>
              </div>
            </>
          )}

          <div className="px-2">
            <DropdownMenuSeparator />
          </div>

          <DropdownMenuItem
            className="flex items-center gap-2 cursor-pointer focus:bg-transparent focus:text-current"
            onClick={() => logout()}
          >
            <LogOut className="h-4 w-4" />
            <span className="text-sm text-gray-600">Log Out</span>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
};
