import React, { useEffect, useMemo, useState } from 'react';
import { Col, Row, Spinner } from 'react-bootstrap';
import { Can } from '../../../../Components/Auth/Can';
import BotUpdateIcon from '../../../../Components/Common/BotUpdateIcon';
import FormDateInputEs from '../../../../Components/Common/FormDateInputEs';
import { usePermissions } from '../../../../hooks/usePermissions';
import { calendarYmdFromServer } from '../../../../utils/serverCalendarDate';
import { ESTADOS_CONTRATO } from '../../../../interfaces';
import {
    ComercializadoraActivacion,
    AnexoOption,
    ContratoActivacion,
    CupsActivacion,
    FormularioActivacion,
    ProductoOption,
    TipoPrecioOption,
    TarifaElectricaOption,
    TarifaGasOption,
    TIPO_ELECTRICO,
    periodosTarifa,
    potenciasDesde,
    textoValor,
} from '../types';
import TarifaPotenciasConsumo from './TarifaPotenciasConsumo';
import SipsActivacionPanel, { DatosSipsAplicables } from './SipsActivacionPanel';
import { FileText, Database, X, Save, Building2, Layers, Tag, Euro, Calendar, Activity } from 'lucide-react';

interface Props {
    cups: CupsActivacion;
    contrato: ContratoActivacion;
    comercializadoras: ComercializadoraActivacion[];
    productos: ProductoOption[];
    anexos: AnexoOption[];
    tiposPrecio: TipoPrecioOption[];
    tarifasElectricas: TarifaElectricaOption[];
    tarifasGas: TarifaGasOption[];
    guardando: boolean;
    onGuardar: (form: FormularioActivacion, periodos: number) => void;
    onCerrar: () => void;
}

function formularioDesde(contrato: ContratoActivacion): FormularioActivacion {
    return {
        CodTar: textoValor(contrato.CodTar),
        CodPro: textoValor(contrato.CodPro),
        CodAnePro: textoValor(contrato.CodAnePro),
        TipPre: textoValor(contrato.TipPre),
        CorpoGo: textoValor(contrato.CorpoGo),
        FecActCUPs: calendarYmdFromServer(contrato.FecActCUPs),
        FecVenCUPs: calendarYmdFromServer(contrato.FecVenCUPs),
        ConCup: textoValor(contrato.ConCup),
        EstConCups: String(contrato.EstConCups || 1),
        ...potenciasDesde(contrato),
    };
}

