import { Plus, Trash2 } from "lucide-react";
import { Input } from "@/components/ui/input";
import {
  createEmptyApiQueryFilter,
  normalizeApiQueryFilters,
  type ApiQueryFilter,
} from "@/lib/apiQueryFilters";

const labelCls = "block text-sm font-medium text-slate-700 mb-1.5";

type ApiQueryFiltersEditorProps = {
  filters: unknown;
  onChange: (filters: ApiQueryFilter[]) => void;
};

export function ApiQueryFiltersEditor({ filters, onChange }: ApiQueryFiltersEditorProps) {
  const rows = normalizeApiQueryFilters(filters);

  const addFilter = () => {
    onChange([...rows, createEmptyApiQueryFilter()]);
  };

  const removeFilter = (index: number) => {
    onChange(rows.filter((_, i) => i !== index));
  };

  const updateFilter = (index: number, patch: Partial<ApiQueryFilter>) => {
    const next = [...rows];
    next[index] = { ...next[index], ...patch };
    onChange(next);
  };

  return (
    <div className="mb-4">
      <div className="flex items-center justify-between gap-2 mb-2">
        <label className={labelCls}>API query filters (optional)</label>
        <button
          type="button"
          onClick={addFilter}
          className="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-medium rounded-md border border-slate-300 bg-white hover:bg-slate-50 shrink-0"
        >
          <Plus size={14} /> Add filter
        </button>
      </div>
      <p className="text-xs text-slate-500 mb-2">
        Append query-string parameters to the API request (for example, <code className="text-[11px]">schoolId</code>).
      </p>
      {rows.length === 0 ? (
        <p className="text-sm text-slate-500 p-3 border border-dashed border-slate-300 rounded-lg bg-slate-50/50">
          No filters yet. Click &ldquo;Add filter&rdquo; to add one.
        </p>
      ) : (
        <div className="space-y-2 border border-slate-200 rounded-lg p-3 bg-slate-50/50">
          {rows.map((filter, index) => (
            <div key={index} className="flex flex-wrap items-center gap-2 p-2 bg-white rounded border border-slate-200">
              <Input
                value={filter.key}
                onChange={(e) => updateFilter(index, { key: e.target.value })}
                placeholder="Parameter name"
                className="flex-1 min-w-[120px] font-mono text-sm"
              />
              <Input
                value={filter.value}
                onChange={(e) => updateFilter(index, { value: e.target.value })}
                placeholder="Value"
                className="flex-1 min-w-[120px] font-mono text-sm"
              />
              <button
                type="button"
                onClick={() => removeFilter(index)}
                className="p-1.5 text-red-600 hover:bg-red-50 rounded shrink-0"
                title="Remove filter"
              >
                <Trash2 size={16} />
              </button>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}