import { Input, Select, Button } from "antd";
import { SearchOutlined, ReloadOutlined } from "@ant-design/icons";
import { useEffect, useState } from "react";

interface FilterOption {
  label: string;
  value: string | number;
}

interface FilterTabProps<T extends Record<string, any>> {
  dataSource?: T[];
  searchKeys?: (keyof T)[];
  searchPlaceholder?: string;
  showSearch?: boolean;
  filters?: {
    key: keyof T;
    label: string;
    options: FilterOption[];
    placeholder?: string;
  }[];
  onDataChange?: (filtered: T[]) => void;
  onSearch?: (value: string) => void;
  onReset?: () => void;
  onFilterChange?: (key: keyof T, value: string | number | null) => void;
  extra?: React.ReactNode;
}

function FilterTab<T extends Record<string, any>>({
  dataSource = [],
  searchKeys = [],
  searchPlaceholder = "Search...",
  showSearch = true,
  filters = [],
  onDataChange,
  onSearch,
  onReset,
  onFilterChange,
  extra,
}: FilterTabProps<T>) {
  const [searchValue, setSearchValue] = useState("");
  const [filterValues, setFilterValues] = useState<
    Record<string, string | number | null>
  >({});
  const [filteredData, setFilteredData] = useState<T[]>(dataSource);

  // Handle manual search/filter apply
  const handleApplyFilters = () => {
    let filtered = [...dataSource];

    // 1️⃣ Apply text search
    if (searchValue && searchKeys.length) {
      filtered = filtered.filter((item) =>
        searchKeys.some((key) =>
          String(item[key]).toLowerCase().includes(searchValue.toLowerCase())
        )
      );
    }

    // 2️⃣ Apply dropdown filters
    for (const key in filterValues) {
      const value = filterValues[key];
      if (value) filtered = filtered.filter((item) => item[key] === value);
    }

    // Update local and parent
    setFilteredData(filtered);
    onDataChange?.(filtered);
    onSearch?.(searchValue);
  };

  // Handle reset
  const handleReset = () => {
    setSearchValue("");
    setFilterValues({});
    setFilteredData(dataSource);
    onReset?.();
    onDataChange?.(dataSource);
  };

  const handleFilterChange = (key: keyof T, value: string | number | null) => {
    setFilterValues((prev) => ({ ...prev, [key]: value }));
    onFilterChange?.(key, value);
  };

  useEffect(() => {
    onDataChange(filteredData);
  }, [filteredData]);

  return (
    <div className="flex flex-wrap items-center justify-between gap-3 bg-white p-2">
      <div className="flex flex-wrap items-center gap-3">
        {/* 🔍 Search Input */}
        {showSearch && (
          <Input
            allowClear
            value={searchValue}
            onChange={(e) => setSearchValue(e.target.value)}
            onPressEnter={handleApplyFilters}
            placeholder={searchPlaceholder}
            prefix={<SearchOutlined />}
            className="w-60"
          />
        )}

        {/* 🔽 Filter Selects */}
        {filters.map((filter) => (
          <Select
            key={String(filter.key)}
            allowClear
            placeholder={filter.placeholder ?? filter.label}
            style={{ width: 180 }}
            options={filter.options}
            value={filterValues[filter.key as string] ?? null}
            onChange={(value) => handleFilterChange(filter.key, value ?? null)}
          />
        ))}

        {/* 🔘 Search/Filter Button */}
        <Button
          type="primary"
          icon={<SearchOutlined />}
          onClick={handleApplyFilters}
        >
          Search
        </Button>

        {/* 🔄 Reset */}
        <Button icon={<ReloadOutlined />} onClick={handleReset}>
          Reset
        </Button>
      </div>

      {/* âž• Extra Actions */}
      {extra && <div className="flex items-center">{extra}</div>}
    </div>
  );
}

export default FilterTab;