import React, { useRef, useEffect, useState, useMemo } from "react";
import { Card, Col, Container, Row, Button, Accordion } from "react-bootstrap";
import { Head, router, usePage } from "@inertiajs/react";
import Swal from "sweetalert2";
import { FileText, Upload } from "lucide-react";

import BreadCrumb from "../../../../Components/Common/BreadCrumb";
import Layout from "../../../../Layouts";
import { PropuestaComercial } from "../Interfaces/Interfaces";
import { useLoading } from "../../../../LoadingContext";
import FormActions from "../FormActions";
import { saveContratoComercial } from "../../Utils";
import { promptComercialCanal } from "../promptComercialCanal";
import { promptCondicionesParticulares, RepresentanteLegalOption } from "../promptCondicionesParticulares";

// Hooks personalizados
// Hooks personalizados
import { useContratoState } from "./hooks/useContratoState";
import { useContratoEdition } from "./hooks/useContratoEdition";
import { useContratoHandlers } from "./hooks/useContratoHandlers";
import useGenerarCondicionesEconomicas from "./hooks/useGenerarCondicionesEconomicas";
import { useContratosAsociados } from "./hooks/useContratosAsociados";

// Componentes reutilizables
import { ContratoHeader } from "./components/ContratoHeader";
import { ContratoInfo } from "./components/ContratoInfo";
import { TabNavigator } from "./components/TabNavigator";
import { CupsTable } from "./components/CupsTable";
import { EmptyState } from "./components/EmptyState";
import { ClienteInfo } from "./components/ClienteInfo";
import {
    EneonTabsCard,
    EneonTabsCardBody,
    EneonTabsCardHeader,
} from '../../Shared/Tabs';
import UploadDocumentoModal from "./components/UploadDocumentoModal";
import EnviarDocumentoComercializadoraModal from "./components/EnviarDocumentoComercializadoraModal";

// Utilidades
import {
  formatFecha,
  getTipoContratoLabel,
  getEstadoLabel,
  getEstadoContratoLabel,
  handlePrint as handlePrintUtil
} from "./utils/contratoUtils";

import 'react-bootstrap-typeahead/css/Typeahead.css';
import estilosFoco from '../Shared/estilosFocoAccesible.module.css';
import { DocumentosTramitadosTable } from "./components/DocumentosTramitadosTable";
import useDocumentosTramitados from "./hooks/useDocumentosTramitados";
import useGenerarContratosCondicionesGeneralesPDF from "./hooks/useGenerarContratosCondicionesGeneralesPDF";
import useGenerarContratosCondicionesParticularesPDF from "./hooks/useGenerarContratosCondicionesParticularesPDF";
import useGenerarAnexosCupsPDF from "./hooks/useGenerarAnexosCupsPDF";
import useGenerarAnexosCupsGasPDF from "./hooks/useGenerarAnexosCupsGasPDF";
import useGenerarSEPAsPDF from "./hooks/useGenerarSEPAsPDF";
import useGenerarAnexosCambioPotenciaTitularPDF from "./hooks/useGenerarAnexosCambioPotenciaTitularPDF";

interface EditarContratoProps {
  datos: PropuestaComercial;
  comercializadoras?: any[];
  productos?: any[];
  anexos?: any[];
  tipoprecio?: any[];
  botonesOcultos?: number[];
  representantesLegales?: RepresentanteLegalOption[];
}



