"use client";

import type { MouseEvent } from "react";

import Avatar from "@mui/material/Avatar";
import Box from "@mui/material/Box";
import ButtonBase from "@mui/material/ButtonBase";
import Skeleton from "@mui/material/Skeleton";
import Typography from "@mui/material/Typography";
import { alpha, useTheme } from "@mui/material/styles";

import { dashboardAssets } from "@/components/dashboard/dashboard-assets";
import { DashboardAssetIcon } from "@/components/dashboard/dashboard-asset-icon";

type UserProfileButtonProps = {
  open: boolean;
  onClick: (event: MouseEvent<HTMLElement>) => void;
  name: string | null;
  position: string | null;
  avatar: string | null;
  isLoading: boolean;
};

function getInitials(name: string | null) {
  if (!name) {
    return "";
  }
  const parts = name.trim().split(/\s+/);
  const first = parts[0]?.[0] ?? "";
  const last = parts.length > 1 ? parts[parts.length - 1][0] : "";
  return (first + last).toUpperCase();
}

export function UserProfileButton({
  open,
  onClick,
  name,
  position,
  avatar,
  isLoading,
}: UserProfileButtonProps) {
  const theme = useTheme();
  const initials = getInitials(name);

  return (
    <ButtonBase
      onClick={onClick}
      sx={{
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        width: { xs: "auto", sm: 260 },
        gap: 1.5,
        borderRadius: "12px",
        px: 0.5,
        py: 0.25,
      }}
    >
      <Box sx={{ display: "flex", alignItems: "center", gap: 1.5, minWidth: 0 }}>
        <Box
          sx={{
            width: 40,
            height: 40,
            borderRadius: "50%",
            overflow: "hidden",
            border: `1px solid ${theme.palette.divider}`,
            backgroundColor:
              theme.palette.mode === "dark"
                ? alpha(theme.palette.common.white, 0.04)
                : theme.palette.background.paper,
            flexShrink: 0,
          }}
        >
          {isLoading ? (
            <Skeleton variant="circular" width="100%" height="100%" />
          ) : avatar ? (
            <Avatar
              src={avatar}
              alt={name ?? ""}
              sx={{
                width: "100%",
                height: "100%",
              }}
            >
              {initials}
            </Avatar>
          ) : (
            <Avatar
              sx={{
                width: "100%",
                height: "100%",
                bgcolor: theme.palette.primary.main,
                color: theme.palette.primary.contrastText,
                fontSize: 14,
                fontWeight: 600,
              }}
            >
              {initials}
            </Avatar>
          )}
        </Box>

        <Box
          sx={{
            display: { xs: "none", sm: "flex" },
            flexDirection: "column",
            gap: 0.5,
            textAlign: "left",
            minWidth: 0,
          }}
        >
          {isLoading ? (
            <>
              <Skeleton variant="text" width={120} height={14} />
              <Skeleton variant="text" width={90} height={12} />
            </>
          ) : (
            <>
              <Typography
                sx={{
                  color: theme.palette.text.primary,
                  fontSize: 14,
                  fontWeight: 600,
                  lineHeight: 1,
                  whiteSpace: "nowrap",
                  overflow: "hidden",
                  textOverflow: "ellipsis",
                }}
              >
                {name ?? "—"}
              </Typography>
              <Typography
                sx={{
                  color: theme.palette.text.secondary,
                  fontSize: 11,
                  fontWeight: 500,
                  lineHeight: 1,
                  whiteSpace: "nowrap",
                  overflow: "hidden",
                  textOverflow: "ellipsis",
                }}
              >
                {position ?? ""}
              </Typography>
            </>
          )}
        </Box>
      </Box>

      <Box
        sx={{
          width: 24,
          height: 24,
          display: "grid",
          placeItems: "center",
          flexShrink: 0,
        }}
      >
        <DashboardAssetIcon
          src={dashboardAssets.chevronDownSmall}
          width={8}
          height={5}
          sx={{
            transform: open ? "rotate(180deg)" : "rotate(0deg)",
            transition: "transform 0.2s ease",
            filter:
              theme.palette.mode === "dark"
                ? "brightness(0) invert(1)"
                : "none",
            opacity: theme.palette.mode === "dark" ? 0.88 : 1,
          }}
        />
      </Box>
    </ButtonBase>
  );
}