"use client";

import PublicGames from "@/components/home/PublicGames/PublicGames";
import LiveGames from "@/components/home/LiveGames";
import RecentGames from "@/components/home/RecentGames";
import Link from "next/link";
import { useSession } from "@/context/session";

export default function Home() {
  const { user } = useSession();
  const isLoggedIn = user?.id && typeof user.id === "number";

  return (
    <div className="flex flex-col gap-8 w-full max-w-5xl px-4 py-8">

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {/* Spielen-Karte */}
        <Link
          href="/play"
          className="card bg-primary text-primary-content shadow-lg hover:shadow-xl transition-shadow cursor-pointer"
        >
          <div className="card-body items-center justify-center gap-4 py-12">
            <span className="text-6xl select-none">♟</span>
            <h2 className="card-title text-2xl">Spielen</h2>
            <p className="text-sm opacity-80 text-center">
              Partie erstellen, gegen KI, Turnier & mehr
            </p>
          </div>
        </Link>

        {/* Öffentliche Spiele */}
        <div className="md:col-span-2">
          <PublicGames />
        </div>
      </div>

      {/* Letzte Spiele des eingeloggten Users */}
      {isLoggedIn && user.id && typeof user.id === "number" && (
        <RecentGames userId={user.id} />
      )}

      {/* Laufende Partien – Live-Kacheln */}
      <LiveGames />

    </div>
  );
}