"use client";

import InputGroup from "@/components/FormElements/InputGroup";
import { Button } from "@/components/ui-elements/button";
import InlineListFiltersPanel from "@/components/ui/InlineListFiltersPanel";
import {
  FieldValues,
  UseFormHandleSubmit,
  UseFormRegister,
  UseFormWatch,
} from "react-hook-form";
import { useMemo } from "react";

interface FeedbackListFiltersProps {
  filterRegister: UseFormRegister<FieldValues>;
  isMutating: number;
  handleFilterSubmit: UseFormHandleSubmit<FieldValues>;
  search: (data: any) => void;
  watch: UseFormWatch<FieldValues>;
  onClearAll: () => void;
}

function countActive(values: Record<string, unknown>): number {
  const q = values.q;
  return typeof q === "string" && q.trim() ? 1 : 0;
}

export default function FeedbackListFilters({
  filterRegister,
  isMutating,
  handleFilterSubmit,
  search,
  watch,
  onClearAll,
}: FeedbackListFiltersProps) {
  const watched = watch();
  const activeCount = useMemo(
    () => countActive(watched as Record<string, unknown>),
    [watched],
  );

  return (
    <InlineListFiltersPanel
      title="Filter feedback"
      description="Keyword search across this list — inline, no popup."
      activeFilterCount={activeCount}
      expandAriaLabel="Expand feedback filters"
      collapseAriaLabel="Collapse feedback filters"
      panelToggleDataCy="feedback-filter-panel-toggle"
    >
      <form
        className="space-y-5 px-4 pb-6 pt-1 sm:px-6"
        onSubmit={handleFilterSubmit(search)}
        data-cy="feedback-filter-form"
      >
        <div className="max-w-xl">
          <InputGroup
            {...filterRegister("q")}
            name="q"
            label="Keyword search"
            placeholder="Search feedback…"
            type="search"
            dataCy="feedback-filter-q-input"
          />
        </div>
        <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
          <Button
            type="submit"
            size="small"
            className="min-h-[52px] min-w-[140px] rounded-2xl bg-gradient-to-r from-primary via-primary to-violet-600 px-8 text-sm font-semibold transition hover:opacity-[0.97]"
            data-cy="feedback-filter-submit-button"
            label={
              isMutating ? (
                <span className="inline-flex h-5 w-5 animate-spin rounded-full border-2 border-white/30 border-t-white" />
              ) : (
                <span>Apply filters</span>
              )
            }
          />
          <button
            type="button"
            data-cy="feedback-filter-reset-button"
            onClick={onClearAll}
            className="min-h-[52px] rounded-2xl border border-stroke/70 bg-white/80 px-6 text-sm font-semibold text-dark transition hover:border-primary/40 hover:text-primary dark:border-dark-3 dark:bg-dark-3/60 dark:text-white dark:hover:bg-white/[0.06]"
          >
            Reset all
          </button>
        </div>
      </form>
    </InlineListFiltersPanel>
  );
}
