"use client";

import { SlidersHorizontal, Search } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Select } from "@/components/ui/select";
import type { Brand } from "@/lib/mock-data";
import { cn } from "@/lib/utils";

export type ScooterFilterValues = {
  search: string;
  brand: string;
  range: string;
  price: string;
  topSpeed: string;
  battery: string;
  sort: string;
};

type ScooterFiltersProps = {
  brands: Brand[];
  values: ScooterFilterValues;
  resultCount: number;
  compareCount: number;
  onChange: (values: ScooterFilterValues) => void;
};

export function ScooterFilters({
  brands,
  values,
  resultCount,
  compareCount,
  onChange,
}: ScooterFiltersProps) {
  const update = (key: keyof ScooterFilterValues, value: string) => {
    onChange({ ...values, [key]: value });
  };

  return (
    <div className="rounded-[1.5rem] border border-border bg-white p-4 shadow-card md:p-5">
      <div className="grid gap-3 lg:grid-cols-[1.6fr_repeat(5,minmax(0,0.65fr))_auto_0.65fr]">
        <label className="relative">
          <span className="sr-only">Search scooters</span>
          <Search className="pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-navy-muted" />
          <Input
            className="pl-11"
            placeholder="Search scooters, brands or models..."
            value={values.search}
            onChange={(event) => update("search", event.target.value)}
          />
        </label>
        <Select value={values.range} onChange={(event) => update("range", event.target.value)}>
          <option value="all">Range</option>
          <option value="80">80+ km</option>
          <option value="100">100+ km</option>
          <option value="130">130+ km</option>
        </Select>
        <Select value={values.price} onChange={(event) => update("price", event.target.value)}>
          <option value="all">Price</option>
          <option value="300000">Under Rs. 3L</option>
          <option value="400000">Under Rs. 4L</option>
          <option value="500000">Under Rs. 5L</option>
        </Select>
        <Select
          value={values.topSpeed}
          onChange={(event) => update("topSpeed", event.target.value)}
        >
          <option value="all">Top Speed</option>
          <option value="50">50+ km/h</option>
          <option value="75">75+ km/h</option>
          <option value="90">90+ km/h</option>
        </Select>
        <Select
          value={values.battery}
          onChange={(event) => update("battery", event.target.value)}
        >
          <option value="all">Battery Type</option>
          <option value="lithium">Lithium-ion</option>
          <option value="lfp">LFP</option>
        </Select>
        <button
          type="button"
          className="inline-flex h-11 items-center justify-center gap-2 rounded-xl border border-border bg-white px-4 text-sm font-semibold text-navy-deep shadow-sm"
        >
          More Filters <SlidersHorizontal className="h-4 w-4" />
        </button>
        <span className="hidden items-center justify-end text-sm font-semibold text-navy-deep lg:flex">
          Sort By:
        </span>
        <Select value={values.sort} onChange={(event) => update("sort", event.target.value)}>
          <option value="popular">Popularity</option>
          <option value="price-low">Price: Low to High</option>
          <option value="price-high">Price: High to Low</option>
          <option value="range-high">Range: High to Low</option>
        </Select>
      </div>

      <div className="mt-6 flex flex-col gap-4">
        <div className="flex items-center justify-between gap-4">
          <h2 className="text-lg font-bold text-navy-deep">Shop By Brand</h2>
          <div className="inline-flex items-center gap-2 rounded-xl border border-border px-4 py-2 text-sm font-semibold text-navy-deep">
            <SlidersHorizontal className="h-4 w-4" />
            Compare ({compareCount})
          </div>
        </div>
        <div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6">
          {brands.map((brand) => (
            <button
              type="button"
              key={brand.id}
              className={cn(
                "min-h-20 rounded-xl border px-4 text-center text-lg font-black uppercase shadow-sm transition",
                values.brand === brand.id
                  ? "border-primary bg-primary-soft text-primary-deep"
                  : "border-border bg-white text-navy-deep hover:border-primary/40",
              )}
              onClick={() => update("brand", brand.id)}
            >
              {brand.name === "TVS iQube" ? "TVS iQUBE" : brand.name}
            </button>
          ))}
        </div>
        {values.brand !== "all" ? (
          <button
            type="button"
            className="self-start text-sm font-semibold text-primary"
            onClick={() => update("brand", "all")}
          >
            Clear brand filter
          </button>
        ) : null}
        <p className="sr-only">{resultCount} scooters match the current filters.</p>
      </div>
    </div>
  );
}