import React, { useMemo, useState, useEffect } from 'react';
import { Form, Table } from 'react-bootstrap';
import { ChevronLeft, ChevronRight, FilterX } from 'lucide-react';
import { CupsTableRow } from './CupsTableRow';
import styles from '../../UniClienteMultiPunto/ContratoMultiPuntoRefactored.module.css';
import {
    createEmptyPropuestaCupsFilters,
    propuestaCupsRowMatchesFilters,
    type PropuestaCupsFilters,
} from './propuestaCupsTableFilter';

interface CupsTableProps {
  cupsList: any[];
  tipo: 'electrico' | 'gas';
  isMultiCliente?: boolean;
  isEditing: (rowId: string) => boolean;
  getEditData: (rowId: string) => any;
  formatFecha: (fecha: string | undefined) => string;
  getEstadoContratoLabel: (estado: number) => string;
  comercializadoras: any[];
  productos: any[];
  anexos: any[];
  onFieldChange: (rowId: string, field: string, value: any) => void;
  onEdit: (rowId: string, cups: any) => void;
  onSave: (rowId: string) => void;
  onCancel: (rowId: string) => void;
  onDelete: (rowId: string) => void;
  showModalPrecios: string | null;
  onShowModalPrecios: (rowId: string) => void;
  onCloseModalPrecios: () => void;
}

const filterControlClass = `form-control form-control-sm ${styles.filterInput} rounded-2 border-secondary-subtle shadow-sm`;
const filterSelectClass = `form-select form-select-sm ${styles.filterSelect} rounded-2 border-secondary-subtle shadow-sm`;

/**
 * Componente de tabla de CUPS (eléctrico o gas) — edición propuesta comercial
 */
