"use client";

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

import { useState, useEffect } from "react";

import {
  RoomsAndBathroomsFilter,
  PriceRangeFilter,
  AreaRangeFilter,
} from "@/components/common/FilterControls";

export const BasicPropertyFilters = ({
  filters = {},
  onFilterChange,
}: {
  filters?: any;
  onFilterChange?: (f: any) => void;
} = {}) => {
  const [searchValue, setSearchValue] = useState(filters.search || "");

  useEffect(() => {
    setSearchValue(filters.search || "");
  }, [filters.search]);

  const handleSearchChange = (val: string) => {
    setSearchValue(val);

    if (onFilterChange) {
      onFilterChange({
        ...filters,
        search: val,
      });
    }
  };

  return (
    <div className="flex flex-col md:flex-row gap-2 w-full">

      {/* البحث */}
      <div className="relative w-full md:flex-1 my-2 md:my-0">
        <input
          type="text"
          placeholder="المدينة او الحي او اسم الشارع"
          value={searchValue}
          onChange={(e) => handleSearchChange(e.target.value)}
          className="
            w-full
            h-[42px]
            rounded-full
            border
            border-slate-200
            bg-[#F8FAFC]
            px-4
            pr-10
            text-[13px]
            text-slate-700
            placeholder-slate-400
            focus:border-slate-300
            focus:outline-none
            focus:ring-1
            focus:ring-slate-200
          "
        />

        {/* أيقونة الموقع */}
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
          className="
            w-4
            h-4
            absolute
            right-4
            top-1/2
            -translate-y-1/2
            text-slate-400
          "
        >
          <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
          <circle cx="12" cy="10" r="3" />
        </svg>

        {/* زر المسح */}
        {searchValue && (
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="
              w-3.5
              h-3.5
              absolute
              left-4
              top-1/2
              -translate-y-1/2
              text-slate-400
              cursor-pointer
            "
            onClick={() => handleSearchChange("")}
          >
            <line x1="18" y1="6" x2="6" y2="18" />
            <line x1="6" y1="6" x2="18" y2="18" />
          </svg>
        )}
      </div>

      {/* الفلاتر */}
      <div className="hidden md:flex flex-row gap-2">

        {/* المساحة */}
        <Select dir="rtl">
          <SelectTrigger
            className="
              h-[42px]
              w-[150px]
              rounded-full
              border
              border-slate-200
              bg-[#F8FAFC]
              px-3
              text-[12px]
              text-slate-500
              focus:outline-none
              focus:ring-1
              focus:ring-slate-200
            "
          >
            <SelectValue placeholder="المساحة" />
          </SelectTrigger>

          <SelectContent>
            <SelectGroup>
              <SelectLabel>المساحة</SelectLabel>
              <SelectItem value="100">100</SelectItem>
              <SelectItem value="200">200</SelectItem>
              <SelectItem value="300">300</SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>

        {/* السعر */}
        <Select dir="rtl">
          <SelectTrigger
            className="
              h-[42px]
              w-[150px]
              rounded-full
              border
              border-slate-200
              bg-[#F8FAFC]
              px-3
              text-[12px]
              text-slate-500
              focus:outline-none
              focus:ring-1
              focus:ring-slate-200
            "
          >
            <SelectValue placeholder="السعر" />
          </SelectTrigger>

          <SelectContent>
            <SelectGroup>
              <SelectLabel>السعر</SelectLabel>
              <SelectItem value="100000">100000</SelectItem>
              <SelectItem value="500000">500000</SelectItem>
              <SelectItem value="1000000">1000000</SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>

        {/* غرف / حمامات */}
        <Select dir="rtl">
          <SelectTrigger
            className="
              h-[42px]
              w-[170px]
              rounded-full
              border
              border-slate-200
              bg-[#F8FAFC]
              px-3
              text-[12px]
              text-slate-500
              focus:outline-none
              focus:ring-1
              focus:ring-slate-200
            "
          >
            <SelectValue placeholder="غرف / حمامات" />
          </SelectTrigger>

          <SelectContent>
            <SelectGroup>
              <SelectLabel>غرف / حمامات</SelectLabel>
              <SelectItem value="1">1</SelectItem>
              <SelectItem value="2">2</SelectItem>
              <SelectItem value="3">3</SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>

      </div>
    </div>
  );
};

export const AdvancedPropertyFilters = ({
  filters = {},
  onFilterChange,
}: {
  filters?: any;
  onFilterChange?: (f: any) => void;
} = {}) => (
  <>
    <div className="flex flex-col gap-3">

      {/* عدد الصالات */}
      <Select dir="rtl">
        <SelectTrigger
          className="
            h-[42px]
            w-full
            rounded-full
            border
            border-slate-200
            bg-[#F8FAFC]
            px-3
            text-[12px]
            text-slate-500
            focus:outline-none
          "
        >
          <SelectValue placeholder="عدد الصالات" />
        </SelectTrigger>

        <SelectContent>
          <SelectGroup>
            <SelectLabel>عدد الصالات</SelectLabel>
            <SelectItem value="1">1</SelectItem>
            <SelectItem value="2">2</SelectItem>
            <SelectItem value="3">3</SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>

      {/* نوع العقار */}
      <Select dir="rtl">
        <SelectTrigger
          className="
            h-[42px]
            w-full
            rounded-full
            border
            border-slate-200
            bg-[#F8FAFC]
            px-3
            text-[12px]
            text-slate-500
            focus:outline-none
          "
        >
          <SelectValue placeholder="نوع العقار" />
        </SelectTrigger>

        <SelectContent>
          <SelectGroup>
            <SelectLabel>نوع العقار</SelectLabel>
            <SelectItem value="apartment">شقة</SelectItem>
            <SelectItem value="villa">فيلا</SelectItem>
            <SelectItem value="land">أرض</SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>

      {/* نوع الصفقة */}
      <Select dir="rtl">
        <SelectTrigger
          className="
            h-[42px]
            w-full
            rounded-full
            border
            border-slate-200
            bg-[#F8FAFC]
            px-3
            text-[12px]
            text-slate-500
            focus:outline-none
          "
        >
          <SelectValue placeholder="الكل" />
        </SelectTrigger>

        <SelectContent>
          <SelectGroup>
            <SelectLabel>نوع الصفقة</SelectLabel>

            <SelectItem value="all">الكل</SelectItem>
            <SelectItem value="rent">للإيجار</SelectItem>
            <SelectItem value="sale">للبيع</SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>

      {/* عدد الأدوار */}
      <Select dir="rtl">
        <SelectTrigger
          className="
            h-[42px]
            w-full
            rounded-full
            border
            border-slate-200
            bg-[#F8FAFC]
            px-3
            text-[12px]
            text-slate-500
            focus:outline-none
          "
        >
          <SelectValue placeholder="عدد الادوار" />
        </SelectTrigger>

        <SelectContent>
          <SelectGroup>
            <SelectLabel>عدد الادوار</SelectLabel>

            <SelectItem value="1">1</SelectItem>
            <SelectItem value="2">2</SelectItem>
            <SelectItem value="3">3+</SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>

    </div>
  </>
);