"use client"
import ProjectHero from "@/components/ProjectHero";
import ProjectTabs from "@/components/ProjectTabs";
import RealEstateSpecsCard from "@/components/RealEstateSpecsCard";
import FeaturesWarranties from "@/components/FeaturesWarranties";
import ProjectLocation from "@/components/ProjectLocation";
import { getPropertyById, formatLocationSubtitle, translate, PropertyDetails } from "@/lib/api";
import { notFound, useParams } from "next/navigation";
import { useEffect, useState } from "react";

const RealEstateDetails = () => {
  const params = useParams();
  const id = params.id as string;
  const [property, setProperty] = useState<PropertyDetails | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      const data = await getPropertyById(id);
      if (data) {
        setProperty(data);
      }
      setLoading(false);
    };
    fetchData();
  }, [id]);

  if (loading) return <div>Loading...</div>;
  if (!property) {
    notFound();
    return null;
  }

  const mainImage = property.images && property.images.length > 0
    ? property.images[0].url
    : '/no-image.png';

  const locationString = formatLocationSubtitle(property.address, property.city?.name || '');

  const hasFeatures = property.features && property.features.length > 0;
  const hasWarranties = (property as any).warranties && (property as any).warranties.length > 0;

  const mappedFeatures = property.features?.map(f => ({
    name: f.title || '',
    icon: '/main-page/features/feature-check.svg'
  })) || [];

  return (
    <div className="mt-8 px-4 md:px-12 flex flex-col md:flex-row md:items-start gap-6 text-[#05222D]">
      <div className="flex flex-col gap-4 lg:w-3/4 flex-grow">
        <ProjectHero
          image={mainImage}
          // videoSrc="/main-page/real-estate-video.mp4"
          isDownloadButtonVisible={false}
          images={property.images}
        />

        <RealEstateSpecsCard
          classNames="md:hidden mb-2"
          property={property}
        />

        <div className="bg-[#F1F5F9] p-3 rounded-md">
          <div className="flex items-center gap-2 ">
            <h2 className="text-[#052531] font-bold text-xl">{property.title}</h2>
            {property.type_of_property && (
              <div className="bg-[#10B9811A] text-[#10B981] px-2 py-0.5 text-xs rounded-full border border-[#10B9811A]">
                {translate(property.type_of_property)}
              </div>
            )}
          </div>

          <div className="text-[#45556C] text-sm flex items-center gap-1 mt-1 mb-6 font-medium">
            <MapIcon size={16} />
            {locationString}
          </div>

          <p className="text-[#45556C] text-base leading-relaxed">
            {property.description}
          </p>
        </div>

        <FeaturesWarranties
          features={mappedFeatures}
          warranties={(property as any).warranties || []}
        />

        <ProjectLocation
          address={property.address}
          latitude={property.latitude ? parseFloat(property.latitude) : undefined}
          longitude={property.longitude ? parseFloat(property.longitude) : undefined}
          propertyTitle={property.title}
        />

        <div className="bg-[#F1F5F9] p-3 rounded-md">
          <h3 className="text-[#052531] font-bold text-md">
            المعالم القريبة
          </h3>

          <hr className="my-2 border-[#CAD5E2]" />

          <p className="text-[#62748E] text-sm text-center py-4">لا توجد بيانات حالياً</p>
        </div>

        <ProjectTabs property={property} />
      </div>

      <RealEstateSpecsCard
        classNames="hidden md:block"
        property={property}
      />
    </div>
  );
};

const MapIcon = ({ size = 20, color = '#314158' }: { size?: number; color?: string }) => {
  return (
    <svg width={size} height={size} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M17.5 8.33334C17.5 14.1667 10 19.1667 10 19.1667C10 19.1667 2.5 14.1667 2.5 8.33334C2.5 6.34422 3.29018 4.43657 4.6967 3.03004C6.10322 1.62352 8.01088 0.833344 10 0.833344C11.9891 0.833344 13.8968 1.62352 15.3033 3.03004C16.7098 4.43657 17.5 6.34422 17.5 8.33334Z" stroke={color} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
      <path d="M10 10.8333C11.3807 10.8333 12.5 9.71406 12.5 8.33334C12.5 6.95263 11.3807 5.83334 10 5.83334C8.61929 5.83334 7.5 6.95263 7.5 8.33334C7.5 9.71406 8.61929 10.8333 10 10.8333Z" stroke={color} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
};

export default RealEstateDetails;