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

type RealEstateSpecsCardProps = {
    classNames?: string;
    property: PropertyDetails;
}

const RealEstateSpecsCard = ({ classNames, property }: RealEstateSpecsCardProps) => {
    // Format price with commas
    const formattedPrice = parseFloat(property.price || '0').toLocaleString();
    // Parse specs
    const area = parseInt(property.spaces || '0', 10);
    const rooms = parseInt(property.room || '0', 10);
    const bathrooms = parseInt(property.bathroom || '0', 10);
    const floors = parseInt(property.floor || '0', 10);

    // Owner info
    const ownerName = property.owner?.company_name || property.owner?.name || 'المالك';
    let ownerType = translate(property.owner?.client_type) || 'مالك عقار';
    if (property.owner?.company_name) ownerType = 'شركة عقارية';
    const ownerAvatar = property.owner?.avatar || '/main-page/real-estate-company-logo.png';
    const ownerPhone = property.owner?.phone || '';

    // WhatsApp link
    const whatsappLink = ownerPhone ? `https://wa.me/${ownerPhone.replace(/[^0-9]/g, '')}` : '#';

    return (
        <div className={`md:w-1/3 lg:w-1/4 shrink-0 ${classNames}`}>
            <div className="bg-[#F8FAFC] p-3 rounded-md">
                <div className="flex items-center gap-2">
                    <Image
                        src={ownerAvatar}
                        alt={ownerName}
                        width={50}
                        height={50}
                        className="rounded-full object-cover"
                    />
                    <div>
                        <p>{ownerName}</p>
                        <p className="text-[#62748E] text-xs font-light">{ownerType}</p>
                    </div>
                </div>

                <div className="mt-4 py-1 px-2 text-[#45556C]">
                    <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">{area} م²</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">{rooms}</p>
                        </div>

                        <div className="flex items-center gap-2">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#45556C" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                                <path d="M3 21h3v-4h4v-4h4v-4h4v-4h3v16H3V21z" />
                            </svg>
                            <p className="text-sm">{floors}</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">{bathrooms}</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 || '4833992-0'}</p>
                    </div>
                    <div className="flex flex-col gap-1">
                        <p className="text-[#62748E] text-sm">تاريخ النشر</p>
                        <p className="text-[#45556C] text-sm font-semibold">{property.created_at ? new Date(property.created_at).toISOString().split('T')[0] : '2025-12-09'}</p>
                    </div>
                    <div className="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">
                            {formattedPrice}
                            <RiyalIcon />
                        </p>
                    </div>
                </div>

                <div className="mt-4 p-3 grid grid-cols-2 gap-4 rounded-md">
                    <Button className="rounded-full">
                        ارسل رساله
                    </Button>
                    <Link href={whatsappLink} target="_blank" className="flex justify-center items-center gap-2 bg-[#00C950] hover:bg-[#00C950] text-white rounded-full">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M8.02637 1.8333H8.02832C8.83053 1.8307 9.6253 1.98765 10.3662 2.29521C11.1073 2.60284 11.7801 3.05517 12.3447 3.62529L12.3457 3.62724C13.4983 4.77989 14.1328 6.31224 14.1328 7.94658C14.1328 11.3104 11.3902 14.0529 8.02637 14.053C7.00408 14.053 5.99936 13.7949 5.10547 13.3079L4.93066 13.2122L4.73926 13.263L2.07617 13.9622L2.78223 11.3714L2.83691 11.1712L2.7334 10.9915C2.20304 10.0665 1.91992 9.01829 1.91992 7.93974C1.92006 4.576 4.6626 1.8333 8.02637 1.8333ZM8.01953 1.94658C4.71681 1.94659 2.02651 4.63706 2.02637 7.93974V7.94072C2.02712 9.06715 2.34443 10.1707 2.94238 11.1253L2.94629 11.1311L2.95801 11.1497L2.46387 12.9612L2.23535 13.7972L3.07324 13.5765L4.94922 13.0833L4.96875 13.095L4.97168 13.097C5.89475 13.6421 6.94955 13.9329 8.02637 13.9329C11.2248 13.9328 13.8523 11.4151 14 8.25224L14.0059 7.94463C14.0084 7.15798 13.8552 6.37869 13.5547 5.65166C13.2536 4.92329 12.8106 4.2613 12.252 3.70537C11.1248 2.57216 9.61807 1.94658 8.01953 1.94658ZM5.68652 5.38701H5.92676C6.04441 5.68027 6.30719 6.31923 6.40723 6.54912C6.3847 6.59245 6.37572 6.60915 6.35352 6.63506C6.24555 6.76102 6.18888 6.83675 6.13281 6.89287C6.10115 6.92453 5.974 7.04241 5.91113 7.21709C5.83211 7.43697 5.87655 7.65275 5.97656 7.83134L5.98047 7.8372L5.98438 7.84404C6.08797 8.01669 6.44682 8.61225 7 9.10576C7.52024 9.57065 7.99779 9.80793 8.25977 9.92412L8.44336 10.0042C8.55971 10.063 8.72856 10.1275 8.9248 10.1048C9.14515 10.0792 9.29672 9.95688 9.39453 9.84209L9.39551 9.84306C9.46689 9.76149 9.68175 9.50544 9.83691 9.304C10.0975 9.42599 10.6661 9.70219 10.8232 9.77763C10.839 9.7852 10.8545 9.79227 10.8691 9.79912C10.8573 9.88844 10.8348 10.0037 10.7891 10.1302L10.7871 10.137C10.7871 10.137 10.7835 10.1465 10.7715 10.1644C10.7595 10.1821 10.7416 10.2051 10.7158 10.2317C10.663 10.2861 10.5899 10.3447 10.5029 10.4007C10.3634 10.4904 10.2286 10.5473 10.1426 10.5745L10.0771 10.5911C9.82505 10.6263 9.5507 10.6379 9.25977 10.5442L9.25195 10.5423L8.8623 10.4134C8.71607 10.361 8.55236 10.2973 8.36816 10.2161L8.36426 10.2142C6.86144 9.56574 5.84956 8.02615 5.75488 7.89189L5.75098 7.88603L5.74609 7.88017L5.625 7.70732C5.56649 7.61858 5.49497 7.50167 5.42578 7.36552C5.28363 7.08572 5.17285 6.76696 5.17285 6.47295C5.17298 5.87682 5.46088 5.60433 5.61426 5.43193C5.63922 5.4048 5.65851 5.39472 5.66797 5.39091C5.67884 5.3866 5.68651 5.38702 5.68652 5.38701Z" fill="#1D293D" stroke="white" />
                        </svg>
                        واتساب
                    </Link>
                </div>
            </div>

            <div className="mt-4">
                <Button
                    onClick={() => {
                        const url = window.location.href;
                        if (navigator.share) {
                            navigator.share({
                                title: property.title,
                                text: property.description,
                                url: url,
                            }).catch(() => { });
                        } else {
                            navigator.clipboard.writeText(url).then(() => {
                                alert('تم نسخ الرابط بنجاح');
                            });
                        }
                    }}
                    className="w-full bg-[#0525311A] hover:bg-[#0525311A] 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="M5.72667 9.00666L10.28 11.66M10.2733 4.33999L5.72667 6.99333M14 3.33333C14 4.4379 13.1046 5.33333 12 5.33333C10.8954 5.33333 10 4.4379 10 3.33333C10 2.22876 10.8954 1.33333 12 1.33333C13.1046 1.33333 14 2.22876 14 3.33333ZM6 7.99999C6 9.10456 5.10457 9.99999 4 9.99999C2.89543 9.99999 2 9.10456 2 7.99999C2 6.89543 2.89543 5.99999 4 5.99999C5.10457 5.99999 6 6.89543 6 7.99999ZM14 12.6667C14 13.7712 13.1046 14.6667 12 14.6667C10.8954 14.6667 10 13.7712 10 12.6667C10 11.5621 10.8954 10.6667 12 10.6667C13.1046 10.6667 14 11.5621 14 12.6667Z" stroke="#05222D" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>

                    مشاركة العقار
                </Button>

                <Link className="mt-4 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>
            </div>
        </div>
    );
};

