"use client";

import React, { RefObject } from "react";
import CustomDropdown from "@/components/atoms/CustomDropdown";
import {
  propertyTypeOptions,
  locationOptions,
  unitSizeOptions,
  propertyStatusOptions,
} from "./constants";

interface SelectOption {
  value: string;
  label: string;
}

interface SearchSelectProps {
  label: string;
  name: string;
  value: string;
  onChange: (name: string, value: string) => void;
  options: SelectOption[];
  placeholder?: string;
  className?: string;
}

const SearchSelect = ({
  label,
  name,
  value,
  onChange,
  options,
  placeholder = "All",
  className = "",
}: SearchSelectProps) => (
  <div className={`flex flex-col bg-[#F5F5F5] relative w-full ${className}`}>
    <label className="font-creato font-normal text-sm text-[#28241E] tracking-wide leading-none pb-3">
      {label}
    </label>
    <div className="relative w-full overflow-visible min-w-0">
      <CustomDropdown
        value={value}
        options={options}
        onChange={onChange}
        name={name}
        placeholder={placeholder}
        variant="search"
        aria-label={label}
      />
    </div>
  </div>
);

interface FilterState {
  type: string;
  location: string;
  size: string;
  status: string;
}

interface DesktopFilterPanelProps {
  filters: FilterState;
  onFilterChange: (name: string, value: string) => void;
  isExpanded: boolean;
  contentHeight: number;
  filterContainerRef: RefObject<HTMLDivElement | null>;
  filterContentRef: RefObject<HTMLDivElement | null>;
  locationOptions?: { value: string; label: string }[];
}

const DesktopFilterPanel = ({
  filters,
  onFilterChange,
  isExpanded,
  contentHeight,
  filterContainerRef,
  filterContentRef,
  locationOptions = [],
}: DesktopFilterPanelProps) => {
  const effectiveLocationOptions =
    locationOptions.length > 1 ? locationOptions : locationOptions;

  return (
    <div
      ref={filterContainerRef}
      className="hidden xl:block relative w-full bg-white"
      style={{
        maxHeight: isExpanded ? `${contentHeight}px` : "0px",
        opacity: isExpanded ? 1 : 0,
        overflow: isExpanded ? "visible" : "hidden",
        transition:
          "max-height 400ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms ease-in-out",
        pointerEvents: isExpanded ? "auto" : "none",
        marginTop: "0",
      }}
    >
      <div
        ref={filterContentRef}
        className="flex flex-col xl:flex-row items-stretch w-full bg-white"
      >
        <SearchSelect
          label="Property Type"
          name="type"
          value={filters.type}
          onChange={onFilterChange}
          options={propertyTypeOptions}
          placeholder="All"
          className="py-4 xl:py-7 px-4 xl:pl-3 2xl:pl-5 xl:pr-10 2xl:pr-10 xl:flex-1 xl:min-w-0  border-r border-[#E8E8E8]"
        />

        <SearchSelect
          label="Location"
          name="location"
          value={filters.location}
          onChange={onFilterChange}
          options={
            effectiveLocationOptions.length > 1
              ? effectiveLocationOptions
              : locationOptions
          }
          placeholder="All"
          className="py-4 xl:py-7 px-4 xl:pl-3 2xl:pl-5 xl:pr-10 2xl:pr-10 xl:flex-1 xl:min-w-0  border-r border-[#E8E8E8]"
        />

        <SearchSelect
          label="Unit Size"
          name="size"
          value={filters.size}
          onChange={onFilterChange}
          options={unitSizeOptions}
          placeholder="All"
          className="py-4 xl:py-7 px-4 xl:pl-3 2xl:pl-5 xl:pr-10 2xl:pr-10 xl:flex-1 xl:min-w-0  border-r border-[#E8E8E8]"
        />

        <SearchSelect
          label="Property Status"
          name="status"
          value={filters.status}
          onChange={onFilterChange}
          options={propertyStatusOptions}
          placeholder="All"
          className="py-4 xl:py-7 px-4 xl:pl-3 2xl:pl-5 xl:pr-10 2xl:pr-10 xl:flex-1 xl:min-w-0  border-r border-[#E8E8E8]"
        />

        <div className="flex items-center justify-center bg-[#F5F5F5] py-4 xl:py-0 px-4 xl:px-6 2xl:px-10 w-full md:w-full xl:shrink-0 xl:w-auto xl:min-w-[180px] 2xl:min-w-[200px]">
          <button
            type="button"
            className="bg-[#DD577F] hover:bg-[#333333] text-white font-creato font-medium text-sm xl:text-base py-3 px-8 xl:px-8 2xl:px-10 transition-colors duration-200 cursor-pointer whitespace-nowrap"
          >
            Search Properties
          </button>
        </div>
      </div>
    </div>
  );
};

export default DesktopFilterPanel;