import React from 'react';
import { Modal, Button, Table, Form } from 'react-bootstrap';
import { Typeahead } from 'react-bootstrap-typeahead';
import estilosFoco from '../../Shared/estilosFocoAccesible.module.css';
import {
    ModalState,
    CUPsElectrico,
    CUPsGas,
    Cliente,
    Provincia,
    Localidad,
    PuntoSuministro
} from '../types';

interface CupsModalsProps {
    modalState: ModalState;
    cupsElectricos: CUPsElectrico[];
    cupsGas: CUPsGas[];
    filteredCupsElectricos: CUPsElectrico[];
    filteredCupsGas: CUPsGas[];
    selectedCupsElectricos: string[];
    selectedCupsGas: string[];
    filteredClientes: Cliente[];
    selectedClientes: Cliente[];
    provinciasCups: Provincia[];
    selectedProvinciaCups: Provincia[];
    localidadesCups: Localidad[];
    selectedLocalidadCups: Localidad[];
    puntosSuministro: PuntoSuministro[];
    selectedPuntoSuministro: PuntoSuministro[];
    searchCups: string;
    searchClienteCups: string;
    setSearchCups: (value: string) => void;
    setSearchClienteCups: (value: string) => void;
    setSelectedCupsElectricos: (cups: string[]) => void;
    setSelectedCupsGas: (cups: string[]) => void;
    setSelectedClientes: (clientes: Cliente[]) => void;
    setSelectedProvinciaCups: (provincia: Provincia[]) => void;
    setSelectedLocalidadCups: (localidad: Localidad[]) => void;
    setSelectedPuntoSuministro: (punto: PuntoSuministro[]) => void;
    onCloseModal: () => void;
    onAgregarCupsSeleccionados: () => void;
    onToggleCupsElectricoSelection: (cups: string) => void;
    onToggleCupsGasSelection: (cups: string) => void;
    onSelectAllCupsElectricos: () => void;
    onSelectAllCupsGas: () => void;
    onDeselectAllCupsElectricos: () => void;
    onDeselectAllCupsGas: () => void;
}

