"use client";

import { useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";

// Real min/max range (not preset toggle buckets, tried first and
// reverted 2026-07-30 — "keine toggle badges") — two plain number inputs,
// submitted via a small Client Component's router.push. Still a plain
// URL search param underneath (?minPrice=&maxPrice=), so the result stays
// shareable/bookmarkable like every other filter on the site.
export function PriceRangeFilter({
  catalogMin,
  catalogMax,
  layout = "bar",
}: {
  catalogMin: number;
  catalogMax: number;
  /** "bar" (default): horizontal row, wraps — used above the grid at
   * <lg (see ProductGrid.tsx's mobile/tablet filter bar). "sidebar":
   * stacked vertically to fit the lg:+ left sidebar column instead. */
  layout?: "bar" | "sidebar";
}) {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [minPrice, setMinPrice] = useState(searchParams.get("minPrice") ?? "");
  const [maxPrice, setMaxPrice] = useState(searchParams.get("maxPrice") ?? "");

  const hasFilter = Boolean(searchParams.get("minPrice") || searchParams.get("maxPrice"));

  function apply(e: React.FormEvent) {
    e.preventDefault();
    const params = new URLSearchParams();
    if (minPrice) params.set("minPrice", minPrice);
    if (maxPrice) params.set("maxPrice", maxPrice);
    const qs = params.toString();
    router.push(qs ? `/shop?${qs}` : "/shop");
  }

  function reset() {
    setMinPrice("");
    setMaxPrice("");
    router.push("/shop");
  }

  const sidebar = layout === "sidebar";

  return (
    <form
      onSubmit={apply}
      className={sidebar ? "flex flex-col gap-3 items-stretch w-full" : "flex flex-wrap items-end gap-3 w-full pb-6"}
    >
      {sidebar && <p className="font-bold text-body-sm text-text-primary">Preis</p>}
      <div className={sidebar ? "flex items-end gap-3 w-full" : "flex items-end gap-3"}>
        <label className={sidebar ? "flex flex-col gap-1 flex-1 min-w-0" : "flex flex-col gap-1"}>
          <span className="text-label text-text-muted">Von</span>
          <input
            type="number"
            inputMode="decimal"
            min={0}
            step="0.01"
            placeholder={`${catalogMin}`}
            value={minPrice}
            onChange={(e) => setMinPrice(e.target.value)}
            className={`${sidebar ? "w-full" : "w-24"} border border-border rounded-sm px-3 py-2 text-body-sm text-text-primary bg-bg-base outline-none focus:border-brand transition-colors`}
          />
        </label>
        <label className={sidebar ? "flex flex-col gap-1 flex-1 min-w-0" : "flex flex-col gap-1"}>
          <span className="text-label text-text-muted">Bis</span>
          <input
            type="number"
            inputMode="decimal"
            min={0}
            step="0.01"
            placeholder={`${catalogMax}`}
            value={maxPrice}
            onChange={(e) => setMaxPrice(e.target.value)}
            className={`${sidebar ? "w-full" : "w-24"} border border-border rounded-sm px-3 py-2 text-body-sm text-text-primary bg-bg-base outline-none focus:border-brand transition-colors`}
          />
        </label>
        {!sidebar && <span className="text-body-sm text-text-muted">€</span>}
      </div>
      <div className={sidebar ? "flex flex-col gap-2 items-stretch w-full" : "flex items-center gap-3"}>
        <button
          type="submit"
          className={`${sidebar ? "w-full" : ""} px-4 py-2 rounded-sm bg-brand text-body-sm font-bold text-text-primary hover:brightness-95 active:scale-[0.97] transition-all`}
        >
          Anwenden
        </button>
        {hasFilter && (
          <button
            type="button"
            onClick={reset}
            className={`${sidebar ? "text-center" : ""} text-body-sm font-semibold text-text-muted underline hover:text-brand transition-colors`}
          >
            Zurücksetzen
          </button>
        )}
      </div>
    </form>
  );
}
