"use client";

import { Share2, MessageSquare, Bed, Bath, Maximize2, Calendar, Home } from "lucide-react";
import Image from "next/image";
import Dialog from "@/components/ui/dialog";
import { Button } from "../ui/button";
import { WhatsappIcon } from "../icons/RandomIcons";

interface PropertyRequestDetailDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  data: {
    title: string;
    subtitle: string;
    badge: string;
    price: string;
    company: string;
    companyLogo: string;
    daysLeft: number;
    area?: string;
    bedrooms?: number;
    bathrooms?: number;
    propertyType?: string;
  };
}

interface DetailItemProps {
  label: string;
  value: string | number | undefined;
  icon?: React.ElementType;
}

function DetailItem({ label, value, icon: Icon }: DetailItemProps) {
  return (
    <div className="flex items-center gap-3 bg-[#F1F5F9] p-3 rounded-lg">
      {Icon && (
        <div className="w-12 h-12 flex justify-center items-center bg-[#F8FAFC] rounded-full">
          <Icon className="h-6 w-6 text-[#45556C]" />
        </div>
      )}
      <div>
        <p className="text-[#62748E]">{label}</p>
        <p className="text-[#1D293D] font-medium text-lg">{value}</p>
      </div>
    </div>
  );
}

export function PropertyRequestDetailDialog({
  open,
  onOpenChange,
  data,
}: PropertyRequestDetailDialogProps) {
  const getBadgeClasses = () => {
    if (data.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]';
  };

  return (
    <Dialog 
      open={open} 
      onOpenChange={onOpenChange} 
      title="طلب عقار"
      showDialogCloseButton={true}
    >
      <div>
        <div className="flex justify-between items-strech bg-[#F1F5F9] p-3 rounded-lg mb-3">
          <div className="flex items-center gap-2">
            <div className="w-11 h-11 rounded-full overflow-hidden">
              <Image src={data.companyLogo} alt={data.company} width={44} height={44} className="w-full h-full object-cover" />
            </div>
            <div>
              <h3 className="text-lg font-medium text-[#1D293D]">{data.company}</h3>
              <p className="text-sm text-[#62748E]">باحث عن عقار</p>
            </div>
          </div>

          <div className="flex items-start gap-2 text-sm">
            <div className={`px-2 py-1 rounded-full ${getBadgeClasses()}`}>
              {data.badge === 'بيع' ? 'بيع' : 'ايجار'}
            </div>
            <div className="flex items-center gap-1 bg-[#052531]/10 text-[#05222D] px-2 py-1 rounded-full">
              <Calendar className="h-3 w-3" />
              <span>منذ {data.daysLeft} يوم</span>
            </div>
          </div>
        </div>

        <div className="">
          <h2 className="text-xl font-semibold text-[#1D293D] text-right">{data.title}</h2>
          <p className="text-[#62748E] text-right mt-2">{data.subtitle}</p>
        </div>

        <div className="border-t border-[#E2E8F0] my-4"></div>

        <div className="space-y-4">
          <DetailItem 
            label="التفاصيل" 
            value={data.title}
          />

          <div className="space-y-2">
            <p className="text-[#45556C]">نوع العقار</p>
            <div className="grid grid-cols-2 gap-2">
              <DetailItem label="نوع العقار" value={data.propertyType} />
              <DetailItem 
                label="نوع الطلب" 
                value={data.badge === 'بيع' ? 'بيع' : 'ايجار / شهري'} 
              />
            </div>
          </div>

          <div className="space-y-2">
            <p className="text-[#45556C]">مواصفات العقار</p>
            <div className="grid grid-cols-2 gap-2">
              <DetailItem 
                label="غرف النوم" 
                value={data.bedrooms} 
                icon={Bed} 
              />

              <DetailItem 
                label="الحمامات" 
                value={data.bathrooms} 
                icon={Bath} 
              />

              <DetailItem 
                label="المساحة - الحد الأدنى" 
                value={data.area} 
                icon={Maximize2} 
              />

              <DetailItem 
                label="المساحة - الحد الأقصي" 
                value={data.area} 
                icon={Maximize2} 
              />
            </div>

            <div className="mt-4 space-y-2">
              <p className="text-[#45556C]">الميزانية</p>
              <DetailItem 
                label="سعر محدد" 
                value={data.price}
              />
            </div>

            <div className="border-t border-[#E2E8F0] my-4"></div>

            <div className="flex justify-center items-center gap-2 mt-4">
              <Button className="flex-1 font-normal rounded-full py-6 text-lg">
                ارسل رساله
              </Button>
              <Button className="flex-1 font-normal bg-[#00C853] hover:bg-[#00C853]/90 text-white rounded-full py-6 text-lg flex items-center justify-center gap-2">
                واتساب
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.02686 1.8335H8.02881C8.83102 1.8309 9.62578 1.98785 10.3667 2.29541C11.1078 2.60304 11.7806 3.05537 12.3452 3.62549L12.3462 3.62744C13.4988 4.78008 14.1333 6.31244 14.1333 7.94678C14.1333 11.3106 11.3906 14.0531 8.02686 14.0532C7.00457 14.0532 5.99985 13.7951 5.10596 13.3081L4.93115 13.2124L4.73975 13.2632L2.07666 13.9624L2.78271 11.3716L2.8374 11.1714L2.73389 10.9917C2.20352 10.0666 1.92041 9.01849 1.92041 7.93994C1.92055 4.5762 4.66308 1.8335 8.02686 1.8335ZM8.02002 1.94678C4.7173 1.94678 2.027 4.63725 2.02686 7.93994V7.94092C2.02761 9.06734 2.34492 10.1709 2.94287 11.1255L2.94678 11.1313L2.9585 11.1499L2.46436 12.9614L2.23584 13.7974L3.07373 13.5767L4.94971 13.0835L4.96924 13.0952L4.97217 13.0972C5.89523 13.6423 6.95004 13.9331 8.02686 13.9331C11.2253 13.933 13.8528 11.4153 14.0005 8.25244L14.0063 7.94482C14.0089 7.15818 13.8557 6.37888 13.5552 5.65186C13.2541 4.92349 12.8111 4.2615 12.2524 3.70557C11.1253 2.57236 9.61856 1.94678 8.02002 1.94678ZM5.68701 5.38721H5.92725C6.0449 5.68047 6.30768 6.31943 6.40771 6.54932C6.38519 6.59265 6.37621 6.60935 6.354 6.63525C6.24604 6.76122 6.18937 6.83695 6.1333 6.89307C6.10164 6.92473 5.97449 7.04261 5.91162 7.21729C5.8326 7.43716 5.87704 7.65295 5.97705 7.83154L5.98096 7.8374L5.98486 7.84424C6.08845 8.01689 6.44731 8.61245 7.00049 9.10596C7.52073 9.57085 7.99828 9.80813 8.26025 9.92432L8.44385 10.0044C8.5602 10.0632 8.72905 10.1277 8.92529 10.105C9.14564 10.0794 9.29721 9.95708 9.39502 9.84229L9.396 9.84326C9.46737 9.76169 9.68224 9.50564 9.8374 9.3042C10.098 9.42619 10.6665 9.70238 10.8237 9.77783C10.8395 9.78539 10.855 9.79246 10.8696 9.79932C10.8578 9.88863 10.8353 10.0039 10.7896 10.1304L10.7876 10.1372C10.7876 10.1372 10.784 10.1467 10.772 10.1646C10.76 10.1823 10.7421 10.2053 10.7163 10.2319C10.6635 10.2863 10.5904 10.3449 10.5034 10.4009C10.3639 10.4906 10.2291 10.5475 10.1431 10.5747L10.0776 10.5913C9.82554 10.6265 9.55119 10.6381 9.26025 10.5444L9.25244 10.5425L8.86279 10.4136C8.71656 10.3612 8.55285 10.2975 8.36865 10.2163L8.36475 10.2144C6.86193 9.56594 5.85005 8.02635 5.75537 7.89209L5.75146 7.88623L5.74658 7.88037L5.62549 7.70752C5.56698 7.61878 5.49546 7.50186 5.42627 7.36572C5.28412 7.08592 5.17334 6.76716 5.17334 6.47314C5.17346 5.87702 5.46137 5.60453 5.61475 5.43213C5.63971 5.405 5.659 5.39492 5.66846 5.39111C5.67932 5.3868 5.68699 5.38722 5.68701 5.38721Z" fill="#1D293D" stroke="white"/>
                </svg>

              </Button>
              <button className="p-3 bg-[#E9EDF1] rounded-full text-[#1D293D] hover:bg-[#D1D5DB] transition-colors">
                <Share2 className="h-4 w-4" />
              </button>
            </div>
          </div>
        </div>
      </div>
    </Dialog>
  );
}