import Image from "next/image";
import Link from "next/link";
import { ChevronRight, CirclePlay, Coins, Gamepad2, Home, Layers3, RadioTower, type LucideIcon } from "lucide-react";
import { miniGames, type CasinoGame } from "@/lib/casino-games";

const lobbyTabs = [
  { label: "Foyer", href: "/casino", icon: Home, active: true },
  { label: "Originaux", href: "#mini-jeux", icon: Gamepad2 },
  { label: "Slots", href: "#slots", icon: Coins },
  { label: "Casino live", href: "#casino-live", icon: CirclePlay }
];

const promos = [
  {
    title: "Mini-jeux ZiraBet",
    body: "Les premiers originaux arrivent bientôt.",
    image: "/images/casino/limbo.png",
    tone: "from-orange-500/35 via-black/20 to-black/70"
  },
  {
    title: "Originals en préparation",
    body: "Crash, Mines, Plinko et plus encore.",
    image: "/images/casino/crash.png",
    tone: "from-felt/35 via-black/20 to-black/70"
  }
];

export default function CasinoPage() {
  return (
    <div className="space-y-3.5 sm:space-y-5">
      <CasinoPromoRail />
      <CasinoTabs />
      <GameRail title="Mini jeux" anchor="mini-jeux" icon={Gamepad2} games={miniGames} />
      <ComingSoonRail title="Slots" anchor="slots" icon={Coins} />
      <ComingSoonRail title="Casino live" anchor="casino-live" icon={RadioTower} />
    </div>
  );
}

function CasinoPromoRail() {
  return (
    <section className="-mx-5 overflow-x-auto px-5 [scrollbar-width:none] sm:mx-0 sm:px-0 [&::-webkit-scrollbar]:hidden" aria-label="Promotions casino">
      <div className="flex snap-x gap-3">
        {promos.map((promo, index) => (
          <article
            key={promo.title}
            className="relative aspect-[720/340] w-[86vw] max-w-[720px] shrink-0 snap-start overflow-hidden rounded-lg border border-white/10 bg-[#151a22] shadow-panel sm:w-[560px] lg:w-[680px]"
          >
            <Image src={promo.image} alt="" fill priority={index === 0} sizes="(max-width: 640px) 86vw, 680px" className="object-cover" />
            <div className={`absolute inset-0 bg-gradient-to-r ${promo.tone}`} />
            <div className="relative flex h-full max-w-[62%] flex-col justify-center p-4 sm:p-6">
              <span className="w-fit rounded-md border border-felt/30 bg-felt/10 px-2.5 py-1 text-[9px] font-black uppercase tracking-[0.08em] text-felt">
                Casino
              </span>
              <h1 className="mt-2 text-[21px] font-extrabold leading-[1.02] text-white sm:text-[34px]">{promo.title}</h1>
              <p className="mt-2 hidden max-w-[18rem] text-xs leading-5 text-slate-200 sm:block">{promo.body}</p>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

function CasinoTabs() {
  return (
    <nav className="overflow-hidden rounded-lg border border-white/10 bg-[#202631] p-1.5 shadow-panel" aria-label="Navigation casino">
      <div className="flex gap-1.5 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
        {lobbyTabs.map((item) => (
          <Link
            key={item.label}
            href={item.href}
            className={
              item.active
                ? "flex h-10 shrink-0 items-center gap-2 rounded-md bg-white/[0.08] px-3 text-xs font-extrabold text-white"
                : "flex h-10 shrink-0 items-center gap-2 rounded-md px-3 text-xs font-bold text-slate-400 transition hover:bg-white/[0.05] hover:text-white"
            }
          >
            <item.icon className={item.active ? "h-4 w-4 text-white" : "h-4 w-4 text-slate-500"} />
            {item.label}
          </Link>
        ))}
      </div>
    </nav>
  );
}

function GameRail({
  title,
  anchor,
  icon: Icon,
  games
}: {
  title: string;
  anchor: string;
  icon: LucideIcon;
  games: CasinoGame[];
}) {
  return (
    <section id={anchor} className="scroll-mt-24 space-y-2.5">
      <SectionTitle icon={Icon} title={title} />
      <div className="-mx-5 overflow-x-auto px-5 [scrollbar-width:none] sm:mx-0 sm:px-0 [&::-webkit-scrollbar]:hidden">
        <div className="flex gap-3">
          {games.map((game) => (
            <GameCard key={game.slug} game={game} />
          ))}
        </div>
      </div>
    </section>
  );
}

function GameCard({ game }: { game: CasinoGame }) {
  return (
    <Link
      href={`/casino/games/${game.slug}`}
      className="group relative aspect-[150/205] w-[118px] shrink-0 overflow-hidden rounded-lg border border-white/10 bg-[#151a22] shadow-panel transition hover:-translate-y-0.5 hover:border-felt/30 sm:w-[150px]"
    >
      <Image src={game.image} alt="" fill sizes="(max-width: 640px) 118px, 150px" className="object-cover transition duration-300 group-hover:scale-[1.04]" />
      <div className="absolute inset-0 bg-gradient-to-t from-black via-black/12 to-transparent" />
      <div className={`absolute left-0 right-0 top-0 h-7 bg-gradient-to-r ${game.accent} opacity-95`} />
      <div className="absolute left-2 right-2 top-1.5 text-center text-[8px] font-black uppercase tracking-[0.22em] text-white/85">ZiraBet</div>
      <div className="absolute inset-x-0 bottom-0 p-2.5">
        <span className="mb-1 inline-flex rounded-md border border-white/10 bg-black/35 px-2 py-1 text-[9px] font-black uppercase text-felt backdrop-blur">
          Bientôt
        </span>
        <h2 className="truncate text-[20px] font-black uppercase leading-none text-white drop-shadow sm:text-[24px]">{game.title}</h2>
      </div>
    </Link>
  );
}

function ComingSoonRail({ title, anchor, icon: Icon }: { title: string; anchor: string; icon: LucideIcon }) {
  return (
    <section id={anchor} className="scroll-mt-24 space-y-2.5">
      <SectionTitle icon={Icon} title={title} />
      <div className="rounded-lg border border-white/10 bg-[#151a22] p-3 shadow-panel">
        <div className="flex min-h-[88px] items-center justify-between gap-3 rounded-lg border border-dashed border-white/10 bg-black/20 px-3 py-3">
          <div className="flex min-w-0 items-center gap-3">
            <span className="grid h-10 w-10 shrink-0 place-items-center rounded-lg border border-felt/20 bg-felt/10 text-felt">
              <Layers3 className="h-5 w-5" />
            </span>
            <div className="min-w-0">
              <p className="text-[13px] font-extrabold text-white">{title}</p>
              <p className="mt-1 text-xs font-semibold text-slate-500">À venir...</p>
            </div>
          </div>
          <ChevronRight className="h-4 w-4 shrink-0 text-slate-600" />
        </div>
      </div>
    </section>
  );
}

function SectionTitle({ icon: Icon, title }: { icon: LucideIcon; title: string }) {
  return (
    <div className="flex w-fit items-center gap-2 px-0.5 text-white">
      <Icon className="h-6 w-6 text-felt" />
      <h2 className="text-base font-extrabold">{title}</h2>
      <ChevronRight className="h-4 w-4 text-slate-400" />
    </div>
  );
}