"use client";

import React from "react";
import { cn } from "@/lib/utils";
import { formatLikeDisplay } from "@/lib/formatLikeDisplay";

/** آیکون بالا + عدد پایین — ریلز */
export const socialStatButtonClassVertical =
  "inline-flex flex-col items-center justify-center gap-0.5 text-[10px] font-semibold leading-none min-w-[28px]";

/** آیکون + عدد سمت راست — صفحه پست */
export const socialStatButtonClassHorizontal =
  "inline-flex flex-row items-center gap-1.5 text-xs font-semibold leading-none whitespace-nowrap";

/** @deprecated */
export const socialStatButtonClass = socialStatButtonClassVertical;

type SocialStatButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
  count?: number;
  likeCount?: number;
  icon: React.ReactNode;
  showZero?: boolean;
  layout?: "vertical" | "horizontal";
};

export function SocialStatButton({
  count,
  likeCount,
  icon,
  showZero = true,
  layout = "vertical",
  className,
  children,
  ...props
}: SocialStatButtonProps) {
  let displayLabel: string | null = null;

  if (likeCount !== undefined) {
    displayLabel = formatLikeDisplay(likeCount);
  } else if (count !== undefined && (showZero || count > 0)) {
    displayLabel = String(count);
  }

  if (layout === "horizontal") {
    return (
      <button
        type="button"
        className={cn(socialStatButtonClassHorizontal, "dir-ltr", className)}
        {...props}
      >
        <span className="inline-flex shrink-0 items-center justify-center">
          {icon}
        </span>
        {displayLabel !== null ? (
          <span className="tabular-nums">{displayLabel}</span>
        ) : null}
        {children}
      </button>
    );
  }

  return (
    <button
      type="button"
      className={cn(socialStatButtonClassVertical, className)}
      {...props}
    >
      <span className="inline-flex shrink-0 items-center justify-center">
        {icon}
      </span>
      {displayLabel !== null ? (
        <span className="tabular-nums">{displayLabel}</span>
      ) : null}
      {children}
    </button>
  );
}

type SocialIconButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
  icon: React.ReactNode;
  label?: string;
  layout?: "vertical" | "horizontal";
};

export function SocialIconButton({
  icon,
  label,
  layout = "vertical",
  className,
  ...props
}: SocialIconButtonProps) {
  if (layout === "horizontal") {
    return (
      <button
        type="button"
        className={cn(socialStatButtonClassHorizontal, "dir-ltr", className)}
        {...props}
      >
        <span className="inline-flex shrink-0 items-center justify-center">
          {icon}
        </span>
        {label ? <span className="tabular-nums">{label}</span> : null}
      </button>
    );
  }

  return (
    <button
      type="button"
      className={cn(socialStatButtonClassVertical, className)}
      {...props}
    >
      <span className="inline-flex shrink-0 items-center justify-center">
        {icon}
      </span>
      {label ? <span className="tabular-nums">{label}</span> : null}
    </button>
  );
}
