"use client";

import { useQueryClient } from "@tanstack/react-query";
import DOMPurify from "dompurify";
import Image from "next/image";
import Link from "next/link";
import Script from "next/script";
import { useMemo, useState } from "react";
import { Info } from "react-feather";
import { Tooltip } from "react-tooltip";

import ImageWithFallback from "@/components/common/ImageWithFallback";
import ActivateCashbackModal from "@/components/modal/coupon/ActivateCashbackModal";
import CashbackInfoModal from "@/components/modal/coupon/CashbackInfoModal";
import { useAppSelector } from "@/store/hooks";
import config from "@/utils/config";
import { getCookie } from "@/utils/cookies";
import { trackStoreExit } from "@/utils/helper";

import CouponList from "./CouponList";

const defaultImage = config.APP_CONFIG.DEFAULT_IMG;

type CouponStoreClientProps = {
  merchantData: any;
  store: string;
};

export default function CouponStoreClient({
  merchantData,
  store,
}: CouponStoreClientProps) {
  const queryClient = useQueryClient();

  const hasError = !merchantData || !merchantData?.success;

  // Authentication check using Redux store and cookies
  const token = getCookie("token");
  const { logged_in } = useAppSelector((state) => state.user);

  const isLoggedIn = logged_in && !!token;

  // state
  const [showActivateModal, setShowActivateModal] = useState(false);
  const [isCashbackInfoOpen, setIsCashbackInfoOpen] = useState(false);
  const [activeTab, setActiveTab] = useState("maximum");
  const activateCashbackUrl = merchantData?.redirect_link || ``;

  // Process merchant data
  const processedMerchantData = useMemo(() => {
    if (!merchantData?.success) {
      return {
        store,
        merchant: store.replace(".com", ""),
        brand_header: `${store} Coupons & Deals`,
        brand_text: "",
        image_url: defaultImage,
        txt_img: defaultImage,
        redirect_link: `https://${store}`,
        deeplink: `https://${store}`,
        merchant_title: store.replace(".com", ""),
        merchant_description: "",
        cashback_value: null,
        total_coupons: 0,
        first_tab_coupons: [],
        page_title: "",
        meta_description: "",
        faqs: "",
        about_merchant: "",
        faq_data: [],
        is_direct_merchant: false,
        category_id: 0,
        couponers_also_like: [],
        similar_stores: [],
        trending_stores: [],
        top_stores: [],
        popular_stores: [],
      };
    }

    const maximumSavingOffers = (merchantData.maximum_saving_offers || []).map(
      (offer: any) => ({
        code: offer.code || "",
        title: offer.title || "",
        description: offer.description || "",
        brand_image: offer.brand_image || offer.txt_img || "",
        image_url: offer.brand_image || offer.txt_img || defaultImage,
        txt_img: offer.txt_img || offer.brand_image || defaultImage,
        deeplink: offer.deeplink || offer.redirect_link || "",
        validthru: offer.validthru || null,
        source: offer.source || "api",
        type: offer.type || "coupon",
        cashback_value: offer.cashback_value || "",
        merchant: offer.merchant || "",
        per_or_dollar_value: offer.per_or_dollar_value || "",
        category_id: offer.category_id || "",
        coupon_used: offer.coupon_used || 0,
        last_validated: offer.last_validated || "",
      }),
    );

    const convertStoresToArray = (storesObj: any) => {
      if (!storesObj || typeof storesObj !== "object") return [];
      return Object.values(storesObj).map((storeData: any) => ({
        store: storeData?.store || "",
        brand_name: storeData?.brand_name || "",
        image_url: storeData?.image_url || storeData?.txt_img || defaultImage,
        txt_img: storeData?.txt_img || storeData?.image_url || defaultImage,
        coupon_count: storeData?.coupon_count || 0,
        redirect_link: storeData?.redirect_link || "",
      }));
    };

    const popularStores = convertStoresToArray(
      merchantData?.couponers_also_like || merchantData?.top_stores,
    );
    const similarStores = convertStoresToArray(merchantData?.similar_stores);
    const trendingStores = convertStoresToArray(merchantData?.trending_stores);
    const topStores = convertStoresToArray(merchantData?.top_stores);

    return {
      store,
      merchant: maximumSavingOffers?.length
        ? maximumSavingOffers?.[0]?.merchant
        : store.replace(".com", ""),
      brand_header: merchantData?.brand_header || `${store} Coupons & Deals`,
      brand_text: merchantData?.brand_text || "",
      image_url:
        merchantData?.image_url || merchantData?.txt_img || defaultImage,
      txt_img: merchantData?.txt_img || merchantData?.image_url || defaultImage,
      redirect_link: merchantData?.redirect_link || `https://${store}`,
      merchant_title: merchantData?.merchant_title || store.replace(".com", ""),
      merchant_description: merchantData?.merchant_description || "",
      cashback_value: merchantData?.cashback_value || null,
      total_coupons: merchantData?.total_coupons || maximumSavingOffers.length,
      first_tab_coupons: maximumSavingOffers,
      page_title: merchantData?.page_title || "",
      meta_description: merchantData?.meta_description || "",
      faqs: merchantData?.faqs || "",
      about_merchant: merchantData?.about_merchant || "",
      faq_data: merchantData?.faq_data || [],
      is_direct_merchant: merchantData?.is_direct_merchant || false,
      category_id: merchantData?.category_id || 0,
      couponers_also_like: convertStoresToArray(
        merchantData?.couponers_also_like,
      ),
      similar_stores: similarStores,
      trending_stores: trendingStores,
      top_stores: topStores,
      popular_stores: popularStores.length > 0 ? popularStores : [],
    };
  }, [store, merchantData]);

  const firstTabCoupons = processedMerchantData?.first_tab_coupons || [];
  const totalCoupons =
    processedMerchantData?.total_coupons || firstTabCoupons.length || 0;

  const dailyOffers = merchantData?.daily_offers || [];
  const showDailyOffersTab = dailyOffers.length > 10;
  const hasFaqContent = !!processedMerchantData?.faqs;

  async function handleActivateClick(url: any) {
    if (!isLoggedIn) {
      setShowActivateModal(true);
      return;
    }

    if (!url) return;

    // Redirect immediately
    if (typeof window !== "undefined") {
      window.open(url, "_blank", "noopener,noreferrer");
    }

    // Call APIs in background (non-blocking)
    if (isLoggedIn) {
      trackStoreExit({
        store,
        url,
        queryClient,
      });
    }
  }

  return (
    <>
      <Script id="gtag-init" strategy="afterInteractive">
        {`window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'AW-11189643505');`}
      </Script>

      <div className="lightBg">
        <div className="">
          {/* Breadcrumbs will be added by parent server component */}
        </div>

        <section className="py-3 merchantSection">
          <div className="container webContent">
            <div className="row">
              {/* left Sidebar */}
              <div className="col-xxl-8 col-xl-8 col-lg-12 col-md-12 col-sm-12 col-12">
                {hasError ? (
                  <>
                    <div className="text-center alert alert-danger">
                      Oops! Something went wrong. Please try again later.
                    </div>
                  </>
                ) : (
                  <>
                    <div className="row justify-content-center">
                      <div className="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 text-center">
                        <div className="bg-white shadow-sm rounded-3 position-relative mb-3">
                          <div className="row align-items-center p-3 position-relative">
                            <div className="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                              <h1 className="mainHeading text-md-start text-center text-dark pb-0 mb-0">
                                {processedMerchantData?.brand_header}
                              </h1>
                              <p className="text-md-start text-center mb-0">
                                {/* {processedMerchantData.brand_text} */}
                              </p>
                            </div>
                          </div>
                        </div>
                        <div className="bg-white shadow-sm rounded-3 pb-3 position-relative">
                          <div className="row align-items-center p-3 position-relative">
                            <div className="col-xxl-2 col-xl-2 col-lg-2 col-md-3 mb-3 d-flex justify-content-center align-items-center ">
                              <div
                                className="brandLogo bg-white"
                                style={{ height: "100px", width: "100px" }}
                              >
                                <ImageWithFallback
                                  src={processedMerchantData?.image_url}
                                  alt={processedMerchantData?.merchant || ""}
                                  height={200}
                                  width={200}
                                  className=" img-fluid"
                                  style={{
                                    height: "100%",
                                    width: "100%",
                                    objectFit: "contain",
                                  }}
                                  fallback={processedMerchantData?.txt_img}
                                />
                              </div>
                            </div>
                            <div className="col-xxl-10 col-xl-10 col-lg-10 col-md-9">
                              <h3 className="mainHeading text-md-start text-center">
                                {processedMerchantData?.merchant_title?.toUpperCase()}
                              </h3>
                              <p className="text-md-start text-center my-3">
                                {processedMerchantData?.merchant_description}
                              </p>
                              <small className="text-md-start text-center mb-3 d-block">
                                When you buy through links on Rebates.com we may
                                earn a commission.
                              </small>
                            </div>
                          </div>
                        </div>
                        <div className="activate-button mb-4">
                          {(() => {
                            const url =
                              activateCashbackUrl ||
                              firstTabCoupons?.[0]?.deeplink;
                            return (
                              <a
                                data-link={url}
                                href="#"
                                onClick={(e) => {
                                  e.preventDefault();
                                  handleActivateClick(url);
                                }}
                                className="button btn-first text-white px-5 w-100 fw-bold shadow-sm viewCashback merchant-redirect"
                              >
                                Activate Cashback
                              </a>
                            );
                          })()}
                        </div>

                        {/* Cashback small card */}
                        {processedMerchantData?.cashback_value ? (
                          <div className="card cashback-terms-card shadow mb-3 d-block d-md-none">
                            <div className="card-header bg-second">
                              <div className="row align-items-center">
                                <div className="col-2 pe-0">
                                  <Image
                                    src={`${config.ENV_VARS.CDN_URL}/assets/img/cashback.svg`}
                                    alt="cashback"
                                    width={50}
                                    height={50}
                                    unoptimized
                                  />
                                </div>
                                <div className="col-9">
                                  <h4 className="mainHeading text-white mb-0 fw-bold">
                                    {processedMerchantData?.cashback_value}
                                  </h4>
                                </div>
                                <div className="col-1 ps-0">
                                  <a
                                    href="#"
                                    onClick={(e) => {
                                      e.preventDefault();
                                      setIsCashbackInfoOpen(true);
                                    }}
                                    className="text-decoration-underline cashback-terms-info fw-bold"
                                  >
                                    <Info
                                      size={15}
                                      color="#ffffff"
                                      strokeWidth={2.5}
                                      // title="Offer Terms"
                                    />
                                  </a>
                                </div>
                              </div>
                            </div>
                            <div className="card-body bg-white">
                              <ul className="ps-0 mb-0">
                                <li>
                                  Tracking timeline - upto 48 hrs{" "}
                                  <span
                                    data-tooltip-id="tracking-tooltip"
                                    data-tooltip-content="Time required to track the cashback"
                                    style={{ cursor: "pointer" }}
                                  >
                                    <Info
                                      size={15}
                                      color="#7d5dee"
                                      strokeWidth={2.5}
                                    />
                                  </span>
                                </li>

                                <li>
                                  Confirmation timeline - upto 60 days{" "}
                                  <span
                                    data-tooltip-id="confirm-tooltip"
                                    data-tooltip-content="Time required for confirming the cashback and it is ready to be withdrawn"
                                    style={{ cursor: "pointer" }}
                                  >
                                    <Info
                                      size={15}
                                      color="#7d5dee"
                                      strokeWidth={2.5}
                                    />
                                  </span>
                                </li>
                              </ul>

                              <Tooltip
                                id="tracking-tooltip"
                                place="top"
                                style={{
                                  backgroundColor: "#000",
                                  color: "#fff",
                                  fontSize: 12,
                                  borderRadius: 6,
                                  padding: "8px 10px",
                                  maxWidth: 220,
                                  whiteSpace: "normal",
                                  textAlign: "left",
                                  lineHeight: 1.4,
                                }}
                              />
                              <Tooltip
                                id="confirm-tooltip"
                                place="top"
                                style={{
                                  backgroundColor: "#000",
                                  color: "#fff",
                                  fontSize: 12,
                                  borderRadius: 6,
                                  padding: "8px 10px",
                                  maxWidth: 220,
                                  whiteSpace: "normal",
                                  textAlign: "left",
                                  lineHeight: 1.4,
                                }}
                              />
                            </div>
                          </div>
                        ) : (
                          <div className="card cashback-terms-card shadow mb-3 d-block d-md-none">
                            <div
                              className="card-header bg-second"
                              style={{ background: "red" }}
                            >
                              <div className="row align-items-center">
                                <div className="col-2 pe-0">
                                  <Image
                                    src={`${config.ENV_VARS.CDN_URL}/assets/img/cashback.svg`}
                                    alt="cashback"
                                    width={50}
                                    height={50}
                                    unoptimized
                                  />
                                </div>
                                <div className="col-9">
                                  <h5 className="text-white mb-0 fw-bold">
                                    No Cashback Available
                                  </h5>
                                </div>
                              </div>
                            </div>
                          </div>
                        )}
                      </div>
                    </div>

                    <div className="row align-items-center mb-3 text-md-start text-center">
                      <div className="col-xxl-2 col-xl-2 col-lg-2 col-md-3 col-12 mb-md-0 mb-3 d-flex justify-content-center">
                        <div
                          className="brandLogo bg-white"
                          style={{ height: "100px", width: "100px" }}
                        >
                          <ImageWithFallback
                            src={
                              processedMerchantData?.image_url || defaultImage
                            }
                            alt={processedMerchantData?.merchant}
                            height={120}
                            width={120}
                            style={{ objectFit: "contain" }}
                            unoptimized
                            fallback={processedMerchantData?.txt_img}
                          />
                        </div>
                      </div>
                      <div className="col-xxl-9 col-xl-9 col-lg-9 col-md-12 col-12">
                        <h3 className="subHeading mb-0">
                          {processedMerchantData?.merchant_title?.toUpperCase()}
                        </h3>
                        <p className="mb-0">Tips, Tricks & Hacks to Save</p>
                      </div>
                    </div>

                    <div className="row align-items-center">
                      <div className="col-xxl-3 col-xl-3 col-lg-3 col-md-12 col-12 text-md-start text-center mb-3">
                        <div className="filter-sort-Block">
                          {firstTabCoupons[0]?.source === "manual" ? (
                            <h3 className="subHeading fw-bold">
                              0 Offers{" "}
                              <small className="font-size-12 d-block">
                                Last updated 1 Hr ago
                              </small>
                            </h3>
                          ) : totalCoupons ? (
                            <h3 className="subHeading fw-bold">
                              {totalCoupons} Offers{" "}
                              <small className="font-size-12 d-block">
                                Last updated 1 Hr ago
                              </small>
                            </h3>
                          ) : null}
                        </div>
                      </div>
                      <div className="col-xxl-9 col-xl-9 col-lg-9 col-md-12 col-12">
                        <ul
                          className="nav nav-pills mb-3 justify-content-xxl-end justify-content-lg-end justify-content-md-start justify-content-center navbar-scroll"
                          id="pills-tab"
                          role="tablist"
                        >
                          {firstTabCoupons && firstTabCoupons.length > 0 ? (
                            <li
                              className="nav-item rounded-2"
                              role="presentation"
                            >
                              <button
                                className={`nav-link ${
                                  activeTab === "maximum" ? "active" : ""
                                }`}
                                onClick={() => setActiveTab("maximum")}
                              >
                                Maximum Saving Offer
                              </button>
                            </li>
                          ) : null}
                          {showDailyOffersTab ? (
                            <li
                              className="nav-item rounded-2"
                              role="presentation"
                            >
                              <button
                                className={`nav-link ${
                                  activeTab === "daily" ? "active" : ""
                                }`}
                                onClick={() => setActiveTab("daily")}
                              >
                                Daily Offers
                              </button>
                            </li>
                          ) : null}
                          <li
                            className="nav-item rounded-2"
                            role="presentation"
                          >
                            <button
                              className={`nav-link ${
                                activeTab === "about" ? "active" : ""
                              }`}
                              onClick={() => setActiveTab("about")}
                            >
                              About Merchant
                            </button>
                          </li>
                        </ul>
                      </div>
                    </div>

                    <div className="tab-content" id="pills-tabContent">
                      <div
                        className={`tab-pane fade ${
                          activeTab === "maximum" ? "active show" : ""
                        }`}
                        id="pills-maximum-saving-offer"
                        role="tabpanel"
                      >
                        <CouponList
                          coupons={firstTabCoupons}
                          merchantRedirectLink={
                            processedMerchantData?.redirect_link
                          }
                          showBestDeal={true}
                          emptyMessage="No Deals Available"
                          isDirectMerchant={
                            processedMerchantData?.is_direct_merchant
                          }
                          store={store}
                        />
                      </div>

                      <div
                        className={`tab-pane fade ${
                          activeTab === "daily" ? "active show" : ""
                        }`}
                        id="pills-daily-offers"
                        role="tabpanel"
                      >
                        <CouponList
                          coupons={dailyOffers || []}
                          merchantRedirectLink={
                            processedMerchantData?.redirect_link
                          }
                          showBestDeal={false}
                          emptyMessage="No Daily Offers Available"
                          isDirectMerchant={
                            processedMerchantData?.is_direct_merchant
                          }
                          store={store}
                        />
                      </div>

                      <div
                        className={`tab-pane fade ${
                          activeTab === "about" ? "active show" : ""
                        }`}
                        id="pills-merchantFaq"
                        role="tabpanel"
                      >
                        <div className="row">
                          <div className="col-12 merchant-details justify-content-center bg-white border rounded-3 p-3 shadow-sm">
                            <div className="about-merchant p-3">
                              <h4 className="subHeading">
                                {processedMerchantData?.merchant}
                              </h4>
                              <hr className="mt-1 mb-3" />
                              <div
                                dangerouslySetInnerHTML={{
                                  __html: DOMPurify.sanitize(
                                    processedMerchantData?.about_merchant ?? "",
                                    {
                                      USE_PROFILES: { html: true },
                                    },
                                  ),
                                }}
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </>
                )}
              </div>

              {/* Right Sidebar */}
              <div className="col-xxl-4 col-xl-4 col-lg-12 col-md-12 col-sm-12 col-12">
                {processedMerchantData?.cashback_value ? (
                  <div className="card cashback-terms-card shadow mb-3 d-md-block d-none">
                    <div className="card-header bg-second">
                      <div className="row align-items-center">
                        <div className="col-xxl-2 col-xl-2 col-lg-2 col-md-2 col-sm-2 col-2 pe-0">
                          <Image
                            src={`${config.ENV_VARS.CDN_URL}/assets/img/cashback.svg`}
                            alt="cashback"
                            width={50}
                            height={50}
                            className="w-100 lazyload"
                          />
                        </div>

                        <div className="col-xxl-9 col-xl-9 col-lg-9 col-md-9 col-sm-9 col-9 ">
                          <h4 className="mainHeading text-white mb-0 fw-bold">
                            {processedMerchantData?.cashback_value}
                          </h4>
                        </div>

                        <div className="col-xxl-1 col-xl-1 col-lg-1 col-md-1 col-sm-2 col-2 ps-0">
                          <button
                            type="button"
                            onClick={() => {
                              setIsCashbackInfoOpen(true);
                            }}
                            className="text-decoration-underline cashback-terms-info fw-bold"
                            style={{
                              zIndex: 10,
                              position: "relative",
                              pointerEvents: "auto",
                            }}
                          >
                            <span title="Offer Terms">
                              <Info
                                size={25}
                                color="#ffffff"
                                strokeWidth={2.5}
                              />
                            </span>
                          </button>
                        </div>
                      </div>
                    </div>

                    <div className="card-body bg-white">
                      <ul className="ps-0 mb-0">
                        <li>
                          Tracking timeline - upto 48 hrs{" "}
                          <span title="Time required to track the cashback">
                            <Info
                              size={15}
                              className="mb-1"
                              strokeWidth={2.5}
                            />
                          </span>
                        </li>
                        <li>
                          Confirmation timeline - upto 60 days{" "}
                          <span title="Time required for confirming the cashback and it is ready to be withdrawn">
                            <Info
                              size={15}
                              className="mb-1"
                              strokeWidth={2.5}
                            />
                          </span>
                        </li>
                      </ul>
                    </div>

                    <CashbackInfoModal
                      isOpen={isCashbackInfoOpen}
                      onClose={() => setIsCashbackInfoOpen(false)}
                    />
                  </div>
                ) : (
                  <div className="card cashback-terms-card shadow mb-3 d-md-block d-none">
                    <div
                      className="card-header bg-second"
                      style={{ background: "red" }}
                    >
                      <div className="row align-items-center">
                        <div className="col-2 pe-0">
                          <Image
                            src={`${config.ENV_VARS.CDN_URL}/assets/img/cashback.svg`}
                            alt="cashback"
                            width={50}
                            height={50}
                            unoptimized
                          />
                        </div>
                        <div className="col-9">
                          <h5 className="text-white mb-0 fw-bold">
                            No Cashback Available
                          </h5>
                        </div>
                      </div>
                    </div>
                  </div>
                )}

                <div className="merchant-details bg-white border justify-content-center rounded-3 p-3 shadow-sm">
                  <h4 className="subHeading">
                    FAQ on {processedMerchantData?.merchant}:
                  </h4>
                  <hr className="my-1" />

                  {hasError ? (
                    <p className="text-center text-muted mb-0">
                      Oops! Something went wrong while loading FAQs. Please try
                      again later.
                    </p>
                  ) : !hasFaqContent ? (
                    <p className="text-center text-muted mb-0">
                      No FAQs available for this merchant at the moment.
                    </p>
                  ) : (
                    <div
                      className="merchant-faq-content"
                      dangerouslySetInnerHTML={{
                        __html: DOMPurify.sanitize(processedMerchantData.faqs, {
                          USE_PROFILES: { html: true },
                        }),
                      }}
                    />
                  )}
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Popular Stores */}
        {processedMerchantData?.popular_stores?.length ? (
          <section
            className="popularStoresSection decorationNone popuFAQ On Macys:lar-store pt-3 pb-4"
            id="popularStoresSection"
          >
            <div className="container webContent text-center">
              <div className="row">
                <div className="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-12">
                  <h2 className="mainHeading">
                    {processedMerchantData?.merchant} couponers also shop
                  </h2>
                </div>
              </div>
              <div className="row mt-4">
                {processedMerchantData?.popular_stores?.map(
                  (store: any, idx: number) => (
                    <div
                      key={`popular-store-${store?.store || idx}`}
                      className="col-xxl-2 col-xl-2 col-lg-2 col-md-4 col-12 mb-xxl-4 mb-xl-4 mb-lg-4 mb-md-4 mb-2"
                    >
                      <Link href={`/coupons/${store?.store}`}>
                        <div className="card shadow bg-white rounded">
                          <div className="d-flex justify-content-center align-items-center mb-0 d-flex border-0 coupon-image">
                            <ImageWithFallback
                              src={store?.image_url || defaultImage}
                              alt={store?.brand_name || ""}
                              height={120}
                              width={120}
                              style={{ objectFit: "contain" }}
                              unoptimized
                              fallback={store?.txt_img}
                            />
                          </div>
                          <div className="card-footer bg-white pt-2">
                            <div className="coupon-info mb-0 color-first fw-bold text-center">
                              {store?.coupon_count} Offers
                            </div>
                          </div>
                        </div>
                      </Link>
                    </div>
                  ),
                )}
              </div>
            </div>
          </section>
        ) : null}

        {/* Similar Stores */}
        {processedMerchantData?.similar_stores?.length ? (
          <section className="py-4">
            <div className="container">
              <div className="row justify-content-center popular-list">
                <div className="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-12">
                  <p className="color-first fw-bold font-size-16 mb-3">
                    People who shops this merchant also like
                  </p>
                  <ul className="ps-0">
                    {processedMerchantData?.similar_stores
                      ?.slice(0, 5)
                      ?.map((s: any, i: number) => (
                        <li key={`similar-${s?.store || i}`}>
                          <Link href={`/coupons/${s?.store}`}>
                            {s?.brand_name}
                          </Link>
                        </li>
                      ))}
                  </ul>
                </div>
                <div className="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-12">
                  <p className="color-first fw-bold font-size-16 mb-3">
                    Coupons for Trending Stores
                  </p>
                  <ul className="ps-0">
                    {processedMerchantData?.popular_stores
                      ?.slice(0, 5)
                      ?.map((s: any, i: number) => (
                        <li key={`trending-${s?.store || i}`}>
                          <Link href={`/coupons/${s?.store}`}>
                            {s?.brand_name}
                          </Link>
                        </li>
                      ))}
                  </ul>
                </div>
                <div className="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-12">
                  <p className="color-first fw-bold font-size-16 mb-3">
                    Coupons for Top Stores
                  </p>
                  <ul className="ps-0">
                    {processedMerchantData?.top_stores
                      ?.slice(0, 5)
                      ?.map((s: any, i: number) => (
                        <li key={`top-${s?.store || i}`}>
                          <Link href={`/coupons/${s?.store}`}>
                            {s?.brand_name}
                          </Link>
                        </li>
                      ))}
                  </ul>
                </div>
              </div>
            </div>
          </section>
        ) : null}

        <ActivateCashbackModal
          isOpen={showActivateModal}
          onClose={() => setShowActivateModal(false)}
          merchantName={processedMerchantData?.store}
          cashbackValue={(processedMerchantData as any)?.cashback}
        />
      </div>
    </>
  );
}