"use client";
import { useLocale, useTranslations } from "next-intl";
import Image from "next/image";
import Link from "next/link";
import { useMemo } from "react";
import bath from "../../../public/assets/icons/bathroom.svg";
import measure from "../../../public/assets/icons/measure.svg";
import parking from "../../../public/assets/icons/parking.svg";
import bed from "../../../public/assets/icons/sleeping.svg";
import defaultimg from "@/public/defaultimg.png";

// Extracted image wrapper component
const ImageWrapper = ({
  src,
  alt,
  className,
}: {
  src: string;
  alt: string;
  className: string;
}) => (
  <div className={`overflow-hidden rounded-[16px] ${className}`}>
    <Image
      src={src ?? defaultimg}
      alt={alt}
      className="object-cover w-full h-full rounded-[16px] hover:scale-105 duration-500"
      width={600}
      height={400}
      loading="lazy"
      quality={75}
      sizes="(max-width: 640px) 100vw, 396px"
    />
  </div>
);

// Extracted specifications item component
const SpecificationItem = ({ item, isLast, t } : { item: any; isLast: boolean; t: any }) => (
  <div className="flex lg:gap-5 2xl:gap-10 md:gap-10 h-[80px] lg:h-[150px]">
    <div className="flex flex-row md:flex-col items-center gap-2.5 w-full ps-3 ">
      <Image
        src={item.icon}
        alt={item.title}
        width={60}
        height={60}
        className="!w-[40px] !h-[40px] md:!w-[60px] md:!h-[60px] lg:!w-[40px] lg:!h-[40px]"
        loading="lazy"
      />
      <div className="flex flex-col items-center ">
        <span className="text-[12px] md:text-[16px] lg:text-[14px]  text-center xl:text-[16px] font-extralight text-dark">
          {t(item.title)}
        </span>
        <span className="text-[12px] md:text-[16px] lg:text-[14px] text-center  xl:text-[16px] font-normal text-primary">
          {item.value}
        </span>
      </div>
    </div>
    {!isLast && (
      <div className="sm:border-l-2 lg:border-l-2 border-stroke w-[1px] h-[120px]"></div>
    )}
  </div>
);

// Image grid component using CSS Grid with same styling as flex
const ImageGrid = ({ images, count } : { images: any; count: number }) => {
  if (count === 4) {
    return (
      <div className="lg:w-[57.5%] grid grid-cols-[55%_42%] gap-4">
        {/* Left column - 2 images stacked */}
        <div className="grid grid-rows-[200px_180px] md:grid-rows-[289px_243px] gap-4 md:gap-6">
          <div className="relative overflow-hidden rounded-[16px] w-full h-full">
            <Image
              src={images[0]?.image ?? defaultimg}
              alt="img1"
              fill
              className="object-cover rounded-[16px] hover:scale-105 duration-500"
              loading="lazy"
              quality={70}
              sizes="
        (max-width: 640px) 50vw,
        (max-width: 1024px) 45vw,
        396px
      "
            />
          </div>

          <div className="relative overflow-hidden rounded-[16px] w-full h-full">
            <Image
              src={images[1]?.image ?? defaultimg}
              alt="img2"
              fill
              className="object-cover rounded-[16px] hover:scale-105 duration-500"
              loading="lazy"
              quality={70}
              sizes="
        (max-width: 640px) 50vw,
        (max-width: 1024px) 45vw,
        396px
      "
            />
          </div>
        </div>

        {/* Right column - 2 images stacked */}
        <div className="grid grid-rows-[160px_250px] md:grid-rows-[184px_350px] gap-5">
          <ImageWrapper
            src={images[2]?.image}
            alt="img3"
            className="w-full h-full"
          />
          <div className="relative overflow-hidden rounded-[16px] w-full h-full">
            <Image
              src={images[2]?.image ?? defaultimg}
              alt="img3"
              fill
              className="object-cover rounded-[16px] hover:scale-105 duration-500"
              loading="lazy"
              quality={70}
              sizes="
        (max-width: 640px) 50vw,
        (max-width: 1024px) 45vw,
        396px
      "
            />
          </div>
        </div>
      </div>
    );
  }

  if (count === 3) {
    return (
      <div className="lg:w-[57.5%] grid grid-cols-[55%_42%] gap-4">
        {/* Left column - 2 images stacked */}
        <div className="grid grid-rows-[137px_110px] md:grid-rows-[1fr_1fr] gap-4 md:gap-6">
          <ImageWrapper
            src={images[0]?.image}
            alt="img1"
            className="w-full h-full"
          />
          <ImageWrapper
            src={images[1]?.image}
            alt="img2"
            className="w-full h-full"
          />
        </div>

        {/* Right column - 1 large image */}
        <div className="grid h-[261px] md:h-[570px]">
          <ImageWrapper
            src={images[2]?.image}
            alt="img3"
            className="w-full h-full"
          />
        </div>
      </div>
    );
  }

  if (count === 2) {
    return (
      <div className="lg:w-[57.5%] grid grid-cols-2 gap-4">
        <ImageWrapper
          src={images[0]?.image}
          alt="img1"
          className="w-full h-[261px] md:h-[550px]"
        />
        <ImageWrapper
          src={images[1]?.image}
          alt="img2"
          className="w-full h-[261px] md:h-[550px]"
        />
      </div>
    );
  }

  return (
    <div className="lg:w-[57.5%]">
      <ImageWrapper
        src={images[0]?.image}
        alt="img1"
        className="w-full md:h-[570px] h-[350px] aspect-auto"
      />
    </div>
  );
};

const LastPorjectContent = ({ item }: { item: any }) => {
  const t = useTranslations("LastProjects");
  const locale = useLocale();

  // Memoize specifications array
  const specifications = useMemo(
    () => [
      {
        id: 1,
        title: "Bedrooms",
        icon: bed,
        value: item?.specifications?.bedrooms,
      },
      {
        id: 2,
        title: "Bathrooms",
        icon: bath,
        value: item?.specifications?.bathrooms,
      },
      {
        id: 3,
        title: "Garage",
        icon: parking,
        value: item?.specifications?.parking,
      },
      {
        id: 4,
        title: "Space",
        icon: measure,
        value: `${item?.specifications?.area} m²`,
      },
    ],
    [item?.specifications]
  );

  const imageCount = item?.images?.length ?? 0;

  return (
    <div className="flex flex-col lg:flex-row gap-4 lg:gap-12 justify-center 2xl:items-center px-4 lg:p-0">
      <ImageGrid images={item?.images ?? []} count={imageCount} />

      <div className="flex flex-col lg:w-[42.5%] !justify-center !items-start gap-6 md:gap-5 2xl:gap-12">
        <Link
          href={`${locale}/properties/${item?.slug}`}
          className="text-primary text-[20px] font-normal md:text-[40px] cursor-pointer hover:scale-105 duration-500"
        >
          {item?.locales?.name}
        </Link>

        <span className="text-start text-[14px] md:text-[16px] lg:text-[12px] xl:text-[16px] text-paragraph line-clamp-3 md:line-clamp-none lg:leading-[32px] font-light">
          {item?.locales?.short_description}
        </span>

        <div className="grid grid-cols-2 sm:grid-cols-4 gap-0 lg:gap-12 w-full">
          {specifications.map((spec, index) => (
            <SpecificationItem
              key={spec.id}
              item={spec}
              isLast={index === specifications.length - 1}
              t={t}
            />
          ))}
        </div>
      </div>
    </div>
  );
};

export default LastPorjectContent;