/**
 * Componente de filtro para columnas del DocumentTable
 * Soporte filtros por texto, rango de fechas y rango numérico
 */

"use client";

import { FC, useMemo } from "react";
import { Column } from "@tanstack/react-table";
import { Documento } from "@/types/document";
import { formatComplexValue } from "./utils";

interface FilterComponentProps {
  column: Column<Documento, unknown>;
  tableData: Documento[];
}

type RangeFilterValue = [string, string] | null | undefined;

const FilterComponent: FC<FilterComponentProps> = ({ column, tableData }) => {
  const columnId = column.id;
  const filterValue = column.getFilterValue();

  // Detectar si es columna de fecha
  const isDateColumn =
    columnId.toLowerCase().includes("fecha") ||
    columnId.toLowerCase().includes("date");

  // Detectar si es columna numérica
  const isNumericColumn = useMemo(() => {
    const sample = tableData.find(
      (row) =>
        row.extractedData &&
        typeof row.extractedData === "object" &&
        !Array.isArray(row.extractedData) &&
        columnId in row.extractedData
    );
    if (!sample) return false;
    const val =
      sample.extractedData &&
        typeof sample.extractedData === "object" &&
        !Array.isArray(sample.extractedData)
        ? (sample.extractedData as Record<string, unknown>)[columnId]
        : undefined;
    return !isNaN(parseFloat(String(val))) && isFinite(parseFloat(String(val)));
  }, [tableData, columnId]);

  // Obtener valores únicos para filtros select
  const uniqueValues = useMemo(() => {
    const values = new Set<string>();
    tableData.forEach((row) => {
      if (
        row.extractedData &&
        typeof row.extractedData === "object" &&
        !Array.isArray(row.extractedData)
      ) {
        const val = (row.extractedData as Record<string, unknown>)[columnId];
        const formattedVal = formatComplexValue(val);
        if (formattedVal) values.add(formattedVal);
      }
    });
    return Array.from(values).slice(0, 20);
  }, [tableData, columnId]);

  const inputBaseClass = "text-xs p-1.5 border border-border-subtle rounded-md bg-background focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all";

  // Renderizado para filtro de fecha
  if (isDateColumn) {
    const rangeValue = filterValue as RangeFilterValue;
    return (
      <div className="flex gap-1.5 mt-2">
        <input
          type="date"
          value={Array.isArray(rangeValue) ? rangeValue[0] || "" : ""}
          onChange={(e) =>
            column.setFilterValue((old: RangeFilterValue) => [
              e.target.value,
              old?.[1] || "",
            ])
          }
          className={`${inputBaseClass} w-full`}
        />
        <input
          type="date"
          value={Array.isArray(rangeValue) ? rangeValue[1] || "" : ""}
          onChange={(e) =>
            column.setFilterValue((old: RangeFilterValue) => [
              old?.[0] || "",
              e.target.value,
            ])
          }
          className={`${inputBaseClass} w-full`}
        />
      </div>
    );
  }

  // Renderizado para filtro numérico
  if (isNumericColumn) {
    const rangeValue = filterValue as RangeFilterValue;
    return (
      <div className="flex gap-1.5 mt-2">
        <input
          type="number"
          placeholder="Mín"
          value={Array.isArray(rangeValue) ? rangeValue[0] || "" : ""}
          onChange={(e) =>
            column.setFilterValue((old: RangeFilterValue) => [
              e.target.value,
              old?.[1] || "",
            ])
          }
          className={`${inputBaseClass} w-20`}
        />
        <input
          type="number"
          placeholder="Máx"
          value={Array.isArray(rangeValue) ? rangeValue[1] || "" : ""}
          onChange={(e) =>
            column.setFilterValue((old: RangeFilterValue) => [
              old?.[0] || "",
              e.target.value,
            ])
          }
          className={`${inputBaseClass} w-20`}
        />
      </div>
    );
  }

  // Renderizado para filtro select (cuando hay pocos valores únicos)
  if (uniqueValues.length > 1 && uniqueValues.length <= 10) {
    return (
      <select
        value={(filterValue as string) || ""}
        onChange={(e) => column.setFilterValue(e.target.value || undefined)}
        className={`${inputBaseClass} w-full cursor-pointer`}
      >
        <option value="">Todos</option>
        {uniqueValues.map((val) => (
          <option key={val} value={val}>
            {val}
          </option>
        ))}
      </select>
    );
  }

  // Renderizado para filtro de texto por defecto
  return (
    <input
      type="text"
      value={(filterValue as string) ?? ""}
      onChange={(e) => column.setFilterValue(e.target.value)}
      placeholder="Filtrar..."
      className={`${inputBaseClass} w-full`}
    />
  );
};

export default FilterComponent;