const CupsModals: React.FC<CupsModalsProps> = ({
    modalState,
    cupsElectricos,
    cupsGas,
    filteredCupsElectricos,
    filteredCupsGas,
    selectedCupsElectricos,
    selectedCupsGas,
    filteredClientes,
    selectedClientes,
    provinciasCups,
    selectedProvinciaCups,
    localidadesCups,
    selectedLocalidadCups,
    puntosSuministro,
    selectedPuntoSuministro,
    searchCups,
    searchClienteCups,
    setSearchCups,
    setSearchClienteCups,
    setSelectedCupsElectricos,
    setSelectedCupsGas,
    setSelectedClientes,
    setSelectedProvinciaCups,
    setSelectedLocalidadCups,
    setSelectedPuntoSuministro,
    onCloseModal,
    onAgregarCupsSeleccionados,
    onToggleCupsElectricoSelection,
    onToggleCupsGasSelection,
    onSelectAllCupsElectricos,
    onSelectAllCupsGas,
    onDeselectAllCupsElectricos,
    onDeselectAllCupsGas
}) => {
    const handleClienteChange = (selected: any[]) => {
        setSelectedClientes(selected);
    };

    const handleProvinciaChange = (selected: any[]) => {
        setSelectedProvinciaCups(selected);
        setSelectedLocalidadCups([]);
        setSelectedPuntoSuministro([]);
    };

    const handleLocalidadChange = (selected: any[]) => {
        setSelectedLocalidadCups(selected);
        setSelectedPuntoSuministro([]);
    };

    const handlePuntoSuministroChange = (selected: any[]) => {
        setSelectedPuntoSuministro(selected);
    };

    return (
        <>
            {/* Modal para seleccionar CUPS Eléctricos */}
            <Modal
                show={modalState.showCupsElectricosModal}
                onHide={onCloseModal}
                size="xl"
                backdrop="static"
                contentClassName={estilosFoco.contenedorAccesibleContratos}
            >
                <Modal.Header closeButton>
                    <Modal.Title>Seleccionar CUPS Eléctricos</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <div className="row mb-3">
                        <div className="col-md-4">
                            <Form.Label>Buscar Cliente</Form.Label>
                            <Typeahead
                                id="search-cliente-cups"
                                labelKey="RazSocCli"
                                multiple
                                selected={selectedClientes}
                                onChange={handleClienteChange}
                                options={filteredClientes}
                                placeholder="Buscar por Razón Social..."
                                onInputChange={setSearchClienteCups}
                            />
                        </div>
                        <div className="col-md-3">
                            <Form.Label>Provincia</Form.Label>
                            <Typeahead
                                id="provincia-cups"
                                labelKey="nombre"
                                selected={selectedProvinciaCups}
                                onChange={handleProvinciaChange}
                                options={provinciasCups}
                                placeholder="Seleccionar provincia..."
                            />
                        </div>
                        <div className="col-md-3">
                            <Form.Label>Localidad</Form.Label>
                            <Typeahead
                                id="localidad-cups"
                                labelKey="nombre"
                                selected={selectedLocalidadCups}
                                onChange={handleLocalidadChange}
                                options={localidadesCups}
                                placeholder="Seleccionar localidad..."
                                disabled={selectedProvinciaCups.length === 0}
                            />
                        </div>
                        <div className="col-md-2">
                            <Form.Label>Punto de Suministro</Form.Label>
                            <Typeahead
                                id="punto-suministro"
                                labelKey="cups"
                                selected={selectedPuntoSuministro}
                                onChange={handlePuntoSuministroChange}
                                options={puntosSuministro}
                                placeholder="CUPS..."
                                disabled={selectedLocalidadCups.length === 0}
                            />
                        </div>
                    </div>

                    <div className="row mb-3">
                        <div className="col-md-6">
                            <Form.Control
                                type="text"
                                placeholder="Buscar CUPS..."
                                value={searchCups}
                                onChange={(e) => setSearchCups(e.target.value)}
                            />
                        </div>
                        <div className="col-md-6 text-end">
                            <Button
                                variant="outline-primary"
                                size="sm"
                                className="me-2"
                                onClick={onSelectAllCupsElectricos}
                            >
                                Seleccionar Todos
                            </Button>
                            <Button
                                variant="outline-secondary"
                                size="sm"
                                onClick={onDeselectAllCupsElectricos}
                            >
                                Deseleccionar Todos
                            </Button>
                        </div>
                    </div>

                    <div className="table-responsive" style={{ maxHeight: '400px', overflowY: 'auto' }}>
                        <Table striped bordered hover size="sm">
                            <thead className="table-dark sticky-top">
                                <tr>
                                    <th style={{ width: '5%' }}>
                                        <Form.Check
                                            type="checkbox"
                                            checked={selectedCupsElectricos.length === filteredCupsElectricos.length && filteredCupsElectricos.length > 0}
                                            onChange={() => {
                                                if (selectedCupsElectricos.length === filteredCupsElectricos.length) {
                                                    onDeselectAllCupsElectricos();
                                                } else {
                                                    onSelectAllCupsElectricos();
                                                }
                                            }}
                                        />
                                    </th>
                                    <th>CUPS</th>
                                    <th>Cliente</th>
                                    <th>Localidad</th>
                                    <th>Provincia</th>
                                    <th>Dirección</th>
                                </tr>
                            </thead>
                            <tbody>
                                {filteredCupsElectricos.map((cups) => (
                                    <tr key={cups.cups}>
                                        <td>
                                            <Form.Check
                                                type="checkbox"
                                                checked={selectedCupsElectricos.includes(cups.cups || '')}
                                                onChange={() => onToggleCupsElectricoSelection(cups.cups || '')}
                                            />
                                        </td>
                                        <td>{cups.cups}</td>
                                        <td>{cups.cliente_nombre}</td>
                                        <td>{cups.localidad_nombre}</td>
                                        <td>{cups.provincia_nombre}</td>
                                        <td>{cups.direccion_suministro}</td>
                                    </tr>
                                ))}
                            </tbody>
                        </Table>
                    </div>

                    <div className="mt-3">
                        <small className="text-muted">
                            {selectedCupsElectricos.length} de {filteredCupsElectricos.length} CUPS seleccionados
                        </small>
                    </div>
                </Modal.Body>
                <Modal.Footer>
                    <Button variant="secondary" onClick={onCloseModal}>
                        Cancelar
                    </Button>
                    <Button
                        variant="primary"
                        onClick={onAgregarCupsSeleccionados}
                        disabled={selectedCupsElectricos.length === 0}
                    >
                        Agregar Seleccionados ({selectedCupsElectricos.length})
                    </Button>
                </Modal.Footer>
            </Modal>

            {/* Modal para seleccionar CUPS de Gas */}
            <Modal
                show={modalState.showCupsGasModal}
                onHide={onCloseModal}
                size="xl"
                backdrop="static"
                contentClassName={estilosFoco.contenedorAccesibleContratos}
            >
                <Modal.Header closeButton>
                    <Modal.Title>Seleccionar CUPS de Gas</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <div className="row mb-3">
                        <div className="col-md-4">
                            <Form.Label>Buscar Cliente</Form.Label>
                            <Typeahead
                                id="search-cliente-cups-gas"
                                labelKey="RazSocCli"
                                multiple
                                selected={selectedClientes}
                                onChange={handleClienteChange}
                                options={filteredClientes}
                                placeholder="Buscar por Razón Social..."
                                onInputChange={setSearchClienteCups}
                            />
                        </div>
                        <div className="col-md-3">
                            <Form.Label>Provincia</Form.Label>
                            <Typeahead
                                id="provincia-cups-gas"
                                labelKey="nombre"
                                selected={selectedProvinciaCups}
                                onChange={handleProvinciaChange}
                                options={provinciasCups}
                                placeholder="Seleccionar provincia..."
                            />
                        </div>
                        <div className="col-md-3">
                            <Form.Label>Localidad</Form.Label>
                            <Typeahead
                                id="localidad-cups-gas"
                                labelKey="nombre"
                                selected={selectedLocalidadCups}
                                onChange={handleLocalidadChange}
                                options={localidadesCups}
                                placeholder="Seleccionar localidad..."
                                disabled={selectedProvinciaCups.length === 0}
                            />
                        </div>
                        <div className="col-md-2">
                            <Form.Label>Punto de Suministro</Form.Label>
                            <Typeahead
                                id="punto-suministro-gas"
                                labelKey="cups"
                                selected={selectedPuntoSuministro}
                                onChange={handlePuntoSuministroChange}
                                options={puntosSuministro}
                                placeholder="CUPS..."
                                disabled={selectedLocalidadCups.length === 0}
                            />
                        </div>
                    </div>

                    <div className="row mb-3">
                        <div className="col-md-6">
                            <Form.Control
                                type="text"
                                placeholder="Buscar CUPS..."
                                value={searchCups}
                                onChange={(e) => setSearchCups(e.target.value)}
                            />
                        </div>
                        <div className="col-md-6 text-end">
                            <Button
                                variant="outline-primary"
                                size="sm"
                                className="me-2"
                                onClick={onSelectAllCupsGas}
                            >
                                Seleccionar Todos
                            </Button>
                            <Button
                                variant="outline-secondary"
                                size="sm"
                                onClick={onDeselectAllCupsGas}
                            >
                                Deseleccionar Todos
                            </Button>
                        </div>
                    </div>

                    <div className="table-responsive" style={{ maxHeight: '400px', overflowY: 'auto' }}>
                        <Table striped bordered hover size="sm">
                            <thead className="table-dark sticky-top">
                                <tr>
                                    <th style={{ width: '5%' }}>
                                        <Form.Check
                                            type="checkbox"
                                            checked={selectedCupsGas.length === filteredCupsGas.length && filteredCupsGas.length > 0}
                                            onChange={() => {
                                                if (selectedCupsGas.length === filteredCupsGas.length) {
                                                    onDeselectAllCupsGas();
                                                } else {
                                                    onSelectAllCupsGas();
                                                }
                                            }}
                                        />
                                    </th>
                                    <th>CUPS</th>
                                    <th>Cliente</th>
                                    <th>Localidad</th>
                                    <th>Provincia</th>
                                    <th>Dirección</th>
                                </tr>
                            </thead>
                            <tbody>
                                {filteredCupsGas.map((cups) => (
                                    <tr key={cups.cups}>
                                        <td>
                                            <Form.Check
                                                type="checkbox"
                                                checked={selectedCupsGas.includes(cups.cups || '')}
                                                onChange={() => onToggleCupsGasSelection(cups.cups || '')}
                                            />
                                        </td>
                                        <td>{cups.cups}</td>
                                        <td>{cups.cliente_nombre}</td>
                                        <td>{cups.localidad_nombre}</td>
                                        <td>{cups.provincia_nombre}</td>
                                        <td>{cups.direccion_suministro}</td>
                                    </tr>
                                ))}
                            </tbody>
                        </Table>
                    </div>

                    <div className="mt-3">
                        <small className="text-muted">
                            {selectedCupsGas.length} de {filteredCupsGas.length} CUPS seleccionados
                        </small>
                    </div>
                </Modal.Body>
                <Modal.Footer>
                    <Button variant="secondary" onClick={onCloseModal}>
                        Cancelar
                    </Button>
                    <Button
                        variant="primary"
                        onClick={onAgregarCupsSeleccionados}
                        disabled={selectedCupsGas.length === 0}
                    >
                        Agregar Seleccionados ({selectedCupsGas.length})
                    </Button>
                </Modal.Footer>
            </Modal>
        </>
    );
};

export default CupsModals;