"use client";
import { useEffect, useState } from "react";
import Image from "next/image";
import { games } from "../data/games";
import { FiTrash } from "react-icons/fi";
import { useSolanaWallets } from "@privy-io/react-auth";
import { fetchOpenBets } from "@/shared/solana_helpers";
import {Bet} from "../types/Bet";
export default function YourGames() {
  const { wallets, ready } = useSolanaWallets();
  const [openBets, setOpenBets] = useState<Bet[]>([]);
  const [myBets, setMyBets] = useState<Bet[]>([]);
  const [loading, setLoading] = useState(true);

  // Function to fetch open bets
  const updateBets= async ()=>{
    const bets:Bet[] = await fetchOpenBets(wallets[0]);
    setMyBets(bets.filter((bet) => bet.owner === wallets[0].address));
    setOpenBets(bets);
    setLoading(false);
    console.log(`Got ${bets.length} bets`);
  }
  // Auto-refresh every 10 seconds
  useEffect(() => {
    if (!ready) return;
    updateBets();
    const interval = setInterval(updateBets, 10000); // Refresh every 10s

    return () => clearInterval(interval); // Cleanup on unmount
  }, [ready]);

  return (
    <section className="py-16 px-6">
      <h2 className="text-3xl font-bold text-white mb-6">Your Games</h2>

      {loading ? (
        <p className="text-gray-400">Loading your games...</p>
      ) : 
      myBets.length === 0 ? <></>  :(
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {myBets.map((bet) => {
            console.log(`Finding game for the id ${bet.id}`)
            const game = games.find((g) => g.id === bet.id); // Match game

            if (!game) return null; // Skip unmatched bets

            return (
              <div
                key={bet.id}
                className="relative group bg-[rgb(30,30,30)] rounded-2xl p-2 w-50 overflow-hidden cursor-pointer transition-all duration-300"
              >
                {/* Game Thumbnail */}
                <div className="relative w-full h-40 overflow-hidden rounded-xl">
                  <Image
                    src={game.thumbnail}
                    alt={game.name}
                    layout="fill"
                    objectFit="cover"
                    className="transition-transform duration-300 group-hover:scale-110"
                  />
                </div>

                {/* Game Info */}
                <div className="mt-4 px-3 text-left">
                  <h3 className="text-lg font-semibold text-white py-2">{game.name}</h3>
                  <p className="text-xs text-gray-400 font-mono py-1">Wager</p>
                  <p className="text-xs text-white font-mono py-1">{bet.wager} SOL</p>
                </div>

                {/* Close Button (Trash Icon) */}
                <button
                  className="absolute bottom-3 right-3 bg-red-600 text-white p-2 rounded-full transition duration-300 hover:bg-red-800"
                  onClick={() => console.log(`Removing bet ${bet.id}`)}
                >
                  <FiTrash size={16} />
                </button>
              </div>
            );
          })}
        </div>
      )}
    </section>
  );
}