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 { isStoreBilling, purchaseViaStore } from "@/lib/storeBilling";
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 refreshProfile = useSessionStore((s) => s.refreshProfile);
  const [packs, setPacks] = useState<CoinPack[]>([]);
  const [busy, setBusy] = useState<string | null>(null);
  const [gained, setGained] = useState<number | null>(null);
  const [msg, setMsg] = useState("");

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

  // When the user returns from the payment tab, pull the (possibly credited) balance.
  useEffect(() => {
    const onFocus = () => refreshProfile();
    window.addEventListener("focus", onFocus);
    return () => window.removeEventListener("focus", onFocus);
  }, [refreshProfile]);

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

  const buy = async (p: CoinPack) => {
    setBusy(p.id);
    setMsg("");

    // Inside a store build (Cafe Bazaar / Myket), route through store billing.
    if (isStoreBilling()) {
      try {
        const r = await purchaseViaStore(p);
        if (r.kind === "redirect") return; // Bazaar navigated away; credited on return
        if (r.kind === "token") {
          const v = await getService().verifyIab(r.store, r.productId, r.token);
          if (v.ok && v.profile) {
            setProfile(v.profile);
            sound.play("purchase");
            setGained(v.coins);
            setTimeout(() => setGained(null), 2500);
          } else {
            setMsg(t("buy.failed"));
          }
          setBusy(null);
          return;
        }
        // unavailable → fall through to the web gateway below
      } catch {
        setBusy(null);
        setMsg(t("buy.failed"));
        return;
      }
    }

    let res;
    try {
      res = await getService().buyCoins(p.id);
    } catch {
      setBusy(null);
      setMsg(t("buy.failed"));
      return;
    }

    // Live: hand off to the ZarinPal gateway. Open it in a NEW tab so the app
    // itself never navigates away (and so a slow/blocked gateway can't dead-end
    // the whole app). Credit lands via the server callback; we refresh on focus.
    if (res.redirectUrl) {
      const url = res.redirectUrl;
      if (!/^https?:\/\//i.test(url)) {
        setBusy(null);
        setMsg(t("buy.failed"));
        return;
      }
      const win = window.open(url, "_blank", "noopener,noreferrer");
      if (!win) window.location.href = url; // popup blocked → same-tab fallback
      setBusy(null);
      setMsg(t("buy.redirecting"));
      return;
    }

    // Mock/offline: instant credit.
    if (res.ok && res.profile) {
      setProfile(res.profile);
      sound.play("purchase");
      setGained(res.coins);
      setTimeout(() => setGained(null), 2500);
    } else {
      setMsg(t("buy.failed"));
    }
    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>
      )}

      {msg && (
        <div className="mb-4 text-center text-cream/80 text-sm glass rounded-xl py-2">{msg}</div>
      )}

      <div className="grid grid-cols-2 lg:grid-cols-4 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>
  );
}