"use client";
import Image from "next/image";
import { Button } from "./ui/button";
import Link from "next/link";
import { useState } from "react";
import Dialog from "./ui/dialog";
import Field from "./ui/Field";
import RiyalIcon from "./RiyalIcon";
import { FireFlameCurved } from "./icons/RandomIcons";
import { PropertyDetails, translate } from "@/lib/api";
import { FiUsers } from "react-icons/fi";

type ProjectSpecsCardProps = {
    classNames?: string
    property: PropertyDetails
}
const ProjectSpecsCard = ({ classNames, property }: ProjectSpecsCardProps) => {
    const [showIntrestDialog, setShowIntrestDialog] = useState(false);

    const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        setShowIntrestDialog(false);
    }

    const marketerName = property.owner?.name || "مسوق غير مسمى";
const companyName =
  property.owner?.company_name || "شركة أمتار العقارية";
  
const marketerAvatar =
  property.owner?.avatar ||
  "https://images.unsplash.com/photo-1560518883-ce09059eeffa?q=80&w=300&auto=format&fit=crop";


    // Translate and normalize client type for projects
    let clientType = translate(property.owner?.client_type);
    if (!clientType || clientType === 'مالك') {
        clientType = "شركة عقارية";
    }

    // Format price range
    const priceStr = parseFloat(property.price || '0').toLocaleString();
    const toPriceStr = property.to_price ? parseFloat(property.to_price).toLocaleString() : "";
