"use client";

import { getSubscriptionVisual } from "@/features/profile/utils/subscription-theme";
import type { UserSubscription } from "@/features/profile/types";

type ProfileAvatarProps = {
  subscription?: UserSubscription | null;
  size?: "sm" | "lg";
  showBadge?: boolean;
  className?: string;
  title?: string;
};

const sizeConfig = {
  sm: {
    container: "size-10",
    icon: "size-5",
    badge: "px-1.5 py-0.5 text-[9px] font-bold tracking-wide",
    inner: "rounded-full",
  },
  lg: {
    container: "size-20",
    icon: "size-10",
    badge: "px-2 py-0.5 text-[10px] font-bold tracking-wide",
    inner: "rounded-full",
  },
} as const;

function joinClasses(...classes: Array<string | false | undefined>) {
  return classes.filter(Boolean).join(" ");
}

export function ProfileAvatar({
  subscription,
  size = "sm",
  showBadge = true,
  className,
  title,
}: ProfileAvatarProps) {
  const visual = getSubscriptionVisual(subscription);
  const config = sizeConfig[size];
  const Icon = visual.icon;

  const avatarInner = (
    <div
      className={joinClasses(
        "flex h-full w-full items-center justify-center",
        config.inner,
        visual.innerClassName,
      )}
    >
      <Icon aria-hidden className={joinClasses(config.icon, visual.iconClassName)} strokeWidth={1.75} />
    </div>
  );

  return (
    <div
      className={joinClasses("relative shrink-0", config.container, className)}
      title={title ?? visual.tooltip}
    >
      {visual.glowClassName ? (
        <div aria-hidden className={visual.glowClassName} />
      ) : null}

      {visual.ringClassName ? (
        <div
          className={joinClasses(
            "flex h-full w-full items-center justify-center rounded-full",
            visual.ringClassName,
          )}
        >
          {visual.ringClassName.includes("p-[2px]") ? (
            <div className="h-[calc(100%-4px)] w-[calc(100%-4px)]">{avatarInner}</div>
          ) : (
            avatarInner
          )}
        </div>
      ) : (
        avatarInner
      )}

      {showBadge && visual.badge ? (
        <span
          className={joinClasses(
            "absolute -bottom-1 left-1/2 z-10 -translate-x-1/2 whitespace-nowrap rounded-full",
            config.badge,
            visual.badgeClassName,
          )}
        >
          {visual.badge}
        </span>
      ) : null}
    </div>
  );
}