"use client";

import { useState } from "react";
import { MapPinned } from "lucide-react";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Input } from "@/components/ui/input";

interface SearchFiltersProps {
  onChange?: (state: {
    type: string;
    city: string;
    price: string;
    area: string;
    query: string;
  }) => void;
}

export default function SearchFilters({ onChange }: SearchFiltersProps) {
  const [type, setType] = useState("عقارات");
  const [city, setCity] = useState("");
  const [price, setPrice] = useState("");
  const [area, setArea] = useState("");
  const [rooms, setRooms] = useState("");
  const [unit, setUnit] = useState("شقة");
  const [contract, setContract] = useState("للإيجار");
  const [query, setQuery] = useState("");

  const emit = () => onChange?.({ type, city, price, area, query });

  return (
    <div dir="rtl" className="w-full rounded-2xl">
      {/* Top tabs: underline style */}
      <Tabs
        value={type}
        onValueChange={(v) => {
          setType(v);
          emit();
        }}
      >
        <TabsList className="w-full justify-end bg-transparent p-0 gap-6 border-b border-[#E7EBF0]">
          {["تسوق عقارات المالك", "الطلبات العقارية", "المشاريع", "عقارات"].map((t) => (
            <TabsTrigger
              key={t}
              value={t}
              className="rounded-none px-0 h-auto pb-3 text-[#0A2530] data-[state=active]:text-[#0A2530] data-[state=active]:shadow-none border-0 data-[state=active]:bg-red-transparent border-b-2 text-base border-transparent data-[state=active]:border-[#0A2530] pb-1"
            >
              {t}
            </TabsTrigger>
          ))}
        </TabsList>
      </Tabs>

      {/* Filter bar */}
      <div className="mt-4 bg-[#F5F7FA] rounded-2xl p-3">
        <div className="flex flex-wrap items-stretch gap-3">
          {/* Left gray button */}
          <div className="flex items-center order-3">
            <button type="button" className="whitespace-nowrap px-3 md:px-4 py-2 h-10 rounded-full bg-[#0719381A] text-[#4F5874] text-sm flex items-center gap-2">
              <img src="/icons/map-paper.svg" alt="" className="w-4 h-4 opacity-70" />
              بحث بقائمة العقارات
            </button>
          </div>

          {/* Location input */}
          <div className="relative md:basis-64">
            <Input
              dir="rtl"
              placeholder="المدينة أو الحي أو اسم الشارع"
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              className="h-10 bg-white border border-[#CAD5E2] rounded-full pr-3 py-5"
            />
            {query && (
              <button
                type="button"
                onClick={() => setQuery("")}
                className="absolute left-2 top-1/2 -translate-y-1/2 text-gray-500"
                aria-label="مسح"
                >
                <img src="/icons/close.svg" alt="" className="w-4 h-4 opacity-60" />
              </button>
            )}
          </div>
          {/* Pills */}
          <div className="flex-1 flex flex-wrap items-center gap-3 order-2">
            <Select onValueChange={(v) => { setContract(v); emit(); }}>
              <SelectTrigger className="grow-1 bg-white border border-[#CAD5E2] rounded-full h-10 px-3 py-5 flex-row-reverse">
                <SelectValue placeholder="للإيجار"/>
              </SelectTrigger>
              <SelectContent align="start" className="text-right">
                <SelectItem value="للإيجار">للإيجار</SelectItem>
                <SelectItem value="للبيع">للبيع</SelectItem>
              </SelectContent>
            </Select>

            <Select onValueChange={(v) => { setUnit(v); emit(); }}>
              <SelectTrigger className="grow-1 bg-white border border-[#CAD5E2] rounded-full h-10 px-3 py-5 flex-row-reverse">
                <SelectValue placeholder="شقة"/>
              </SelectTrigger>
              <SelectContent align="start" className="text-right">
                <SelectItem value="شقة">شقة</SelectItem>
                <SelectItem value="فيلا">فيلا</SelectItem>
                <SelectItem value="أرض">أرض</SelectItem>
              </SelectContent>
            </Select>

            <Select onValueChange={(v) => { setRooms(v); emit(); }}>
              <SelectTrigger className="grow-1 bg-white border border-[#CAD5E2] rounded-full h-10 px-3 py-5 flex-row-reverse">
                <SelectValue placeholder="غرف / حمامات"/>
              </SelectTrigger>
              <SelectContent align="start" className="text-right">
                <SelectItem value="2-1">2 غرف / 1 حمام</SelectItem>
                <SelectItem value="3-2">3 غرف / 2 حمام</SelectItem>
                <SelectItem value="4-3">4 غرف / 3 حمام</SelectItem>
              </SelectContent>
            </Select>

            <Select onValueChange={(v) => { setPrice(v); emit(); }}>
              <SelectTrigger className="grow-1 bg-white border border-[#CAD5E2] rounded-full h-10 px-3 py-5 flex-row-reverse">
                <SelectValue placeholder="السعر"/>
              </SelectTrigger>
              <SelectContent align="start" className="text-right">
                <SelectItem value="<1m">أقل من 1م</SelectItem>
                <SelectItem value="1-5m">1م - 5م</SelectItem>
                <SelectItem value=">5m">أكثر من 5م</SelectItem>
              </SelectContent>
            </Select>

            <Select onValueChange={(v) => { setArea(v); emit(); }}>
              <SelectTrigger className="grow-1 bg-white border border-[#CAD5E2] rounded-full h-10 px-3 py-5 flex-row-reverse">
                <SelectValue placeholder="المساحة"/>
              </SelectTrigger>
              <SelectContent align="start" className="text-right">
                <SelectItem value="<150">أقل من 150م²</SelectItem>
                <SelectItem value="150-300">150 - 300م²</SelectItem>
                <SelectItem value=">300">أكثر من 300م²</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>
      </div>
    </div>
  );
}