HokmPlay/src/components/screens/OnlineLobbyScreen.tsx

"use client";

import { motion } from "framer-motion";
import { Coins, Trophy, Users } from "lucide-react";
import { useState } from "react";
import { ScreenHeader, ScreenShell } from "@/components/online/ScreenHeader";
import { useOnlineStore } from "@/lib/online-store";
import { useSessionStore } from "@/lib/session-store";
import { useUIStore } from "@/lib/ui-store";
import { useI18n } from "@/lib/i18n";
import { cn } from "@/lib/cn";

const ENTRIES = [100, 500, 1000];

export function OnlineLobbyScreen() {
  const { t } = useI18n();
  const createRoom = useOnlineStore((s) => s.createRoom);
  const startMatchmaking = useOnlineStore((s) => s.startMatchmaking);
  const go = useUIStore((s) => s.go);
  const coins = useSessionStore((s) => s.profile?.coins ?? 0);
  const [entry, setEntry] = useState(100);

  // Private rooms with friends are free.
  const onCreate = async () => {
    await createRoom({ targetScore: 7, stake: 0, ranked: false });
    go("room");
  };

  // Ranked random always costs the entry (you stake it).
  const onRandom = async () => {
    if (coins < entry) {
      go("buycoins");
      return;
    }
    await startMatchmaking({ ranked: true, stake: entry });
    go("matchmaking");
  };

  return (
    <ScreenShell>
      <ScreenHeader
        title={t("lobby.title")}
        right={
          <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" />
            {coins.toLocaleString()}
          </span>
        }
      />

      {/* entry (only for ranked) */}
      <div className="glass rounded-2xl p-4 mb-4">
        <div className="flex items-center gap-1.5 text-sm text-cream/70 mb-2.5">
          <Coins className="size-4 text-gold-400" />
          {t("lobby.entry")}
        </div>
        <div className="flex gap-2">
          {ENTRIES.map((s) => (
            <button
              key={s}
              onClick={() => setEntry(s)}
              className={cn(
                "flex-1 rounded-xl py-2.5 text-sm font-bold transition",
                entry === s ? "btn-gold" : "bg-navy-900/70 gold-border text-cream/70 hover:text-cream"
              )}
            >
              {s.toLocaleString()}
            </button>
          ))}
        </div>
        {coins < entry && (
          <p className="text-rose-300 text-xs mt-2 text-center">{t("lobby.needCoins")}</p>
        )}
      </div>

      <div className="space-y-3">
        <motion.button
          whileHover={{ y: -2 }}
          whileTap={{ scale: 0.98 }}
          onClick={onRandom}
          className="btn-gold w-full rounded-2xl p-5 flex items-center gap-4 text-start"
        >
          <span className="size-12 rounded-xl bg-black/15 flex items-center justify-center text-[#2a1f04]">
            <Trophy className="size-6" />
          </span>
          <span className="flex-1">
            <span className="block text-lg font-black text-[#2a1f04]">{t("lobby.random")}</span>
            <span className="block text-xs text-[#2a1f04]/70">{t("lobby.randomDesc")}</span>
          </span>
          <span className="flex items-center gap-1 text-[#2a1f04] font-black">
            {entry}
            <Coins className="size-4" />
          </span>
        </motion.button>

        <motion.button
          whileHover={{ y: -2 }}
          whileTap={{ scale: 0.98 }}
          onClick={onCreate}
          className="glass w-full rounded-2xl p-5 flex items-center gap-4 text-start hover:bg-navy-800/80 transition"
        >
          <span className="size-12 rounded-xl bg-navy-900 gold-border flex items-center justify-center text-gold-400">
            <Users className="size-6" />
          </span>
          <span className="flex-1">
            <span className="block text-lg font-black text-cream">{t("lobby.createRoom")}</span>
            <span className="block text-xs text-cream/55">{t("lobby.createDesc")}</span>
          </span>
          <span className="text-teal-300 font-bold text-sm">{t("lobby.free")}</span>
        </motion.button>
      </div>
    </ScreenShell>
  );
}