"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";

type CardTier = "GOLD" | "SILVER" | "BRONZE";

const labels: Record<CardTier, string> = {
  GOLD: "طلایی",
  SILVER: "نقره ای",
  BRONZE: "برنزی",
};

export default function CardTierSelect({
  playerId,
  initial,
}: {
  playerId: string;
  initial: CardTier;
}) {
  const [value, setValue] = useState<CardTier>(initial);
  const [loading, setLoading] = useState(false);
  const router = useRouter();

  async function handleChange(next: CardTier) {
    setValue(next);
    setLoading(true);

    const res = await fetch(`/api/admin/players/${playerId}/card-tier`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ cardTier: next }),
    });

    if (!res.ok) {
      setValue(initial);
    } else {
      router.refresh();
    }

    setLoading(false);
  }

  return (
    <select
      value={value}
      onChange={(e) => handleChange(e.target.value as CardTier)}
      disabled={loading}
      className="rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs focus:outline-none focus:ring-2 focus:ring-emerald-500 disabled:opacity-50"
    >
      <option value="GOLD">{labels.GOLD}</option>
      <option value="SILVER">{labels.SILVER}</option>
      <option value="BRONZE">{labels.BRONZE}</option>
    </select>
  );
}