"use client";

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import BarCode from "@/public/main-page/barcode.png";
import Image from "next/image";
import { useState, ReactNode } from "react";
import BottomDrawer from "@/components/BottomDrawer";
import { PropertyDetails } from "@/lib/api";

interface ProjectTabsProps {
  property?: PropertyDetails;
}

const ProjectTabs = ({ property }: ProjectTabsProps) => {
  const [open, setOpen] = useState(false);

  // Helper to safely get values or return placeholder
  const getValue = (val: string | number | undefined | null, suffix: string = "") => {
    return val ? `${val}${suffix}` : "غير متوفر";
  };

  // Helper to check features
  const hasFeature = (keyword: string) => {
    return property?.features?.some(f => f.title.includes(keyword)) ? "نعم" : "لا";
  };

  if (!property) return null;

  const formattedPrice = parseFloat(property.price || '0').toLocaleString('ar-SA');
  const creationDate = property.created_at ? new Date(property.created_at).toLocaleDateString('ar-SA') : "غير متوفر";

  return (
    <div className="bg-[#F1F5F9] p-3 rounded-md">
      <div className="md:hidden space-y-3" dir="rtl">
        <div className="flex items-center gap-3">
          <Image src={BarCode} alt="barcode" width={48} height={48} />
          <p className="text-[#45556C]">تفاصيل الاعلان لدي الهئيه العامة للعقار</p>
        </div>
        <div className="flex justify-between">
          <p className="text-[#45556C]">رقم رخصة فال:</p>
          <p className="text-[#1D293D] font-semibold">غير متوفر</p>
        </div>
        <div className="flex justify-between">
          <p className="text-[#45556C]">رقم ترخيص الاعلاني:</p>
          <p className="text-[#1D293D] font-semibold">{getValue(property.ad_number)}</p>
        </div>
        <div className="flex justify-between">
          <p className="text-[#45556C]">تاريخ الاعلان:</p>
          <p className="text-[#1D293D] font-semibold">{creationDate}</p>
        </div>
        <button onClick={() => setOpen(true)} className="w-full mt-2 rounded-md bg-[#1D293D] text-white py-2 text-sm">
          عرض المزيد
        </button>
      </div>
      <div className="hidden md:block">
        <Tabs defaultValue="license" dir="rtl">
          <div className="border-b mb-1">
            <TabsList className="bg-transparent rounded-none flex-wrap h-auto">
              <TabsTrigger
                value="license"
                className="rounded-none border-none px-4 py-2 text-gray-600 data-[state=active]:bg-transparent data-[state=active]:text-[#052531] data-[state=active]:border-b-2 data-[state=active]:border-[#052531] text-sm transition-all"
              >
                معلومات الترخيص الاعلاني
              </TabsTrigger>
              <TabsTrigger
                value="location"
                className="rounded-none border-none px-4 py-2 text-gray-600 data-[state=active]:bg-transparent data-[state=active]:text-[#052531] data-[state=active]:border-b-2 data-[state=active]:border-[#052531] text-sm transition-all"
              >
                الموقع
              </TabsTrigger>
              <TabsTrigger
                value="details"
                className="rounded-none border-none px-4 py-2 text-gray-600 data-[state=active]:bg-transparent data-[state=active]:text-[#052531] data-[state=active]:border-b-2 data-[state=active]:border-[#052531] text-sm transition-all"
              >
                تفاصيل الاعلان
              </TabsTrigger>
              <TabsTrigger
                value="services"
                className="rounded-none border-none px-4 py-2 text-gray-600 data-[state=active]:bg-transparent data-[state=active]:text-[#052531] data-[state=active]:border-b-2 data-[state=active]:border-[#052531] text-sm transition-all"
              >
                خدمات العقار
              </TabsTrigger>
              <TabsTrigger
                value="additional"
                className="rounded-none border-none px-4 py-2 text-gray-600 data-[state=active]:bg-transparent data-[state=active]:text-[#052531] data-[state=active]:border-b-2 data-[state=active]:border-[#052531] text-sm transition-all"
              >
                تفاصيل اضافية
              </TabsTrigger>
              <TabsTrigger
                value="boundaries"
                className="rounded-none border-none px-4 py-2 text-gray-600 data-[state=active]:bg-transparent data-[state=active]:text-[#052531] data-[state=active]:border-b-2 data-[state=active]:border-[#052531] text-sm transition-all"
              >
                حدود العقار الملكية
              </TabsTrigger>
            </TabsList>
          </div>

          <TabsContent className="grid grid-cols-1 md:grid-cols-3 gap-y-4 gap-x-8" value="license">
            <div className="flex justify-between">
              <p className="text-[#45556C]">رقم رخصة فال:</p>
              <p className="text-[#1D293D] font-semibold flex-1 text-center">7200805971</p>
            </div>
            <div className="flex justify-between">
              <p className="text-[#45556C]">رقم ترخيص الاعلاني:</p>
              <p className="text-[#1D293D] font-semibold flex-1 text-center">{getValue(property.ad_number)}</p>
            </div>
            <div className="flex items-center gap-2 row-span-2 col-span-1 md:col-span-1 order-last md:order-none">
              <Image src={BarCode} alt="barcode" width={60} height={60} />
              <p className="text-[#45556C]">تفاصيل الاعلان لدي الهئيه العامة للعقار</p>
            </div>

            <div className="flex justify-between">
              <p className="text-[#45556C]">تاريخ انتهاء الرخصه:</p>
              <p className="text-[#1D293D] font-semibold flex-1 text-center">{creationDate}</p>
            </div>

            <div className="flex justify-between">
              <p className="text-[#45556C]">تاريخ اصدار الرخصه:</p>
              <p className="text-[#1D293D] font-semibold flex-1 text-center">غير متوفر</p>
            </div>
          </TabsContent>

          <TabsContent className="grid grid-cols-1 md:grid-cols-3 gap-y-4 gap-x-8" value="location">
            <div className="flex justify-between">
              <p className="text-[#45556C]">المدينة:</p>
              <p className="text-[#1D293D] font-semibold flex-1 text-center">{getValue(property.city?.name)}</p>
            </div>
            <div className="flex justify-between">
              <p className="text-[#45556C]">الحي:</p>
              <p className="text-[#1D293D] font-semibold flex-1 text-center">{getValue(property.district?.name)}</p>
            </div>
            <div className="flex justify-between">
              <p className="text-[#45556C]">العنوان:</p>
              <p className="text-[#1D293D] font-semibold flex-1 text-center">{getValue(property.address)}</p>
            </div>
            <div className="flex justify-between">
              <p className="text-[#45556C]">رقم المبنى:</p>
              <p className="text-[#1D293D] font-semibold flex-1 text-center">غير متوفر</p>
            </div>
            <div className="flex justify-between">
              <p className="text-[#45556C]">الرمز البريدي:</p>
              <p className="text-[#1D293D] font-semibold flex-1 text-center">غير متوفر</p>
            </div>
            <div className="flex justify-between">
              <p className="text-[#45556C]">الرقم الإضافي:</p>
              <p className="text-[#1D293D] font-semibold flex-1 text-center">غير متوفر</p>
            </div>
          </TabsContent>

          <TabsContent className="grid grid-cols-1 md:grid-cols-3 gap-y-4 gap-x-8" value="details">
            <div className="flex justify-between">
              <p className="text-[#45556C]">نوع الاعلان:</p>
              <p className="text-[#1D293D] font-semibold flex-1 text-center">{property.is_premium ? 'مميز' : 'عادي'}</p>
            </div>
            <div className="flex justify-between">
              <p className="text-[#45556C]">نوع العقار:</p>
              <p className="text-[#1D293D] font-semibold flex-1 text-center">{getValue(property.type_of_property)}</p>
            </div>
            <div className="flex justify-between">
              <p className="text-[#45556C]">السعر:</p>
              <p className="text-[#1D293D] font-semibold flex-1 justify-center flex items-center gap-2">
                {formattedPrice}
                <RiyalIcon />
              </p>
            </div>
            <div className="flex justify-between">
              <p className="text-[#45556C]">المساحة:</p>
              <p className="text-[#1D293D] font-semibold flex-1 text-center">{getValue(property.spaces, 'م')}</p>
            </div>
            <div className="flex justify-between">
              <p className="text-[#45556C]">عدد الغرف:</p>
              <p className="text-[#1D293D] font-semibold flex-1 text-center">{getValue(property.room)}</p>
            </div>
            <div className="flex justify-between">
              <p className="text-[#45556C]">عدد الحمامات:</p>
              <p className="text-[#1D293D] font-semibold flex-1 text-center">{getValue(property.bathroom)}</p>
            </div>
            <div className="flex justify-between">
              <p className="text-[#45556C]">الطابق:</p>
              <p className="text-[#1D293D] font-semibold flex-1 text-center">{getValue(property.floor)}</p>
            </div>
          </TabsContent>

          <TabsContent className="grid grid-cols-1 md:grid-cols-3 gap-y-4 gap-x-8" value="services">
            <div className="flex justify-between">
              <p className="text-[#45556C]">كهرباء:</p>
              <p className="text-[#1D293D] font-semibold flex-1 text-center">{hasFeature("كهرباء")}</p>
            </div>
            <div className="flex justify-between">
              <p className="text-[#45556C]">صرف صحي:</p>
              <p className="text-[#1D293D] font-semibold flex-1 text-center">{hasFeature("صرف")}</p>
            </div>
            <div className="flex justify-between">
              <p className="text-[#45556C]">مياه:</p>
              <p className="text-[#1D293D] font-semibold flex-1 text-center">{hasFeature("مياه")}</p>
            </div>
            <div className="flex justify-between">
              <p className="text-[#45556C]">تكييف:</p>
              <p className="text-[#1D293D] font-semibold flex-1 text-center">{hasFeature("تكييف")}</p>
            </div>
          </TabsContent>

          <TabsContent className="grid grid-cols-1 md:grid-cols-3 gap-y-4 gap-x-8" value="additional">
            <div className="flex justify-between">
              <p className="text-[#45556C]">عمر العقار:</p>
              <p className="text-[#1D293D] font-semibold flex-1 text-center">{getValue(property.property_age)}</p>
            </div>
            <div className="flex justify-between">
              <p className="text-[#45556C]">عرض الشارع:</p>
              <p className="text-[#1D293D] font-semibold flex-1 text-center">{getValue(property.street_width)}</p>
            </div>
            <div className="flex justify-between">
              <p className="text-[#45556C]">الواجهة:</p>
              <p className="text-[#1D293D] font-semibold flex-1 text-center">{getValue(property.property_direction)}</p>
            </div>
          </TabsContent>

          <TabsContent className="grid grid-cols-1 md:grid-cols-3 gap-y-4 gap-x-8" value="boundaries">
            <div className="col-span-3 text-center text-gray-500 py-4">
              معلومات الحدود غير متوفرة حالياً
            </div>
          </TabsContent>
        </Tabs>
      </div>

      <BottomDrawer isOpen={open} onClose={() => setOpen(false)}>
        <div dir="rtl" className="space-y-6">
          <div className="flex items-center gap-3">
            <Image src={BarCode} alt="barcode" width={48} height={48} />
            <p className="text-[#45556C]">تفاصيل الاعلان لدي الهئيه العامة للعقار</p>
          </div>

          <section className="space-y-2">
            <h3 className="text-base font-semibold text-[#1D293D]">معلومات الترخيص الاعلاني</h3>
            <div className="grid grid-cols-1 gap-y-2">
              <Row label="رقم رخصة فال:" value="7200805971" />
              <Row label="رقم ترخيص الاعلاني:" value={getValue(property.ad_number)} />
              <Row label="تاريخ انتهاء الرخصه:" value={creationDate} />
              <Row label="تاريخ اصدار الرخصه:" value="غير متوفر" />
            </div>
          </section>

          <section className="space-y-2">
            <h3 className="text-base font-semibold text-[#1D293D]">الموقع</h3>
            <div className="grid grid-cols-1 gap-y-2">
              <Row label="المدينة:" value={getValue(property.city?.name)} />
              <Row label="الحي:" value={getValue(property.district?.name)} />
              <Row label="العنوان:" value={getValue(property.address)} />
            </div>
          </section>

          <section className="space-y-2">
            <h3 className="text-base font-semibold text-[#1D293D]">تفاصيل الاعلان</h3>
            <div className="grid grid-cols-1 gap-y-2">
              <Row label="نوع الاعلان:" value={property.is_premium ? 'مميز' : 'عادي'} />
              <Row label="نوع العقار:" value={getValue(property.type_of_property)} />
              <Row label="السعر:" value={<span className="inline-flex items-center gap-1">{formattedPrice} <RiyalIcon /></span>} />
              <Row label="المساحة:" value={getValue(property.spaces, 'م')} />
              <Row label="عدد الغرف:" value={getValue(property.room)} />
              <Row label="عدد الحمامات:" value={getValue(property.bathroom)} />
            </div>
          </section>

          <section className="space-y-2">
            <h3 className="text-base font-semibold text-[#1D293D]">تفاصيل اضافية</h3>
            <div className="grid grid-cols-1 gap-y-2">
              <Row label="عمر العقار:" value={getValue(property.property_age)} />
              <Row label="عرض الشارع:" value={getValue(property.street_width)} />
              <Row label="الواجهة:" value={getValue(property.property_direction)} />
            </div>
          </section>
        </div>
      </BottomDrawer>
    </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="#1D293D" />
        <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="#1D293D" />
      </g>
      <defs>
        <clipPath id="clip0_6448_12071">
          <rect width="13.0769" height="15" fill="white" />
        </clipPath>
      </defs>
    </svg>
  );
};

export default ProjectTabs;

const Row = ({ label, value }: { label: string; value: ReactNode }) => {
  return (
    <div className="flex items-center">
      <p className="w-40 text-[#45556C]">{label}</p>
      <div className="flex-1 text-[#1D293D] text-center font-semibold">
        {value}
      </div>
    </div>
  );
}