"use client";

import { Button } from "@aur-ui/ui/components/button";
import { buttonVariants } from "@aur-ui/ui/components/button-variants";
import {
  Drawer,
  DrawerShell,
  DrawerTrigger,
} from "@aur-ui/ui/components/drawer";
import { cn } from "@aur-ui/ui/lib/utils";
import { Filter } from "lucide-react";
import { useId, useMemo, useState } from "react";

/**
 * Mobile filter surface. On narrow viewports the table's in-header filters are
 * gone, so a toolbar button opens this bottom drawer holding the same filter
 * controls. Drag-to-close + gesture momentum via `vaul`. Resource-agnostic:
 * callers compose {@link FilterMultiGroup} / {@link FilterSingleGroup} (or
 * anything) as children and own the filter state, exactly like the desktop
 * header filters — both views drive one shared state.
 */

export type FilterDrawerProps = {
  /** Trigger label, e.g. "Filter". */
  label: string;
  /** Drawer heading. */
  title: string;
  /** Count of active filters; surfaced as a badge on the trigger. */
  activeCount?: number;
  /** Clear-all handler + label, shown in the header when any filter is active. */
  onReset?: () => void;
  resetLabel?: string;
  /** Footer close-button label. */
  doneLabel: string;
  children: React.ReactNode;
};

export function FilterDrawer({
  label,
  title,
  activeCount = 0,
  onReset,
  resetLabel,
  doneLabel,
  children,
}: FilterDrawerProps) {
  const [open, setOpen] = useState(false);
  const active = activeCount > 0;
  const headerEnd = useMemo(() => {
    if (!active || !onReset) return undefined;
    return (
      <button
        type="button"
        onClick={onReset}
        className="text-sm font-medium text-ink-500 transition-colors hover:text-brand focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/40"
      >
        {resetLabel}
      </button>
    );
  }, [active, onReset, resetLabel]);
  const footer = useMemo(
    () => (
      <Button
        type="button"
        size="lg"
        onClick={() => setOpen(false)}
        className="w-full"
      >
        {doneLabel}
      </Button>
    ),
    [doneLabel],
  );

  return (
    <Drawer open={open} onOpenChange={setOpen}>
      <DrawerTrigger asChild>
        <Button
          type="button"
          variant="toolbar"
          size="toolbar"
          className={active ? "text-brand" : undefined}
        >
          <Filter
            className={cn("size-4", active ? "text-brand" : "text-ink-500")}
            aria-hidden
          />
          {label}
          {active ? (
            <span className="inline-flex min-w-5 items-center justify-center rounded-full bg-brand-soft px-1.5 text-2xs font-semibold text-brand">
              {activeCount}
            </span>
          ) : null}
        </Button>
      </DrawerTrigger>
      <DrawerShell title={title} headerEnd={headerEnd} footer={footer}>
        <div className="flex flex-col gap-5">{children}</div>
      </DrawerShell>
    </Drawer>
  );
}

/** Labelled multi-select filter group (empty selection = all). */
export function FilterMultiGroup<T extends string>({
  label,
  options,
  optionLabels,
  value,
  onValueChange,
}: {
  label: string;
  options: readonly T[];
  optionLabels: Record<T, string>;
  value: readonly T[];
  onValueChange: (next: readonly T[]) => void;
}) {
  const selected = new Set(value);
  const toggle = (opt: T) => {
    if (selected.has(opt)) onValueChange(value.filter((v) => v !== opt));
    else onValueChange([...value, opt]);
  };
  return (
    <FilterGroup label={label}>
      {options.map((opt) => {
        const on = selected.has(opt);
        return (
          <Button
            key={opt}
            type="button"
            variant={on ? "chip-active" : "chip"}
            size="chip"
            aria-pressed={on}
            onClick={() => toggle(opt)}
          >
            {optionLabels[opt]}
          </Button>
        );
      })}
    </FilterGroup>
  );
}

/** Labelled single-select filter group (mutually exclusive choices). */
export function FilterSingleGroup<T extends string>({
  label,
  options,
  optionLabels,
  value,
  onValueChange,
}: {
  label: string;
  options: readonly T[];
  optionLabels: Record<T, string>;
  value: T;
  onValueChange: (next: T) => void;
}) {
  const groupName = useId();
  return (
    <FilterGroup label={label} contentRole="radiogroup">
      {options.map((opt) => {
        const on = value === opt;
        return (
          <label
            key={opt}
            className={cn(
              buttonVariants({
                variant: on ? "chip-active" : "chip",
                size: "chip",
              }),
              "cursor-pointer has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-brand/40",
            )}
          >
            <input
              type="radio"
              name={groupName}
              value={opt}
              checked={on}
              onChange={() => onValueChange(opt)}
              className="sr-only"
            />
            {optionLabels[opt]}
          </label>
        );
      })}
    </FilterGroup>
  );
}

export function FilterGroup({
  label,
  children,
  contentRole,
}: {
  label: string;
  children: React.ReactNode;
  contentRole?: "group" | "radiogroup";
}) {
  return (
    <fieldset className="flex flex-col gap-2">
      <legend className="text-2xs font-semibold tracking-wide text-ink-400 uppercase">
        {label}
      </legend>
      <div role={contentRole} className="flex flex-wrap gap-2">
        {children}
      </div>
    </fieldset>
  );
}