const FormularioContrato: React.FC<Props> = ({
    cups,
    contrato,
    comercializadoras,
    productos,
    anexos,
    tiposPrecio,
    tarifasElectricas,
    tarifasGas,
    guardando,
    onGuardar,
    onCerrar,
}) => {
    const { can } = usePermissions();
    const editable = can('activaciones.update');
    const [form, setForm] = useState<FormularioActivacion>(() => formularioDesde(contrato));
    const [mostrarSips, setMostrarSips] = useState(false);

    useEffect(() => {
        setForm(formularioDesde(contrato));
    }, [contrato]);

    const comercializadora = comercializadoras.find((c) => String(c.CodCom) === String(contrato.CodCom ?? '')) ?? null;

    const productosContrato = useMemo(
        () => productos.filter((p) => !contrato.CodCom || String(p.CodCom) === String(contrato.CodCom)),
        [productos, contrato.CodCom],
    );

    const anexosContrato = useMemo(
        () => anexos.filter((a) => String(a.CodPro) === form.CodPro),
        [anexos, form.CodPro],
    );

    const cambiar = (campo: keyof FormularioActivacion, valor: string) => {
        setForm((actual) => ({
            ...actual,
            [campo]: valor,
            ...(campo === 'CodPro' ? { CodAnePro: '' } : {}),
        }));
    };

    const aplicarSips = ({ consumo, potencias }: DatosSipsAplicables) => {
        setForm((actual) => ({
            ...actual,
            ...potencias,
            ConCup: consumo === null ? actual.ConCup : String(consumo),
        }));
    };

    const guardar = (event: React.FormEvent) => {
        event.preventDefault();
        const periodos = cups.TipCups === TIPO_ELECTRICO ? periodosTarifa(tarifasElectricas, form.CodTar) : 0;
        onGuardar(form, periodos);
    };

    return (
        <div className="saas-card shadow-sm">
            <div className="saas-card-header">
                <div className="d-flex align-items-center gap-2">
                    <span className="saas-icon-badge indigo">
                        <FileText size={16} />
                    </span>
                    <div>
                        <div className="d-flex align-items-center gap-2">
                            <span className="saas-title h6 mb-0">
                                Contrato {contrato.CodConCom ?? `#${contrato.CodProComCup}`}
                            </span>
                            <BotUpdateIcon updated={contrato.UPDATED_BOT} date={contrato.DATE_BOT_UPDATE} />
                        </div>
                        <span className="text-muted small">Edición de datos técnicos y contractuales</span>
                    </div>
                </div>

                <div className="d-flex align-items-center gap-2">
                    <button
                        type="button"
                        className={`saas-btn-outline ${mostrarSips ? 'active' : ''}`}
                        onClick={() => setMostrarSips((v) => !v)}
                        title="Alternar panel SIPS"
                    >
                        <Database size={13} className="text-primary" />
                        <span>{mostrarSips ? 'Ocultar SIPS' : 'Consultar SIPS'}</span>
                    </button>

                    <button
                        type="button"
                        className="saas-modal-close-btn"
                        onClick={onCerrar}
                        title="Cerrar formulario"
                    >
                        <X size={16} />
                    </button>
                </div>
            </div>

            <div className="saas-card-body">
                <form onSubmit={guardar}>
                    {/* Tarjeta de Datos Clave (Read Only) */}
                    <div className="saas-section-box mb-3">
                        <Row className="g-3">
                            <Col md={5}>
                                <div className="saas-kv">
                                    <div className="saas-kv-label d-flex align-items-center gap-1">
                                        <Building2 size={13} />
                                        <span>Cliente Titular</span>
                                    </div>
                                    <div className="saas-kv-value text-truncate fw-semibold text-slate-800">
                                        {contrato.RazSocCli ?? '—'}
                                        {contrato.NumCifCli && (
                                            <span className="saas-cif-badge ms-2">{contrato.NumCifCli}</span>
                                        )}
                                    </div>
                                </div>
                            </Col>

                            <Col md={4}>
                                <div className="saas-kv">
                                    <div className="saas-kv-label">Punto de Suministro (CUPS)</div>
                                    <div className="saas-kv-value font-monospace fw-semibold text-slate-800">
                                        {cups.CUPs}
                                    </div>
                                </div>
                            </Col>

                            <Col md={3}>
                                <div className="saas-kv">
                                    <div className="saas-kv-label">Comercializadora</div>
                                    <div className="saas-kv-value fw-semibold text-primary text-truncate">
                                        {contrato.NomCom ?? 'Sin comercializadora'}
                                    </div>
                                </div>
                            </Col>
                        </Row>
                    </div>

                    {/* Panel SIPS Desplegable */}
                    {mostrarSips && (
                        <SipsActivacionPanel
                            cups={cups.CUPs}
                            tipCups={cups.TipCups}
                            comercializadora={comercializadora}
                            onAplicar={editable ? aplicarSips : undefined}
                        />
                    )}

                    {/* Tarifa y Potencias */}
                    <TarifaPotenciasConsumo
                        prefijoId="activacion"
                        tipCups={cups.TipCups}
                        form={form}
                        tarifasElectricas={tarifasElectricas}
                        tarifasGas={tarifasGas}
                        disabled={!editable}
                        onChange={cambiar}
                    />

                    {/* Parámetros Comerciales y Fechas */}
                    <div className="saas-section-box mb-3">
                        <div className="saas-kv-label mb-2 pb-1 border-bottom border-slate-200 text-slate-700" style={{ letterSpacing: '0.04em' }}>
                            Condiciones Comerciales y Fechas
                        </div>
                        <Row className="g-3">
                            <Col md={3}>
                                <div className="saas-form-group mb-0">
                                    <label htmlFor="activacion-producto" className="saas-form-label">
                                        <Layers size={13} />
                                        <span>Producto</span>
                                    </label>
                                    <select
                                        id="activacion-producto"
                                        className="saas-form-select"
                                        value={form.CodPro}
                                        disabled={!editable}
                                        onChange={(e) => cambiar('CodPro', e.target.value)}
                                    >
                                        <option value="">Sin producto</option>
                                        {productosContrato.map((p) => (
                                            <option key={p.CodPro} value={p.CodPro}>
                                                {p.DesPro}
                                            </option>
                                        ))}
                                    </select>
                                </div>
                            </Col>

                            <Col md={3}>
                                <div className="saas-form-group mb-0">
                                    <label htmlFor="activacion-anexo" className="saas-form-label">
                                        <Tag size={13} />
                                        <span>Anexo</span>
                                    </label>
                                    <select
                                        id="activacion-anexo"
                                        className="saas-form-select"
                                        value={form.CodAnePro}
                                        disabled={!editable || !form.CodPro}
                                        onChange={(e) => cambiar('CodAnePro', e.target.value)}
                                    >
                                        <option value="">Sin anexo</option>
                                        {anexosContrato.map((anexo) => (
                                            <option key={anexo.CodAnePro} value={anexo.CodAnePro}>
                                                {anexo.DesAnePro}
                                            </option>
                                        ))}
                                    </select>
                                </div>
                            </Col>

                            <Col md={3}>
                                <div className="saas-form-group mb-0">
                                    <label htmlFor="activacion-tipo-precio" className="saas-form-label">
                                        <span>Tipo de Precio</span>
                                    </label>
                                    <select
                                        id="activacion-tipo-precio"
                                        className="saas-form-select"
                                        value={form.TipPre}
                                        disabled={!editable}
                                        onChange={(e) => cambiar('TipPre', e.target.value)}
                                    >
                                        <option value="">Seleccione tipo precio</option>
                                        {tiposPrecio.map((tipo) => (
                                            <option key={tipo.id} value={tipo.id}>
                                                {tipo.descripcion}
                                            </option>
                                        ))}
                                    </select>
                                </div>
                            </Col>

                            <Col md={3}>
                                <div className="saas-form-group mb-0">
                                    <label htmlFor="activacion-gasto" className="saas-form-label">
                                        <Euro size={13} />
                                        <span>Gasto Op. (c€/kWh)</span>
                                    </label>
                                    <input
                                        id="activacion-gasto"
                                        type="text"
                                        className="saas-form-control"
                                        inputMode="decimal"
                                        value={form.CorpoGo}
                                        disabled={!editable}
                                        placeholder="0.00"
                                        onChange={(e) => cambiar('CorpoGo', e.target.value)}
                                    />
                                </div>
                            </Col>

                            <Col md={4}>
                                <div className="saas-form-group mb-0">
                                    <label htmlFor="activacion-fecha-activacion" className="saas-form-label">
                                        <Calendar size={13} />
                                        <span>Fecha Activación</span>
                                    </label>
                                    <FormDateInputEs
                                        id="activacion-fecha-activacion"
                                        bsSize="sm"
                                        value={form.FecActCUPs}
                                        disabled={!editable}
                                        onChange={(valor) => cambiar('FecActCUPs', valor)}
                                    />
                                </div>
                            </Col>

                            <Col md={4}>
                                <div className="saas-form-group mb-0">
                                    <label htmlFor="activacion-fecha-vencimiento" className="saas-form-label">
                                        <Calendar size={13} />
                                        <span>Fecha Vencimiento</span>
                                    </label>
                                    <FormDateInputEs
                                        id="activacion-fecha-vencimiento"
                                        bsSize="sm"
                                        value={form.FecVenCUPs}
                                        disabled={!editable}
                                        onChange={(valor) => cambiar('FecVenCUPs', valor)}
                                    />
                                </div>
                            </Col>

                            <Col md={4}>
                                <div className="saas-form-group mb-0">
                                    <label htmlFor="activacion-estado" className="saas-form-label">
                                        <Activity size={13} />
                                        <span>Estado del Contrato</span>
                                    </label>
                                    <select
                                        id="activacion-estado"
                                        className="saas-form-select"
                                        value={form.EstConCups}
                                        disabled={!editable}
                                        onChange={(e) => cambiar('EstConCups', e.target.value)}
                                    >
                                        {ESTADOS_CONTRATO.map((estado) => (
                                            <option key={estado.key} value={estado.key}>
                                                {estado.valor}
                                            </option>
                                        ))}
                                    </select>
                                </div>
                            </Col>
                        </Row>
                    </div>

                    {/* Botones de Acción */}
                    <Can permission="activaciones.update">
                        <div className="d-flex justify-content-end align-items-center gap-2 pt-2 border-top border-slate-200">
                            <button
                                type="button"
                                className="saas-btn-outline"
                                onClick={onCerrar}
                                disabled={guardando}
                            >
                                Cancelar
                            </button>
                            <button
                                type="submit"
                                className="saas-btn-primary"
                                disabled={guardando}
                            >
                                {guardando ? (
                                    <>
                                        <Spinner size="sm" animation="border" className="me-1" style={{ width: '13px', height: '13px' }} />
                                        <span>Guardando…</span>
                                    </>
                                ) : (
                                    <>
                                        <Save size={14} />
                                        <span>Actualizar Contrato</span>
                                    </>
                                )}
                            </button>
                        </div>
                    </Can>
                </form>
            </div>
        </div>
    );
};

export default FormularioContrato;