import Image from "next/image";
import Link from "next/link";
import { ArrowLeft, Clock3, ShieldCheck, WalletCards, type LucideIcon } from "lucide-react";
import { notFound } from "next/navigation";
import { BlackjackGame } from "@/components/casino/blackjack-game";
import { DiceGame } from "@/components/casino/dice-game";
import { LimboGame } from "@/components/casino/limbo-game";
import { MinesGame } from "@/components/casino/mines-game";
import { PlinkoGame } from "@/components/casino/plinko-game";
import { getMiniGame, miniGames } from "@/lib/casino-games";

export function generateStaticParams() {
  return miniGames.map((game) => ({ slug: game.slug }));
}

export default async function CasinoGamePage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const game = getMiniGame(slug);

  if (!game) {
    notFound();
  }

  if (slug === "dice") {
    return <DiceGame />;
  }

  if (slug === "limbo") {
    return <LimboGame />;
  }

  if (slug === "mines") {
    return <MinesGame />;
  }

  if (slug === "blackjack") {
    return <BlackjackGame />;
  }

  if (slug === "plinko") {
    return <PlinkoGame />;
  }

  return (
    <div className="space-y-3.5 sm:space-y-5">
      <Link href="/casino" className="inline-flex h-9 items-center gap-2 rounded-lg border border-white/10 bg-white/[0.04] px-3 text-xs font-extrabold text-slate-200 transition hover:bg-white/[0.07]">
        <ArrowLeft className="h-4 w-4" />
        Casino
      </Link>

      <section className="overflow-hidden rounded-lg border border-white/10 bg-[#151a22] shadow-panel">
        <div className="relative aspect-[16/10] min-h-[260px] sm:aspect-[16/7]">
          <Image src={game.image} alt="" fill priority sizes="(max-width: 768px) 100vw, 1120px" className="object-cover" />
          <div className="absolute inset-0 bg-gradient-to-t from-black via-black/45 to-black/5" />
          <div className={`absolute inset-x-0 top-0 h-1.5 bg-gradient-to-r ${game.accent}`} />
          <div className="absolute inset-x-0 bottom-0 p-4 sm:p-5">
            <span className="inline-flex rounded-md border border-felt/25 bg-felt/10 px-2.5 py-1 text-[10px] font-black uppercase tracking-[0.08em] text-felt">
              {game.eyebrow}
            </span>
            <h1 className="mt-2 text-3xl font-black uppercase leading-none text-white sm:text-5xl">{game.title}</h1>
            <p className="mt-2 max-w-xl text-xs leading-5 text-slate-300 sm:text-sm">{game.description}</p>
          </div>
        </div>

        <div className="grid gap-2.5 border-t border-white/10 p-3 sm:grid-cols-3">
          <InfoTile icon={Clock3} label="Statut" value="À venir" />
          <InfoTile icon={WalletCards} label="Wallet" value="Solde ZiraBet" />
          <InfoTile icon={ShieldCheck} label="Accès" value="Compte vérifié" />
        </div>
      </section>

      <section className="rounded-lg border border-white/10 bg-[#111720] p-3 shadow-panel">
        <h2 className="text-[13px] font-extrabold text-white">Mini-jeu en préparation</h2>
        <p className="mt-1.5 text-xs leading-5 text-slate-400">
          La page est prête pour l'intégration du moteur de jeu. Le lancement sera activé lorsque les règles, le générateur de résultats et les contrôles wallet seront branchés.
        </p>
      </section>
    </div>
  );
}

function InfoTile({ icon: Icon, label, value }: { icon: LucideIcon; label: string; value: string }) {
  return (
    <div className="rounded-lg border border-white/10 bg-black/20 p-3">
      <div className="flex items-center gap-2">
        <Icon className="h-4 w-4 text-felt" />
        <span className="text-[10px] font-black uppercase tracking-[0.08em] text-slate-500">{label}</span>
      </div>
      <p className="mt-1.5 text-xs font-extrabold text-white">{value}</p>
    </div>
  );
}