import React from 'react';
import { Badge, Button, Modal, Spinner, Table } from 'react-bootstrap';
import { Can } from '../../../../Components/Auth/Can';
import BotUpdateIcon from '../../../../Components/Common/BotUpdateIcon';
import { formatCalendarDateEs } from '../../../../utils/serverCalendarDate';
import { ESTADOS_CONTRATO } from '../../../../interfaces';
import { BusquedaActivacion, ContratoActivacion, TIPO_ELECTRICO } from '../types';

interface Props {
    show: boolean;
    busqueda: BusquedaActivacion | null;
    sincronizando: number | null;
    onHide: () => void;
    onSeleccionar: (contrato: ContratoActivacion) => void;
    onActualizarFechas: (contrato: ContratoActivacion) => void;
}

const VARIANTE_ESTADO: Record<number, string> = { 1: 'success', 2: 'info', 3: 'warning', 4: 'danger' };

export function etiquetaEstado(estado: number): string {
    return ESTADOS_CONTRATO.find((e) => e.key === estado)?.valor ?? `Estado ${estado}`;
}

const ListadoContratosModal: React.FC<Props> = ({
    show,
    busqueda,
    sincronizando,
    onHide,
    onSeleccionar,
    onActualizarFechas,
}) => {
    const contratos = busqueda?.contratos ?? [];
    const electrico = busqueda?.cups.TipCups === TIPO_ELECTRICO;

    return (
        <Modal show={show} onHide={onHide} size="xl" centered scrollable>
            <Modal.Header closeButton>
                <Modal.Title as="h2" className="h5">
                    Listado de contratos
                    {busqueda && <span className="text-muted fw-normal ms-2">{busqueda.cups.CUPs}</span>}
                </Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <div className="table-responsive">
                    <Table bordered hover size="sm" className="align-middle mb-0">
                        <thead className="table-light">
                            <tr>
                                <th scope="col">Nº contrato</th>
                                <th scope="col">Cliente</th>
                                <th scope="col">Tarifa</th>
                                <th scope="col">Comercializadora / producto</th>
                                <th scope="col">Activación</th>
                                <th scope="col">Vencimiento</th>
                                <th scope="col" className="text-end">Consumo</th>
                                <th scope="col">Estado</th>
                                <th scope="col" className="text-center">Acción</th>
                            </tr>
                        </thead>
                        <tbody>
                            {contratos.length === 0 ? (
                                <tr>
                                    <td colSpan={9} className="text-center text-muted py-4">
                                        Este CUPS no tiene contratos registrados.
                                    </td>
                                </tr>
                            ) : contratos.map((contrato) => (
                                <tr key={contrato.CodProComCup}>
                                    <td>{contrato.CodConCom ?? '—'}</td>
                                    <td>
                                        <div className="fw-medium">{contrato.RazSocCli ?? '—'}</div>
                                        <small className="text-muted">{contrato.NumCifCli}</small>
                                    </td>
                                    <td>{contrato.NomTar ?? '—'}</td>
                                    <td>
                                        <div>{contrato.NomCom ?? '—'}</div>
                                        <small className="text-muted">{contrato.DesPro}</small>
                                    </td>
                                    <td>{formatCalendarDateEs(contrato.FecActCUPs)}</td>
                                    <td>
                                        {formatCalendarDateEs(contrato.FecVenCUPs)}
                                        <span className="ms-2">
                                            <BotUpdateIcon updated={contrato.UPDATED_BOT} date={contrato.DATE_BOT_UPDATE} />
                                        </span>
                                    </td>
                                    <td className="text-end">
                                        {contrato.ConCup ?? '—'} {electrico ? 'kWh' : ''}
                                    </td>
                                    <td>
                                        <Badge bg={VARIANTE_ESTADO[contrato.EstConCups] ?? 'secondary'}>
                                            {etiquetaEstado(contrato.EstConCups)}
                                        </Badge>
                                    </td>
                                    <td className="text-center text-nowrap">
                                        <Button
                                            size="sm"
                                            variant="outline-success"
                                            className="me-1"
                                            title="Seleccionar contrato"
                                            aria-label={`Seleccionar contrato ${contrato.CodConCom ?? contrato.CodProComCup}`}
                                            onClick={() => onSeleccionar(contrato)}
                                        >
                                            <i className="ri-check-line" aria-hidden />
                                        </Button>
                                        <Can permission="activaciones.sync-dates">
                                            <Button
                                                size="sm"
                                                variant="outline-primary"
                                                title="Actualizar fechas desde el servicio de la comercializadora"
                                                aria-label={`Actualizar fechas del contrato ${contrato.CodConCom ?? contrato.CodProComCup}`}
                                                disabled={sincronizando !== null}
                                                onClick={() => onActualizarFechas(contrato)}
                                            >
                                                {sincronizando === contrato.CodProComCup
                                                    ? <Spinner size="sm" animation="border" />
                                                    : <i className="ri-calendar-check-line" aria-hidden />}
                                            </Button>
                                        </Can>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </Table>
                </div>
            </Modal.Body>
        </Modal>
    );
};

export default ListadoContratosModal;