// react
import React from "react";
import { IReportFilters } from "~/admin/interfaces/reports";

interface Props {
  filters: IReportFilters;
  onChange: (name: string, value: string) => void;
}

function ReportFilters({ filters, onChange }: Props) {
  // Función para limpiar filtros de fecha y ver todo
  const handleClearDates = () => {
    onChange("startDate", "");
    onChange("endDate", "");
  };

  return (
    <div className="report-filters">
      <div className="row">
        <div className="col-md-6">
          <div className="form-group">
            <label className="font-weight-bold">Tipo de Reporte</label>
            <select
              className="form-control"
              value={filters.type}
              onChange={(e) => onChange("type", e.target.value)}
            >
              <option value="productos">Productos</option>
              <option value="vehiculos">Vehículos</option>
              <option value="ofertas">Ofertas</option>
            </select>
          </div>
        </div>
        <div className="col-md-6">
          <div className="form-group">
            <label className="font-weight-bold">Límite</label>
            <input
              type="number"
              min="1"
              className="form-control"
              placeholder="Ej: 100"
              value={filters.limit}
              onChange={(e) => onChange("limit", e.target.value)}
            />
            <small className="text-muted">
              Deja vacío para exportar todos los productos
            </small>
          </div>
        </div>
      </div>

      <div className="row align-items-end">
        <div className="col-md-5">
          <div className="form-group mb-md-0">
            <label className="font-weight-bold">Fecha de Inicio</label>
            <input
              type="date"
              className="form-control"
              value={filters.startDate}
              onChange={(e) => onChange("startDate", e.target.value)}
            />
          </div>
        </div>
        <div className="col-md-5">
          <div className="form-group mb-md-0">
            <label className="font-weight-bold">Fecha de Fin</label>
            <input
              type="date"
              className="form-control"
              value={filters.endDate}
              onChange={(e) => onChange("endDate", e.target.value)}
            />
          </div>
        </div>

      </div>

      {/* Indicador visual opcional si hay filtros activos */}
      {(filters.startDate || filters.endDate) && (
        <div className="mt-2">
          <small className="text-muted">
            Filtrando desde: <b>{filters.startDate || "Inicio"}</b> hasta:{" "}
            <b>{filters.endDate || "Hoy"}</b>
          </small>
        </div>
      )}
    </div>
  );
}

export default ReportFilters;