import React from 'react';
import { Modal, Spinner } 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';
import { FileText, Check, CalendarCheck, X, Zap, Flame } from 'lucide-react';

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

const ESTADO_TONO: Record<number, 'active' | 'info' | 'suspended' | 'danger'> = {
    1: 'active',
    2: 'info',
    3: 'suspended',
    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
            contentClassName="saas-modal-content"
        >
            <div className="saas-modal-header">
                <div className="d-flex align-items-center gap-2">
                    <span className="saas-icon-badge primary">
                        <FileText size={16} />
                    </span>
                    <div>
                        <div className="saas-modal-title">Listado de Contratos</div>
                        {busqueda && (
                            <span className="saas-modal-subtitle font-monospace">
                                {busqueda.cups.CUPs} · {electrico ? 'Electricidad' : 'Gas'}
                            </span>
                        )}
                    </div>
                </div>
                <button
                    type="button"
                    onClick={onHide}
                    className="saas-modal-close-btn"
                    aria-label="Cerrar modal"
                >
                    <X size={16} />
                </button>
            </div>

            <div className="saas-modal-body p-0">
                <div className="table-responsive saas-custom-scrollbar">
                    <table className="table table-hover align-middle mb-0" style={{ fontSize: '0.8125rem' }}>
                        <thead
                            style={{
                                backgroundColor: '#f8fafc',
                                borderBottom: '1px solid #e2e8f0',
                                color: '#64748b',
                                fontSize: '0.72rem',
                                textTransform: 'uppercase',
                                letterSpacing: '0.05em',
                                fontWeight: 700,
                            }}
                        >
                            <tr>
                                <th scope="col" className="ps-3 py-2.5">Nº Contrato</th>
                                <th scope="col" className="py-2.5">Cliente</th>
                                <th scope="col" className="py-2.5">Tarifa</th>
                                <th scope="col" className="py-2.5">Comercializadora / Producto</th>
                                <th scope="col" className="py-2.5">Activación</th>
                                <th scope="col" className="py-2.5">Vencimiento</th>
                                <th scope="col" className="text-end py-2.5">Consumo</th>
                                <th scope="col" className="py-2.5">Estado</th>
                                <th scope="col" className="text-center pe-3 py-2.5">Acción</th>
                            </tr>
                        </thead>
                        <tbody>
                            {contratos.length === 0 ? (
                                <tr>
                                    <td colSpan={9} className="text-center text-muted py-5">
                                        <div className="d-flex flex-column align-items-center justify-content-center">
                                            <FileText size={32} className="text-slate-300 mb-2 opacity-50" />
                                            <span className="fw-medium">Este CUPS no tiene contratos registrados</span>
                                            <small className="text-muted">Puedes crear uno nuevo con el botón de "Contrato rápido"</small>
                                        </div>
                                    </td>
                                </tr>
                            ) : (
                                contratos.map((contrato) => {
                                    const tono = ESTADO_TONO[contrato.EstConCups] ?? 'info';
                                    return (
                                        <tr key={contrato.CodProComCup} style={{ borderBottom: '1px solid #f1f5f9' }}>
                                            <td className="ps-3 fw-semibold text-slate-800">
                                                {contrato.CodConCom ? (
                                                    <span style={{ fontFamily: 'ui-monospace, SFMono-Regular, monospace' }}>
                                                        {contrato.CodConCom}
                                                    </span>
                                                ) : (
                                                    <span className="text-muted fst-italic">#{contrato.CodProComCup}</span>
                                                )}
                                            </td>
                                            <td>
                                                <div className="fw-medium text-slate-900 text-truncate" style={{ maxWidth: '200px' }}>
                                                    {contrato.RazSocCli ?? '—'}
                                                </div>
                                                <small className="text-muted font-monospace">{contrato.NumCifCli ?? ''}</small>
                                            </td>
                                            <td>
                                                <span className="badge bg-slate-100 text-slate-700 border border-slate-200 font-monospace">
                                                    {contrato.NomTar ?? '—'}
                                                </span>
                                            </td>
                                            <td>
                                                <div className="fw-semibold text-slate-800">{contrato.NomCom ?? '—'}</div>
                                                <small className="text-muted text-truncate d-block" style={{ maxWidth: '180px' }}>
                                                    {contrato.DesPro}
                                                </small>
                                            </td>
                                            <td>
                                                <span className="text-slate-700">
                                                    {formatCalendarDateEs(contrato.FecActCUPs)}
                                                </span>
                                            </td>
                                            <td>
                                                <div className="d-flex align-items-center gap-1.5">
                                                    <span className="text-slate-700">
                                                        {formatCalendarDateEs(contrato.FecVenCUPs)}
                                                    </span>
                                                    <BotUpdateIcon updated={contrato.UPDATED_BOT} date={contrato.DATE_BOT_UPDATE} />
                                                </div>
                                            </td>
                                            <td className="text-end fw-semibold text-slate-800">
                                                {contrato.ConCup ? Number(contrato.ConCup).toLocaleString('es-ES') : '—'}{' '}
                                                <span className="small text-muted fw-normal">{electrico ? 'kWh' : ''}</span>
                                            </td>
                                            <td>
                                                <span className={`saas-badge-status ${tono}`}>
                                                    {etiquetaEstado(contrato.EstConCups)}
                                                </span>
                                            </td>
                                            <td className="text-center text-nowrap pe-3">
                                                <button
                                                    type="button"
                                                    className="saas-action-btn-sm success me-1.5"
                                                    title="Seleccionar y editar contrato"
                                                    aria-label={`Seleccionar contrato ${contrato.CodConCom ?? contrato.CodProComCup}`}
                                                    onClick={() => onSeleccionar(contrato)}
                                                >
                                                    <Check size={14} />
                                                </button>
                                                <Can permission="activaciones.sync-dates">
                                                    <button
                                                        type="button"
                                                        className="saas-action-btn-sm"
                                                        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" style={{ width: '13px', height: '13px' }} />
                                                        ) : (
                                                            <CalendarCheck size={14} className="text-primary" />
                                                        )}
                                                    </button>
                                                </Can>
                                            </td>
                                        </tr>
                                    );
                                })
                            )}
                        </tbody>
                    </table>
                </div>
            </div>

            <div className="saas-modal-footer">
                <button type="button" className="saas-btn-outline" onClick={onHide}>
                    Cerrar
                </button>
            </div>
        </Modal>
    );
};

export default ListadoContratosModal;