import type { AdminFilters, PlatformDto } from "../_lib/types";
import { Field } from "./ui";

export default function FilterBar({
  draft,
  setDraft,
  platformOptions,
  roleOptions,
  caliberOptions,
  loading,
  onApply,
  onClear,
}: {
  draft: AdminFilters;
  setDraft: React.Dispatch<React.SetStateAction<AdminFilters>>;
  platformOptions: PlatformDto[];
  roleOptions: string[];
  caliberOptions: string[];
  loading: boolean;
  onApply: () => void;
  onClear: () => void;
}) {
  return (
    <div className="mb-3 rounded-md border border-zinc-800 bg-zinc-950/40 p-3">
      <div className="flex flex-wrap items-end gap-2">
        <Field label="Search" widthClass="min-w-[260px] flex-1">
          <input
            value={draft.q}
            onChange={(e) => setDraft((s) => ({ ...s, q: e.target.value }))}
            placeholder="name, slug, mpn, upc…"
            className="w-full rounded-md border border-zinc-700 bg-black px-3 py-2 text-sm"
          />
        </Field>

        <Field label="Platform">
          <select
            value={draft.platform}
            onChange={(e) =>
              setDraft((s) => ({ ...s, platform: e.target.value }))
            }
            className="w-full rounded-md border border-zinc-700 bg-black px-3 py-2 text-sm"
          >
            <option value="">Any</option>
            {platformOptions.map((p) => (
              <option key={p.key} value={p.key}>
                {p.key}
              </option>
            ))}
          </select>
        </Field>

        <Field label="Role">
          <select
            value={draft.partRole}
            onChange={(e) =>
              setDraft((s) => ({ ...s, partRole: e.target.value }))
            }
            className="w-full rounded-md border border-zinc-700 bg-black px-3 py-2 text-sm"
          >
            <option value="">Any</option>
            {roleOptions.map((r) => (
              <option key={r || "any"} value={r}>
                {r || "Any"}
              </option>
            ))}
          </select>
        </Field>

        <Field label="Caliber">
          <select
            value={draft.caliber}
            onChange={(e) =>
              setDraft((s) => ({ ...s, caliber: e.target.value }))
            }
            className="w-full rounded-md border border-zinc-700 bg-black px-3 py-2 text-sm"
          >
            <option value="">Any</option>
            <option value="__UNSET__">— Not set —</option>

            {caliberOptions
              .filter((c) => c)
              .map((c) => (
                <option key={c} value={c}>
                  {c}
                </option>
              ))}
          </select>
        </Field>

        <Field label="Visibility">
          <select
            value={draft.visibility}
            onChange={(e) =>
              setDraft((s) => ({ ...s, visibility: e.target.value as any }))
            }
            className="w-full rounded-md border border-zinc-700 bg-black px-3 py-2 text-sm"
          >
            <option value="">Any</option>
            <option value="PUBLIC">PUBLIC</option>
            <option value="HIDDEN">HIDDEN</option>
          </select>
        </Field>

        <Field label="Status">
          <select
            value={draft.status}
            onChange={(e) =>
              setDraft((s) => ({ ...s, status: e.target.value as any }))
            }
            className="w-full rounded-md border border-zinc-700 bg-black px-3 py-2 text-sm"
          >
            <option value="">Any</option>
            <option value="ACTIVE">ACTIVE</option>
            <option value="DISABLED">DISABLED</option>
            <option value="ARCHIVED">ARCHIVED</option>
          </select>
        </Field>

        <Field label="Builder">
          <select
            value={draft.builderEligible}
            onChange={(e) =>
              setDraft((s) => ({
                ...s,
                builderEligible: e.target.value as any,
              }))
            }
            className="w-full rounded-md border border-zinc-700 bg-black px-3 py-2 text-sm"
          >
            <option value="">Any</option>
            <option value="true">Eligible</option>
            <option value="false">Not eligible</option>
          </select>
        </Field>

        <Field label="Locked">
          <select
            value={draft.adminLocked}
            onChange={(e) =>
              setDraft((s) => ({ ...s, adminLocked: e.target.value as any }))
            }
            className="w-full rounded-md border border-zinc-700 bg-black px-3 py-2 text-sm"
          >
            <option value="">Any</option>
            <option value="true">Locked</option>
            <option value="false">Unlocked</option>
          </select>
        </Field>

        <div className="ml-auto flex items-center gap-2">
          <button
            className="rounded-md bg-emerald-600 px-3 py-2 text-sm hover:bg-emerald-500 disabled:opacity-50"
            onClick={onApply}
            disabled={loading}
          >
            Apply
          </button>

          <button
            className="rounded-md border border-zinc-700 px-3 py-2 text-sm hover:bg-zinc-900"
            onClick={onClear}
            disabled={loading}
          >
            Clear
          </button>
        </div>
      </div>
    </div>
  );
}
