"use client";

import Image from "next/image";
import type { ReactElement, ReactNode } from "react";
import { useTranslation } from "react-i18next";

import { TableCell, TableRow } from "@/components/ui/table";
import { cn } from "@/lib/utils";

const NOTDATA_IMAGE = "/notdata.png";

export function AdminNoResourceState({
  className,
  message,
  compact = false,
  imageClassName,
  children,
}: {
  className?: string;
  /** 默认「暂无资源」 */
  message?: string;
  compact?: boolean;
  imageClassName?: string;
  children?: ReactNode;
}): ReactElement {
  const { t } = useTranslation("common");
  const label = message ?? t("states.noResource", { defaultValue: "暂无资源" });

  return (
    <div
      className={cn(
        "flex w-full flex-col items-center justify-center text-center",
        compact ? "min-h-[120px] gap-2 py-4" : "min-h-[200px] gap-3 py-8",
        className,
      )}
      role="status"
    >
      <Image
        src={NOTDATA_IMAGE}
        alt=""
        width={compact ? 120 : 160}
        height={compact ? 120 : 160}
        style={{ width: "auto", height: "auto" }}
        className={cn(
          "h-auto w-auto object-contain self-center object-center -mt-4",
          compact ? "max-h-24 max-w-[120px]" : "max-h-40 max-w-[160px]",
          imageClassName,
        )}
      />
      <p
        className={cn(
          "text-muted-foreground self-center",
          compact ? "text-[11px] leading-snug" : "text-sm",
        )}
      >
        {label}
      </p>
      {children}
    </div>
  );
}

/** 表格无数据行（图片 + 暂无资源，竖排居中） */
export function AdminTableNoResourceRow({
  colSpan,
  className,
  cellClassName,
  message,
  compact,
}: {
  colSpan: number;
  className?: string;
  cellClassName?: string;
  message?: string;
  compact?: boolean;
}): ReactElement {
  return (
    <TableRow className={className}>
      <TableCell colSpan={colSpan} className={cn("text-muted-foreground", cellClassName)}>
        <AdminNoResourceState message={message} compact={compact} />
      </TableCell>
    </TableRow>
  );
}