import { fetchSessionUser } from "../auth/session.js";
import { getGameCoverUrl, t } from "../config/site.js";

function gameCardCoverHtml(imageUrl, altText) {
  return `<div class="games-card-visual relative aspect-[16/10] w-full overflow-hidden border-b border-[rgba(22,119,255,0.14)] bg-[#141a28]">
    <img
      src="${imageUrl}"
      alt="${altText}"
      class="games-card-visual__img h-full w-full object-cover object-center transition duration-500 ease-out group-hover:scale-[1.04]"
      loading="lazy"
      decoding="async"
    />
    <div class="games-card-visual__shade pointer-events-none absolute inset-0 bg-gradient-to-t from-[#1e2739] via-[rgba(15,24,40,0.25)] to-[rgba(15,24,40,0.05)]"></div>
    <div class="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_90%_80%_at_50%_100%,rgba(22,119,255,0.14),transparent_60%)]" aria-hidden="true"></div>
  </div>`;
}

function gameCardHtml(card, loggedIn) {
  const cta = loggedIn
    ? `<a href="${card.href}" class="k-btn k-btn--primary btn-site-action mt-4 inline-flex w-full items-center justify-center rounded-xl px-5 py-2.5 text-sm font-semibold${card.ctaGlow ? " shadow-glow-sm" : ""}">${t("gamesPlay")}</a>`
    : `<button type="button" ${card.guestBtnAttr || 'id="games-open-login"'} class="k-btn k-btn--secondary btn-site-secondary mt-4 w-full rounded-xl px-5 py-2.5 text-sm font-semibold">${t("gamesLoginToPlay")}</button>`;

  return `<article class="group rounded-2xl border border-white/[0.08] bg-[#1e2739] p-0 shadow-panel ring-1 ring-white/[0.05] overflow-hidden transition duration-200 hover:border-[rgba(22,119,255,0.28)] hover:shadow-[0_20px_48px_-24px_rgba(22,119,255,0.22)]">
    ${gameCardCoverHtml(getGameCoverUrl(card.coverKey), t(card.imageAltKey))}
    <div class="p-6">
      <p class="text-[11px] font-semibold uppercase tracking-[0.2em] text-accent-bright${card.labelMuted ? "/90" : ""}">${t(card.categoryKey)}</p>
      <h2 class="mt-2 text-xl font-bold text-white">${t(card.titleKey)}</h2>
      <p class="mt-2 text-sm text-slate-400">${t(card.descKey)}</p>
      ${cta}
    </div>
  </article>`;
}

const GAME_CARDS = [
  {
    coverKey: "blackjack",
    imageAltKey: "gamesBlackjackAlt",
    categoryKey: "gamesCategoryCard",
    titleKey: "gamesBlackjackTitle",
    descKeyGuest: "gamesBlackjackDesc",
    descKeyUser: "gamesBlackjackDesc",
    href: "#/oyunlar/blackjack",
  },
  {
    coverKey: "slot",
    imageAltKey: "gamesSlotTitle",
    categoryKey: "gamesCategorySlot",
    titleKey: "gamesSlotTitle",
    descKeyGuest: "gamesSlotDescGuest",
    descKeyUser: "gamesSlotDescUser",
    href: "#/oyunlar/slot",
    labelMuted: true,
    ctaGlow: true,
    guestBtnAttr: 'data-games-guest-slot',
  },
  {
    coverKey: "roulette",
    imageAltKey: "gamesRouletteTitle",
    categoryKey: "gamesCategoryRoulette",
    titleKey: "gamesRouletteTitle",
    descKeyGuest: "gamesRouletteDescGuest",
    descKeyUser: "gamesRouletteDescUser",
    href: "#/oyunlar/rulet",
    labelMuted: true,
    ctaGlow: true,
    guestBtnAttr: 'data-games-guest-roulette',
  },
];

function renderGameCards(loggedIn) {
  return GAME_CARDS.map((card) =>
    gameCardHtml(
      {
        ...card,
        descKey: loggedIn ? card.descKeyUser : card.descKeyGuest,
      },
      loggedIn
    )
  ).join("");
}

export async function renderGamesPage(outlet) {
  const user = await fetchSessionUser();
  const loggedIn = !!user;

  outlet.innerHTML = `
    <section class="relative w-full min-w-0 space-y-8 px-1 pb-4">
      <header class="relative overflow-hidden rounded-3xl border border-white/[0.08] bg-[#1e2739] p-8 shadow-panel ring-1 ring-white/[0.04] sm:p-10">
        <div class="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_80%_60%_at_100%_0%,rgba(22,119,255,0.09),transparent)]"></div>
        <div class="relative space-y-3">
          <span class="inline-flex items-center gap-2 rounded-full border border-accent/25 bg-accent/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-accent-bright">${t("gamesEyebrow")}</span>
          <h1 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">${t("gamesTitle")}</h1>
        </div>
      </header>
      <div class="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
        ${renderGameCards(loggedIn)}
      </div>
    </section>`;

  if (!loggedIn) {
    const openLogin = () => globalThis.__siteOpenLogin?.();
    outlet.querySelector("#games-open-login")?.addEventListener("click", openLogin);
    outlet.querySelector("[data-games-guest-slot]")?.addEventListener("click", openLogin);
    outlet.querySelector("[data-games-guest-roulette]")?.addEventListener("click", openLogin);
  }
}
