import React, { useRef, useEffect, useState, useMemo } from "react";
import { Card, Col, Container, Row, Button, Table, Nav, Badge } 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 { CupsOption, PropuestaComercial } from "../Interfaces/Interfaces";
import { useLoading } from "../../../../LoadingContext";
import FormActions from "../FormActions";
import { saveContratoComercial } from "../../Utils";
import { promptComercialCanal } from "../promptComercialCanal";

// Hooks personalizados
import { useContratoState } from "./hooks/useContratoState";
import { useContratoEdition } from "./hooks/useContratoEdition";
import { useContratoHandlers } from "./hooks/useContratoHandlers";
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 UploadDocumentoModal from "./components/UploadDocumentoModal";
import EnviarDocumentoComercializadoraModal from "./components/EnviarDocumentoComercializadoraModal";
import {
    EneonTabsCard,
    EneonTabsCardBody,
    EneonTabsCardHeader,
} from '../../Shared/Tabs';

// 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 useDocumentosTramitados from "./hooks/useDocumentosTramitados";
import { DocumentosTramitadosTable } from "./components/DocumentosTramitadosTable";
import useGenerarCondicionesEconomicas from "./hooks/useGenerarCondicionesEconomicas";
import useGenerarContratosCondicionesParticularesPDF from "./hooks/useGenerarContratosCondicionesParticularesPDF";
import useGenerarContratosCondicionesGeneralesPDF from "./hooks/useGenerarContratosCondicionesGeneralesPDF";
import useGenerarAnexosCupsPDF from "./hooks/useGenerarAnexosCupsPDF";
import useGenerarAnexosCupsGasPDF from "./hooks/useGenerarAnexosCupsGasPDF";
import useGenerarSEPAsPDF from "./hooks/useGenerarSEPAsPDF";
import GenerarAnexosCambioPotenciaTitularPDF from "./hooks/useGenerarAnexosCambioPotenciaTitularPDF";

interface EditarContratoMultiClienteMultiPuntoProps {
  datos: PropuestaComercial;
  comercializadoras?: any[];
  productos?: any[];
  anexos?: any[];
  botonesOcultos?: number[];
  //tipoprecio?: any[];
  //clientes?: any[];
  //cupsElectricos?: CupsOption[];
  //cupsGas?: CupsOption[];
  //localidades?: any[];
}

