import { Button } from '@/components/ui/button';
import { Calendar, ArrowUpLeft, Layout, ShareIcon, Bed, Bath, Ruler, Home } from 'lucide-react';
import Image from 'next/image';
import { useState } from 'react';
import { PropertyRequestDetailDialog } from './propertyRequestDetailDialog';

interface PropertyRequestsCard {
  title: string;
  subtitle: string;
  badge: string;
  price: string;
  company: string;
  companyLogo: string;
  daysLeft: number;
  area?: string;
  bedrooms?: number;
  bathrooms?: number;
  propertyType?: string;
}

export function PropertyRequestsCard({
  title,
  subtitle,
  badge,
  price,
  company,
  companyLogo,
  daysLeft,
  area = "",
  bedrooms = 2,
  bathrooms = 2,
  propertyType = "شقة",
}: PropertyRequestsCard) {
  const [isDialogOpen, setIsDialogOpen] = useState(false);

  const getBadgeClasses = () => {
    if (badge === 'بيع') {
      return 'bg-[rgba(127,34,254,0.1)] text-[rgba(127,34,254,1)]';
    }
    return 'bg-[rgba(0,146,184,0.1)] text-[#0092B8]';
  };

  const cardData = {
    title,
    subtitle,
    badge,
    price,
    company,
    companyLogo,
    daysLeft,
    area,
    bedrooms,
    bathrooms,
    propertyType,
  };

  return (
    <div className="w-full h-[344px] flex flex-col justify-between rounded-2xl bg-white border border-gray-200 p-3 relative">
      {/* رأس الكارت - متجاوب */}
      <div className="flex justify-between items-start h-auto bg-[#F1F5F9] p-3 rounded-lg mb-3">
        <div className="flex items-center gap-2">
          <div className="w-10 h-10 rounded-full overflow-hidden">
            <Image src={companyLogo} alt={company} width={40} height={40} className="object-cover" />
          </div>
          <div>
            <h3 className="text-sm font-medium text-gray-900">{company}</h3>
            <p className="text-xs text-[#62748E]">باحث عن عقار</p>
          </div>
        </div>

        {/* البادج والوقت - متجاوب */}
        <div className="flex flex-col items-end gap-1">
          <div className={`px-2 py-1 rounded-full text-xs font-normal ${getBadgeClasses()}`}>
            {badge}
          </div>
          <div className="flex items-center gap-1 bg-[#052531]/10 text-gray-700 text-xs px-2 py-1 rounded-full">
            <Calendar className="h-3 w-3" />
            <span>منذ {daysLeft} يوم</span>
          </div>
        </div>
      </div>

      {/* العنوان */}
      <div className="flex flex-col gap-1 mb-3">
        <span className="text-sm text-[#1D293D]">{title}</span>
        <span className="text-xs text-gray-500">{subtitle}</span>
      </div>

      <div className="border border-[#ebebebd0] mb-3"></div>

      {/* التفاصيل */}
      <div className="flex flex-wrap gap-2 mb-3">
        <div className="flex items-center gap-1 bg-[#E2E8F0] text-gray-700 text-xs px-2 py-1 rounded-md">
          <Ruler className="h-3 w-3" />
          <span>{area} م²</span>
        </div>
        <div className="flex items-center gap-1 bg-[#E2E8F0] text-gray-700 text-xs px-2 py-1 rounded-md">
          <Bed className="h-3 w-3" />
          <span>{bedrooms} - {bedrooms + 1} غرف</span>
        </div>
        <div className="flex items-center gap-1 bg-[#E2E8F0] text-gray-700 text-xs px-2 py-1 rounded-md">
          <Bath className="h-3 w-3" />
          <span>{bathrooms} - {bathrooms + 1} حمامات</span>
        </div>
      </div>

      {/* السعر + نوع العقار */}
      <div className="flex items-center justify-between p-2">
        <div className="flex flex-col">
          <p className="text-xs text-gray-500">الميزانية</p>
          <div className="flex items-center gap-1 text-lg text-primary">
            {price === 'حسب السوق' ? 'سعر السوق' : price}
            {price !== 'حسب السوق' && price !== 'سعر السوق' && (
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clipPath="url(#clip0_4232_4947)">
                  <path d="M17.3804 15.2793C17.2981 15.6181 17.1852 15.9469 17.0425 16.2627L11.2056 17.373C11.2879 17.0344 11.4007 16.7054 11.5435 16.3896L17.3804 15.2793Z" fill="#052531" stroke="#052531" />
                  <path d="M17.3851 12.8339C17.7063 12.1968 17.9187 11.5051 18 10.7799L12.7051 11.7875V9.85051L17.385 8.96067C17.7062 8.32356 17.9185 7.63187 17.9998 6.90664L12.7049 7.91339V0.947429C11.8936 1.35503 11.173 1.89758 10.5873 2.53756V8.31625L8.46967 8.71898V0C7.65833 0.407453 6.93778 0.950151 6.35206 1.59013V9.12156L1.61387 10.0224C1.29267 10.6595 1.08019 11.3512 0.998683 12.0765L6.35206 11.0585V13.4978L0.61487 14.5887C0.293664 15.2258 0.0813422 15.9175 0 16.6427L6.00523 15.5008C6.49408 15.4099 6.91425 15.1513 7.18741 14.7954L8.28874 13.3345V13.3342C8.40306 13.1831 8.46967 13.0008 8.46967 12.8045V10.6558L10.5873 10.2531V14.127L17.385 12.8336L17.3851 12.8339Z" fill="#052531" />
                </g>
                <defs>
                  <clipPath id="clip0_4232_4947">
                    <rect width="18" height="18" fill="white" />
                  </clipPath>
                </defs>
              </svg>
            )}
          </div>
        </div>
        <div className="flex items-center gap-1 text-gray-700 text-xs px-2 py-1 rounded-md">
          <Home className="h-3 w-3" />
          <span>{propertyType}</span>
        </div>
      </div>

      <div className='border border-[#ebebebd0] mb-3' />

      {/* الأزرار - متجاوبة تمامًا */}
      <div className="flex items-center justify-between gap-2 mt-2">
        <Button
          className="flex-1 h-10 rounded-full bg-[#052531] text-white text-sm font-medium"
          onClick={() => setIsDialogOpen(true)}
        >
          مشاهدة الطلب
          <ArrowUpLeft className="h-4 w-4 mr-1" />
        </Button>
        <button className="w-10 h-10 rounded-full bg-[rgba(7,25,56,0.1)] flex items-center justify-center hover:bg-[rgba(7,25,56,0.15)] transition-colors">
          <ShareIcon className="h-4 w-4 text-[#4F5874]" />
        </button>
      </div>

      <PropertyRequestDetailDialog
        open={isDialogOpen}
        onOpenChange={setIsDialogOpen}
        data={cardData}
      />
    </div>
  );
}