"use client";

import { ChevronUpIcon } from "@/assets/icons";
import {
  Dropdown,
  DropdownContent,
  DropdownTrigger,
} from "@/components/ui/dropdown";
import { useUser } from "@/contexts";
import { cn } from "@/lib/utils";
import { truncateString } from "@/utils/shared";
import Image from "next/image";
import Link from "next/link";
import { useState } from "react";
import type { CSSProperties } from "react";
import { LogOutIcon, SettingsIcon, UserIcon } from "./icons";

export function UserInfo() {
  const [isOpen, setIsOpen] = useState(false);
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
  const [isHovered, setIsHovered] = useState(false);
  const { logout, user } = useUser();

  const spotlightStyle = {
    "--spotlight-x": `${mousePosition.x}px`,
    "--spotlight-y": `${mousePosition.y}px`,
    background:
      "radial-gradient(130px circle at var(--spotlight-x) var(--spotlight-y), rgba(255, 255, 255, 0.95), transparent 70%)",
    WebkitMask:
      "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
    WebkitMaskComposite: "xor",
    maskComposite: "exclude",
  } as CSSProperties;

  return (
    <Dropdown isOpen={isOpen} setIsOpen={setIsOpen}>
      <DropdownTrigger
        className="relative isolate overflow-hidden rounded-xl border border-stroke/70 bg-white/70 px-2.5 py-1.5 align-middle shadow-theme-xs backdrop-blur-md outline-none ring-primary ring-offset-2 transition-colors focus-visible:ring-1 dark:border-dark-3 dark:bg-dark-2/70 dark:ring-offset-gray-dark"
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
        onMouseMove={(event) => {
          const rect = event.currentTarget.getBoundingClientRect();
          setMousePosition({
            x: event.clientX - rect.left,
            y: event.clientY - rect.top,
          });
        }}
      >
        <span
          aria-hidden="true"
          className="pointer-events-none absolute inset-0 z-0 rounded-[inherit] p-px transition-opacity duration-300"
          style={{
            ...spotlightStyle,
            opacity: isHovered ? 1 : 0,
          }}
        />
        <span className="sr-only">My Account</span>

        <figure className="relative z-10 flex items-center gap-3">
          <div className="rounded-full border border-stroke/70 bg-gray-3/80 p-3.5 dark:border-dark-3 dark:bg-dark-3">
            <UserIcon />
          </div>

          <figcaption className="flex items-center gap-1 font-medium text-dark dark:text-dark-6 max-[1024px]:sr-only">
            <span>{user?.full_name}</span>

            <ChevronUpIcon
              aria-hidden
              className={cn(
                "rotate-180 transition-transform",
                isOpen && "rotate-0",
              )}
              strokeWidth={1.5}
            />
          </figcaption>
        </figure>
      </DropdownTrigger>

      <DropdownContent
        className="min-[230px]:min-w-[17.5rem] rounded-2xl border border-stroke/70 bg-white/95 shadow-theme-xs backdrop-blur-md dark:border-dark-3 dark:bg-gray-dark/95"
        align="end"
      >
        <h2 className="sr-only">User information</h2>

        <figure className="flex items-center gap-2.5 px-5 py-3.5">
          {user?.profile_image ? (
            <Image
              src={user.profile_image}
              className="size-12 rounded-full border border-stroke/70 dark:border-dark-3"
              unoptimized
              alt={`Avatar for ${user.full_name}`}
              role="presentation"
              width={200}
              height={200}
            />
          ) : (
            <div className="rounded-full border border-stroke/70 bg-gray-3 p-4 dark:border-dark-3 dark:bg-gray-7">
              <UserIcon width={30} height={30} />
            </div>
          )}

          <figcaption className="space-y-1 text-base font-medium">
            <div className="mb-2 leading-none text-dark dark:text-white">
              {user?.full_name}
            </div>

            <div className="leading-none text-gray-6">
              {truncateString(user?.email ?? "")}
            </div>
          </figcaption>
        </figure>

        <hr className="border-[#E8E8E8] dark:border-dark-3" />

        <div className="p-2 text-base text-[#4B5563] dark:text-dark-6 [&>*]:cursor-pointer">
          <Link
            href={"/profile"}
            onClick={() => setIsOpen(false)}
            className="flex w-full items-center gap-2.5 rounded-xl px-2.5 py-[9px] transition-colors hover:bg-gray-2/80 hover:text-dark dark:hover:bg-dark-3 dark:hover:text-white"
          >
            <UserIcon />

            <span className="mr-auto text-base font-medium">View profile</span>
          </Link>

          <Link
            href={"/pages/settings"}
            onClick={() => setIsOpen(false)}
            className="flex w-full items-center gap-2.5 rounded-xl px-2.5 py-[9px] transition-colors hover:bg-gray-2/80 hover:text-dark dark:hover:bg-dark-3 dark:hover:text-white"
          >
            <SettingsIcon />

            <span className="mr-auto text-base font-medium">
              Account Settings
            </span>
          </Link>
        </div>

        <hr className="border-[#E8E8E8] dark:border-dark-3" />

        <div className="p-2 text-base text-[#4B5563] dark:text-dark-6">
          <button
            className="flex w-full items-center gap-2.5 rounded-xl px-2.5 py-[9px] transition-colors hover:bg-gray-2/80 hover:text-dark dark:hover:bg-dark-3 dark:hover:text-white"
            onClick={() => {
              setIsOpen(false);
              logout();
            }}
          >
            <LogOutIcon />

            <span className="text-base font-medium">Log out</span>
          </button>
        </div>
      </DropdownContent>
    </Dropdown>
  );
}