const EditarContrato = ({
  datos,
  comercializadoras = [],
  productos = [],
  anexos = [],
  tipoprecio = [],
  botonesOcultos = [],
  representantesLegales = [],
}: EditarContratoProps) => {
  const printRef = useRef<HTMLDivElement>(null);
  const { showLoading, hideLoading } = useLoading();
  const [botonGenerarCupsElectricos, setBotonGenerarCupsElectricos] = useState(false);
  const [botonGenerarCupsGas, setBotonGenerarCupsGas] = useState(false);

  const cupsElectricosList = datos.propuesta_comercial_cliente[0].propuesta_comercial_cups.filter(cups => cups.TipCups === 1);
  const cupsGasList = datos.propuesta_comercial_cliente[0].propuesta_comercial_cups.filter(cups => cups.TipCups === 2);
  // Tipo 1: solo Tramitar (0), OKs COM (7) y Generar Contrato PDF (8) → ocultar 1,2,3,4,5,6
  // Tipo 2: mostrar todo excepto Generar Contrato PDF (8) → ocultar solo 8
  botonesOcultos = datos.TipProCom === 1 ? [1, 2, 3, 4, 5, 6] : [8];

  useEffect(() => {
    if (cupsElectricosList.length > 0) setBotonGenerarCupsElectricos(true);
    if (cupsGasList.length > 0) setBotonGenerarCupsGas(true);
  }, []);

  const { props } = usePage();
  const flash = props.flash as any;

  //datos para el guardado del contrato que se pediran en modal
  const [comercial, setComercial] = React.useState<string>(() => {
    try {
      return localStorage.getItem('eneon_comercial') || '';
    } catch (e) {
      return '';
    }
  });
  const [canal, setCanal] = React.useState<string>(() => {
    try {
      return localStorage.getItem('eneon_canal') || '';
    } catch (e) {
      return '';
    }
  });

  // Hooks personalizados
  const { activeKey, setActiveKey, activeTab, setActiveTab, showModalPrecios, setShowModalPrecios } = useContratoState();
  const {
    isEditing,
    getEditData,
    startEdit,
    cancelEdit,
    updateField,
    clearEdit
  } = useContratoEdition();
  const { handleUpdate: handleUpdateCups, handleDelete: handleDeleteCups } = useContratoHandlers();

  // Estado para datos comunes
  const [isDatosComunes, setIsDatosComunes] = useState(false);

  // Estado para el modal de carga de documentos
  const [showUploadModal, setShowUploadModal] = useState(false);

  // Estado para el modal de enviar documento a comercializadora
  const [showEnviarModal, setShowEnviarModal] = useState(false);
  const [documentoSeleccionado, setDocumentoSeleccionado] = useState<any | null>(null);

  // Validar datos
  const hasClienteData = datos?.propuesta_comercial_cliente &&
    Array.isArray(datos.propuesta_comercial_cliente);

  // Extraer comercializadoras únicas de los CUPS
  const comercializadorasUnicas = useMemo(() => {
    if (!hasClienteData) return [];

    const comercializadorasMap = new Map<number, { CodCom: number; NomCom: string }>();

    datos.propuesta_comercial_cliente.forEach((clienteData) => {
      (clienteData.propuesta_comercial_cups || []).forEach((cupsData) => {
        if (cupsData.CodCom && cupsData.comercializadora) {
          comercializadorasMap.set(cupsData.CodCom, {
            CodCom: cupsData.CodCom,
            NomCom: cupsData.comercializadora.RazSocCom,
          });
        }
      });
    });

    return Array.from(comercializadorasMap.values());
  }, [datos, hasClienteData]);

  // Extraer contratos asociados de los CUPS
  const contratosAsociados = useContratosAsociados(datos);

  // Manejo de mensajes flash
  useEffect(() => {
    if (flash?.message) {
      Swal.fire({
        title: flash.type === 'success' ? '¡Éxito!' : 'Información',
        text: flash.message,
        icon: flash.type === 'success' ? 'success' : 'info',
        timer: 3000,
        showConfirmButton: false,
      });
    }

    if (flash?.error) {
      Swal.fire({
        title: 'Error',
        text: flash.error,
        icon: 'error',
        confirmButtonText: 'Aceptar'
      });
    }
  }, [flash]);

  // Handlers
  const handlePrint = () => {
    handlePrintUtil(printRef, datos.RefProCom, datos.FecProCom);
  };

  const { descargarDocumento, borrarDocumento } = useDocumentosTramitados(showLoading, hideLoading);

  const handleDownloadPDF = () => {
    Swal.fire({
      title: 'Descargando...',
      text: 'La funcionalidad de descarga PDF será implementada próximamente',
      icon: 'info',
      timer: 2000,
      showConfirmButton: false,
    });
  };

  const generarCondicionesEconomicas = useGenerarCondicionesEconomicas();
  const generarContratosCondicionesGeneralesPDF = useGenerarContratosCondicionesGeneralesPDF();
  const generarContratosCondicionesParticularesPDF = useGenerarContratosCondicionesParticularesPDF();
  const generarAnexosCupsPDF = useGenerarAnexosCupsPDF();
  const generarAnexosCupsGasPDF = useGenerarAnexosCupsGasPDF();
  const generarSEPAsPDF = useGenerarSEPAsPDF();
  const generarAnexosCambioPotenciaTitularPDF = useGenerarAnexosCambioPotenciaTitularPDF();

  const runWithComercialCanal = async (action: (c: string, ca: string) => void) => {
    const valores = await promptComercialCanal({ comercial, canal });
    if (!valores) {
      return;
    }
    setComercial(valores.comercial);
    setCanal(valores.canal);
    action(valores.comercial, valores.canal);
  };

  const handleSave = async (rowId: string) => {
    const dataToUpdate = getEditData(rowId);
    await handleUpdateCups(rowId, dataToUpdate, () => clearEdit(rowId));
  };

  const handleEdit = (rowId: string, cups: any) => {
    startEdit(rowId, cups);
  };

  const handleCancel = (rowId: string) => {
    cancelEdit(rowId);
  };

  const handleDelete = async (rowId: string) => {
    await handleDeleteCups(rowId);
  };

  /**
   * Handler que envuelve updateField para soportar datos comunes
   * Cuando isDatosComunes es true, propaga cambios a todos los CUPS del mismo tipo
   */
  const handleFieldChange = (rowId: string, field: string, value: any, cupsList: any[], tipo: 'electrico' | 'gas') => {
    // Obtener todos los IDs de CUPS del mismo tipo que están en edición
    const allRowIds = cupsList
      .map(cups => `${cups.CodProComCup}`)
      .filter(id => isEditing(id));

    updateField(rowId, field, value, isDatosComunes, allRowIds);
  };

  function generarOkCom(comercialVal: string, canalVal: string) {
    try {
        showLoading();
        router.post(route('v1.contracts.okCommercialContract'), {
            propuesta_id: datos.CodProCom,
            comercial: comercialVal,
            canal: canalVal,
        }, {
            onFinish: () => {
                hideLoading();
            },
            onSuccess: () => {
                Swal.fire({
                    title: 'Hecho',
                    text: 'El proceso de OK Comercial se está ejecutando en segundo plano.',
                    icon: 'success',
                    timer: 2500,
                    showConfirmButton: false,
                });
            },
            onError: (errors: any) => {
                Swal.fire({
                    title: 'Error',
                    text: 'Ocurrió un error al procesar la solicitud.',
                    icon: 'error',
                    confirmButtonText: 'Aceptar',
                });
            }
        });
    } catch (error) {
        hideLoading();
        Swal.fire({
            title: 'Error',
            text: 'Ocurrió un error inesperado.',
            icon: 'error',
            confirmButtonText: 'Aceptar',
        });
        console.error(error);
    }
  }

  function generarContratoComercial() {
    try {
        showLoading();
        router.post(route('anexo-producto.generate-contrato-comercial', { propuestaId: datos.CodProCom, comercial: comercial, canal: canal }), {

        }, {
            onFinish: () => {
                hideLoading();
            },
            onSuccess: () => {
                Swal.fire({
                    title: 'Hecho',
                    text: 'El proceso de generación de contrato se ha ejecutado correctamente.',
                    icon: 'success',
                    timer: 2500,
                    showConfirmButton: false,
                });
            },
            onError: (errors: any) => {
                Swal.fire({
                    title: 'Error',
                    text: 'Ocurrió un error al procesar la solicitud.',
                    icon: 'error',
                    confirmButtonText: 'Aceptar',
                });
            }
        });
    } catch (error) {
        hideLoading();
        Swal.fire({
            title: 'Error',
            text: 'Ocurrió un error inesperado.',
            icon: 'error',
            confirmButtonText: 'Aceptar',
        });
        console.error(error);
    }
  }

  const handleVolver = () => {
    showLoading();
    router.visit(route('contratos.index'), {
      onFinish: () => hideLoading(),
    });
  };

  const handleUploadSuccess = () => {
    // Recargar la página para mostrar el nuevo documento
    router.reload({ only: ['datos'] });
  };


  return (
    <React.Fragment>
      <Head title={`Editando Propuesta Comercial: ${datos.RefProCom}`} />
      <div className={`page-content ${estilosFoco.contenedorAccesibleContratos}`}>
        <Container fluid>
          <BreadCrumb title="Edición" pageTitle="Propuesta Comercial" />
          <Row>
            <Col xl={12}>
              <Card>
                <Card.Header>
                  <ContratoHeader
                    refProCom={datos.RefProCom}
                    onPrint={handlePrint}
                    onDownloadPDF={handleDownloadPDF}
                  />
                </Card.Header>

                <Card.Body>
                  <div ref={printRef}>
                    {/* Información General */}
                    <ContratoInfo
                      datos={datos}
                      formatFecha={formatFecha}
                      getTipoContratoLabel={getTipoContratoLabel}
                      getEstadoLabel={getEstadoLabel}
                    />

                    {/* Clientes y Puntos de Suministro */}
                    <div className="mt-5">
                      <div className="d-flex justify-content-between align-items-center border-bottom pb-2 mb-3">
                        <h5 className="mb-0">Clientes y Puntos de Suministro</h5>
                      </div>

                      {hasClienteData ? (
                        <Accordion
                          defaultActiveKey={activeKey}
                          onSelect={(k) => setActiveKey(k as string)}
                          className="mt-3"
                        >
                          {datos.propuesta_comercial_cliente.map((clienteData, clienteIndex) => {
                            //const cupsList = clienteData.propuesta_comercial_cups || [];
                            //const cupsElectricos = cupsList.filter(cups => cups.TipCups === 1);
                            //const cupsGas = cupsList.filter(cups => cups.TipCups === 2);

                            return (
                              <Accordion.Item
                                key={`cliente-${clienteIndex}`}
                                eventKey={clienteIndex.toString()}
                              >
                              <Accordion.Header>
                                  <span className="fw-bold">
                                    {clienteData?.cliente?.RazSocCli || 'Cliente sin nombre'}
                                  </span>
                                  <span className="ms-3 text-muted">
                                    NIF: {clienteData?.cliente?.NumCifCli || 'N/A'}
                                  </span>
                              </Accordion.Header>

                              <Accordion.Body>
                                  {/* Información del Cliente */}
                                  {clienteData?.cliente ? (
                                    <ClienteInfo clienteData={clienteData.cliente} />
                                  ) : (
                                    <p>Cliente sin información</p>
                                  )}

                                  {/* Puntos de Suministro con Pestañas */}
                                <div className="mt-4">
                                  <h6 className="fw-bold">Puntos de Suministro</h6>

                                    {cupsElectricosList.length > 0 || cupsGasList.length > 0 ? (
                                        <EneonTabsCard className="mt-3">
                                        <EneonTabsCardHeader>
                                        <TabNavigator
                                          activeTab={activeTab}
                                          onTabChange={setActiveTab}
                                          electricCount={cupsElectricosList.length}
                                          gasCount={cupsGasList.length}
                                          documentosCount={datos.documentos_propuestas.length}
                                        />
                                        </EneonTabsCardHeader>

                                        <EneonTabsCardBody>
                                        <div className="tab-content">
                                          {/* Tab CUPS Eléctricos */}
                                          {activeTab === 'electrico' && cupsElectricosList.length > 0 && (
                                            <div
                                               id="panel-cups-electrico"
                                               role="tabpanel"
                                               aria-labelledby="tab-electrico"
                                               tabIndex={0}
                                               className="tab-pane fade show active outline-none"
                                             >
                                              <CupsTable
                                                cupsList={cupsElectricosList}
                                                tipo="electrico"
                                                isMultiCliente={false}
                                                isEditing={isEditing}
                                                getEditData={getEditData}
                                                formatFecha={formatFecha}
                                                getEstadoContratoLabel={getEstadoContratoLabel}
                                                comercializadoras={comercializadoras}
                                                productos={productos}
                                                anexos={anexos}
                                                onFieldChange={(rowId, field, value) => handleFieldChange(rowId, field, value, cupsElectricosList, 'electrico')}
                                                onEdit={handleEdit}
                                                onSave={handleSave}
                                                onCancel={handleCancel}
                                                onDelete={handleDelete}
                                                showModalPrecios={showModalPrecios}
                                                onShowModalPrecios={setShowModalPrecios}
                                                onCloseModalPrecios={() => setShowModalPrecios(null)}
                                              />
                                            </div>
                                          )}

                                          {/* Tab CUPS Gas */}
                                          {activeTab === 'gas' && cupsGasList.length > 0 && (
                                            <div
                                               id="panel-cups-gas"
                                               role="tabpanel"
                                               aria-labelledby="tab-gas"
                                               tabIndex={0}
                                               className="tab-pane fade show active outline-none"
                                             >
                                              <CupsTable
                                                cupsList={cupsGasList}
                                                tipo="gas"
                                                isMultiCliente={false}
                                                isEditing={isEditing}
                                                getEditData={getEditData}
                                                formatFecha={formatFecha}
                                                getEstadoContratoLabel={getEstadoContratoLabel}
                                                comercializadoras={comercializadoras}
                                                productos={productos}
                                                anexos={anexos}
                                                onFieldChange={(rowId, field, value) => handleFieldChange(rowId, field, value, cupsGasList, 'gas')}
                                                onEdit={handleEdit}
                                                onSave={handleSave}
                                                onCancel={handleCancel}
                                                onDelete={handleDelete}
                                                showModalPrecios={showModalPrecios}
                                                onShowModalPrecios={setShowModalPrecios}
                                                onCloseModalPrecios={() => setShowModalPrecios(null)}
                                              />
                                            </div>
                                          )}

                                          {/* Tab Documentos */}
                                          {activeTab === 'documentos' && (
                                            <div
                                               id="panel-documentos"
                                               role="tabpanel"
                                               aria-labelledby="tab-documentos"
                                               tabIndex={0}
                                               className="tab-pane fade show active outline-none"
                                             >
                                                {/* Header con botón de carga */}
                                                <div className="d-flex justify-content-between align-items-center mb-3">
                                                    <h6 className="fw-bold mb-0">
                                                        <FileText size={18} className="me-2" style={{ display: 'inline' }} />
                                                        Documentos del Contrato
                                                    </h6>
                                                    <Button
                                                        variant="primary"
                                                        size="sm"
                                                        onClick={() => setShowUploadModal(true)}
                                                        className="d-flex align-items-center gap-2"
                                                    >
                                                        <Upload size={16} />
                                                        Cargar Documento
                                                    </Button>
                                                </div>
                                                {datos.documentos_propuestas.length > 0 ? (
                                                    <DocumentosTramitadosTable
                                                        documentos={datos.documentos_propuestas}
                                                        onDescargar={descargarDocumento}
                                                        onBorrar={borrarDocumento}
                                                    onEnviarComercializadora={(doc) => {
                                                      setDocumentoSeleccionado(doc);
                                                      setShowEnviarModal(true);
                                                    }}
                                                    />
                                                ) : (
                                                    <EmptyState type="documentos" />
                                                )}
                                            </div>
                                          )}

                                          {/* Estados vacíos */}
                                          {activeTab === 'electrico' && cupsElectricosList.length === 0 && (
                                            <EmptyState type="electrico" />
                                          )}
                                          {activeTab === 'gas' && cupsGasList.length === 0 && (
                                            <EmptyState type="gas" />
                                          )}
                                        </div>
                                        </EneonTabsCardBody>
                                        </EneonTabsCard>
                                  ) : (
                                    <p>No hay puntos de suministro registrados para este cliente</p>
                                  )}
                                </div>
                              </Accordion.Body>
                            </Accordion.Item>
                            );
                          })}
                        </Accordion>
                      ) : (
                        <p>No hay información de clientes disponible</p>
                      )}
                    </div>
                  </div>
                </Card.Body>

                <FormActions
                    mostrarBotonCupsElectricos={botonGenerarCupsElectricos}
                    mostrarBotonCupsGas={botonGenerarCupsGas}
                    botonesOcultos={botonesOcultos}
                    onTramitarContrato={() => saveContratoComercial(
                        datos.CodProCom,
                        datos.TipProCom,
                        datos.comercializadora?.servicio_integracion ?? '',
                        comercial,
                        canal,
                        showLoading,
                        hideLoading,
                        undefined,
                        undefined,
                        representantesLegales
                    )}
                  onGenerar0={() => {
                    void runWithComercialCanal((c, ca) => {
                      generarCondicionesEconomicas(datos.CodProCom, c, ca);
                    });
                  }}
                  onGenerar1={() => {
                    void runWithComercialCanal((c, ca) => {
                      generarContratosCondicionesGeneralesPDF(datos.CodProCom, c, ca);
                    });
                  }}
                  onGenerar2={async () => {
                    const valores = await promptCondicionesParticulares(representantesLegales);
                    if (valores) {
                      generarContratosCondicionesParticularesPDF(
                        datos.CodProCom,
                        valores.comercial,
                        valores.canal,
                        valores.CodConCli
                      );
                    }
                  }}
                  onGenerar3={() => {
                      generarAnexosCupsPDF(datos.CodProCom, "", "");
                  }}
                  onGenerar4={() => {
                      generarAnexosCupsGasPDF(datos.CodProCom, "", "");
                  }}
                  onGenerar5={() => {
                    void runWithComercialCanal((c, ca) => {
                      generarSEPAsPDF(datos.CodProCom, c, ca);
                    });
                  }}
                  onGenerar6={() => {
                    void runWithComercialCanal((c, ca) => {
                      generarOkCom(c, ca);
                    });
                  }}
                  onGenerar7 ={() => { generarContratoComercial() }}
                  onGenerar8={() => {
                    void runWithComercialCanal((c, ca) => {
                      generarAnexosCambioPotenciaTitularPDF(datos.CodProCom, c, ca);
                    });
                  }}
                  onVolver={handleVolver}
                />
              </Card>

              {/* Modal de carga de documentos */}
              <UploadDocumentoModal
                show={showUploadModal}
                onHide={() => setShowUploadModal(false)}
                codProCom={datos.CodProCom}
                comercializadorasUnicas={comercializadorasUnicas}
                contratosAsociados={contratosAsociados}
                onSuccess={handleUploadSuccess}
                showLoading={showLoading}
                hideLoading={hideLoading}
              />

              {/* Modal de enviar documento a comercializadora */}
              <EnviarDocumentoComercializadoraModal
                show={showEnviarModal}
                onHide={() => {
                  setShowEnviarModal(false);
                  setDocumentoSeleccionado(null);
                }}
                documento={documentoSeleccionado}
                codProCom={datos.CodProCom}
                comercializadorasUnicas={comercializadorasUnicas}
                contratosAsociados={contratosAsociados}
                onSuccess={handleUploadSuccess}
                showLoading={showLoading}
                hideLoading={hideLoading}
              />
            </Col>
          </Row>
        </Container>
      </div>
    </React.Fragment>
  );
};

(EditarContrato as any).layout = (page: React.ReactNode) => <Layout children={page} />;
export default EditarContrato;