"use client";

import { useMemo, useState } from "react";
import { PropertyCard } from "@/components/property-card";
import type { PublicProperty } from "@/lib/core/contracts";
import { filterPublicProperties } from "@/lib/core/filter-properties";

export function PropertyBrowser({
  properties,
}: {
  properties: PublicProperty[];
}) {
  const [query, setQuery] = useState("");
  const [area, setArea] = useState("all");
  const [propertyType, setPropertyType] = useState("all");
  const [bedrooms, setBedrooms] = useState("all");

  const areas = useMemo(
    () => [...new Set(properties.map((property) => property.area))].sort(),
    [properties],
  );
  const propertyTypes = useMemo(
    () =>
      [...new Set(properties.map((property) => property.propertyType))].sort(),
    [properties],
  );
  const bedroomOptions = useMemo(
    () =>
      [...new Set(properties.map((property) => property.bedrooms))].sort(
        (a, b) => a - b,
      ),
    [properties],
  );

  const filtered = useMemo(() => {
    return filterPublicProperties(properties, {
      query,
      area: area === "all" ? undefined : area,
      propertyType: propertyType === "all" ? undefined : propertyType,
      bedrooms: bedrooms === "all" ? undefined : Number(bedrooms),
    });
  }, [area, bedrooms, properties, propertyType, query]);

  const hasFilters =
    query !== "" ||
    area !== "all" ||
    propertyType !== "all" ||
    bedrooms !== "all";

  function resetFilters() {
    setQuery("");
    setArea("all");
    setPropertyType("all");
    setBedrooms("all");
  }

  return (
    <>
      <div className="property-filters" aria-label="Property filters">
        <label className="property-filters__search">
          Search
          <input
            onChange={(event) => setQuery(event.target.value)}
            placeholder="Property, area, or type"
            type="search"
            value={query}
          />
        </label>
        <label>
          Area
          <select
            onChange={(event) => setArea(event.target.value)}
            value={area}
          >
            <option value="all">All areas</option>
            {areas.map((option) => (
              <option key={option} value={option}>
                {option}
              </option>
            ))}
          </select>
        </label>
        <label>
          Property type
          <select
            onChange={(event) => setPropertyType(event.target.value)}
            value={propertyType}
          >
            <option value="all">All types</option>
            {propertyTypes.map((option) => (
              <option key={option} value={option}>
                {option}
              </option>
            ))}
          </select>
        </label>
        <label>
          Bedrooms
          <select
            onChange={(event) => setBedrooms(event.target.value)}
            value={bedrooms}
          >
            <option value="all">Any</option>
            {bedroomOptions.map((option) => (
              <option key={option} value={option}>
                {option}
              </option>
            ))}
          </select>
        </label>
      </div>
      <div className="results-toolbar">
        <p aria-live="polite">
          <strong>{filtered.length}</strong> mock result
          {filtered.length === 1 ? "" : "s"}
        </p>
        {hasFilters ? (
          <button className="filter-reset" onClick={resetFilters} type="button">
            Reset filters
          </button>
        ) : null}
      </div>
      {filtered.length ? (
        <div className="property-grid">
          {filtered.map((property) => (
            <PropertyCard key={property.publicPropertyId} property={property} />
          ))}
        </div>
      ) : (
        <div className="empty-state">
          <h3>No matching mock properties.</h3>
          <p>Try removing one filter or broadening the search.</p>
          <button
            className="text-link filter-reset"
            onClick={resetFilters}
            type="button"
          >
            Clear all filters
          </button>
        </div>
      )}
    </>
  );
}