import Link from "next/link";

type SelectFilter = {
  name: string;
  label: string;
  value?: string;
  options: { value: string; label: string }[];
  placeholder?: string;
};

type Props = {
  /** Search placeholder. Ako nije zadato, prikazuje se "Pretraga". */
  searchPlaceholder?: string;
  searchName?: string;
  searchValue?: string;
  /** Dropdown filteri — preserve-uju se kao hidden input-i + select-i. */
  filters?: SelectFilter[];
  /** Reset link — ide na base path bez bilo kog filtera. */
  resetHref?: string;
  /** Custom akcije sa desne strane (npr. CSV export, "Nova kompanija" itd.). */
  actions?: React.ReactNode;
};

/**
 * Konzistentan search + filter + reset bar za sve admin listing stranice.
 * Server-rendered form sa GET submit-om — preserve-uje state preko URL-a,
 * što znači da se browser back/refresh radi tačno bez state-a u JS-u.
 *
 * Zamena za 8 puta kopiranu `<form>` u kompanije/recenzije/prijave/aktivnosti...
 */
export function AdminFilterBar({
  searchPlaceholder = "Pretraga",
  searchName = "q",
  searchValue,
  filters = [],
  resetHref,
  actions,
}: Props) {
  const hasFilters = Boolean(searchValue) || filters.some((f) => f.value);

  return (
    <form
      method="get"
      className="surface flex flex-col gap-3 rounded-[1.5rem] p-3.5 sm:p-4 lg:flex-row lg:items-center"
    >
      <div className="flex-1">
        <label className="sr-only" htmlFor={`af-${searchName}`}>
          {searchPlaceholder}
        </label>
        <div className="relative">
          <svg
            className="pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-muted-foreground"
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            aria-hidden="true"
          >
            <circle cx="11" cy="11" r="8" />
            <path d="m21 21-4.3-4.3" />
          </svg>
          <input
            id={`af-${searchName}`}
            name={searchName}
            defaultValue={searchValue ?? ""}
            placeholder={searchPlaceholder}
            className="h-11 w-full rounded-2xl border border-border bg-white pl-11 pr-4 text-sm placeholder:text-muted-foreground focus:border-primary/40 focus:outline-none"
          />
        </div>
      </div>

      {filters.map((filter) => (
        <select
          key={filter.name}
          name={filter.name}
          defaultValue={filter.value ?? ""}
          aria-label={filter.label}
          className="h-11 rounded-2xl border border-border bg-white px-4 text-sm text-foreground focus:border-primary/40 focus:outline-none lg:min-w-[180px]"
        >
          <option value="">{filter.placeholder ?? `Svi ${filter.label.toLowerCase()}`}</option>
          {filter.options.map((opt) => (
            <option key={opt.value} value={opt.value}>
              {opt.label}
            </option>
          ))}
        </select>
      ))}

      <div className="flex flex-wrap items-center gap-2 lg:ml-auto">
        <button
          type="submit"
          className="inline-flex h-11 items-center justify-center rounded-full bg-primary px-5 text-sm font-semibold text-primary-foreground transition hover:bg-primary/90"
        >
          Primeni
        </button>
        {hasFilters && resetHref && (
          <Link
            href={resetHref}
            className="inline-flex h-11 items-center justify-center rounded-full border border-border bg-white px-4 text-sm font-semibold text-muted-foreground transition hover:border-primary/40 hover:text-primary"
          >
            Resetuj
          </Link>
        )}
        {actions}
      </div>
    </form>
  );
}