import { DateField } from "@/components/shared/date-picker";

interface AdminFilterBarProps {
  /** URL base (mis. `/admin/refunds`) yang menerima query params. */
  action: string;
  /** Nilai current dari searchParams. */
  values: {
    tab?: string;
    dateFrom?: string;
    dateTo?: string;
    reviewer?: string;
    reason?: string;
  };
  /** Daftar admin email untuk dropdown reviewer/processor. */
  reviewerOptions: string[];
  /** Label dropdown reviewer (mis. "Reviewer", "Processor"). */
  reviewerLabel?: string;
  /** Kalau diisi, tampilkan dropdown reason dengan opsi-opsi tersebut. */
  reasonOptions?: { value: string; label: string }[];
}

/**
 * Filter bar reusable untuk admin list pages. Pakai GET form supaya URL
 * shareable dan tidak perlu state client.
 */
export function AdminFilterBar({
  action,
  values,
  reviewerOptions,
  reviewerLabel = "Reviewer",
  reasonOptions,
}: AdminFilterBarProps) {
  return (
    <form
      method="get"
      action={action}
      className="mb-4 rounded-2xl border border-neutral-200 bg-white p-3 shadow-sm sm:p-4"
    >
      {/* Preserve tab via hidden input */}
      {values.tab && <input type="hidden" name="tab" value={values.tab} />}

      <div className="grid gap-3 sm:grid-cols-4">
        <div>
          <label
            htmlFor="filter-dateFrom"
            className="mb-1 block text-[10px] font-semibold uppercase tracking-wide text-neutral-500"
          >
            Dari tanggal
          </label>
          <DateField
            id="filter-dateFrom"
            name="dateFrom"
            defaultValueYmd={values.dateFrom}
            placeholder="Dari tanggal"
          />
        </div>

        <div>
          <label
            htmlFor="filter-dateTo"
            className="mb-1 block text-[10px] font-semibold uppercase tracking-wide text-neutral-500"
          >
            Sampai tanggal
          </label>
          <DateField
            id="filter-dateTo"
            name="dateTo"
            defaultValueYmd={values.dateTo}
            placeholder="Sampai tanggal"
          />
        </div>

        <div>
          <label
            htmlFor="filter-reviewer"
            className="mb-1 block text-[10px] font-semibold uppercase tracking-wide text-neutral-500"
          >
            {reviewerLabel}
          </label>
          <select
            id="filter-reviewer"
            name="reviewer"
            defaultValue={values.reviewer ?? ""}
            className="w-full rounded-lg border border-neutral-200 bg-neutral-50 px-2 py-1.5 text-sm text-neutral-800 focus:border-primary-400 focus:bg-white"
          >
            <option value="">Semua</option>
            {reviewerOptions.map((email) => (
              <option key={email} value={email}>
                {email}
              </option>
            ))}
          </select>
        </div>

        {reasonOptions ? (
          <div>
            <label
              htmlFor="filter-reason"
              className="mb-1 block text-[10px] font-semibold uppercase tracking-wide text-neutral-500"
            >
              Reason
            </label>
            <select
              id="filter-reason"
              name="reason"
              defaultValue={values.reason ?? ""}
              className="w-full rounded-lg border border-neutral-200 bg-neutral-50 px-2 py-1.5 text-sm text-neutral-800 focus:border-primary-400 focus:bg-white"
            >
              <option value="">Semua</option>
              {reasonOptions.map((opt) => (
                <option key={opt.value} value={opt.value}>
                  {opt.label}
                </option>
              ))}
            </select>
          </div>
        ) : (
          <div className="flex items-end">
            <button
              type="submit"
              className="w-full rounded-lg bg-primary-600 px-3 py-1.5 text-sm font-semibold text-white hover:bg-primary-700"
            >
              Terapkan
            </button>
          </div>
        )}
      </div>

      {reasonOptions && (
        <div className="mt-3 flex gap-2">
          <button
            type="submit"
            className="rounded-lg bg-primary-600 px-4 py-1.5 text-sm font-semibold text-white hover:bg-primary-700"
          >
            Terapkan
          </button>
          <a
            href={`${action}${values.tab ? `?tab=${values.tab}` : ""}`}
            className="rounded-lg border border-neutral-200 bg-white px-4 py-1.5 text-sm font-semibold text-neutral-600 hover:bg-neutral-50"
          >
            Reset
          </a>
        </div>
      )}
    </form>
  );
}
