import { destroyHomeRecentWinners, renderHomeRecentWinners } from "../components/home-recent-winners.js";
import { destroyHomeEvents, renderHomeEvents } from "../components/home-events.js";
import { destroyHomeTickets, renderHomeTickets } from "../components/home-tickets.js";
import { destroyHomeYoutubeFeed, renderHomeYoutubeFeed } from "../components/home-youtube-feed.js";
import { renderHomeQuickActions } from "../components/home-quick-actions.js";
import {
  renderHomeMobileSocialStrip,
  renderHomeSponsorLogoMarquee,
  renderSponsorGrid,
} from "../components/sponsor-grid.js";
import { SPONSOR_BADGE_ANA } from "../constants/sponsor-badges.js";
import { loadGamesCovers } from "../config/site.js";

export async function renderHome(outlet) {
  destroyHomeRecentWinners();
  destroyHomeEvents();
  destroyHomeTickets();
  destroyHomeYoutubeFeed();

  outlet.innerHTML = `
    <div class="k-page k-page--home home-page-layout space-y-8">
      <div id="home-recent-winners-root" class="home-page-order-winners w-full min-w-0"></div>
      <div id="home-quick-actions-root" class="home-page-order-quick w-full min-w-0"></div>
      <div id="home-sponsor-marquee-root" class="home-page-order-marquee w-full min-w-0"></div>
      <div id="home-events-root" class="home-page-order-events w-full min-w-0"></div>
      <div id="home-tickets-root" class="home-page-order-tickets w-full min-w-0"></div>
      <div id="home-youtube-feed-root" class="home-page-order-youtube w-full min-w-0"></div>
      <section class="home-page-order-sponsors w-full min-w-0">
        <div id="home-sponsor-mount"></div>
      </section>
      <div id="home-social-mobile-root" class="home-page-order-social w-full min-w-0 lg:hidden" aria-live="polite"></div>
    </div>
  `;

  const winnersRoot = outlet.querySelector("#home-recent-winners-root");
  const eventsRoot = outlet.querySelector("#home-events-root");
  const ticketsRoot = outlet.querySelector("#home-tickets-root");
  const quickRoot = outlet.querySelector("#home-quick-actions-root");
  const marqueeRoot = outlet.querySelector("#home-sponsor-marquee-root");
  const youtubeRoot = outlet.querySelector("#home-youtube-feed-root");
  const mount = outlet.querySelector("#home-sponsor-mount");
  const socialRoot = outlet.querySelector("#home-social-mobile-root");

  await loadGamesCovers();
  renderHomeRecentWinners(winnersRoot);
  renderHomeQuickActions(quickRoot);

  const marqueePromise = renderHomeSponsorLogoMarquee(marqueeRoot, [SPONSOR_BADGE_ANA]);

  const sponsorPromise = renderSponsorGrid(mount, {
    badgeFilter: [SPONSOR_BADGE_ANA],
    logoMarquee: false,
    groupSections: true,
    sectionTitleKey: "homeSectionAnaSponsors",
    detachMobileSocial: true,
  }).then((res) => {
    if (!socialRoot) return;
    if (res?.ok && res.showMobileSocialStrip) {
      renderHomeMobileSocialStrip(socialRoot);
    } else {
      socialRoot.innerHTML = "";
    }
  });

  await Promise.all([
    renderHomeEvents(eventsRoot),
    renderHomeTickets(ticketsRoot),
    marqueePromise,
    renderHomeYoutubeFeed(youtubeRoot),
    sponsorPromise,
  ]);
}
