import { Translate } from "@/components/translate";
import { cookies } from "next/headers";
import { redirect } from "next/navigation";
import { categoryService } from "@/services/category";
import { shopService } from "@/services/shop";
import { globalService } from "@/services/global";
import { parseSettings } from "@/utils/parse-settings";
import React from "react";
import dynamic from "next/dynamic";
import storyService from "@/services/story";
import { MobileCard } from "@/app/(store)/(booking)/components/mobile-card";
import { Header } from "@/components/header";
import { ClientOnly } from "@/components/client-only/client-only";

const SearchField = dynamic(
  () => import("@/components/main-search-field").then((m) => ({ default: m.SearchField })),
  { loading: () => <div className="h-14 w-full max-w-3xl bg-gray-200 rounded-button animate-pulse" /> }
);
const Stories = dynamic(() => import("../../components/stories"));
const Deals = dynamic(() => import("./components/deals").then((c) => ({ default: c.Deals })));
const NearYou = dynamic(() => import("./components/near-you").then((c) => ({ default: c.NearYou })));
const Salons = dynamic(() => import("./components/salons").then((c) => ({ default: c.Salons })));
const Masters = dynamic(() => import("./components/masters").then((c) => ({ default: c.Masters })));
const Services = dynamic(() =>
  import("../../components/services").then((c) => ({ default: c.Services }))
);
const Recommended = dynamic(() =>
  import("./components/recomended").then((c) => ({ default: c.Recommended }))
);

const HomePage = async () => {
  const lang = (await cookies()).get("lang")?.value || "fa";
  const countryId = (await cookies()).get("country_id")?.value || undefined;
  const cityId = (await cookies()).get("city_id")?.value || undefined;
  const gender = (await cookies()).get("salon_gender")?.value || undefined;
  const [services, settings, recommendedShops, dealShops, nearByShops, stories] = await Promise.all([
    categoryService.getAll({
      lang,
      type: "service",
      perPage: 11,
      column: "input",
      sort: "asc",
      ...(gender ? { gender } : {}),
    }),
    globalService.settings(),
    shopService.getAll({
      lang,
      perPage: 8,
      column: "r_avg",
      sort: "desc",
      country_id: countryId,
      city_id: cityId,
      ...(gender ? { gender } : {}),
    }),
    shopService.getAll({
      lang,
      perPage: 8,
      column: "b_count",
      sort: "desc",
      country_id: countryId,
      city_id: cityId,
      ...(gender ? { gender } : {}),
    }),
    shopService.getAll({
      lang,
      perPage: 8,
      country_id: countryId,
      city_id: cityId,
      ...(gender ? { gender } : {}),
    }),
    storyService.getAll({ lang }),
  ]);
  const parsedSettings = parseSettings(settings?.data);
  const uiType = String(parsedSettings.ui_type || "1");
  if (uiType === "2") redirect("/home-2");
  if (uiType === "3") redirect("/home-3");
  if (uiType === "4") redirect("/home-4");
  return (
    <>
      <div className="bg-ui-1-bg bg-no-repeat bg-clip-content bg-cover mb-20">
        <Header isHidden={false} showLinks settings={parsedSettings} />
        <section className="flex justify-center items-center flex-col lg:h-[60vh] px-4 md:px-8 lg:px-0">
          <h1 className="md:text-6xl text-3xl font-semibold text-center my-10 max-h-max">
            <Translate value="find.services" />
          </h1>
          <ClientOnly
            fallback={<div className="h-14 w-full max-w-3xl bg-gray-200 rounded-button animate-pulse" />}
          >
            <SearchField />
          </ClientOnly>
        </section>
      </div>
      <main>
        {!!stories?.length && (
          <section className="mt-10">
            <div className="flex items-center pt-12 pb-9 flex-col">
              <div className="text-4xl font-semibold"><Translate value="stories.widget" /></div>
              <span className="text-xl"><Translate value="view.the.stories" /></span>
            </div>
            <div className="xl:container pb-12"><Stories data={stories} buttonVariant="2" /></div>
          </section>
        )}
        <section><Services data={services} /></section>
        <section><Recommended data={recommendedShops} /><Masters /></section>
        <section className="mt-10"><Deals data={dealShops} /></section>
        <section className="xl:container px-4"><Salons /></section>
        <section><NearYou data={nearByShops} /></section>
        <section className="xl:container px-4">
          <div className="grid md:grid-cols-2 gap-7 my-14">
            <MobileCard img="/img/mobile-card-1.png" title="find.and.book.appointment" description="mobile.card.description.1" type="customer" />
            <MobileCard img="/img/mobile-card-2.png" title="for.business" description="mobile.card.description.2" type="vendor" />
          </div>
        </section>
      </main>
    </>
  );
};

export default HomePage;