"use client";

import type { ReactElement } from "react";
import { useTranslation } from "react-i18next";

import {
  LoadingDots,
  type LoadingDotsSize,
} from "@/components/ui/loading-dots";
import { TableCell, TableRow } from "@/components/ui/table";
import { cn } from "@/lib/utils";

/** 区块居中加载（列表、表单、详情页等） */
export function AdminLoadingState({
  className,
  label,
  size = "md",
  showLabel = false,
  minHeight = "4rem",
}: {
  className?: string;
  label?: string;
  size?: LoadingDotsSize;
  showLabel?: boolean;
  minHeight?: string | number;
}): ReactElement {
  const { t } = useTranslation("common");
  const resolvedLabel = label ?? t("states.loading");

  return (
    <div
      className={cn(
        "flex w-full items-center justify-center py-8 text-muted-foreground",
        className,
      )}
      style={{ minHeight: typeof minHeight === "number" ? `${minHeight}px` : minHeight }}
    >
      <LoadingDots size={size} label={resolvedLabel} showLabel={showLabel} />
    </div>
  );
}

/** 下拉、弹层等紧凑区域 */
export function AdminLoadingInline({
  className,
  label,
  size = "sm",
}: {
  className?: string;
  label?: string;
  size?: LoadingDotsSize;
}): ReactElement {
  const { t } = useTranslation("common");
  const resolvedLabel = label ?? t("states.loading");

  return (
    <div
      className={cn("flex justify-center py-3 text-muted-foreground", className)}
      role="status"
      aria-live="polite"
      aria-busy="true"
    >
      <LoadingDots size={size} label={resolvedLabel} />
    </div>
  );
}

/** 表格内加载行（colSpan 对齐列数） */
export function AdminTableLoadingRow({
  colSpan,
  label,
  size = "md",
  className,
  cellClassName,
}: {
  colSpan: number;
  label?: string;
  size?: LoadingDotsSize;
  className?: string;
  cellClassName?: string;
}): ReactElement {
  const { t } = useTranslation("common");
  const resolvedLabel = label ?? t("states.loading");

  return (
    <TableRow className={className}>
      <TableCell colSpan={colSpan} className={cn("py-10", cellClassName)}>
        <div className="flex justify-center">
          <LoadingDots size={size} label={resolvedLabel} />
        </div>
      </TableCell>
    </TableRow>
  );
}