import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { DiscoverCard } from "./discoverCard";
import HorizontalAutoScroll from "@/components/HorizontalAutoScroll";
import { PropertyCard } from "@/types/property-card";

interface DiscoverSlidesProps {
  classNames?: string;
  showTabsTriggers?: boolean;
  properties?: PropertyCard[];
}

export function DiscoverSlides({ classNames, showTabsTriggers = true, properties = [] }: DiscoverSlidesProps) {

  // Helpers for filtering by city
  const getCityProps = (cityName: string, englishName: string) =>
    properties.filter(p => p.subtitle.includes(cityName) || p.subtitle.toLowerCase().includes(englishName));

  const riyadhProps = getCityProps('الرياض', 'riyadh');
  const makkahProps = getCityProps('مكة', 'mecca');
  const dammamProps = getCityProps('الدمام', 'dammam');
  const jeddahProps = getCityProps('جدة', 'jeddah');
  const jizanProps = getCityProps('جازان', 'jizan');

  // Fallback: If "Riyadh" is empty, show all properties there (Default View)
  const displayRiyadh = riyadhProps.length > 0 ? riyadhProps : properties;

  return (
    <div className={classNames}>
      <Tabs defaultValue="Riyadh" dir="rtl">
        <div className="border-b mb-1">
          <TabsList className={`bg-white rounded-none ${showTabsTriggers ? "" : "hidden"}`}>
            <TabsTrigger value="Riyadh" className="rounded-none px-4 py-2 text-gray-600 data-[state=active]:text-black text-base md:text-lg">الرياض</TabsTrigger>
            <TabsTrigger value="Macca" className="rounded-none px-4 py-2 text-gray-600 data-[state=active]:text-black text-base md:text-lg">مكة المكرمة</TabsTrigger>
            <TabsTrigger value="Dammam" className="rounded-none px-4 py-2 text-gray-600 data-[state=active]:text-black text-base md:text-lg">الدمام</TabsTrigger>
            <TabsTrigger value="Jeddah" className="rounded-none px-4 py-2 text-gray-600 data-[state=active]:text-black text-base md:text-lg">جدة</TabsTrigger>
            <TabsTrigger value="Jizan" className="rounded-none px-4 py-2 text-gray-600 data-[state=active]:text-black text-base md:text-lg">جيزان</TabsTrigger>
          </TabsList>
        </div>

        <TabsContent value="Riyadh">
          <HorizontalAutoScroll classNames="flex overflow-x-auto snap-x snap-mandatory gap-5 pb-4 px-5 lg:px-20 no-scrollbar">
            <div className="flex gap-4 min-w-max px-5">
              {displayRiyadh.length > 0 ? displayRiyadh.map((card, index) => (
             <DiscoverCard
  key={card.id}
  id={card.id}
  title={card.title}
  type={`${card.section === 'for sale' ? 'بيع' : 'إيجار'}`}
  price={card.price}
  image={card.image || "/placeholder-property.png"}
  logo={card.companyLogo}
  clientType={card.clientType}
  propertyType={card.propertyType}
  subtitle={card.subtitle}
/>

              )) : <div className="w-full text-center py-10 text-gray-500">لا توجد مشاريع حاليا</div>}
            </div>
          </HorizontalAutoScroll>
        </TabsContent>

        <TabsContent value="Macca">
          <div className="flex overflow-x-auto snap-x snap-mandatory gap-5 pb-4 px-5 lg:px-20">
            {makkahProps.length > 0 ? makkahProps.map((card) => (
              <DiscoverCard key={card.id} id={card.id} title={card.title} type={`${card.section === 'for sale' ? 'بيع' : 'إيجار'}`} price={card.price} image={card.image || "/placeholder-property.png"} logo={card.companyLogo} clientType={card.clientType} propertyType={card.propertyType} subtitle={card.subtitle} />
            )) : <div className="w-full text-center py-10 text-gray-500">لا توجد مشاريع في مكة حاليا</div>}
          </div>
        </TabsContent>

        <TabsContent value="Dammam">
          <div className="flex overflow-x-auto snap-x snap-mandatory gap-5 pb-4 px-5 lg:px-20">
            {dammamProps.length > 0 ? dammamProps.map((card) => (
              <DiscoverCard key={card.id} id={card.id} title={card.title} type={`${card.section === 'for sale' ? 'بيع' : 'إيجار'}`} price={card.price} image={card.image || "/placeholder-property.png"} logo={card.companyLogo} clientType={card.clientType} propertyType={card.propertyType} subtitle={card.subtitle} />
            )) : <div className="w-full text-center py-10 text-gray-500">لا توجد مشاريع في الدمام حاليا</div>}
          </div>
        </TabsContent>

        <TabsContent value="Jeddah">
          <div className="flex overflow-x-auto snap-x snap-mandatory gap-5 pb-4 px-5 lg:px-20">
            {jeddahProps.length > 0 ? jeddahProps.map((card) => (
              <DiscoverCard key={card.id} id={card.id} title={card.title} type={`${card.section === 'for sale' ? 'بيع' : 'إيجار'}`} price={card.price} image={card.image || "/placeholder-property.png"} logo={card.companyLogo} clientType={card.clientType} propertyType={card.propertyType} subtitle={card.subtitle} />
            )) : <div className="w-full text-center py-10 text-gray-500">لا توجد مشاريع في جدة حاليا</div>}
          </div>
        </TabsContent>

        <TabsContent value="Jizan">
          <div className="flex overflow-x-auto snap-x snap-mandatory gap-5 pb-4 px-5 lg:px-20">
            {jizanProps.length > 0 ? jizanProps.map((card) => (
              <DiscoverCard key={card.id} id={card.id} title={card.title} type={`${card.section === 'for sale' ? 'بيع' : 'إيجار'}`} price={card.price} image={card.image || "/placeholder-property.png"} logo={card.companyLogo} clientType={card.clientType} propertyType={card.propertyType} subtitle={card.subtitle} />
            )) : <div className="w-full text-center py-10 text-gray-500">لا توجد مشاريع في جيزان حاليا</div>}
          </div>
        </TabsContent>
      </Tabs>
    </div>
  );
}