"use client";

// Where FiltersPanel lives, which depends on how much room there is.
//
//   • from xl — inline under the search bar, collapsible, exactly as it has
//     always been on a desktop. The group-chip row is designed to pack uniform
//     chips across the full width, so a narrow rail would be a downgrade there.
//   • below xl — a sheet behind the "Filters" chip, with an Apply button that
//     commits and closes. That is what gets the two screens of filter stack out
//     from between a phone visitor and their results.
//
// Both readers ask the same media query, and `useMediaQuery` re-reads `matches`
// synchronously, so the trigger and the inline block can never both be showing
// the same single-mount panel.

import { useState } from "react";
import { ListFilterIcon } from "lucide-react";
import { Button } from "./ui/button";
import {
  Sheet,
  SheetContent,
  SheetTitle,
  SheetTrigger,
} from "./ui/sheet";
import FiltersPanel from "./FiltersPanel";
import { useMediaQuery } from "../lib/useMediaQuery";

export function FiltersTrigger({
  activeCount,
  onApply,
  applyDisabled = false,
}: {
  activeCount: number;
  onApply: () => void;
  // Refused exactly when Search is ("Search in" has nothing ticked); the
  // panel above it says which row to fix.
  applyDisabled?: boolean;
}) {
  const [open, setOpen] = useState(false);
  // From sm the sheet comes in from the right like the menu; on a phone it
  // rises from the bottom, where a thumb is.
  const fromSide = useMediaQuery("(min-width: 640px)");

  return (
    <Sheet open={open} onOpenChange={setOpen}>
      <SheetTrigger asChild>
        <Button
          type="button"
          variant="outline"
          size="sm"
          data-testid="filters-trigger"
          className="shrink-0 text-xs text-muted-foreground"
        >
          <ListFilterIcon aria-hidden="true" />
          Filters
          {activeCount > 0 && (
            <span className="rounded-full bg-primary px-1.5 text-[10px] font-medium text-primary-foreground">
              {activeCount}
            </span>
          )}
        </Button>
      </SheetTrigger>
      <SheetContent
        side={fromSide ? "right" : "bottom"}
        aria-describedby={undefined}
        className="max-h-[90dvh] gap-0 overflow-y-auto sm:max-w-md"
      >
        <SheetTitle className="px-4 pt-4 text-base">Filters</SheetTitle>
        <div className="px-4 pb-4 pt-2">
          <FiltersPanel forceOpen />
        </div>
        {/* Sticky so a long filter list never buries the one button that
            applies it. Deliberately NOT `search-submit`: there is exactly one
            of those, and it is in the bar. */}
        <div className="sticky bottom-0 border-t border-border bg-background px-4 py-3 pb-[calc(0.75rem+env(safe-area-inset-bottom,0px))]">
          <Button
            type="button"
            className="w-full"
            disabled={applyDisabled}
            onClick={() => {
              onApply();
              setOpen(false);
            }}
          >
            Apply filters
          </Button>
        </div>
      </SheetContent>
    </Sheet>
  );
}

// The inline placement. Renders nothing below xl, where FiltersTrigger owns the
// panel — one mount, never two.
export function FiltersSection() {
  const inline = useMediaQuery("(min-width: 1280px)");
  if (!inline) return null;
  return <FiltersPanel />;
}