import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";

import { Game, listGames } from "../api/games";
import GameCard from "../components/GameCard";
import GameSetupChat from "../components/GameSetupChat";

export default function GamesList() {
  const navigate = useNavigate();
  const [games, setGames] = useState<Game[]>([]);
  const [loading, setLoading] = useState(true);
  const [showCreate, setShowCreate] = useState(false);

  async function load() {
    setLoading(true);
    try {
      setGames(await listGames());
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    load();
  }, []);

  return (
    <div className="mx-auto max-w-6xl px-4 py-8">
      <div className="mb-6 flex items-center justify-between">
        <h1 className="text-2xl font-bold text-amber-400">Spiele</h1>
        <div className="flex gap-2">
          <button
            onClick={() => setShowCreate((v) => !v)}
            className="rounded bg-amber-500 px-3 py-2 text-sm font-semibold text-slate-950 hover:bg-amber-400"
          >
            Neues Spiel
          </button>
        </div>
      </div>

      {showCreate && <GameSetupChat onCreated={(game) => navigate(`/games/${game.id}`)} />}

      {loading ? (
        <p className="text-slate-400">Lädt…</p>
      ) : games.length === 0 ? (
        <p className="text-slate-400">Noch keine Spiele vorhanden.</p>
      ) : (
        <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
          {games.map((game) => (
            <GameCard key={game.id} game={game} />
          ))}
        </div>
      )}
    </div>
  );
}