const priceRange = `${priceStr} - ${toPriceStr || priceStr}`;

    // Date formatting
    const publishDate = property.created_at ? new Date(property.created_at).toISOString().split('T')[0] : "----";

    return (
        <div className={`md:w-1/3 lg:w-1/4 shrink-0 ${classNames}`}>
            <div className="bg-[#F8FAFC] p-3 rounded-xl">
                <p className="mb-4 px-2 text-[#45556C]">المسوق</p>
                <div className="flex items-center gap-2">
                    <Image
                        src={marketerAvatar}
                        alt={marketerName}
                        width={50}
                        height={50}
                        className="rounded-full object-cover aspect-square"
                    />
                    <div>
                        <p>{marketerName}</p>
                        <p className="text-[#62748E] text-xs font-light">{clientType}</p>
                    </div>
                </div>

                <div className="text-[#45556C] mt-4 py-1 px-2 rounded-md">
                    <p className="mb-4 text-[#1D293D] text-sm font-semibold">مواصفات المشروع</p>
                    <div className="grid grid-cols-2 gap-4">
                        <div className="flex items-center gap-2">
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M2 2V6.5H3V3.7185L7.2815 8L3 12.2815V9.5H2V14H6.5V13H3.7185L8 8.7185L12.2815 13H9.5V14H14V9.5H13V12.2815L8.7185 8L13 3.7185V6.5H14V2H9.5V3H12.2815L8 7.2815L3.7185 3H6.5V2H2Z" fill="#45556C" />
                            </svg>
                            <p className="text-sm">{property.spaces} م²</p>
                        </div>

                        <div className="flex items-center gap-2">
                            <svg viewBox="0 0 24 24"
                                width="17"
                                height="17"
                                fill="none"
                                stroke="currentColor"
                                strokeWidth="1.5">
                                <path d="m22,9.05v-2.55c0-3.033-2.467-5.5-5.5-5.5H7.5c-3.033,0-5.5,2.467-5.5,5.5v2.55c-1.14.232-2,1.242-2,2.45v5c0,1.557.795,2.932,2,3.74v2.26c0,.276.224.5.5.5s.5-.224.5-.5v-1.757c.469.166.974.257,1.5.257h15c.526,0,1.031-.091,1.5-.257v1.757c0,.276.224.5.5.5s.5-.224.5-.5v-2.26c1.205-.808,2-2.183,2-3.74v-5c0-1.207-.86-2.217-2-2.45ZM7.5,2h9c2.481,0,4.5,2.019,4.5,4.5v2.55c-1.14.232-2,1.242-2,2.45v3.5H5v-3.5c0-1.207-.86-2.217-2-2.45v-2.55c0-2.481,2.019-4.5,4.5-4.5Zm15.5,14.5c0,1.93-1.57,3.5-3.5,3.5H4.5c-1.93,0-3.5-1.57-3.5-3.5v-5c0-.827.673-1.5,1.5-1.5s1.5.673,1.5,1.5v4c0,.276.224.5.5.5h15c.276,0,.5-.224.5-.5v-4c0-.827.673-1.5,1.5-1.5s1.5.673,1.5,1.5v5Z"/>
                            </svg>
                            <p className="text-sm">{property.room}</p>
                        </div>

                        <div className="flex items-center gap-2">
                            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M3.79167 11.6667V9.625C3.79167 9.45972 3.84767 9.32128 3.95967 9.20967C4.07167 9.09806 4.21011 9.04206 4.375 9.04167H6.41667V7C6.41667 6.83472 6.47267 6.69628 6.58467 6.58467C6.69667 6.47306 6.83511 6.41706 7 6.41667H9.04167V4.375C9.04167 4.20972 9.09767 4.07128 9.20967 3.95967C9.32167 3.84806 9.46011 3.79206 9.625 3.79167H11.6667V2.33334C11.6667 2.16806 11.7227 2.02961 11.8347 1.918C11.9467 1.80639 12.0851 1.75039 12.25 1.75C12.4149 1.74961 12.5535 1.80561 12.6659 1.918C12.7783 2.03039 12.8341 2.16884 12.8333 2.33334V4.375C12.8333 4.54028 12.7773 4.67892 12.6653 4.79092C12.5533 4.90292 12.4149 4.95872 12.25 4.95834H10.2083V7C10.2083 7.16528 10.1523 7.30392 10.0403 7.41592C9.92834 7.52792 9.78989 7.58372 9.625 7.58334H7.58334V9.625C7.58334 9.79028 7.52734 9.92892 7.41534 10.0409C7.30334 10.1529 7.16489 10.2087 7 10.2083H4.95834V12.25C4.95834 12.4153 4.90234 12.5539 4.79034 12.6659C4.67834 12.7779 4.53989 12.8337 4.375 12.8333H2.33334C2.16806 12.8333 2.02961 12.7773 1.918 12.6653C1.80639 12.5533 1.75039 12.4149 1.75 12.25C1.74961 12.0851 1.80561 11.9467 1.918 11.8347C2.03039 11.7227 2.16884 11.6667 2.33334 11.6667H3.79167Z" fill="#45556C" />
                            </svg>

                            <p className="text-sm">{property.floor}</p>
                        </div>

                        <div className="flex items-center gap-2">
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12.6667 1.33333H3.33333C1.49533 1.33333 0 2.82866 0 4.66666V14C0 14.3687 0.298667 14.6667 0.666667 14.6667C1.03467 14.6667 1.33333 14.3687 1.33333 14V12.6667H14.6667V14C14.6667 14.3687 14.9647 14.6667 15.3333 14.6667C15.702 14.6667 16 14.3687 16 14V4.66666C16 2.82866 14.5047 1.33333 12.6667 1.33333ZM3.33333 2.66666H12.6667C13.7693 2.66666 14.6667 3.56399 14.6667 4.66666V8.66666H13.3333C13.3333 7.19599 12.1373 5.99999 10.6667 5.99999H10C9.204 5.99999 8.48933 6.35066 8 6.90466C7.51067 6.34999 6.796 5.99999 6 5.99999H5.33333C3.86267 5.99999 2.66667 7.19599 2.66667 8.66666H1.33333V4.66666C1.33333 3.56399 2.23067 2.66666 3.33333 2.66666ZM8.66667 8.66666C8.66667 7.93133 9.26467 7.33333 10 7.33333H10.6667C11.402 7.33333 12 7.93133 12 8.66666H8.66667ZM4 8.66666C4 7.93133 4.598 7.33333 5.33333 7.33333H6C6.73533 7.33333 7.33333 7.93133 7.33333 8.66666H4ZM1.33333 11.3333V9.99999H14.6667V11.3333H1.33333Z" fill="#45556C" />
                            </svg>
                            <p className="text-sm">{property.bathroom}</p>
                        </div>
                    </div>
                </div>

                <div className="mt-4 py-3 px-2 grid grid-cols-2 gap-4 rounded-md">
                    <div className="flex flex-col gap-1">
                        <p className="text-[#62748E] text-sm">رخصة الاعلان</p>
                        <p className="text-[#45556C] text-sm font-semibold">{property.ad_number}</p>
                    </div>
                    <div className="flex flex-col gap-1">
                        <p className="text-[#62748E] text-sm">تاريخ النشر</p>
                        <p className="text-[#45556C] text-sm font-semibold">{publishDate}</p>
                    </div>
                    <div className="col-span-2 flex flex-col gap-1">
                        <p className="text-[#62748E] text-sm">السعر</p>
                        <p className="text-[#45556C] text-lg font-semibold flex items-center gap-2">
                            {priceRange}
                            <RiyalIcon />
                        </p>
                    </div>
                </div>

                <div className="mt-6 p-3 flex flex-col gap-4 rounded-md">
                    <Button onClick={() => setShowIntrestDialog(true)} className="p-3 h-auto rounded-full font-medium">
                        تسجيل اهتمام
                        <FireFlameCurved />
                    </Button>
                    <Link href='#' className="p-3 text-sm font-medium flex justify-center items-center gap-2 bg-[#0525311A] hover:bg-[#02121810] text-[#05222D] rounded-full">
                        عرض ملف المشروع
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M0.666992 8.00001C0.666992 8.00001 3.33366 2.66667 8.00033 2.66667C12.667 2.66667 15.3337 8.00001 15.3337 8.00001C15.3337 8.00001 12.667 13.3333 8.00033 13.3333C3.33366 13.3333 0.666992 8.00001 0.666992 8.00001Z" stroke="#05222D" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
                            <path d="M8.00033 10C9.1049 10 10.0003 9.10457 10.0003 8.00001C10.0003 6.89544 9.1049 6.00001 8.00033 6.00001C6.89576 6.00001 6.00033 6.89544 6.00033 8.00001C6.00033 9.10457 6.89576 10 8.00033 10Z" stroke="#05222D" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
                        </svg>
                    </Link>
                </div>
            </div>

           

            <Link className="mt-6 flex items-center justify-center gap-2" href="#">

           

                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M10.0003 6.66667V10M10.0003 13.3333H10.0087M18.3337 10C18.3337 14.6024 14.6027 18.3333 10.0003 18.3333C5.39795 18.3333 1.66699 14.6024 1.66699 10C1.66699 5.39763 5.39795 1.66667 10.0003 1.66667C14.6027 1.66667 18.3337 5.39763 18.3337 10Z" stroke="#45556C" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
                <p className="text-[#45556C] text-sm underline">
                    الابلاغ عن مخالفة
                </p>
            </Link>


{companyName && (
    <div className="mt-5 p-4 bg-[#F8FAFC] rounded-2xl border border-[#E2E8F0]">

        <p className="text-[#62748E] text-sm mb-3">
            المطور العقاري
        </p>

        <div className="flex items-center gap-3">
            <Image
                src={marketerAvatar}
                alt={companyName}
                width={56}
                height={56}
                className="rounded-full object-cover aspect-square border border-[#E2E8F0]"
            />

            <div>
                <p className="text-[#0F172A] text-base font-semibold">
                    {companyName}
                </p>

                <p className="text-[#64748B] text-sm mt-1">
                    مطور عقاري معتمد
                </p>
            </div>
        </div>
    </div>
)}

            <Dialog open={showIntrestDialog} onOpenChange={setShowIntrestDialog} title="الإعجاب بمشروع">
                <form className="flex flex-col gap-4" onSubmit={onSubmit}>
                    <Field name="name" label="الاسم" placeholder="الاسم" />
                    <Field
                        name="phone"
                        label="رقم الجوال"
                        placeholder="---- ----- ---- (+966)"
                        type="tel"
                    />
                    <Field
                        name="projectType"
                        label="نوع المشروع"
                        type="select"
                        placeholder="سكن"
                        options={[
                            { label: "سكن", value: "residential" },
                            { label: "استثمار", value: "investment" },
                        ]}
                    />
                    <Button type="submit" className="w-60 text-base font-normal rounded-full mx-auto">إرسال</Button>
                </form>
            </Dialog>
        </div>
    );
};

export default ProjectSpecsCard;