"use client";

import { FieldType } from "@capakraken/shared";
import type { BlueprintFieldDefinition } from "@capakraken/shared";
import type { CustomFieldFilter } from "~/hooks/useFilters.js";

interface Props {
  /** Filterable field definitions from global blueprints */
  filterableFields: (BlueprintFieldDefinition & { blueprintName: string })[];
  activeFilters: CustomFieldFilter[];
  onSetFilter: (key: string, value: string, type: FieldType) => void;
}

const INPUT_CLS =
  "px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-500 text-sm bg-white";

export function CustomFieldFilterBar({ filterableFields, activeFilters, onSetFilter }: Props) {
  if (filterableFields.length === 0) return null;

  function getValue(key: string) {
    return activeFilters.find((f) => f.key === key)?.value ?? "";
  }

  return (
    <div className="flex flex-wrap items-center gap-2 mt-2">
      <span className="text-xs font-medium text-gray-400 uppercase tracking-wider">Custom:</span>
      {filterableFields.map((field) => {
        const value = getValue(field.key);

        if (field.type === FieldType.BOOLEAN) {
          return (
            <select
              key={field.key}
              value={value}
              onChange={(e) => onSetFilter(field.key, e.target.value, field.type)}
              className={INPUT_CLS}
              aria-label={field.label}
            >
              <option value="">{field.label}: any</option>
              <option value="true">Yes</option>
              <option value="false">No</option>
            </select>
          );
        }

        if (field.type === FieldType.SELECT && field.options && field.options.length > 0) {
          return (
            <select
              key={field.key}
              value={value}
              onChange={(e) => onSetFilter(field.key, e.target.value, field.type)}
              className={INPUT_CLS}
              aria-label={field.label}
            >
              <option value="">{field.label}: any</option>
              {field.options.map((opt) => (
                <option key={opt.value} value={opt.value}>{opt.label || opt.value}</option>
              ))}
            </select>
          );
        }

        if (field.type === FieldType.NUMBER) {
          return (
            <input
              key={field.key}
              type="number"
              value={value}
              onChange={(e) => onSetFilter(field.key, e.target.value, field.type)}
              placeholder={field.label}
              className={`${INPUT_CLS} w-32`}
              aria-label={field.label}
            />
          );
        }

        if (field.type === FieldType.DATE) {
          return (
            <input
              key={field.key}
              type="date"
              value={value}
              onChange={(e) => onSetFilter(field.key, e.target.value, field.type)}
              className={INPUT_CLS}
              aria-label={field.label}
            />
          );
        }

        // TEXT, TEXTAREA, URL, EMAIL, MULTI_SELECT — text search
        return (
          <input
            key={field.key}
            type="text"
            value={value}
            onChange={(e) => onSetFilter(field.key, e.target.value, field.type)}
            placeholder={field.label}
            className={`${INPUT_CLS} w-40`}
            aria-label={field.label}
          />
        );
      })}
    </div>
  );
}