export const CupsTable: React.FC<CupsTableProps> = ({
  cupsList,
  tipo,
  isMultiCliente = false,
  isEditing,
  getEditData,
  formatFecha,
  getEstadoContratoLabel,
  comercializadoras,
  productos,
  anexos,
  onFieldChange,
  onEdit,
  onSave,
  onCancel,
  onDelete,
  showModalPrecios,
  onShowModalPrecios,
    onCloseModalPrecios,
}) => {
  const isElectric = tipo === 'electrico';
  const tableContainerRef = React.useRef<HTMLDivElement>(null);
  const hasServicioCO = true;

    const [filters, setFilters] = useState<PropuestaCupsFilters>(() =>
        createEmptyPropuestaCupsFilters(isMultiCliente, isElectric)
    );

    useEffect(() => {
        setFilters(createEmptyPropuestaCupsFilters(isMultiCliente, isElectric));
    }, [isMultiCliente, isElectric]);

    const clearFilters = () => {
        setFilters(createEmptyPropuestaCupsFilters(isMultiCliente, isElectric));
    };

    const filteredCupsList = useMemo(() => {
        return cupsList.filter((cups) =>
            propuestaCupsRowMatchesFilters(cups, filters, {
                isMultiCliente,
                isElectric,
                getEstadoContratoLabel,
                formatFecha,
            })
        );
    }, [cupsList, filters, isMultiCliente, isElectric, getEstadoContratoLabel, formatFecha]);

    const setFilter = (key: string, value: string) => {
        setFilters((prev) => ({ ...prev, [key]: value }));
    };

  const scrollLeft = () => {
    if (tableContainerRef.current) {
      tableContainerRef.current.scrollBy({ left: -300, behavior: 'smooth' });
    }
  };

  const scrollRight = () => {
    if (tableContainerRef.current) {
      tableContainerRef.current.scrollBy({ left: 300, behavior: 'smooth' });
    }
  };

  return (
    <div>
            <div
                className={`d-flex justify-content-between align-items-center mb-2 gap-2 flex-wrap ${styles.tableToolbar}`}
            >
                <div className="d-flex align-items-center gap-2 flex-wrap">
                    <button
                        type="button"
                        className="btn btn-outline-secondary btn-sm rounded-2 shadow-sm"
                        onClick={clearFilters}
                        title="Quitar todos los filtros"
                    >
                        <FilterX size={16} className="me-1" />
                        Limpiar filtros
                    </button>
                    <span className="text-muted small">
                        Mostrando {filteredCupsList.length} de {cupsList.length}
                    </span>
                </div>
                <div className="d-flex gap-2">
        <button
          type="button"
          className={`btn btn-sm ${styles.scrollButton}`}
          onClick={scrollLeft}
          title="Desplazar a la izquierda"
        >
          <ChevronLeft size={16} className="me-1" /> Izquierda
        </button>
        <button
          type="button"
          className={`btn btn-sm ${styles.scrollButton}`}
          onClick={scrollRight}
          title="Desplazar a la derecha"
        >
          Derecha <ChevronRight size={16} className="ms-1" />
        </button>
                </div>
      </div>
      <div ref={tableContainerRef} className={styles.tableResponsive}>
        <Table bordered hover className="table-striped mb-0">
                    <thead className="table-light">
                        <tr>
                            <th className={styles.thStickyHeader}>CUPS</th>
                            {isMultiCliente && (
                                <>
                                    <th className={styles.thStickyHeader}>Cliente</th>
                                    <th className={styles.thStickyHeader}>CIF/NIF</th>
                                    <th className={styles.thStickyHeader}>Razón Social</th>
                                </>
                            )}
                            <th className={styles.thStickyHeader}>Dirección</th>
                            <th className={styles.thStickyHeader}>Tarifa</th>
                            <th className={styles.thStickyHeader}>Tipo de Precio</th>
                            <th className={styles.thStickyHeader}>Consumo Anual</th>
                            {isElectric && <th className={styles.thStickyHeader}>Potencias (kW)</th>}
                            <th className={styles.thStickyHeader}>Comercializadora</th>
                            <th className={styles.thStickyHeader}>Producto</th>
                            <th className={styles.thStickyHeader}>Anexo</th>
                            <th className={styles.thStickyHeader}>Permanencia</th>
                            <th className={styles.thStickyHeader}>GDO</th>
                            <th className={styles.thStickyHeader}>Valor GDO</th>
                            <th className={styles.thStickyHeader}>Cambio Titular</th>
                            <th className={styles.thStickyHeader}>Cambio Potencia</th>
                            {hasServicioCO && <th className={styles.thStickyHeader}>Ventana de Precios</th>}
                            <th className={styles.thStickyHeader}>Fecha Activación</th>
                            <th className={styles.thStickyHeader}>Fecha Vencimiento</th>
                            <th className={styles.thStickyHeader}>N° Contrato Comercializadora</th>
                            <th className={styles.thStickyHeader}>OkCom</th>
                            <th className={styles.thStickyHeader}>Estado Contrato</th>
                            <th className={styles.thStickyHeader}>Acciones</th>
                        </tr>
                        <tr>
                            <th className={styles.thStickyFilter}>
                                <Form.Control
                                    type="text"
                                    className={filterControlClass}
                                    placeholder="Filtrar CUPS…"
                                    value={filters.cups}
                                    onChange={(e) => setFilter('cups', e.target.value)}
                                    aria-label="Filtrar por código CUPS"
                                />
                            </th>
          {isMultiCliente && (
            <>
                                    <th className={styles.thStickyFilter}>
                                        <Form.Control
                                            type="text"
                                            className={filterControlClass}
                                            placeholder="Cliente…"
                                            value={filters.clienteCod}
                                            onChange={(e) => setFilter('clienteCod', e.target.value)}
                                            aria-label="Filtrar por código cliente"
                                        />
                                    </th>
                                    <th className={styles.thStickyFilter}>
                                        <Form.Control
                                            type="text"
                                            className={filterControlClass}
                                            placeholder="CIF/NIF…"
                                            value={filters.cif}
                                            onChange={(e) => setFilter('cif', e.target.value)}
                                            aria-label="Filtrar por CIF/NIF"
                                        />
                                    </th>
                                    <th className={styles.thStickyFilter}>
                                        <Form.Control
                                            type="text"
                                            className={filterControlClass}
                                            placeholder="Razón social…"
                                            value={filters.razon}
                                            onChange={(e) => setFilter('razon', e.target.value)}
                                            aria-label="Filtrar por razón social"
                                        />
                                    </th>
            </>
          )}
                            <th className={styles.thStickyFilter}>
                                <Form.Control
                                    type="text"
                                    className={filterControlClass}
                                    placeholder="Dirección…"
                                    value={filters.direccion}
                                    onChange={(e) => setFilter('direccion', e.target.value)}
                                    aria-label="Filtrar por dirección"
                                />
                            </th>
                            <th className={styles.thStickyFilter}>
                                <Form.Control
                                    type="text"
                                    className={filterControlClass}
                                    placeholder="Tarifa…"
                                    value={filters.tarifa}
                                    onChange={(e) => setFilter('tarifa', e.target.value)}
                                    aria-label="Filtrar por tarifa"
                                />
                            </th>
                            <th className={styles.thStickyFilter}><Form.Select
                                    className={filterSelectClass}
                                    value={filters.tipo_precio}
                                    onChange={(e) => setFilter('tipo_precio', e.target.value)}
                                    aria-label="Filtrar por tipo de precio"
                                >
                                    <option value="">Todos</option>
                                    <option value="1">Fijo</option>
                                    <option value="2">Indexado</option>
                                </Form.Select>
                            </th> 
                            <th className={styles.thStickyFilter}>
                                <Form.Control
                                    type="text"
                                    className={filterControlClass}
                                    placeholder="Consumo…"
                                    value={filters.consumo}
                                    onChange={(e) => setFilter('consumo', e.target.value)}
                                    aria-label="Filtrar por consumo"
                                />
                            </th>
                            {isElectric && (
                                <th className={styles.thStickyFilter}>
                                    <Form.Control
                                        type="text"
                                        className={filterControlClass}
                                        placeholder="Potencias…"
                                        value={filters.potencias ?? ''}
                                        onChange={(e) => setFilter('potencias', e.target.value)}
                                        aria-label="Filtrar por potencias"
                                    />
                                </th>
                            )}
                            <th className={styles.thStickyFilter}>
                                <Form.Select
                                    className={filterSelectClass}
                                    value={filters.comercializadora}
                                    onChange={(e) => setFilter('comercializadora', e.target.value)}
                                    aria-label="Filtrar por comercializadora"
                                >
                                    <option value="">Todas</option>
                                    {comercializadoras.map((c: any) => (
                                        <option key={c.CodCom} value={String(c.CodCom)}>
                                            {c.RazSocCom ?? c.NomComCom ?? c.NomCom ?? `Com. ${c.CodCom}`}
                                        </option>
                                    ))}
                                </Form.Select>
                            </th>
                            <th className={styles.thStickyFilter}>
                                <Form.Select
                                    className={filterSelectClass}
                                    value={filters.producto}
                                    onChange={(e) => setFilter('producto', e.target.value)}
                                    aria-label="Filtrar por producto"
                                >
                                    <option value="">Todos</option>
                                    {productos.map((p: any) => (
                                        <option key={p.CodPro} value={String(p.CodPro)}>
                                            {p.DesPro}
                                        </option>
                                    ))}
                                </Form.Select>
                            </th>
                            <th className={styles.thStickyFilter}>
                                <Form.Select
                                    className={filterSelectClass}
                                    value={filters.anexo}
                                    onChange={(e) => setFilter('anexo', e.target.value)}
                                    aria-label="Filtrar por anexo"
                                >
                                    <option value="">Todos</option>
                                    {anexos.map((a: any) => (
                                        <option key={a.CodAnePro} value={String(a.CodAnePro)}>
                                            {a.DesAnePro}
                                        </option>
                                    ))}
                                </Form.Select>
                            </th>
                            <th className={styles.thStickyFilter}>
                                <Form.Select
                                    className={filterSelectClass}
                                    value={filters.permanencia || ''}
                                    onChange={(e) => setFilter('permanencia', e.target.value)}
                                    aria-label="Filtrar por permanencia"
                                >
                                    <option value="">—</option>
                                    <option value="1">Sí</option>
                                    <option value="0">No</option>
                                </Form.Select>
                            </th>
                            <th className={styles.thStickyFilter}>
                                <Form.Select
                                    className={filterSelectClass}
                                    value={filters.gdo}
                                    onChange={(e) => setFilter('gdo', e.target.value)}
                                    aria-label="Filtrar por GDO"
                                >
                                    <option value="">—</option>
                                    <option value="1">Sí</option>
                                    <option value="0">No</option>
                                </Form.Select>
                            </th>
                            <th className={styles.thStickyFilter}>
                                <Form.Control
                                    type="text"
                                    className={filterControlClass}
                                    placeholder="Valor GDO…"
                                    value={filters.valorGdo}
                                    onChange={(e) => setFilter('valorGdo', e.target.value)}
                                    aria-label="Filtrar por valor GDO"
                                />
                            </th>
                            <th className={styles.thStickyFilter}>
                                <Form.Select
                                    className={filterSelectClass}
                                    value={filters.cambioTitular}
                                    onChange={(e) => setFilter('cambioTitular', e.target.value)}
                                    aria-label="Filtrar por cambio titular"
                                >
                                    <option value="">—</option>
                                    <option value="1">Sí</option>
                                    <option value="0">No</option>
                                </Form.Select>
                            </th>
                            <th className={styles.thStickyFilter}>
                                <Form.Select
                                    className={filterSelectClass}
                                    value={filters.cambioPotencia}
                                    onChange={(e) => setFilter('cambioPotencia', e.target.value)}
                                    aria-label="Filtrar por cambio potencia"
                                >
                                    <option value="">—</option>
                                    <option value="1">Sí</option>
                                    <option value="0">No</option>
                                </Form.Select>
                            </th>
                            {hasServicioCO && (
                                <th className={styles.thStickyFilter}>
                                    <Form.Control
                                        type="text"
                                        className={filterControlClass}
                                        placeholder="Ventana…"
                                        value={filters.ventana}
                                        onChange={(e) => setFilter('ventana', e.target.value)}
                                        aria-label="Filtrar por ventana de precios"
                                    />
                                </th>
                            )}
                            <th className={styles.thStickyFilter}>
                                <Form.Control
                                    type="text"
                                    className={filterControlClass}
                                    placeholder="F. activación…"
                                    value={filters.fecAct}
                                    onChange={(e) => setFilter('fecAct', e.target.value)}
                                    aria-label="Filtrar por fecha activación"
                                />
                            </th>
                            <th className={styles.thStickyFilter}>
                                <Form.Control
                                    type="text"
                                    className={filterControlClass}
                                    placeholder="F. vencimiento…"
                                    value={filters.fecVen}
                                    onChange={(e) => setFilter('fecVen', e.target.value)}
                                    aria-label="Filtrar por fecha vencimiento"
                                />
                            </th>
                            <th className={styles.thStickyFilter}>
                                <Form.Control
                                    type="text"
                                    className={filterControlClass}
                                    placeholder="N° contrato…"
                                    value={filters.nrContrato}
                                    onChange={(e) => setFilter('nrContrato', e.target.value)}
                                    aria-label="Filtrar por número de contrato"
                                />
                            </th>
                            <th className={styles.thStickyFilter}>
                                <Form.Select
                                    className={filterSelectClass}
                                    value={filters.okCom}
                                    onChange={(e) => setFilter('okCom', e.target.value)}
                                    aria-label="Filtrar por OkCom"
                                >
                                    <option value="">Todos</option>
                                    <option value="0">N/A</option>
                                    <option value="1">OKCOM</option>
                                </Form.Select>
                            </th>
                            <th className={styles.thStickyFilter}>
                                <Form.Control
                                    type="text"
                                    className={filterControlClass}
                                    placeholder="Estado…"
                                    value={filters.estado}
                                    onChange={(e) => setFilter('estado', e.target.value)}
                                    aria-label="Filtrar por estado contrato"
                                />
                            </th>
                            <th className={styles.thStickyFilter} />
        </tr>
      </thead>
      <tbody>
                        {filteredCupsList.map((cups) => {
          const rowId = `${tipo}-${cups.CodProComCup}`;
          const currentIsEditing = isEditing(rowId);
          const currentEditData = getEditData(rowId);

          return (
            <CupsTableRow
              key={rowId}
              cups={cups}
              rowId={rowId}
              isEditing={currentIsEditing}
              editData={currentEditData}
              formatFecha={formatFecha}
              getEstadoContratoLabel={getEstadoContratoLabel}
              comercializadoras={comercializadoras}
              productos={productos}
              anexos={anexos}
              onFieldChange={(field, value) => onFieldChange(rowId, field, value)}
              onEdit={() => onEdit(rowId, cups)}
              onSave={() => onSave(rowId)}
              onCancel={() => onCancel(rowId)}
              onDelete={() => onDelete(rowId)}
              tipo={tipo}
              isMultiCliente={isMultiCliente}
              showModalPrecios={showModalPrecios}
              onShowModalPrecios={onShowModalPrecios}
              onCloseModalPrecios={onCloseModalPrecios}
            />
          );
        })}
      </tbody>
    </Table>
      </div>
    </div>
  );
};