const RiyalIcon = () => {
    return (
        <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g clipPath="url(#clip0_6448_12071)">
                <path d="M8.13811 13.2883C7.90475 13.8194 7.7505 14.3956 7.69141 15L12.6297 13.9226C12.863 13.3917 13.0171 12.8153 13.0764 12.2109L8.13811 13.2883Z" fill="#45556C" />
                <path d="M12.6302 10.6949C12.8636 10.164 13.0178 9.58759 13.0769 8.98324L9.23018 9.82291V8.20876L12.6301 7.46723C12.8635 6.9363 13.0177 6.35989 13.0768 5.75554L9.23007 6.59449V0.789524C8.64063 1.12919 8.11715 1.58132 7.69162 2.11463V6.93021L6.15318 7.26582V0C5.56375 0.339544 5.04027 0.791792 4.61474 1.32511V7.6013L1.17247 8.35203C0.939118 8.88295 0.78475 9.45936 0.725539 10.0637L4.61474 9.21545V11.2482L0.4467 12.1572C0.213346 12.6881 0.0590948 13.2646 0 13.8689L4.36277 12.9174C4.71793 12.8416 5.02317 12.6261 5.22163 12.3295L6.02173 11.1121V11.1118C6.10479 10.9859 6.15318 10.834 6.15318 10.6705V8.87985L7.69162 8.54424V11.7725L12.6301 10.6947L12.6302 10.6949Z" fill="#45556C" />
            </g>
            <defs>
                <clipPath id="clip0_6448_12071">
                    <rect width="13.0769" height="15" fill="white" />
                </clipPath>
            </defs>
        </svg>
    );
};

export default RealEstateSpecsCard;
