HokmPlay/src/components/screens/BuyCoinsScreen.tsx

"use client";

import { Coins } from "lucide-react";
import { useEffect, useState } from "react";
import { ScreenHeader, ScreenShell } from "@/components/online/ScreenHeader";
import { useSessionStore } from "@/lib/session-store";
import { useI18n } from "@/lib/i18n";
import { getService } from "@/lib/online/service";
import { sound } from "@/lib/sound";
import { CoinPack } from "@/lib/online/types";
import { cn } from "@/lib/cn";

export function BuyCoinsScreen() {
  const { t, locale } = useI18n();
  const profile = useSessionStore((s) => s.profile);
  const setProfile = useSessionStore((s) => s.setProfile);
  const [packs, setPacks] = useState<CoinPack[]>([]);
  const [busy, setBusy] = useState<string | null>(null);
  const [gained, setGained] = useState<number | null>(null);

  useEffect(() => {
    getService().getCoinPacks().then(setPacks);
  }, []);

  const fmt = (n: number) =>
    new Intl.NumberFormat(locale === "fa" ? "fa-IR" : "en-US").format(n);

  const buy = async (p: CoinPack) => {
    setBusy(p.id);
    const res = await getService().buyCoins(p.id);
    // Live: redirect to the ZarinPal gateway; we credit on return via callback.
    if (res.redirectUrl) {
      window.location.href = res.redirectUrl;
      return;
    }
    // Mock/offline: instant credit.
    if (res.ok && res.profile) {
      setProfile(res.profile);
      sound.play("purchase");
      setGained(res.coins);
      setTimeout(() => setGained(null), 2500);
    }
    setBusy(null);
  };

  return (
    <ScreenShell>
      <ScreenHeader
        title={t("buy.title")}
        right={
          profile && (
            <span className="glass rounded-full px-3 py-1.5 text-xs font-bold text-gold-300 flex items-center gap-1">
              <Coins className="size-3.5 text-gold-400" />
              {fmt(profile.coins)}
            </span>
          )
        }
      />
      <p className="text-center text-cream/50 text-xs mb-4">{t("buy.note")}</p>

      {gained != null && (
        <div className="mb-4 text-center text-teal-300 font-bold glass rounded-xl py-2 flex items-center justify-center gap-1.5">
          +{fmt(gained)} <Coins className="size-4 text-gold-400" />
        </div>
      )}

      <div className="grid grid-cols-2 gap-3 pb-6">
        {packs.map((p) => (
          <button
            key={p.id}
            disabled={busy !== null}
            onClick={() => buy(p)}
            className={cn(
              "glass rounded-2xl p-4 pt-5 flex flex-col items-center gap-1 relative hover:bg-navy-800/80 transition disabled:opacity-60",
              p.tag && "ring-2 ring-gold-400/50"
            )}
          >
            {p.tag && (
              <span className="absolute -top-2 rounded-full btn-gold text-[10px] font-bold px-2 py-0.5">
                {p.tag === "best" ? t("buy.best") : p.tag === "starter" ? t("buy.starter") : t("buy.popular")}
              </span>
            )}
            <Coins className="size-7 text-gold-400" />
            <span className="text-xl font-black gold-text">{fmt(p.coins + p.bonus)}</span>
            {p.bonus > 0 && (
              <span className="text-[10px] text-teal-300">
                +{fmt(p.bonus)} {t("buy.bonus")}
              </span>
            )}
            <span className="mt-1 text-sm font-bold text-cream">
              {fmt(p.priceToman)} {t("buy.toman")}
            </span>
          </button>
        ))}
      </div>
    </ScreenShell>
  );
}