const EditarContratoMultiClienteMultiPunto = ({
  datos,
  comercializadoras = [],
  productos = [],
  anexos = [],
  botonesOcultos = [],
  //tipoprecio = [],
  //clientes = [],
  //cupsElectricos = [],
  //cupsGas = [],
  //localidades = []
}: EditarContratoMultiClienteMultiPuntoProps) => {
  const printRef = useRef<HTMLDivElement>(null);
  const { showLoading, hideLoading } = useLoading();
  const { props } = usePage();
  const flash = props.flash as any;

  const [botonGenerarCupsElectricos, setBotonGenerarCupsElectricos] = useState(false);
  const [botonGenerarCupsGas, setBotonGenerarCupsGas] = useState(false);
  // Hooks personalizados
  const { activeTab, setActiveTab, showModalPrecios, setShowModalPrecios } = useContratoState();
  const {
    isEditing,
    getEditData,
    startEdit,
    cancelEdit,
    updateField,
    clearEdit
  } = useContratoEdition();
  const { handleUpdate: handleUpdateCups, handleDelete: handleDeleteCups } = useContratoHandlers();
  // Tipo 3: mostrar todo excepto Generar Contrato PDF (8) → ocultar solo 8
  botonesOcultos = [8];

  // Para tipo 2 y 3 los botones CUPS siempre visibles; para tipo 1 se controlan por estado
  const mostrarCupsElectricos = (datos.TipProCom === 2 || datos.TipProCom === 3) || botonGenerarCupsElectricos;
  const mostrarCupsGas       = (datos.TipProCom === 2 || datos.TipProCom === 3) || botonGenerarCupsGas;

  const generarCondicionesEconomicas = useGenerarCondicionesEconomicas();
  const generarContratosCondicionesGeneralesPDF = useGenerarContratosCondicionesGeneralesPDF();
  const generarContratosCondicionesParticularesPDF = useGenerarContratosCondicionesParticularesPDF();
  const generarAnexosCupsPDF = useGenerarAnexosCupsPDF();
  const generarAnexosCupsGasPDF = useGenerarAnexosCupsGasPDF();
  const generarSEPAsPDF = useGenerarSEPAsPDF();
  const generarAnexosCambioPotenciaTitularPDF = GenerarAnexosCambioPotenciaTitularPDF();
  // Estado para Comercial y Canal (se auto-cargan desde localStorage si existen)
  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 '';
    }
  });
  // 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) {
            console.log(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);
  };
  console.log(datos);
  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 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);
  };

  const handleTramitarContrato = async () => {
    try {

      await saveContratoComercial(
        datos.CodProCom,
        datos.TipProCom,
        datos.comercializadora?.servicio_integracion ?? '',
        comercial,
        canal,
        showLoading,
        hideLoading
      );
    } catch (error) {
      console.error('Error tramitando contrato:', error);
      hideLoading();
      Swal.fire({
        title: 'Error',
        text: 'Error al tramitar el contrato',
        icon: 'error',
        timer: 3000,
        showConfirmButton: false,
      });
    }
  };

  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 handleVolver = () => {
    showLoading();
    router.visit(route('contratos.index'), {
      onFinish: () => hideLoading(),
    });
  };

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

  // Obtener todos los CUPS agrupados por tipo
  const getAllCupsByType = (tipo: number) => {
    if (!hasClienteData) return [];

    return datos.propuesta_comercial_cliente.flatMap(clienteData =>
      clienteData.propuesta_comercial_cups.filter(cups => cups.TipCups === tipo)
    );
  };

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

  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);
    }
  }
  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 Multi-Cliente Multi-Punto" />
          <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}
                    />

                    {/* Representante Legal */}
                    {hasClienteData && datos.propuesta_comercial_cliente[0]?.contacto && (
                      <div className="mb-4">
                        <h5 className="border-bottom pb-2">Información del Representante Legal</h5>
                        <Row>
                          <Col md={6}>
                            <Table bordered responsive className="table-striped">
                              <tbody>
                                <tr>
                                  <th style={{ width: "40%" }}>Nombre</th>
                                  <td>{datos.propuesta_comercial_cliente[0]?.contacto?.NomConCli}</td>
                                </tr>
                                <tr>
                                  <th>NIF</th>
                                  <td>{datos.propuesta_comercial_cliente[0]?.contacto?.NIFConCli}</td>
                                </tr>
                                <tr>
                                  <th>Dirección</th>
                                  <td>
                                    {datos.propuesta_comercial_cliente[0]?.contacto?.NomViaDomFis}{' '}
                                    {datos.propuesta_comercial_cliente[0]?.contacto?.NumViaDomFis}
                                  </td>
                                </tr>

                                <tr>
                                  <th>Teléfono</th>
                                  <td>
                                    {datos.propuesta_comercial_cliente[0]?.contacto?.TelFijConCli ||
                                     datos.propuesta_comercial_cliente[0]?.contacto?.TelCelConCli ||
                                     'N/A'}
                                  </td>
                                </tr>
                                <tr>
                                  <th>Email</th>
                                  <td>
                                    {datos.propuesta_comercial_cliente[0]?.contacto?.EmaConCli || 'N/A'}
                                  </td>
                                </tr>
                                <tr>
                                  <th>Cargo</th>
                                  <td>
                                    {datos.propuesta_comercial_cliente[0]?.contacto?.CarConCli || 'N/A'}
                                  </td>
                                </tr>
                              </tbody>
                            </Table>
                          </Col>
                        </Row>
                      </div>
                    )}

                    {/* Clientes y Puntos de Suministro */}
                    <div className="mt-5">
                      <h5 className="border-bottom pb-2">Clientes y Puntos de Suministro</h5>

                      <div className="mt-4">
                        <EneonTabsCard>
                        <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' && (
                            <div
                               id="panel-cups-electrico"
                               role="tabpanel"
                               aria-labelledby="tab-electrico"
                               tabIndex={0}
                               className="tab-pane fade show active outline-none"
                             >
                              {cupsElectricosList.length > 0 ? (
                                <>
                                  <h6 className="text-primary fw-bold mb-3">Suministros Eléctricos</h6>
                                  <CupsTable
                                    cupsList={cupsElectricosList}
                                    tipo="electrico"
                                    isMultiCliente={true}
                                    isEditing={isEditing}
                                    getEditData={getEditData}
                                    formatFecha={formatFecha}
                                    getEstadoContratoLabel={getEstadoContratoLabel}
                                    comercializadoras={comercializadoras}
                                    productos={productos}
                                    anexos={anexos}
                                    onFieldChange={updateField}
                                    onEdit={handleEdit}
                                    onSave={handleSave}
                                    onCancel={handleCancel}
                                    onDelete={handleDelete}
                                    showModalPrecios={showModalPrecios}
                                    onShowModalPrecios={setShowModalPrecios}
                                    onCloseModalPrecios={() => setShowModalPrecios(null)}
                                  />
                                            </>
                                          ) : (
                                <EmptyState type="electrico" />
                                          )}
                                        </div>
                          )}

                          {/* Tab CUPS Gas */}
                          {activeTab === 'gas' && (
                            <div
                               id="panel-cups-gas"
                               role="tabpanel"
                               aria-labelledby="tab-gas"
                               tabIndex={0}
                               className="tab-pane fade show active outline-none"
                             >
                              {cupsGasList.length > 0 ? (
                                <>
                          <h6 className="text-warning fw-bold mb-3">Suministros de Gas</h6>
                                  <CupsTable
                                    cupsList={cupsGasList}
                                    tipo="gas"
                                    isMultiCliente={true}
                                    isEditing={isEditing}
                                    getEditData={getEditData}
                                    formatFecha={formatFecha}
                                    getEstadoContratoLabel={getEstadoContratoLabel}
                                    comercializadoras={comercializadoras}
                                    productos={productos}
                                    anexos={anexos}
                                    onFieldChange={updateField}
                                    onEdit={handleEdit}
                                    onSave={handleSave}
                                    onCancel={handleCancel}
                                    onDelete={handleDelete}
                                    showModalPrecios={showModalPrecios}
                                    onShowModalPrecios={setShowModalPrecios}
                                    onCloseModalPrecios={() => setShowModalPrecios(null)}
                                  />
                                              </>
                                            ) : (
                                <EmptyState type="gas" />
                                            )}
                                          </div>
                          )}

                          {/* Tab CUPS 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>
                          )}
                        </div>
                        </EneonTabsCardBody>
                        </EneonTabsCard>
                      </div>
                    </div>
                  </div>
                </Card.Body>

                <FormActions
                    mostrarBotonCupsElectricos={mostrarCupsElectricos}
                    mostrarBotonCupsGas={mostrarCupsGas}
                    botonesOcultos={botonesOcultos}
                    onTramitarContrato={handleTramitarContrato}
                    onGenerar0={() => {
                      void runWithComercialCanal((c, ca) => {
                        generarCondicionesEconomicas(datos.CodProCom, c, ca);
                      });
                    }}
                    onGenerar1={() => {
                      void runWithComercialCanal((c, ca) => {
                        generarContratosCondicionesGeneralesPDF(datos.CodProCom, c, ca);
                      });
                    }}
                    onGenerar2={() => {
                      void runWithComercialCanal((c, ca) => {
                        generarContratosCondicionesParticularesPDF(datos.CodProCom, c, ca);
                      });
                    }}
                    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={() => {
                      void runWithComercialCanal((c, ca) => {
                        generarOkCom(c, ca);
                      });
                    }}
                    onGenerar8={() => {
                        generarAnexosCambioPotenciaTitularPDF(datos.CodProCom);
                    }}
                    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>
  );
};

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