"use client";

import { useQuery } from "@tanstack/react-query";
import { useTranslations } from "next-intl";
import { getPlayers } from "@/lib/api/players";

interface ServerPlayersProps {
  serverId: string;
}

export function ServerPlayers({ serverId }: ServerPlayersProps) {
  const t = useTranslations("servers.players");

  const { data, isLoading, isError, refetch } = useQuery({
    queryKey: ["server-players", serverId],
    queryFn: () => getPlayers(serverId),
    refetchInterval: 15000,
  });

  if (isLoading) {
    return <p className="text-sm text-zinc-600 dark:text-zinc-400">{t("loading")}</p>;
  }

  if (isError || !data) {
    return (
      <div className="space-y-3 rounded-lg border border-red-200 bg-red-50 p-4 dark:border-red-900 dark:bg-red-950/40">
        <p className="text-sm text-red-700 dark:text-red-300">{t("errors.loadFailed")}</p>
        <button
          type="button"
          onClick={() => void refetch()}
          className="text-sm font-medium text-sky-600 hover:text-sky-500 dark:text-sky-400"
        >
          {t("retry")}
        </button>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="grid gap-4 sm:grid-cols-3">
        <div className="rounded-lg border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-950">
          <p className="text-sm text-zinc-500 dark:text-zinc-400">{t("onlineCount")}</p>
          <p className="mt-1 text-2xl font-semibold text-zinc-900 dark:text-zinc-50">
            {data.online.length}
            <span className="text-base font-normal text-zinc-500"> / {data.maxPlayers}</span>
          </p>
        </div>
        <div className="rounded-lg border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-950">
          <p className="text-sm text-zinc-500 dark:text-zinc-400">{t("whitelistCount")}</p>
          <p className="mt-1 text-2xl font-semibold text-zinc-900 dark:text-zinc-50">
            {data.whitelistCount}
          </p>
        </div>
      </div>

      <div className="overflow-x-auto rounded-lg border border-zinc-200 dark:border-zinc-800">
        <table className="min-w-full divide-y divide-zinc-200 text-sm dark:divide-zinc-800">
          <thead className="bg-zinc-50 dark:bg-zinc-900">
            <tr>
              <th className="px-4 py-3 text-left font-medium text-zinc-600 dark:text-zinc-400">
                {t("columns.name")}
              </th>
              <th className="px-4 py-3 text-left font-medium text-zinc-600 dark:text-zinc-400">
                {t("columns.ping")}
              </th>
            </tr>
          </thead>
          <tbody className="divide-y divide-zinc-200 bg-white dark:divide-zinc-800 dark:bg-zinc-950">
            {data.online.length === 0 ? (
              <tr>
                <td
                  colSpan={2}
                  className="px-4 py-6 text-center text-zinc-500 dark:text-zinc-400"
                >
                  {t("empty")}
                </td>
              </tr>
            ) : (
              data.online.map((player) => (
                <tr key={player.uuid ?? player.name}>
                  <td className="px-4 py-3 font-medium text-zinc-900 dark:text-zinc-100">
                    {player.name}
                  </td>
                  <td className="px-4 py-3 text-zinc-600 dark:text-zinc-400">
                    {player.ping !== undefined ? `${player.ping} ms` : "—"}
                  </td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}
