"use client";

import { useTranslation } from "react-i18next";

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

export type AdminPlayerIdentityFields = {
  site_code?: string | null;
  site_player_id?: string | null;
  username?: string | null;
  nickname?: string | null;
};

export function adminPlayerDisplayName(row: AdminPlayerIdentityFields): string {
  const nickname = row.nickname?.trim() ?? "";
  const username = row.username?.trim() ?? "";
  if (nickname !== "") {
    return nickname;
  }
  if (username !== "") {
    return username;
  }

  return "—";
}

function cellText(value: string | null | undefined): string {
  const trimmed = value?.trim() ?? "";
  return trimmed !== "" ? trimmed : "—";
}

type HeadProps = { className?: string };
type CellProps = { row: AdminPlayerIdentityFields; className?: string };

export function AdminPlayerSiteHead({ className }: HeadProps): React.ReactElement {
  const { t } = useTranslation("common");
  return (
    <TableHead className={cn("min-w-[5.5rem] whitespace-nowrap", className)}>
      {t("playerColumns.site")}
    </TableHead>
  );
}

export function AdminPlayerDisplayHead({ className }: HeadProps): React.ReactElement {
  const { t } = useTranslation("common");
  return (
    <TableHead className={cn("min-w-[4.5rem] whitespace-nowrap", className)}>
      {t("playerColumns.display")}
    </TableHead>
  );
}

export function AdminPlayerSiteIdHead({ className }: HeadProps): React.ReactElement {
  const { t } = useTranslation("common");
  return (
    <TableHead className={cn("min-w-[6.5rem] whitespace-nowrap", className)}>
      {t("playerColumns.sitePlayerId")}
    </TableHead>
  );
}

export function AdminPlayerIdentityHeads({ className }: { className?: string }): React.ReactElement {
  return (
    <>
      <AdminPlayerSiteHead className={className} />
      <AdminPlayerDisplayHead className={className} />
      <AdminPlayerSiteIdHead className={className} />
    </>
  );
}

export function AdminPlayerSiteCell({ row, className }: CellProps): React.ReactElement {
  const site = cellText(row.site_code);

  return (
    <TableCell className={cn("min-w-[5.5rem] max-w-[8rem] align-top text-xs", className)}>
      <span className="block truncate font-mono text-xs" title={site !== "—" ? site : undefined}>
        {site}
      </span>
    </TableCell>
  );
}

export function AdminPlayerDisplayCell({ row, className }: CellProps): React.ReactElement {
  const label = adminPlayerDisplayName(row);

  return (
    <TableCell className={cn("min-w-[4.5rem] max-w-[8rem] align-top text-xs", className)}>
      <span className="block truncate" title={label !== "—" ? label : undefined}>
        {label}
      </span>
    </TableCell>
  );
}

export function AdminPlayerSiteIdCell({ row, className }: CellProps): React.ReactElement {
  const sitePlayerId = cellText(row.site_player_id);

  return (
    <TableCell className={cn("min-w-[6.5rem] max-w-[9rem] align-top text-xs", className)}>
      <span
        className="block truncate font-mono text-xs"
        title={sitePlayerId !== "—" ? sitePlayerId : undefined}
      >
        {sitePlayerId}
      </span>
    </TableCell>
  );
}

export function AdminPlayerIdentityCells({ row, className }: CellProps): React.ReactElement {
  return (
    <>
      <AdminPlayerSiteCell row={row} className={className} />
      <AdminPlayerDisplayCell row={row} className={className} />
      <AdminPlayerSiteIdCell row={row} className={className} />
    </>
  );
}
