"use client";

import Container from "@/components/elements/Container";
import BillboardImageSlider from "@/components/billboards/BillboardPage/BillboardImageSlider";
import BillboardDetails from "@/components/billboards/BillboardPage/BillboardDetails";
import LocalePageShell from "@/components/i18n/LocalePageShell";
import MainBillboardCardActions from "@/components/billboards/MainBillboardCard/MainBillboardCardActions";
import { IAdvertising, IRate } from "@/types/types";
import { trackExploreInteraction } from "@/api/trackExploreInteraction";
import Cookies from "js-cookie";
import Image from "next/image";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";

type BillboardDetailContentProps = {
  billboard: IAdvertising;
  rate: IRate;
};

export default function BillboardDetailContent({
  billboard,
  rate,
}: BillboardDetailContentProps) {
  const { t } = useTranslation("common");

  useEffect(() => {
    if (!billboard?._id) return;
    const token = Cookies.get("token") || "";
    if (!token) return;
    trackExploreInteraction(
      {
        targetType: "billboard",
        targetId: billboard._id,
        authorId: billboard.creatorId || undefined,
        contentType: "billboard",
        action: "view",
      },
      token
    );
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [billboard?._id]);

  return (
    <LocalePageShell>
      <Container>
        <a
          href={`/billboards/profile/${billboard?.creatorId}/${encodeURIComponent(billboard?.title || "")}`}
        >
          <h1 className="font-bold md:text-xl text-lg text-center mt-2 line-clamp-2 mb-4 text-text-blue-light dark:text-text-blue-dark">
            {billboard?.title}
          </h1>
        </a>
        <div className="px-4 w-full text-sm md:text-md font-semibold">
          <div className="flex justify-between">
            <div className="flex gap-4">
              <a
                href={`/billboards/profile/${billboard?.creatorId}/${encodeURIComponent(billboard?.title || "")}`}
              >
                <h2 className="text-text-green-light dark:text-text-green-dark font-semibold line-clamp-2 ">
                  {billboard?.category}
                </h2>
              </a>

              <div className="flex items-center justify-center">
                <>
                  <span>{rate?.adTotalRatings ? rate?.adTotalRatings : "0"}</span>
                  <Image
                    width={22}
                    height={22}
                    alt={"medal-star icon"}
                    src={`/images/icons/medal-star.png`}
                    className="pb-1"
                  />
                </>
              </div>
              <div className="flex items-center">
                <>
                  <span>
                    {rate?.adAverageRating ? rate?.adAverageRating : "0"}
                  </span>
                  <Image
                    width={22}
                    height={22}
                    alt={"star icon"}
                    src={`/images/icons/star1.png`}
                    className="pb-1"
                  />
                </>
              </div>
            </div>
            {billboard?.showDiscount && billboard?.mostDiscountPercentage && (
              <div className="text-md bg-red-600 text-white w-16 h-8 flex items-center justify-center rounded-full pt-1">
                {billboard?.mostDiscountPercentage}%
              </div>
            )}
          </div>
          {billboard?.images && (
            <BillboardImageSlider images={billboard?.images} />
          )}
          <hr />
          <MainBillboardCardActions
            _id={billboard?._id}
            likedByUser={billboard?.likedByUser}
            likesCount={billboard?.likesCount}
            commentsCount={billboard?.commentsCount}
            viewCount={billboard?.viewCount}
            showViewCount
            trackView
          />

          <div className="flex flex-wrap gap-4 mt-6 p-4 bg-gray-50 dark:bg-zinc-900 rounded-xl">
            <div className="flex gap-1 text-gray-500">
              <span>{t("billboards.provinceLabel")}</span>
              <span className="text-black dark:text-white">
                {billboard?.province?.name}
              </span>
            </div>
            <div className="flex gap-1 text-gray-500">
              <h3>{t("billboards.cityLabel")}</h3>
              <span className="text-black dark:text-white">
                {billboard?.city?.name}
              </span>
            </div>
            <div className="flex gap-1 text-gray-500">
              <h4>{t("billboards.neighbourhoodLabel")}</h4>
              <span className="text-black dark:text-white">
                {billboard?.neighbourhood}
              </span>
            </div>
          </div>

          <div className="flex gap-2 mt-4 mb-8">
            <span className="text-gray-500">{t("billboards.addressLabel")}</span>
            <h5 className="font-bold">
              {billboard?.address || t("billboards.addressNotRegistered")}
            </h5>
          </div>

          <BillboardDetails
            services={billboard?.services}
            features={billboard?.features}
            contactInfo={billboard?.contactInfo}
            description={billboard?.description}
            lat={billboard?.lat}
            lng={billboard?.lng}
            _id={billboard?._id}
          />
        </div>
      </Container>
    </LocalePageShell>
  );
}
