import React, { useEffect, useMemo, useState } from 'react';
import { Button, Card, Col, Form, 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';

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 (
        <Card>
            <Card.Header className="d-flex flex-wrap align-items-center gap-2">
                <h2 className="card-title mb-0 h5 me-auto">
                    Contrato {contrato.CodConCom ?? `#${contrato.CodProComCup}`}
                    <span className="ms-2">
                        <BotUpdateIcon updated={contrato.UPDATED_BOT} date={contrato.DATE_BOT_UPDATE} />
                    </span>
                </h2>
                <Button size="sm" variant="outline-secondary" onClick={() => setMostrarSips((v) => !v)}>
                    <i className="ri-flashlight-line me-1" aria-hidden />
                    {mostrarSips ? 'Ocultar SIPS' : 'SIPS'}
                </Button>
                <Button size="sm" variant="light" onClick={onCerrar}>Cerrar</Button>
            </Card.Header>
            <Card.Body>
                <Form onSubmit={guardar}>
                    <Row className="g-3 mb-3">
                        <Col md={5}>
                            <Form.Label className="fw-semibold">Cliente</Form.Label>
                            <Form.Control size="sm" readOnly value={`${contrato.RazSocCli ?? ''} ${contrato.NumCifCli ? `(${contrato.NumCifCli})` : ''}`.trim()} />
                        </Col>
                        <Col md={4}>
                            <Form.Label className="fw-semibold">CUPS</Form.Label>
                            <Form.Control size="sm" readOnly value={cups.CUPs} />
                        </Col>
                        <Col md={3}>
                            <Form.Label className="fw-semibold">Comercializadora</Form.Label>
                            <Form.Control size="sm" readOnly value={contrato.NomCom ?? ''} />
                        </Col>
                    </Row>

                    {mostrarSips && (
                        <div className="mb-3">
                            <SipsActivacionPanel
                                cups={cups.CUPs}
                                tipCups={cups.TipCups}
                                comercializadora={comercializadora}
                                onAplicar={editable ? aplicarSips : undefined}
                            />
                        </div>
                    )}

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

                    <Row className="g-3 mt-1">
                        <Col md={3}>
                            <Form.Label htmlFor="activacion-producto" className="fw-semibold">Producto</Form.Label>
                            <Form.Select
                                id="activacion-producto"
                                size="sm"
                                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>
                                ))}
                            </Form.Select>
                        </Col>
                        <Col md={3}>
                            <Form.Label htmlFor="activacion-anexo" className="fw-semibold">Anexo</Form.Label>
                            <Form.Select
                                id="activacion-anexo"
                                size="sm"
                                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>
                                ))}
                            </Form.Select>
                        </Col>
                        <Col md={3}>
                            <Form.Label htmlFor="activacion-tipo-precio" className="fw-semibold">Tipo precio</Form.Label>
                            <Form.Select
                                id="activacion-tipo-precio"
                                size="sm"
                                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>
                                ))}
                            </Form.Select>
                        </Col>
                        <Col md={3}>
                            <Form.Label htmlFor="activacion-gasto" className="fw-semibold">Gasto operativo (c€/kWh)</Form.Label>
                            <Form.Control
                                id="activacion-gasto"
                                size="sm"
                                inputMode="decimal"
                                value={form.CorpoGo}
                                disabled={!editable}
                                onChange={(e) => cambiar('CorpoGo', e.target.value)}
                            />
                        </Col>
                        <Col md={3}>
                            <Form.Label htmlFor="activacion-fecha-activacion" className="fw-semibold">Fecha activación</Form.Label>
                            <FormDateInputEs
                                id="activacion-fecha-activacion"
                                bsSize="sm"
                                value={form.FecActCUPs}
                                disabled={!editable}
                                onChange={(valor) => cambiar('FecActCUPs', valor)}
                            />
                        </Col>
                        <Col md={3}>
                            <Form.Label htmlFor="activacion-fecha-vencimiento" className="fw-semibold">Fecha vencimiento</Form.Label>
                            <FormDateInputEs
                                id="activacion-fecha-vencimiento"
                                bsSize="sm"
                                value={form.FecVenCUPs}
                                disabled={!editable}
                                onChange={(valor) => cambiar('FecVenCUPs', valor)}
                            />
                        </Col>
                        <Col md={3}>
                            <Form.Label htmlFor="activacion-estado" className="fw-semibold">Estado</Form.Label>
                            <Form.Select
                                id="activacion-estado"
                                size="sm"
                                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>
                                ))}
                            </Form.Select>
                        </Col>
                    </Row>

                    <Can permission="activaciones.update">
                        <div className="d-flex justify-content-end mt-3">
                            <Button type="submit" variant="dark" disabled={guardando}>
                                {guardando && <Spinner size="sm" animation="border" className="me-1" />}
                                Actualizar
                            </Button>
                        </div>
                    </Can>
                </Form>
            </Card.Body>
        </Card>
    );
};

export default FormularioContrato;