import RoundedDiv from "@/components/elements/RoundedDiv";
import { IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";
import { IAdvertising } from "@/types/types";
import Image from "next/image";
import Link from "next/link";
import React from "react";
import MainBillboardCardActions from "./MainBillboardCardActions";

function MainBillboardCard({
  billboard,
  adStatus,
  color,
  textColor,
  borderColor,
  showExpire,
}: {
  billboard: IAdvertising;
  adStatus?: string;
  color?: string;
  textColor?: string;
  borderColor?: string;
  showExpire?: boolean;
}) {
  return (
    <div
    className={`w-full p-5 border rounded-3xl my-4 md:my-5 relative text-xs md:text-sm font-semibold transition-all duration-300
      ${billboard?.type === "highlight" 
        ? "bg-gradient-to-r from-rose-50 to-pink-100 dark:from-rose-950 dark:to-pink-900 border-rose-300 dark:border-rose-700 text-rose-800 dark:text-rose-200 shadow-sm" 
        : "bg-tertiary-light dark:bg-tertiary-dark border-border-secondary-dark dark:border-border-secondary-dark hover:shadow-md transition-shadow"}
    `}
    >
      {/* نوع تبلیغ */}
      {billboard?.type === "special" && (
        <RoundedDiv className="bg-[#FFBDBD] dark:bg-[#794a4a] !border-[#FFBDBD] h-7 w-28 absolute right-4 -top-3">
          ویژه
        </RoundedDiv>
      )}

      {/* تخفیف */}
      {billboard?.showDiscount && billboard?.mostDiscountPercentage && (
        <div className="text-xs md:text-sm bg-red-600 text-white w-16 h-8 flex items-center justify-center rounded-full pt-1 mr-2 absolute left-4 -top-4">
          {billboard?.mostDiscountPercentage}%
        </div>
      )}

      {/* وضعیت */}
      {adStatus && (
        <RoundedDiv
          style={{
            backgroundColor: color ? color : "",
            borderColor: borderColor ? borderColor : "",
            color: textColor ? textColor : "",
          }}
          className="h-7 w-28 absolute left-4 -top-3"
        >
          {adStatus}
        </RoundedDiv>
      )}

      <div className="flex mt-2">
        <div className="flex flex-col justify-between w-full">
          {/* عنوان و دسته‌بندی */}
          <div>
            <Link
              href={`/billboards/${billboard?._id}/${billboard?.title}`}
              className="max-w-[80%] w-full text-sm"
            >
              <h3 className="text-text-green-light dark:text-text-green-dark font-semibold line-clamp-2 ">
                {billboard?.category}
              </h3>
              <h2 className="text-text-blue-light dark:text-text-blue-dark font-semibold line-clamp-2 my-2">
                {billboard?.title}
              </h2>
            </Link>

            {/* شهر، محله، آدرس */}
            <div className="flex flex-col gap-1 mt-2 text-xs">
              <h4>شهر: {billboard?.city?.name || "نامشخص"}</h4>
              <h5>محله: {billboard?.neighbourhood || "—"}</h5>
              {/* <span>آدرس: {billboard?.address || "—"}</span>
              {billboard?.lat && billboard?.lng && (
                <Link
                  href={`https://maps.google.com/?q=${billboard.lat},${billboard.lng}`}
                  target="_blank"
                  className="text-blue-500 underline mt-1"
                >
                  نمایش در نقشه
                </Link>
              )} */}
            </div>
          </div>

          <MainBillboardCardActions
            _id={billboard?._id}
            likedByUser={billboard?.likedByUser}
            likesCount={billboard?.likesCount}
            commentsCount={billboard?.commentsCount}
            viewCount={billboard?.viewCount}
          />

          {showExpire && (
            <span className="mt-3">انقضا: {billboard?.remainingTime}</span>
          )}
        </div>

        {/* عکس تبلیغ یا پروفایل فروشگاه */}
        <div
          className={`flex flex-col items-center ${
            showExpire ? "justify-start" : "justify-between"
          }`}
        >
          <div className="w-full flex items-center gap-4 ">
            {/* امتیاز */}
            <div className="flex items-center justify-center">
              <span>{billboard?.rate?.adTotalRatings || "0"}</span>
              <Image
                width={22}
                height={22}
                alt="total ratings"
                src={`/images/icons/medal-star.svg`}
                className="pb-1"
              />
            </div>
            <div className="flex items-center">
              <span>{billboard?.rate?.adAverageRating || "0"}</span>
              <Image
                width={22}
                height={22}
                alt="average rating"
                src={`/images/icons/star1.svg`}
                className="pb-1"
              />
            </div>
          </div>

          {/* عکس پروفایل یا اولین تصویر */}
          {billboard?.images?.[0] ? (
            <Image
              className="rounded-2xl object-cover max-h-[86px] min-h-[86px] max-w-[86px] min-w-[86px] md:min-h-[120px] md:min-w-[120px] md:max-h-[120px] md:max-w-[120px] mt-4"
              width={120}
              height={120}
              alt={billboard?.title}
              src={`${IMAGE_BASE_URL}${billboard.images[0]}`}
              unoptimized
            />
          ) : (
            <div className="rounded-full bg-gray-300 flex items-center justify-center h-[86px] w-[86px] md:h-[120px] md:w-[120px] mt-4">
              <span className="text-gray-600 text-xs">بدون تصویر</span>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

export default MainBillboardCard;
