import { BASE_URL } from "@/components/main/BaseUrl";
import React from "react";
import { cookies } from "next/headers";
import Container from "@/components/elements/Container";
import { IAdvertising, IRate } from "@/types/types";
import Image from "next/image";
import BillboardImageSlider from "@/components/billboards/BillboardPage/BillboardImageSlider";
import MainBillboardCardActions from "@/components/billboards/MainBillboardCard/MainBillboardCardActions";
import BillboardDetails from "@/components/billboards/BillboardPage/BillboardDetails";
import MyBillboardStatusActions from "@/components/settings/my-billboards/MyBillboardStatusActions";

interface IBillboardProps {
  params: Promise<{ id: string; title: string }>;
}

async function BillboardPage({ params }: IBillboardProps) {
  const { id } = await params;
  const token = (await cookies()).get("token")?.value || "";

  const response = await fetch(`${BASE_URL}/advertising/get/web/${id}`, {
    cache: "no-store",
    headers: {
      Authorization: token ? `Bearer ${token}` : "",
    },
  });

  // const billboard = (await response.json()).billboard as Billboard;
  const data = await response.json();
  const billboard = data.advertising as IAdvertising;
  const rate = data.rate as IRate;

  return (
    <Container>
      <a
        href={`/billboards/profile/${billboard?.creatorId}/${billboard?.title}`}
      >
        <h1 className="font-bold md:text-xl text-lg text-center mt-10 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}/${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.svg`}
                  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.svg`}
                  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}
          isDetail={true}
        />
        <div className="flex gap-4 mt-4">
          <span>استان: {billboard?.province.name}</span>
          <h3>شهر: {billboard?.city.name}</h3>
          <h4>محله: {billboard?.neighbourhood}</h4>
        </div>
        <div className="flex gap-4 mt-2">
          <h5>آدرس: {billboard?.address}</h5>
        </div>
        <BillboardDetails
          services={billboard?.services}
          features={billboard?.features}
          contactInfo={billboard?.contactInfo}
          description={billboard?.description}
          lat={billboard?.lat}
          lng={billboard?.lng}
          _id={billboard?._id}
          noDirection={true}
        />
        <MyBillboardStatusActions
          status={billboard?.status}
          reject_reason={billboard?.reject_reason}
          _id={billboard?._id}
          type={billboard?.type}
          showDiscount={billboard?.showDiscount}
          title={billboard?.title}
        />
      </div>
    </Container>
  );
}

export default BillboardPage;
