"use client";

import { useMemo } from "react";

// ─── Types ──────────────────────────────────────────────────────────────────

export interface WidgetFilter {
  type: "search" | "select" | "toggle";
  key: string;
  label?: string;
  placeholder?: string;
  options?: { value: string; label: string }[];
}

interface WidgetFilterBarProps {
  filters: WidgetFilter[];
  values: Record<string, unknown>;
  onChange: (update: Record<string, unknown>) => void;
}

// ─── Component ──────────────────────────────────────────────────────────────

export function WidgetFilterBar({ filters, values, onChange }: WidgetFilterBarProps) {
  const hasActiveFilters = useMemo(() => {
    return filters.some((f) => {
      const v = values[f.key];
      if (f.type === "toggle") return v === true;
      return typeof v === "string" && v.length > 0;
    });
  }, [filters, values]);

  return (
    <div className="flex flex-wrap items-center gap-1.5 px-1 pb-2">
      {filters.map((filter) => {
        switch (filter.type) {
          case "search":
            return (
              <div key={filter.key} className="relative">
                <svg
                  className="absolute left-1.5 top-1/2 -translate-y-1/2 w-3 h-3 text-gray-400 dark:text-gray-500 pointer-events-none"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z" />
                </svg>
                <input
                  type="text"
                  value={(values[filter.key] as string) ?? ""}
                  onChange={(e) => onChange({ [filter.key]: e.target.value })}
                  placeholder={filter.placeholder ?? "Search..."}
                  className="pl-6 pr-2 py-1 w-32 text-[11px] border border-gray-200 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-brand-500 focus:border-brand-500"
                />
              </div>
            );

          case "select":
            return (
              <select
                key={filter.key}
                value={(values[filter.key] as string) ?? ""}
                onChange={(e) => onChange({ [filter.key]: e.target.value })}
                className="py-1 px-1.5 text-[11px] border border-gray-200 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-brand-500 min-w-[80px] max-w-[130px]"
                title={filter.label}
              >
                <option value="">{filter.label ?? "All"}</option>
                {(filter.options ?? []).map((opt) => (
                  <option key={opt.value} value={opt.value}>
                    {opt.label}
                  </option>
                ))}
              </select>
            );

          case "toggle":
            return (
              <label
                key={filter.key}
                className="flex items-center gap-1 text-[11px] text-gray-600 dark:text-gray-400 cursor-pointer select-none"
              >
                <input
                  type="checkbox"
                  checked={!!values[filter.key]}
                  onChange={(e) => onChange({ [filter.key]: e.target.checked })}
                  className="rounded border-gray-300 dark:border-gray-600 text-brand-600 focus:ring-brand-500 h-3 w-3"
                />
                {filter.label}
              </label>
            );

          default:
            return null;
        }
      })}

      {hasActiveFilters && (
        <button
          type="button"
          onClick={() => {
            const reset: Record<string, unknown> = {};
            for (const f of filters) {
              reset[f.key] = f.type === "toggle" ? false : "";
            }
            onChange(reset);
          }}
          className="text-[10px] text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 px-1"
          title="Reset filters"
        >
          Reset
        </button>
      )}
    </div>
  );
}
