"use client";

import AdUnit from "@/components/ads/AdUnit";
import { ADSENSE_SLOT_HOME_MOBILE } from "@/config/env";
import { useTranslation } from "@/hooks/useTranslation";
import { AuthorModel, BannerModel, PostModel, TagModel } from "@/models";
import Cookies from "js-cookie";
import { useEffect } from "react";
import Search from "../ui/navigations/Search";
import { categoryMetas } from "./categoryMeta";
import AdsModal from "./components/AdsModal";
import AppDownloadBanner from "./components/AppDownloadBanner";
import CategoryRow from "./components/CategoryRow";
import FollowedSection from "./components/FollowedSection";
import HeroSection from "./components/HeroSection";
import MobileAppSection from "./components/MobileAppSection";
import TagSection from "./components/TagSection";

interface HomePageProps {
  banner: BannerModel[];
  bannerModal: BannerModel;
  tags: TagModel[];
  following: AuthorModel[];
  ranking: PostModel[];
  recommendation: PostModel[];
  trending: PostModel[];
  newest: PostModel[];
  finished: PostModel[];
  mostViews: PostModel[];
  histories: PostModel[];
  funniest: PostModel[];
  horror: PostModel[];
  strongest: PostModel[];
  forbiddenArea: PostModel[];
  invalidToken?: boolean;
}

export default function HomePage({
  banner,
  bannerModal,
  tags,
  following,
  ranking,
  recommendation,
  trending,
  newest,
  finished,
  mostViews,
  histories,
  funniest,
  horror,
  strongest,
  forbiddenArea,
  invalidToken,
}: HomePageProps) {
  useEffect(() => {
    if (invalidToken) {
      Cookies.remove("token");
      Cookies.remove("user");
      Cookies.remove("isLoggedIn");
    }
  }, [invalidToken]);

  const { t } = useTranslation();

  const dataByKey: Record<string, PostModel[]> = {
    ranking,
    recommendation,
    trending,
    newest,
    finished,
    mostViews,
    histories,
    funniest,
    horror,
    strongest,
    forbiddenArea,
  };

  const recommendationMeta = categoryMetas.find((m) => m.key === "recommendation")!;
  const mainMetas = categoryMetas.filter((m) => m.key !== "recommendation");
  const firstHalf = mainMetas.slice(0, 6);
  const secondHalf = mainMetas.slice(6);

  const renderRow = (meta: (typeof categoryMetas)[number]) => (
    <CategoryRow
      key={meta.key}
      rowKey={meta.key}
      title={t(meta.titleI18nKey)}
      subtitle={t(meta.subtitleI18nKey)}
      data={dataByKey[meta.key]}
      badge={meta.badge}
      dark={meta.dark}
    />
  );

  return (
    <div className="w-full overflow-hidden bg-white">
      <div className="relative sm:mx-auto sm:mb-4 sm:pl-4 sm:w-full lg:hidden sm:items-center sm:justify-center">
        <Search placeholder={t("search novels")} />
      </div>

      {bannerModal && <AdsModal data={bannerModal} />}

      <MobileAppSection />

      <AppDownloadBanner />

      <TagSection tags={tags} />

      {ADSENSE_SLOT_HOME_MOBILE && (
        <div className="lg:hidden max-w-340 mx-auto px-4 sm:px-6 py-4">
          <AdUnit slot={ADSENSE_SLOT_HOME_MOBILE} style={{ display: "block" }} />
        </div>
      )}

      {firstHalf.map(renderRow)}

      <HeroSection data={banner} />

      {secondHalf.map(renderRow)}

      <FollowedSection data={following} />

      {renderRow(recommendationMeta)}
    </div>
  );
}