import PriceRangeInput from "../main-page/PriceRangeInput";
import AreaRangeInput from "../main-page/AreaRangeInput";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { useState } from "react";
import { AreaRangeFilter, PriceRangeFilter, RoomsAndBathroomsFilter } from "@/components/common/FilterControls";

export const BasicProjectFilters = ({
  filters = {},
  onFilterChange
}: {
  filters?: any,
  onFilterChange?: (f: any) => void
} = {}) => {
  const [searchValue, setSearchValue] = useState(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 rounded-full border border-slate-300 bg-[#F8FAFC] py-3.5 px-9 text-right leading-tight text-slate-700 placeholder-slate-400 focus:border-slate-400 focus:outline-none focus:ring-2 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-5 h-5 absolute right-3 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-5 h-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-col md:flex-row gap-2 w-full md:flex-none md:w-auto">
        <AreaRangeFilter
          minArea={filters.minArea}
          maxArea={filters.maxArea}
          onMinAreaChange={(v) => onFilterChange?.({ ...filters, minArea: v })}
          onMaxAreaChange={(v) => onFilterChange?.({ ...filters, maxArea: v })}
        />
        <PriceRangeFilter
          minPrice={filters.minPrice}
          maxPrice={filters.maxPrice}
          onMinPriceChange={(v) => onFilterChange?.({ ...filters, minPrice: v })}
          onMaxPriceChange={(v) => onFilterChange?.({ ...filters, maxPrice: v })}
        />
        <RoomsAndBathroomsFilter
          rooms={filters.rooms}
          bathrooms={filters.bathrooms}
          onRoomsChange={(v) => onFilterChange?.({ ...filters, rooms: v })}
          onBathroomsChange={(v) => onFilterChange?.({ ...filters, bathrooms: v })}
        />
      </div>
    </div>
  )
};

export const AdvancedProjectFilters = ({
  filters = {},
  onFilterChange
}: {
  filters?: any,
  onFilterChange?: (f: any) => void
} = {}) => (
  <>
    <div className="flex flex-col md:hidden gap-4">
      <AreaRangeFilter
        minArea={filters.minArea}
        maxArea={filters.maxArea}
        onMinAreaChange={(v) => onFilterChange?.({ ...filters, minArea: v })}
        onMaxAreaChange={(v) => onFilterChange?.({ ...filters, maxArea: v })}
      />
      <PriceRangeFilter
        minPrice={filters.minPrice}
        maxPrice={filters.maxPrice}
        onMinPriceChange={(v) => onFilterChange?.({ ...filters, minPrice: v })}
        onMaxPriceChange={(v) => onFilterChange?.({ ...filters, maxPrice: v })}
      />
      <RoomsAndBathroomsFilter
        rooms={filters.rooms}
        bathrooms={filters.bathrooms}
        onRoomsChange={(v) => onFilterChange?.({ ...filters, rooms: v })}
        onBathroomsChange={(v) => onFilterChange?.({ ...filters, bathrooms: v })}
      />
    </div>
    <Select
      dir="rtl"
      value={filters.livingRooms}
      onValueChange={(v) => onFilterChange?.({ ...filters, livingRooms: v })}
    >
      <SelectTrigger className="w-full appearance-none rounded-full border border-slate-300 bg-slate-50 py-3.5 px-4 text-right leading-tight text-slate-400 data-[placeholder]:text-slate-400 focus:outline-none text-base">
        <SelectValue placeholder="عدد الصالات" />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectLabel>عدد الصالات</SelectLabel>
          <SelectItem value="1">1</SelectItem>
          <SelectItem value="2">2</SelectItem>
          <SelectItem value="3">3</SelectItem>
          <SelectItem value="4">4</SelectItem>
          <SelectItem value="5">5+</SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
    <Select
      dir="rtl"
      value={filters.propertyType}
      onValueChange={(v) => onFilterChange?.({ ...filters, propertyType: v })}
    >
      <SelectTrigger className="w-full appearance-none rounded-full border border-slate-300 bg-slate-50 py-3.5 px-4 text-right leading-tight text-slate-400 data-[placeholder]:text-slate-400 focus:outline-none text-base">
        <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"
      value={filters.floors}
      onValueChange={(v) => onFilterChange?.({ ...filters, floors: v })}
    >
      <SelectTrigger className="w-full appearance-none rounded-full border border-slate-300 bg-slate-50 py-3.5 text-right leading-tight text-slate-400 data-[placeholder]:text-slate-400 focus:outline-none text-base">
        <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"
      value={filters.projectStatus}
      onValueChange={(v) => onFilterChange?.({ ...filters, projectStatus: v })}
    >
      <SelectTrigger className="w-full appearance-none rounded-full border border-slate-300 bg-slate-50 py-3.5 px-4 text-right leading-tight text-slate-400 data-[placeholder]:text-slate-400 focus:outline-none text-base">
        <SelectValue placeholder="وحدة جاهزة-بيع على الخارطه" />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectLabel>حالة المشروع</SelectLabel>
          <SelectItem value="ready-unit">وحدة جاهزة</SelectItem>
          <SelectItem value="off-plan">بيع على الخارطه</SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  </>
);