"use client";

import jsPDF from "jspdf";
import { applyPlugin } from 'jspdf-autotable'

applyPlugin(jsPDF)

import React, { useState, useEffect } from "react";
import writtenNumber from "written-number";
import axios from "axios";
import Swal from "sweetalert2";
import { Modal } from "@mui/material";


function Acta({ darkMode }) {
  writtenNumber.defaults.lang = "es";

  const [razonSocial, setRazonSocial] = useState("");
  const [Fecha, setFecha] = useState("");
  const [Direccion, setDireccion] = useState("");
  const [Socios, setSocios] = useState([]);
  const [valorAutorizado, setValorAutorizado] = useState("");
  const [representante, setrepresentanteLegal] = useState([]);
  const [suplente, setsuplenteLegal] = useState([]);
  const [Ciudad, setCiudad] = useState("BOGOTÁ, D.C.");
  const [Departamento, setDepartamento] = useState("BOGOTÁ, D.C.");
  const [valorNominal, setValorNominal] = useState("");
  const [dataColombia, setDataColombia] = useState([]);
  const [departamentos, setDepartamentos] = useState([]);
  const [ciudades, setCiudades] = useState([]);
  const [objetoSocial, setObjetoSocial] = useState([]);
  const [correo, setCorreo] = useState("");
  const [telefono, setTelefono] = useState("");
  const [ciudadesDomiliciados, setCiudadesDomiliciados] = useState([]);
  const [openPdf, setOpenPdf] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [pdfDataUri, setPdfDataUri] = useState("");

  const bgColor = darkMode ? "bg-gray-900" : "bg-gray-50";
  const cardBg = darkMode ? "bg-gray-800" : "bg-white";
  const textPrimary = darkMode ? "text-gray-100" : "text-gray-900";
  const textSecondary = darkMode ? "text-gray-400" : "text-gray-600";
  const borderColor = darkMode ? "border-gray-700" : "border-gray-200";
  const inputBg = darkMode ? "bg-gray-700 border-gray-600 text-white" : "bg-white border-gray-300 text-gray-900";
  const inputFocus = darkMode ? "focus:ring-blue-500 focus:border-blue-500" : "focus:ring-blue-500 focus:border-blue-500";
  const labelColor = darkMode ? "text-gray-300" : "text-gray-700";
  const hoverBg = darkMode ? "hover:bg-gray-700" : "hover:bg-gray-50";


  useEffect(() => {
    // Cambia la URL a la URL de la API que deseas usar
    axios
      .get("https://www.datos.gov.co/resource/gdxc-w37w.json")
      .then((response) => {
        const data = response.data;
        let deps = [...new Set(data.map((item) => item.dpto))]; // Obtiene los departamentos únicos

        // Ordena los departamentos alfabéticamente
        deps.sort((a, b) => a.localeCompare(b));

        // Mueve Bogotá D.C. al principio del array si está presente
        const index = deps.indexOf("BOGOTÁ, D.C.");
        if (index > -1) {
          deps.splice(index, 1);
          deps.unshift("BOGOTÁ, D.C.");
        }

        setDataColombia(data);

        setCiudadesDomiliciados(
          data.map((item) => item.nom_mpio).filter((value, index, self) => self.indexOf(value) === index).sort()
        ); // Ordena las ciudades alfabéticamente

        setDepartamentos(deps);

      })
      .catch((error) => console.error("Error fetching data: ", error));

  }, []);

  useEffect(() => {
      setCiudades(
          dataColombia
            .filter((item) => item.dpto === Departamento) // Filtra las ciudades por departamento
            .map((item) => item.nom_mpio) // Mapea solo el nombre de las ciudades
            .sort() // Ordena las ciudades alfabéticamente
        );
  }, [Departamento, dataColombia]);


  const handleDepartamentoChange = (ev) => {
    setDepartamento(ev.target.value);

    
  };

  const handleCiudadChange = (ev) => {
    setCiudad(ev.target.value);
  };

  // useEffect(() => {
  //   axios.get("https://www.datos.gov.co/resource/gdxc-w37w.json").then((response) => {
  //     const data = response.data;
  //     let city = [...new Set(data.map((item) => item.nom_mpio))]; // Obtiene las ciudades únicas
  //     city.sort((a, b) => a.localeCompare(b)); // Ordena las ciudades alfabéticamente
  //     setCiudadesDomiliciados(city);
  //   });
  // }, []);

  const obtenerNombreMes = (mes) => {
    const meses = [
      "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio",
      "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"
    ];
    const mesNumero = parseInt(mes, 10) - 1;
    return meses[mesNumero] || "";
  };

  const handleRazonSocialChange = (ev) => {
    const upperCaseRazonSocial = ev.target.value.toUpperCase();
    setRazonSocial(upperCaseRazonSocial);
  };

  const handleFechaChange = (ev) => {
    const fecha = ev.target.value.split("-");
    const dia = fecha[2];
    const mes = fecha[1];
    const año = fecha[0];
    const nombreMes = obtenerNombreMes(mes);
    setFecha(`a los ${dia} dias del mes de ${nombreMes} de ${año}`);
  };

  const handleDireccionChange = (ev) => {
    setDireccion(ev.target.value);
  };

  const handleSociosChange = (ev, index) => {
    const { name, value } = ev.target;
    const newSocios = [...Socios];
    newSocios[index][name] = value;
    setSocios(newSocios);
  };

  const handleAddSocio = () => {
    setSocios([
      ...Socios,
      {
        nombre: "",
        tipoidentificacion: "",
        identificacion: "",
        porcentaje: "",
        accionespag: "",
        accionessusc: "",
        domiciliado: ""
      },
    ]);
  };

  const handleRemoveSocio = (indexToRemove) => {
    setSocios(Socios.filter((_, index) => index !== indexToRemove));
  };

  const renderSocios = () => {
    if (Socios.length === 0) {
      return (
        <div className="mb-6 mt-4">
          <div className={`${darkMode ? 'bg-yellow-900/20 border-yellow-800' : 'bg-yellow-50 border-yellow-200'} border rounded-lg p-4 mb-4`}>
            <h3 className={`font-bold mb-2 ${darkMode ? 'text-yellow-100' : 'text-yellow-900'}`}>No hay socios creados</h3>
            <p className={darkMode ? 'text-yellow-300' : 'text-yellow-800'}>Para continuar, debe agregar al menos un socio.</p>
          </div>
          <button
            onClick={handleAddSocio}
            className="w-full bg-blue-600 text-white px-4 py-3 rounded-lg hover:bg-blue-700 font-semibold transition-colors flex items-center justify-center gap-2"
          >
            <span className="material-icons text-sm">group_add</span>
            Agregar Socio
          </button>
        </div>
      );
    }

    const porcentajeTotal = Socios.reduce((total, socio) => total + (parseInt(socio.porcentaje) || 0), 0);

    return (
      <div>
        <div className="mb-6 flex flex-wrap gap-2">
          {Socios.map((socio, index) => (
            <div key={index} className={`${darkMode ? 'bg-blue-900/20 border-blue-800 text-blue-200' : 'bg-blue-50 border-blue-200 text-blue-700'} border px-3 py-2 rounded-full flex items-center gap-2 text-sm`}>
              <span className="font-semibold">{index + 1}</span>
              <span>{socio.nombre || 'Sin nombre'} ({socio.porcentaje || 0}%)</span>
            </div>
          ))}
        </div>

        <div className={`mb-4 h-2 rounded-full ${darkMode ? 'bg-gray-700' : 'bg-gray-200'}`}>
          <div
            className={`h-full rounded-full transition-all ${porcentajeTotal === 100 ? 'bg-green-500' : 'bg-yellow-500'}`}
            style={{ width: `${Math.min(porcentajeTotal, 100)}%` }}
          />
        </div>
        <div className="mb-6 flex justify-between items-center">
          <span className={`text-sm font-medium ${darkMode ? 'text-gray-400' : 'text-gray-600'}`}>
            {porcentajeTotal}% del 100% requerido
          </span>
          {porcentajeTotal !== 100 && (
            <span className="text-sm font-medium text-yellow-500">La suma debe ser exactamente 100%</span>
          )}
        </div>

        <div className="space-y-4 mb-6">
          {Socios.map((socio, index) => (
            <div key={index} className={`${cardBg} ${borderColor} border rounded-lg p-6`}>
              <div className="flex justify-between items-center mb-4">
                <div className="flex items-center gap-3">
                  <div className="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center text-sm font-bold">
                    {index + 1}
                  </div>
                  <span className={`font-semibold ${textPrimary}`}>Socio {index + 1}</span>
                </div>
                <button
                  onClick={() => handleRemoveSocio(index)}
                  className="text-red-500 hover:text-red-700 transition-colors"
                >
                  <span className="material-icons text-sm">delete</span>
                </button>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                <div>
                  <label className={`block text-xs font-bold mb-2 ${labelColor}`}>Nombre Completo</label>
                  <input
                    type="text"
                    name="nombre"
                    value={socio.nombre || ""}
                    onChange={(e) => handleSociosChange(e, index)}
                    className={`w-full px-3 py-2 border rounded-lg ${inputBg} ${inputFocus} text-sm`}
                    placeholder="Nombre del socio"
                  />
                </div>
                <div>
                  <label className={`block text-xs font-bold mb-2 ${labelColor}`}>Tipo de Identificación</label>
                  <select
                    name="tipoidentificacion"
                    value={socio.tipoidentificacion || ""}
                    onChange={(e) => handleSociosChange(e, index)}
                    className={`w-full px-3 py-2 border rounded-lg ${inputBg} ${inputFocus} text-sm`}
                  >
                    <option value="">Seleccione</option>
                    <option value="Cédula de Ciudadanía">Cédula de Ciudadanía</option>
                    <option value="Nit">Nit</option>
                    <option value="Cédula de Extranjería">Cédula de Extranjería</option>
                  </select>
                </div>
                <div>
                  <label className={`block text-xs font-bold mb-2 ${labelColor}`}>Número de Identificación</label>
                  <input
                    type="text"
                    name="identificacion"
                    value={socio.identificacion || ""}
                    onChange={(e) => handleSociosChange(e, index)}
                    className={`w-full px-3 py-2 border rounded-lg ${inputBg} ${inputFocus} text-sm`}
                  />
                </div>
                <div>
                  <label className={`block text-xs font-bold mb-2 ${labelColor}`}>Porcentaje</label>
                  <div className="flex items-center gap-2">
                    <input
                      type="number"
                      name="porcentaje"
                      value={socio.porcentaje || ""}
                      onChange={(e) => handleSociosChange(e, index)}
                      className={`w-full flex-1 px-3 py-2 border rounded-lg ${inputBg} ${inputFocus} text-sm`}
                    />
                    <span className={labelColor}>%</span>
                  </div>
                </div>
                <div>
                  <label className={`block text-xs font-bold mb-2 ${labelColor}`}>Acciones Pagadas</label>
                  <input
                    type="number"
                    name="accionespag"
                    value={socio.accionespag || ""}
                    onChange={(e) => handleSociosChange(e, index)}
                    className={`w-full px-3 py-2 border rounded-lg ${inputBg} ${inputFocus} text-sm`}
                  />
                </div>
                <div>
                  <label className={`block text-xs font-bold mb-2 ${labelColor}`}>Acciones Suscritas</label>
                  <input
                    type="number"
                    name="accionessusc"
                    value={socio.accionessusc || ""}
                    onChange={(e) => handleSociosChange(e, index)}
                    className={`w-full px-3 py-2 border rounded-lg ${inputBg} ${inputFocus} text-sm`}
                  />
                </div>
                <div className="sm:col-span-2">
                  <label className={`block text-xs font-bold mb-2 ${labelColor}`}>Domiciliado en</label>
                  <select
                    name="domiciliado"
                    value={socio.domiciliado || ""}
                    onChange={(e) => handleSociosChange(e, index)}
                    className={`w-full px-3 py-2 border rounded-lg ${inputBg} ${inputFocus} text-sm`}
                  >
                    <option value="">Seleccione ciudad</option>
                    {ciudadesDomiliciados.map((ciudad, idx) => (
                      <option key={idx} value={ciudad}>{ciudad}</option>
                    ))}
                  </select>
                </div>
              </div>
            </div>
          ))}
        </div>

        <button
          onClick={handleAddSocio}
          className="w-full bg-blue-600 text-white px-4 py-3 rounded-lg hover:bg-blue-700 font-semibold transition-colors flex items-center justify-center gap-2"
        >
          <span className="material-icons text-sm">add_circle</span>
          Agregar Socio
        </button>
      </div>
    );
  };

  const handleValorAutorizadoChange = (ev) => {
    setValorAutorizado(ev.target.value);
  };

  const handlerepresentanteLegalChange = (ev) => {
    const { name, value } = ev.target;
    const newrepresentante = [...representante];
    if (newrepresentante.length === 0) {
      newrepresentante.push({ nombre: "", tipoidentificacion: "", identificacion: "" });
    }
    newrepresentante[0][name] = value;
    setrepresentanteLegal(newrepresentante);
  };

  const handleAddrepresentanteLegal = () => {
    if (representante.length === 0) {
      setrepresentanteLegal([
        {
          nombre: "",
          tipoidentificacion: "",
          identificacion: "",
        },
      ]);
    }
  };

  const handlesuplenteLegalChange = (ev) => {
    const { name, value } = ev.target;
    const newsuplente = [...suplente];
    if (newsuplente.length === 0) {
      newsuplente.push({ nombre: "", tipoidentificacion: "", identificacion: "" });
    }
    newsuplente[0][name] = value;
    setsuplenteLegal(newsuplente);
  };

  const handleAddsuplenteLegal = () => {
    if (suplente.length === 0) {
      setsuplenteLegal([
        {
          nombre: "",
          tipoidentificacion: "",
          identificacion: "",
        },
      ]);
    }
  };

  const renderrepresentanteLegal = () => {
    if (representante.length === 0) {
      return (
        <div className="mb-6">
          <div className={`${darkMode ? 'bg-yellow-900/20 border-yellow-800' : 'bg-yellow-50 border-yellow-200'} border rounded-lg p-4 mb-4`}>
            <h3 className={`font-bold mb-2 ${darkMode ? 'text-yellow-100' : 'text-yellow-900'}`}>No hay representante legal creado</h3>
            <p className={darkMode ? 'text-yellow-300' : 'text-yellow-800'}>Para continuar, debe agregar un representante legal.</p>
          </div>
          <button
            onClick={handleAddrepresentanteLegal}
            className="w-full bg-blue-600 text-white px-4 py-3 rounded-lg hover:bg-blue-700 font-semibold transition-colors flex items-center justify-center gap-2"
          >
            <span className="material-icons text-sm">person</span>
            Agregar Representante Legal
          </button>
        </div>
      );
    }

    return (
      <div className={`${cardBg} ${borderColor} border rounded-lg p-6 mb-6`}>
        <h3 className="text-lg font-bold text-blue-600 mb-4">Representante Legal</h3>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div>
            <label className={`block text-xs font-bold mb-2 ${labelColor}`}>Nombre Completo</label>
            <input
              type="text"
              name="nombre"
              value={representante[0].nombre || ""}
              onChange={handlerepresentanteLegalChange}
              className={`w-full px-3 py-2 border rounded-lg ${inputBg} ${inputFocus} text-sm`}
            />
          </div>
          <div>
            <label className={`block text-xs font-bold mb-2 ${labelColor}`}>Tipo de Identificación</label>
            <select
              name="tipoidentificacion"
              value={representante[0].tipoidentificacion || ""}
              onChange={handlerepresentanteLegalChange}
              className={`w-full px-3 py-2 border rounded-lg ${inputBg} ${inputFocus} text-sm`}
            >
              <option value="">Seleccione</option>
              <option value="Cédula de Ciudadanía">Cédula de Ciudadanía</option>
              <option value="Nit">Nit</option>
              <option value="Cédula de Extranjería">Cédula de Extranjería</option>
            </select>
          </div>
          <div>
            <label className={`block text-xs font-bold mb-2 ${labelColor}`}>Identificación</label>
            <input
              type="text"
              name="identificacion"
              value={representante[0].identificacion || ""}
              onChange={handlerepresentanteLegalChange}
              className={`w-full px-3 py-2 border rounded-lg ${inputBg} ${inputFocus} text-sm`}
            />
          </div>
        </div>
      </div>
    );
  };

  const rendersuplenteLegal = () => {
    if (suplente.length === 0) {
      return (
        <div className="mb-6">
          <div className={`${darkMode ? 'bg-blue-900/20 border-blue-800' : 'bg-blue-50 border-blue-200'} border rounded-lg p-4 mb-4`}>
            <h3 className={`font-bold mb-2 ${darkMode ? 'text-blue-100' : 'text-blue-900'}`}>No hay suplente legal creado</h3>
            <p className={darkMode ? 'text-blue-300' : 'text-blue-800'}>Si lo desea, puede agregar un suplente legal (opcional).</p>
          </div>
          <button
            onClick={handleAddsuplenteLegal}
            className={`w-full border-2 border-blue-600 text-blue-600 px-4 py-3 rounded-lg ${hoverBg} font-semibold transition-colors flex items-center justify-center gap-2`}
          >
            <span className="material-icons text-sm">person</span>
            Agregar Suplente Legal
          </button>
        </div>
      );
    }

    return (
      <div className={`${cardBg} ${borderColor} border rounded-lg p-6 mb-6`}>
        <div className="flex justify-between items-center mb-4">
          <h3 className="text-lg font-bold text-blue-600">Suplente Legal</h3>
          <button
            onClick={() => setsuplenteLegal([])}
            className="text-red-500 hover:text-red-700 transition-colors text-sm font-semibold flex items-center gap-1"
          >
            <span className="material-icons text-sm">delete</span>
            Eliminar
          </button>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div>
            <label className={`block text-xs font-bold mb-2 ${labelColor}`}>Nombre Completo</label>
            <input
              type="text"
              name="nombre"
              value={suplente[0].nombre || ""}
              onChange={handlesuplenteLegalChange}
              className={`w-full px-3 py-2 border rounded-lg ${inputBg} ${inputFocus} text-sm`}
            />
          </div>
          <div>
            <label className={`block text-xs font-bold mb-2 ${labelColor}`}>Tipo de Identificación</label>
            <select
              name="tipoidentificacion"
              value={suplente[0].tipoidentificacion || ""}
              onChange={handlesuplenteLegalChange}
              className={`w-full px-3 py-2 border rounded-lg ${inputBg} ${inputFocus} text-sm`}
            >
              <option value="">Seleccione</option>
              <option value="Cédula de Ciudadanía">Cédula de Ciudadanía</option>
              <option value="Nit">Nit</option>
              <option value="Cédula de Extranjería">Cédula de Extranjería</option>
            </select>
          </div>
          <div>
            <label className={`block text-xs font-bold mb-2 ${labelColor}`}>Identificación</label>
            <input
              type="text"
              name="identificacion"
              value={suplente[0].identificacion || ""}
              onChange={handlesuplenteLegalChange}
              className={`w-full px-3 py-2 border rounded-lg ${inputBg} ${inputFocus} text-sm`}
            />
          </div>
        </div>
      </div>
    );
  };

  const handleObjetoSocialChange = (ev, index) => {
    const newObjetoSocial = [...objetoSocial];
    newObjetoSocial[index].texto = ev.target.value;
    setObjetoSocial(newObjetoSocial);
  };

  const addObjetoSocial = () => {
    setObjetoSocial([...objetoSocial, { texto: "" }]);
  };

  const deleteObjetoSocial = (indexToDelete) => {
    const newObjetoSocial = objetoSocial.filter((_, index) => index !== indexToDelete);
    setObjetoSocial(newObjetoSocial);
  };

  const renderObjetoSocial = () => {
    if (objetoSocial.length === 0) {
      return (
        <div className="mb-6">
          <div className={`${darkMode ? 'bg-yellow-900/20 border-yellow-800' : 'bg-yellow-50 border-yellow-200'} border rounded-lg p-4 mb-4`}>
            <h3 className={`font-bold mb-2 ${darkMode ? 'text-yellow-100' : 'text-yellow-900'}`}>No hay objetos sociales creados</h3>
            <p className={darkMode ? 'text-yellow-300' : 'text-yellow-800'}>Para continuar, debe agregar al menos un objeto social.</p>
          </div>
          <button
            onClick={addObjetoSocial}
            className="w-full bg-blue-600 text-white px-4 py-3 rounded-lg hover:bg-blue-700 font-semibold transition-colors flex items-center justify-center gap-2"
          >
            <span className="material-icons text-sm">description</span>
            Agregar Objeto Social
          </button>
        </div>
      );
    }

    return (
      <div className="mb-6">
        <div className="space-y-4 mb-6">
          {objetoSocial.map((objeto, index) => (
            <div key={index} className={`${cardBg} ${borderColor} border rounded-lg p-6`}>
              <div className="flex justify-between items-center mb-4">
                <h4 className={`font-semibold ${textPrimary}`}>Objeto Social {index + 1}</h4>
                <button
                  onClick={() => deleteObjetoSocial(index)}
                  className="text-red-500 hover:text-red-700 transition-colors"
                >
                  <span className="material-icons text-sm">delete</span>
                </button>
              </div>
              <textarea
                value={objeto.texto}
                onChange={(e) => handleObjetoSocialChange(e, index)}
                placeholder="Describa el objeto social..."
                rows="3"
                className={`w-full px-3 py-2 border rounded-lg ${inputBg} ${inputFocus} text-sm resize-none`}
              />
            </div>
          ))}
        </div>

        <button
          onClick={addObjetoSocial}
          className="w-full bg-blue-600 text-white px-4 py-3 rounded-lg hover:bg-blue-700 font-semibold transition-colors flex items-center justify-center gap-2"
        >
          <span className="material-icons text-sm">add_circle</span>
          Agregar Otro Objeto Social
        </button>
      </div>
    );
  };

  const handleValorNominalChange = (ev) => {
    setValorNominal(ev.target.value);
  };

  const handleCorreoChange = (ev) => {
    setCorreo(ev.target.value);
  };

  const handleTelefonoChange = (ev) => {
    setTelefono(ev.target.value);
  };

  let departamento = Departamento;

  if (departamento === "Bogotá D.C.") {
    departamento = "Cundinamarca";
  }

  const generatePdf = async () => {
    setIsLoading(false);

    // Validaciones
    if (
      razonSocial === "" ||
      Fecha === "" ||
      Direccion === "" ||
      Socios.length === 0 ||
      representante.length === 0 ||
      Ciudad === "" ||
      Departamento === "" ||
      objetoSocial.length === 0 ||
      valorAutorizado === "" ||
      valorNominal === "" ||
      correo === '' ||
      telefono === ''
    ) {
      Swal.fire({
        icon: "error",
        title: "Campos incompletos",
        text: "Todos los campos son obligatorios",
      });
      setIsLoading(false);
      return;
    }

    // Verificar campos vacíos en los socios
    const sociosVacios = Socios.some((socio) => {
      return (
        socio.nombre === "" ||
        socio.tipoidentificacion === "" ||
        socio.identificacion === "" ||
        socio.porcentaje === "" ||
        socio.accionespag === "" ||
        socio.accionessusc === "" ||
        socio.domiciliado === ""
      );
    });

    if (sociosVacios) {
      Swal.fire({
        icon: "error",
        title: "Datos de socios incompletos",
        text: "Todos los campos de los socios son obligatorios",
      });
      setIsLoading(false);
      return;
    }

    // Validar porcentaje total
    const porcentajeAcc = Socios.reduce((total, socio) => {
      return total + parseInt(socio.porcentaje);
    }, 0);

    if (porcentajeAcc !== 100) {
      Swal.fire({
        icon: "error",
        title: "Error en porcentajes",
        text: "El porcentaje total de los socios debe ser igual a 100%",
      });
      setIsLoading(false);
      return;
    }

    // Datos para el PDF
    const data = {
      razonSocial,
      Fecha,
      Direccion,
      Socios,
      suplente: suplente,
      representante: representante,
      Ciudad: Ciudad,
      Departamento: Departamento,
      objetoSocial: objetoSocial,
      valorAutorizado: valorAutorizado,
      valorNominal: valorNominal,
    };

    // Representante Legal
    const representanteLegal = representante[0];
    const suplenteLegal = suplente.length > 0 ? suplente[0] : null;

    // Validar representante y suplente (que no sean la misma persona)
    if (suplenteLegal) {
      if (
        representanteLegal.nombre === suplenteLegal.nombre &&
        representanteLegal.identificacion === suplenteLegal.identificacion &&
        representanteLegal.nombre !== ""
      ) {
        Swal.fire({
          icon: "error",
          title: "Error en representación legal",
          text: "El Representante Legal y el Suplente no pueden ser la misma persona",
        });
        setIsLoading(false);
        return;
      }
    }

    // Cálculo de valores para el acta

    // Código de generación del PDF
    const totalValorAcciones = Socios.reduce((total, socio) => {
      return total + socio.accionessusc * valorNominal;
    }, 0);

    const TotalAccionesAut = valorAutorizado * valorNominal;

    const totalValoraccionespag = Socios.reduce((total, socio) => {
      return total + socio.accionespag * valorNominal;
    }, 0);

    const totalaccionespag = Socios.reduce((total, socio) => {
      return total + parseInt(socio.accionespag);
    }, 0);

    const totalAcciones = Socios.reduce((total, socio) => {
      return total + parseInt(socio.accionessusc);
    }, 0);

    // funcion para convertir el valor a moneda colombiana
    function valorPesos(valor) {
      // convertir el valor a moneda colombiana
      const valorPesos = new Intl.NumberFormat("es-CO", {
        style: "currency",
        currency: "COP",
      }).format(valor);

      // eliminar los ultimos 3 caracteres que son los centavos

      let valorNumero = valorPesos.slice(0, -3);

      // eliminar el signo de pesos
      valorNumero = valorNumero.slice(2);
      return valorNumero;
    }

    let contenidoObjetoSocial = "";
    objetoSocial.forEach((objeto, index) => {
      contenidoObjetoSocial += `- ${objeto.texto}.                           \n`;
    });

    // convertir el valor a su numero en letras correspondiente "veinte millones de pesos"

    const valor = valorPesos(totalValorAcciones);

    const acciones = valorNominal
    const Acciones = valorPesos(parseFloat(acciones));

    const TotalAcciones = valorPesos(totalAcciones);
    const accionespag = valorPesos(parseFloat(totalaccionespag));
    const Totalaccionespag = valorPesos(totalValoraccionespag);
    const accionesautorizadas = valorPesos(parseFloat(valorAutorizado));

    const AccionesAut = valorPesos(TotalAccionesAut);

    // convertir el valor a su numero en letras correspondiente "veinte millones de pesos"
    let ValorLetras = writtenNumber(totalValorAcciones);
    ValorLetras = ValorLetras.toUpperCase();


    let valoraccionespag = writtenNumber(totalValoraccionespag);
    valoraccionespag = valoraccionespag.toUpperCase();

    let valorAcciones = writtenNumber(acciones);
    valorAcciones = valorAcciones.toUpperCase();

    let valorAutorizadoL = writtenNumber(TotalAccionesAut);
    valorAutorizadoL = valorAutorizadoL.toUpperCase();

    const doc = new jsPDF();

    doc.setFont("helvetica", "bold");
    doc.setFontSize(18);
    doc.text(`${razonSocial} S.A.S`, 100, 20, { align: "center" });

    doc.setFontSize(15);
    doc.text("Acto Constitutivo", 100, 40, { align: "center" });

    doc.setFontSize(12);
    doc.setFont("helvetica", "normal");

    const textWidth = doc.internal.pageSize.width - 35;

    const content = `En la ciudad de ${data.Ciudad}, ${departamento} ${data.Fecha}, se reunieron en la ${data.Direccion}, las siguientes personas naturales:`;

    doc.text(doc.splitTextToSize(content, 170), 20, 50, {
      align: "justify",
      x: 20,
      y: 50,
      maxWidth: 170,

    });

    doc.autoTable({
      startY: 65,
      head: [["Nombre", "Tipo de Identificacion", "Identificacion", "Porcent.", "Domiciliado en:"]],
      body: data.Socios.map((socio) => [socio.nombre.toUpperCase(), socio.tipoidentificacion, valorPesos(socio.identificacion), socio.porcentaje + "%", socio.domiciliado]),
      theme: "grid",
      headStyles: { fillColor: [0, 0, 0] },
      bodyStyles: { fillColor: [255, 255, 255] },
      alternateRowStyles: { fillColor: [255, 255, 255] },
      columnStyles: {

        3: { cellWidth: 20 },
      },
      margin: { left: 20, right: 20 },
      styles: { overflow: "linebreak" },
    });

    // Obtener la posición Y actual después de dibujar la tabla
    let currentY = doc.lastAutoTable.finalY;
    const content2 =
      `Quienes en ejercicio del derecho de asociación han decidido constituir una sociedad mercantil por acciones simplificada denominada ${data.razonSocial} S.A.S. para realizar las actividades mercantiles lícitas en la forma descrita en el objeto social plasmado en los estatutos que a continuación se adoptan.                  

ESTATUTOS DE LA SOCIEDAD                              

CAPÍTULO I                                    

ARTÍCULO PRIMERO. DENOMINACIÓN                    
La sociedad se denominará ${data.razonSocial} S.A.S. como SOCIEDAD POR ACCIONES SIMPLIFICADA, de nacionalidad Colombiana.                       

ARTICULO SEGUNDO.                                     
La sociedad tendrá su domicilio principal en la ciudad de ${data.Ciudad}, ${departamento}.             
La sociedad podrá establecer sucursales, agencias, oficinas, representaciones, dependencias, filiales, subsidiarias, en otros lugares del pais o del exterior, por disposicion de la Asamblea General de Accionistas, con arreglo a la ley.                             

La sociedad podrá cambiar su domicilio principal dentro del mismo municipio o ciudad, mediante decisión de la Asamblea General de Accionistas, la cual deberá ser inscrita en el registro mercantil.               

ARTÍCULO TERCERO. OBJETO SOCIAL.                             
La sociedad tendrá por objeto principal la siguiente actividad:                                     
${contenidoObjetoSocial}                              

Para el cumplimiento de los fines propuestos, la compañía podrá adquirir bienes muebles o inmuebles que requiera, bien sea en el país o en el exterior y enajenarlos, tomar dinero en préstamo a interés, dar en garantía sus bienes muebles e inmuebles y en general ejecutar contratos de mutuo en todas sus formas y el de cambio en todas sus manifestaciones. Celebrar o ejecutar todo género de contratos y actos civiles, comerciales, industriales, bancarios o financieros que fueren necesarios o convenientes al logro de sus fines, adquirir acciones o participaciones en sociedades, afines o no.               

Formar consorcios o uniones temporales con personas naturales o jurídicas que tengan objeto semejante o realicen actividades semejantes y presentarse en procesos licitatorios públicos o privados cuyo objeto se relacione o sea semejante con su objeto social, incluidos la celebración del contratos de comodato y donaciones y la asociación con terceros mediante cualquier contrato de colaboración empresarial.                         

En general, todas aquellas actividades que tengan como finalidad ejercer los derechos y cumplir las obligaciones legales o convencionalmente derivados de la existencia y las actividades a desarrollarse por la compañía.                              

PARAGRAFO: la compañía no podrá constituirse en garante de obligaciones ajenas, ni caucionar con los bienes sociales obligaciones distintas de las suyas propias, salvo que ello reporte algún beneficio, para lo cual deberá consignarse en el acta de asamblea de accionistas y que la garantía sea aprobada con el voto favorable de un numero plural de accionistas que representen por lo menos el 51% de las acciones suscritas y pagadas de la sociedad.                   

ART CUARTO. La sociedad tendra una duracion indefinida.                     


CAPÍTULO II                                                 

REGLAS SOBRE CAPITAL Y CUOTAS                                                     

ARTICULO QUINTO. CAPITAL AUTORIZADO                     
El capital autorizado de la sociedad es de ${valorAutorizadoL} DE PESOS ($ ${AccionesAut}) MONEDA LEGAL COLOMBIANA. Dicho capital estará representado en ${accionesautorizadas} acciones nominales cada una con un valor nominal de ${valorAcciones} PESOS ($ ${Acciones}) MONEDA LEGAL COLOMBIANA.                         

ARTICULO QUINTO. CAPITAL SUSCRITO.                              
El capital suscrito inicial de la sociedad es de ${ValorLetras} DE PESOS ($ ${valor}) MONEDA LEGAL COLOMBIANA, representado en ${TotalAcciones} acciones en circulación, cada una de valor nominal de ${valorAcciones} PESOS ($ ${Acciones}) MONEDA LEGAL COLOMBIANA.`;

    // Aumentar el valor de currentY para asegurarse de que el contenido comienza en una nueva línea
    currentY += 7; // Ajusta este valor según sea necesario

    const lines = doc.splitTextToSize(content2, textWidth);
    lines.forEach((line) => {

      if (currentY > 270) {
        doc.addPage();
        currentY = 20;
      }

      currentY = justifyText(line, 20, currentY, textWidth, doc, false);


      currentY += 1; // Ajusta este valor según sea necesario
    });


    doc.autoTable({
      startY: currentY + 7,
      head: [
        [
          "Accionista y/o Suscriptor",
          "Acciones",
          "%",
          "Valor Accion",
          "Capital Suscrito",
        ],
      ],
      body: data.Socios.map((socio) => [
        socio.nombre.toUpperCase(),
        valorPesos(socio.accionessusc),
        socio.porcentaje + "%",
        valorPesos(valorNominal),
        "$ " + valorPesos(socio.accionessusc * valorNominal),
      ]),
      theme: "grid",
      headStyles: { fillColor: [0, 0, 0] },
      bodyStyles: { fillColor: [255, 255, 255] },
      alternateRowStyles: { fillColor: [255, 255, 255] },
      columnStyles: {
        0: { cellWidth: 70 },
        1: { cellWidth: 20 },
        2: { cellWidth: 15 },
        3: { cellWidth: 20 },
        4: { cellWidth: 45 },
      },
      margin: { left: 20, right: 20 },
    });

    const content3 = `ARTICULO SEXTO. CAPITAL PAGADO.                   
El capital pagado de la sociedad es de ${valoraccionespag} DE PESOS ($ ${Totalaccionespag}) MONEDA LEGAL COLOMBIANA, representado en ${accionespag} acciones en circulación, cada una de valor nominal de ${valorAcciones} PESOS ($ ${Acciones}) MONEDA LEGAL COLOMBIANA.         `;

    // Aumentar el valor de currentY para asegurarse de que el contenido comienza en una nueva línea

    currentY = doc.lastAutoTable.finalY + 20;

    const line = doc.splitTextToSize(content3, textWidth);
    line.forEach((line) => {

      if (currentY > 270) {
        doc.addPage();
        currentY = 20;
      }

      currentY = justifyText(line, 20, currentY, textWidth, doc, false);

      currentY += 1; // Ajusta este valor según sea necesario
    });


    doc.autoTable({
      startY: currentY + 7,
      head: [
        [
          "Accionista y/o Suscriptor",
          "Acciones",
          "%",
          "Valor Accion",
          "Capital Pagado",
        ],
      ],
      body: data.Socios.map((socio) => [
        socio.nombre,
        valorPesos(socio.accionespag),
        socio.porcentaje + "%",
        valorPesos(valorNominal),
        "$ " + valorPesos(socio.accionespag * valorNominal),
      ]),
      theme: "grid",
      headStyles: { fillColor: [0, 0, 0] },
      bodyStyles: { fillColor: [255, 255, 255] },
      alternateRowStyles: { fillColor: [255, 255, 255] },
      columnStyles: {
        0: { cellWidth: 70 },
        1: { cellWidth: 20 },
        2: { cellWidth: 15 },
        3: { cellWidth: 20 },
        4: { cellWidth: 45 },
      },
      margin: { left: 20, right: 20, top: 20 },
    });

    currentY = doc.lastAutoTable.finalY;

    const content4 = `
PARÁGRAFO. FORMA Y TÉRMINOS EN QUE SE PAGARÁN EL CAPITAL. - Los socios pagarán sus acciones en dinero en efectivo, pago que harán al gerente el día de la constitución de la sociedad.             

ARTÍCULO 7º. DERECHOS QUE CONFIEREN LAS ACCIONES. - En el momento de la constitución de la sociedad, todos los títulos de capital emitidos pertenecen a la misma clase de acciones ordinarias. A cada acción le corresponde un voto en las decisiones de la Asamblea General de Socios.                                             

Los derechos y obligaciones que le confiere cada acción a su titular les serán transferidos a quien las adquiriere, luego de efectuarse su cesión a cualquier título.                 

La propiedad de una acción implica la adhesión a los estatutos y a las decisiones colectivas de los socios.                                   

ARTÍCULO 8º. NATURALEZA DE LAS ACCIONES. - Las acciones serán nominativas y deberán ser inscritas en el libro que la sociedad lleve conforme a la ley. Las acciones ordinarias no suscritas en el acto de constitución podrán ser emitidas mediante decisión del representante legal, quien aprobará el reglamento respectivo y formulará la oferta en los términos que se prevea en el reglamento. Mientras que subsista el derecho de preferencia la negociación de las acciones deberá hacerse con arreglo a lo previsto sobre el particular a los presentes estatutos.                                            

ARTÍCULO 9: AUMENTO DE CAPITAL SUSCRITO. - El capital suscrito podrá ser aumentado sucesivamente por decisión adoptada por la Asamblea General de Accionistas con el voto favorable de uno o varios accionistas que representen la mayoría absoluta de las acciones en circulación de la compañía.                                      

ARTÍCULO 10º. DERECHO DE PREFERENCIA. - Los accionistas que deseen enajenar sus acciones, en todo o en parte, deberán ofrecerlas en primer término a los demás accionistas a través del representante legal, quienes contarán con cinco (5) días hábiles a partir de la fecha en la cual se les comunique la propuesta para aceptarla y podrán ser adquiridas en proporción a sus aportes.                                    

En caso de que alguno de los accionistas decida no adquirir las acciones ofrecidas, cualquier otro socio quedará habilitado para adquirirlas sin sujeción a proporcionalidad.                   

Si ninguno de los otros accionistas aceptare adquirir las acciones ofrecidas o no manifestare su intención de adquirirlas, deberá manifestar que declina de adquirirlas, evento en el que estas podrán ser ofrecidas y adquiridas libremente por terceros.            

De otra parte, en los eventos de nuevas emisiones, los accionistas o socios de la sociedad podrán adquirir o suscribir cualquier número de acciones sin sujeción a proporcionalidad alguna. No obstante, salvo decisión de la asamblea general de accionistas, aprobada mediante votación de uno o varios socios que representen cuando menos el ochenta por ciento (80%) de las acciones presentes en la respectiva reunión, el reglamento de colocación preverá que las acciones se coloquen con sujeción al derecho de preferencia, de manera que cada accionista tan solo podrá suscribir un número proporcional a las acciones que tiene suscritas. El derecho de preferencia también podrá acordarse en asamblea a fin de que sea aplicable respecto de la emisión de cualquier otra clase títulos, incluidos los bonos, los bonos obligatoriamente convertibles en acciones, las acciones con dividendo preferencial y sin derecho a voto, las acciones con dividendo fijo anual y las acciones privilegiadas.       

PARÁGRAFO. - No existirá derecho de retracto a favor de la sociedad.                          

ARTÍCULO 11º. CLASES Y SERIES DE ACCIONES. - Por decisión de la asamblea general de accionistas, adoptada por uno o varios accionistas que representen el 80% de las acciones presentes en una reunión, podrá ordenarse la emisión de acciones con dividendo preferencial y sin derecho a voto, con dividendo fijo anual, de pago o cualesquiera otras que los accionistas decidieren, siempre que fueren compatibles con las normas legales vigentes. Una vez autorizada la emisión por la asamblea general de accionistas, el representante legal aprobará el reglamento correspondiente, en el que se establezcan los derechos que confieren las acciones emitidas, los términos y condiciones en que podrán ser suscritas y si los accionistas someten su emisión al derecho de preferencia para su suscripción.

PARÁGRAFO.- Para emitir acciones privilegiadas, será necesario que los privilegios respectivos sean aprobados en la asamblea general con el voto favorable de un número cualquiera de accionistas que represente por lo menos el 80% de las acciones suscritas. En el reglamento de colocación de acciones privilegiadas, que será aprobado por la asamblea general de accionistas, se regulará el derecho de preferencia a favor de todos los accionistas, con el fin de que puedan suscribirlas en proporción al número de acciones que cada uno posea en la fecha del aviso de oferta.                 

ARTÍCULO 12º. VOTO MÚLTIPLE. - Salvo decisión de la asamblea general de accionistas aprobada por 80% de las acciones suscritas, no se emitirán acciones con voto múltiple. En caso de emitirse acciones con voto múltiple, la asamblea aprobará, además de su emisión, la reforma a las disposiciones sobre quórum y mayorías decisorias que sean necesarias para darle efectividad al voto múltiple que se establezca.           

ARTÍCULO 13º. ACCIONES DE PAGO. - En caso de emitirse acciones de pago, el valor que representen las acciones emitidas respecto de los empleados de la sociedad, no podrá exceder de los porcentajes previstos en las normas laborales vigentes.                    

Las acciones de pago podrán emitirse sin sujeción al derecho de preferencia, siempre que así lo determine la asamblea general de accionistas.                       

ARTÍCULO 14º. TRANSFERENCIA DE ACCIONES A UNA FIDUCIA MERCANTIL. - Los accionistas podrán transferir sus acciones a favor de una fiducia mercantil, siempre que en el libro de registro de accionistas se identifique a la compañía fiduciaria, así como a los beneficiarios del patrimonio autónomo junto con sus correspondientes porcentajes en la fiducia.

ARTÍCULO 15º. RESTRICCIONES A LA NEGOCIACIÓN DE ACCIONES.  Habrá restricción en la negociabilidad de las acciones entre accionistas con terceros, sean estas personas naturales o jurídicas, en los términos del derecho de preferencia pactado en el artículo 11 de los presentes estatutos sociales. Perfeccionada una negociación de acciones, después de haber agotado el derecho de preferencia estatuido a favor de los accionistas constituyentes, esta deberá ser informada al representante legal de la sociedad para que le sea emitido el nuevo título representativo de sus acciones.               

Parágrafo: Los accionistas no podrán transferir sus acciones a los competidores de la sociedad, salvo que la sociedad vaya a ser fusionada con otra que tenga el mismo objeto social.                               

ARTÍCULO 16º. CAMBIO DE CONTROL. - Respecto de todos aquellos accionistas que en el momento de la constitución de la sociedad o con posterioridad fueren o llegaren a ser una sociedad, se aplicarán las normas relativas a cambio de control previstas en el artículo 16 de la Ley 1258 de 2008.                         


CAPÍTULO III                                

ÓRGANOS SOCIALES                                      

ARTÍCULO 17º. ÓRGANOS DE LA SOCIEDAD. - La sociedad tendrá un órgano de dirección, denominado Asamblea General de Accionistas, y un Gerente o representante legal, con su respectivo suplente. La revisoría fiscal solo será provista en la medida en que lo exijan las normas legales vigentes. Parágrafo; Mientras la sociedad se encuentre en ejecución de su acuerdo de reorganización, deberá tener Revisor Fiscal.                                      

ARTÍCULO 18º. SOCIEDAD DEVENIDA UNIPERSONAL. - La sociedad podrá ser pluripersonal o unipersonal. Mientras que la sociedad sea unipersonal, el accionista único ejercerá todas las atribuciones que en la ley y los estatutos se le confieren a los diversos órganos sociales, incluidos las de representación legal, a menos que el accionista designe para el efecto a una persona diferente al accionista único para que ejerza este cargo.                
Las determinaciones correspondientes al órgano de dirección que fueren adoptadas por el accionista único, deberán constar en actas debidamente asentadas en el libro correspondiente de la sociedad y la enajenación de sus acciones no estar sometida a restricción alguna derivada del derecho de preferencia.                    

ARTÍCULO 19º. ASAMBLEA GENERAL DE ACCIONISTAS. - La asamblea general de accionistas la integran el o los accionistas de la sociedad, reunidos con arreglo a las disposiciones sobre convocatoria, quórum, mayorías y demás condiciones previstas en estos estatutos y en lo previsto en estos estatutos, por la ley mercantil.                

Cada año, dentro de los tres meses siguientes a la clausura del ejercicio, el 31 de diciembre del respectivo año calendario, el representante legal convocará a la reunión ordinaria de la asamblea general de accionistas, con el propósito de someter a su consideración las cuentas de fin de ejercicio, así como el informe de gestión y demás documentos exigidos por la ley.                  
La asamblea general de accionistas tendrá, además de las funciones previstas en el artículo 420 del Código de Comercio, las contenidas en los presentes estatutos y en cualquier otra norma legal vigente.                    
La asamblea será presidida por la persona designada por el o los accionistas que asistan.                 
Los accionistas podrán participar en las reuniones de la asamblea, directamente o por medio de un poder conferido a favor de cualquier persona natural o jurídica, incluido el representante legal o cualquier otro individuo, aunque ostente la calidad de empleado o administrador de la sociedad.                  

Los accionistas deliberarán con arreglo al orden del día previsto en la convocatoria. Con todo, los accionistas podrán proponer modificaciones a las resoluciones sometidas a su aprobación y, en cualquier momento, proponer la revocatoria del representante legal.                               
ARTÍCULO 20º. CONVOCATORIA A LA ASAMBLEA GENERAL DE ACCIONISTAS. - La asamblea general de accionistas podrá ser convocada a cualquier reunión por ella misma o por el representante legal de la sociedad, mediante comunicación escrita dirigida a cada accionista remitida por correo a la dirección suministrada por cada accionista, con una antelación mínima de cinco (5) días hábiles. Para tal efecto no se tendrá en cuenta ni el día de la reunión ni el día de la convocatoria. También será válida la convocatoria efectuada a la dirección de correo electrónico que para tal efecto suministre cada accionista.                    

En la primera convocatoria podrá incluirse igualmente la fecha en que habrá de realizarse una reunión de segunda convocatoria, en caso de no poderse llevar a cabo la primera reunión por falta de quórum.                          

Uno o varios accionistas que representen por lo menos el 10% de las acciones suscritas podrán solicitarle al representante legal que convoque a una reunión de la asamblea general de accionistas, cuando lo estimen conveniente.                         

ARTÍCULO 21º. RENUNCIA A LA CONVOCATORIA. - Los accionistas podrán renunciar a su derecho a ser convocados a una reunión determinada de la asamblea, mediante comunicación escrita enviada al representante legal de la sociedad antes, durante o después de la sesión correspondiente. Los accionistas también podrán renunciar a su derecho de inspección por medio del mismo procedimiento indicado.                     

Aunque no hubieren sido convocados a la asamblea, se entenderá que los accionistas que asistan a la reunión correspondiente han renunciado al derecho a ser convocados, a menos que manifiesten su inconformidad con la falta de convocatoria antes que la reunión se lleve a cabo.                           

ARTÍCULO 22º. DERECHO DE INSPECCIÓN. - El derecho de inspección podrá ser ejercido por los accionistas personalmente durante los 3 primeros meses de cada nuevo año fiscal. En particular, los accionistas tendrán acceso a la totalidad de la información de naturaleza financiera, contable, legal y comercial relacionada con el funcionamiento de la sociedad, así como a las cifras correspondientes a la remuneración de los administradores sociales. En desarrollo de esta prerrogativa, los accionistas podrán solicitar toda la información que consideren relevante para pronunciarse, con conocimiento de causa, acerca de las determinaciones sometidas a consideración del máximo órgano social, así como para el adecuado ejercicio de los derechos inherentes a las acciones de que son titulares.                      
Los administradores deberán suministrarles a los accionistas, en forma inmediata, la totalidad de la información solicitada para el ejercicio de su derecho de inspección.                          

La asamblea podrá reglamentar los términos, condiciones y horarios en que dicho derecho podrá ser ejercido.                                   

ARTÍCULO 23º. REUNIONES NO PRESENCIALES. - Se podrán realizar reuniones por comunicación simultánea o sucesiva y por consentimiento escrito, en los términos previstos en la ley. En ningún caso se requerirá de delegado de la Superintendencia de Sociedades para este efecto. Estas reuniones se llevarán con los requisitos y formalidades contempladas por los artículos 19 y 20 de la ley 222 de 1995.                    

Se considerará que hay reunión de asamblea general de accionistas cuando por cualquier medio todos los socios o accionistas puedan deliberar y decidir por comunicación simultánea o sucesiva. En este último caso, la sucesión de comunicaciones deberá ocurrir de manera inmediata de acuerdo con el medio empleado. Así las cosas, podrán deliberar y decidir válidamente vía correo electrónico si los accionistas emiten el sentido de sus decisiones o votos por correo electrónico remitido al momento de concluir la reunión de manera que el convocante o presidente de la reunión reciba los correos con el sentido de las decisiones transcurrida la reunión. También podrán recibirse comunicaciones escritas remitidas vía fax o grabación magnetofónica donde queden los registros.                           

Igualmente serán validas las reuniones del máximo órgano social cuando por escrito todos los accionistas expresen el sentido de su voto. Cuando los accionistas expresen sus votos en escritos separados estos deberán recibirse en el domicilio de la sociedad en un término máximo de un mes o 30 días calendario, contado a partir de la primera comunicación recibida (artículo 20 ley 222 de 1995). El representante legal informará a los socios o accionistas el sentido de la decisión indicando el número de votos recibidos, dentro de los cinco días siguientes a la recepción del último documento o escrito en que se haya expresado el voto.                          
De las decisiones adoptadas por estos mecanismos alternativos de reuniones semi o no presenciales las actas que den cuenta de las decisiones sociales serán elaboradas por el representante legal y un accionista comisionado de los demás, quien como secretario las suscribirá conjuntamente con el gerente. En lo no previsto por este artículo, se tendrá en cuenta las estipulaciones contenidas en los artículos 21 y parágrafo de la ley 222 de 1995, como norma supletiva (selectiva) de la voluntad de los accionistas de la compañía.                           
ARTÍCULO 24º. RÉGIMEN DE QUÓRUM Y MAYORÍAS DECISORIAS: La asamblea deliberará con un número singular o plural de accionistas que representen cuando menos el 60% de las acciones suscritas en circulación con derecho a voto. Las decisiones se adoptarán con los votos favorables de uno o varios accionistas que representen cuando menos el 60% de las acciones suscritas en circulación con derecho a voto presentes en la respectiva reunión.                      

Solamente las siguientes reformas estatutarias requerirá el voto favorable del 80% de las acciones suscritas, incluidas las siguientes modificaciones estatutarias:           

La inclusión o exclusión de la posibilidad de emitir acciones con voto múltiple; y así mismo, requerirá determinación unánime del 100% de las acciones suscritas, la determinación relativa a la cesión global de activos en los términos del artículo 32 de la Ley 1258 de 2008                      
ARTÍCULO 25º. FRACCIONAMIENTO DEL VOTO: Cuando se trate de la elección de comités u otros cuerpos colegiados, los accionistas podrán fraccionar su voto. En caso de crearse junta directiva, la totalidad de sus miembros serán designados por mayoría simple de los votos emitidos en la correspondiente elección. Para el efecto, quienes tengan intención de postularse confeccionarán planchas completas que contengan el número total de miembros de la junta directiva. Aquella plancha que obtenga el mayor número de votos será elegida en su totalidad.                    

ARTÍCULO 26º. ACTAS. - Las decisiones de la asamblea general de accionistas se harán constar en actas aprobadas por ella misma, por las personas individualmente delegadas para el efecto o por una comisión designada por la asamblea general de accionistas o por el presidente y secretario de la Asamblea. En caso de delegarse la aprobación de las actas en una comisión, los accionistas podrán fijar libremente las condiciones de funcionamiento de este órgano colegiado.                         

En las actas deberá incluirse información acerca de la fecha, hora y lugar de la reunión, el orden del día, las personas designadas como presidente y secretario de la asamblea, la identidad de los accionistas presentes o de sus representantes o apoderados, los documentos e informes sometidos a consideración de los accionistas, la síntesis de las deliberaciones llevadas a cabo, la transcripción de las propuestas presentadas ante la asamblea y el número de votos emitidos a favor, en contra y en blanco respecto de cada una de tales propuestas.                  

Las actas deberán ser firmadas por el presidente y el secretario de la asamblea.  La copia de estas actas, autorizada por el secretario o por algún representante de la sociedad, será prueba suficiente de los hechos que consten en ellas, mientras no se demuestre la falsedad de la copia o de las actas.                       

ARTÍCULO 27º. REPRESENTACIÓN LEGAL. - La representación legal de la sociedad por acciones simplificada estará a cargo de una persona natural o jurídica, accionista o no, quien será Gerente y tendrá un suplente, designados para un término de un año por la asamblea general de accionistas.                           

Las funciones del representante legal terminarán en caso de dimisión o revocación por parte de la asamblea general de accionistas, de deceso o de incapacidad en aquellos casos en que el representante legal sea una persona natural y en caso de liquidación privada o judicial, cuando el representante legal sea una persona jurídica.                        

La cesación de las funciones del representante legal, por cualquier causa, no da lugar a ninguna indemnización de cualquier naturaleza, diferente de aquellas que le correspondieren conforme a la ley laboral, si fuere el caso.                               

La revocación por parte de la asamblea general de accionistas no tendrá que estar motivada y podrá realizarse en cualquier tiempo.                      

En aquellos casos en que el representante legal sea una persona jurídica, las funciones quedarán a cargo del representante legal de ésta.                         

Toda remuneración a que tuviere derecho el representante legal de la sociedad, deberá ser aprobada por la asamblea general de accionistas.                                  

ARTÍCULO 28º. FACULTADES DEL REPRESENTANTE LEGAL. - La sociedad será gerenciada, administrada y representada legalmente ante terceros por el GERENTE quien será su representante legal, quien tendrá facultades para contratar con terceros sin sujeción a cuantía alguna (sin límite por razón de la cuantía). El representante legal podrá celebrar o ejecutar todos los actos y contratos comprendidos en el objeto social o que se relacionen directamente con la existencia y el funcionamiento de la sociedad.                  

El representante legal se entenderá investido de los más amplios poderes para actuar en todas las circunstancias en nombre de la sociedad, con excepción de aquellas facultades que, de acuerdo con los estatutos, se hubieren reservado los accionistas. En las relaciones frente a terceros, la sociedad quedará obligada por los actos y contratos celebrados por el representante legal.                            

PARÁGRAFO. El gerente ejercerá todas las FUNCIONES propias de la naturaleza de su cargo, y en especial, las siguientes:                     
1. Representar a la sociedad ante los accionistas, ante terceros y ante toda clase de autoridades del orden administrativo y jurisdiccional.              
2. Ejecutar todos los actos u operaciones correspondientes al objeto social, de conformidad con lo previsto en las leyes y en estos estatutos.      
3. Autorizar con su firma todos los documentos públicos o privados que deban otorgarse en desarrollo de las actividades sociales o en interés de la sociedad.             
4. Presentar a la asamblea general en sus reuniones ordinarias, un inventario y un balance de fin de ejercicio, junto con un informe sobre la situación de la sociedad, un detalle completo de la cuenta de pérdidas y ganancias y un proyecto de instrucción de utilidades obtenidas.  
5. Nombrar y remover los empleados de la sociedad.                       
6. Tomar todas las medidas que reclame la conservación de los bienes sociales, vigilar la actividad de los empleados de la administración de la sociedad e impartirles las órdenes e instrucciones que exija la buena marcha de la compañía.                        
7. Convocar la asamblea general a reuniones extraordinarias cuando lo juzgue conveniente o necesario y hacer las convocatorias del caso cuando lo ordenen los estatutos, los accionistas en los términos del artículo 182 del Código de Comercio, y/o el revisor fiscal de la sociedad y/o las autoridades de supervisión y control societario, en caso de ser sometida a vigilancia o control societario.                        
8. Cumplir las órdenes e instrucciones que le impartan la asamblea general, y, en particular, solicitar autorizaciones para los negocios que deben aprobar previamente la asamblea según lo disponen los presentes estatutos.                   
9. Cumplir o hacer que se cumplan oportunamente todos los requisitos o exigencias legales que se relacionen con el funcionamiento y actividades de la sociedad.                         
10. Nombrar los árbitros que corresponda a la sociedad en virtud de compromisos o de cláusulas compromisorias contractuales.                            
11. Constituir los apoderados generales o especiales, judiciales y extrajudiciales que sean necesarios para la adecuada defensa de los intereses sociales.                


CAPÍTULO IV                       

DISPOSICIONES VARIAS                            

ARTÍCULO 29º. ENAJENACIÓN GLOBAL DE ACTIVOS. - Se entenderá que existe enajenación global de activos cuando la sociedad se proponga enajenar activos y pasivos que representen el cincuenta por ciento o más del patrimonio líquido de la compañía en la fecha de enajenación. La enajenación global requerirá aprobación de la asamblea, impartida con el voto favorable de uno o varios accionistas que representen cuando menos el voto favorable de un número plural de accionistas que representen el cien por ciento (100%) de las acciones en circulación, presentes en la respectiva reunión. Esta operación dará lugar al derecho de retiro a favor de los accionistas ausentes y disidentes en caso de desmejora patrimonial.                       

ARTÍCULO 30º. EJERCICIO SOCIAL. - Cada ejercicio social tiene una duración de un año, que comienza el 1º de enero y termina el 31 de diciembre. En todo caso, el primer ejercicio social se contará a partir de la fecha en la cual se produzca el registro mercantil de la escritura de constitución de la sociedad.                       

ARTÍCULO 31º. CUENTAS ANUALES. - Luego del corte de cuentas del fin de año calendario, el representante legal de la sociedad someterá a consideración de la asamblea general de accionistas los estados financieros de fin de ejercicio, debidamente dictaminados por un contador independiente, en los términos del artículo 28 de la Ley 1258 de 2008. En caso de proveerse el cargo de revisor fiscal, el dictamen será realizado por quien ocupe el cargo.                  

ARTÍCULO 32º. RESERVA LEGAL. - la sociedad constituirá una reserva legal que ascenderá por lo menos al cincuenta por ciento del capital suscrito, formado con el diez por ciento de las utilidades líquidas de cada ejercicio. Cuando esta reserva llegue al cincuenta por ciento mencionado, la sociedad no tendrá obligación de continuar llevando a esta cuenta el diez por ciento de las utilidades líquidas. Pero si disminuyere, volverá a apropiarse el mismo diez por ciento de tales utilidades, hasta cuando la reserva llegue nuevamente al límite fijado.                     
ARTÍCULO 33º. UTILIDADES. - Las utilidades se repartirán con base en los estados financieros de fin de ejercicio, previa determinación adoptada por la asamblea general de accionistas. Las utilidades se repartirán en proporción al número de acciones suscritas de que cada uno de los accionistas sea titular.                          

ARTÍCULO 34º. RESOLUCIÓN DE CONFLICTOS. - Todos los conflictos que surjan entre los accionistas por razón del contrato social, salvo las excepciones legales, serán dirimidos por la Superintendencia de Sociedades.                        

ARTÍCULO 35º.  LEY APLICABLE. - La interpretación y aplicación de estos estatutos está sujeta a las disposiciones contenidas en la Ley 1258 de 2008 y a las demás normas que resulten aplicables.                         


CAPÍTULO V                                        

DISOLUCIÓN Y LIQUIDACIÓN                                      

ARTÍCULO 36º. DISOLUCIÓN. - La sociedad se disolverá:             
1° Por vencimiento del término previsto en los estatutos, si lo hubiere, a menos que fuere prorrogado mediante documento inscrito en el Registro mercantil antes de su expiración;    
2º Por imposibilidad de desarrollar las actividades previstas en su objeto social;           
3º Por la iniciación del trámite de liquidación judicial;                                     
4º Por voluntad de los accionistas adoptada en la asamblea o por decisión del accionista único;
5° Por orden de autoridad competente.                                    
6º Por pérdidas que reduzcan el patrimonio neto de la sociedad por debajo del cincuenta por ciento del capital suscrito.                                  

PARÁGRAFO PRIMERO. - En el caso previsto en el ordinal primero anterior, la disolución se producirá de pleno derecho a partir de la fecha de expiración del término de duración, sin necesidad de formalidades especiales. En los demás casos, la disolución ocurrirá a partir de la fecha de registro del documento privado concerniente o de la ejecutoria del acto que contenga la decisión de autoridad competente.                         

ARTÍCULO 37º. ENERVAMIENTO DE LAS CAUSALES DE DISOLUCIÓN. - Podrá evitarse la disolución de la sociedad mediante la adopción de las medidas a que hubiere lugar, según la causal ocurrida, siempre que el enervamiento de la causal ocurra durante los seis meses siguientes a la fecha en que la asamblea reconozca su acaecimiento. Sin embargo, este plazo será de dieciocho meses en el caso de la causal prevista en el ordinal 6° del artículo anterior.                          

ARTÍCULO 38º. LIQUIDACIÓN. - La liquidación del patrimonio se realizará conforme al procedimiento señalado para la liquidación de las sociedades por acciones simple. Actuará como liquidador el representante legal o la persona que designe la asamblea de accionistas.      
Durante el período de liquidación, los accionistas serán convocados a la asamblea general de accionistas en los términos y condiciones previstos en los estatutos y en la ley. Los accionistas tomarán todas las decisiones que le corresponden a la asamblea general de accionistas, en las condiciones de quórum y mayorías decisorias vigentes antes de producirse la disolución.                          

DETERMINACIONES RELATIVAS A LA CONSTITUCIÓN DE LA SOCIEDAD       
`;

    const SinSuplente = `
1. REPRESENTACIÓN LEGAL. - Los accionistas constituyentes de la sociedad han designado en este acto de constitución, a ${representanteLegal.nombre.toUpperCase()
      } identificada con ${representanteLegal.tipoidentificacion} No. ${valorPesos(
        representanteLegal.identificacion
      )} como GERENTE y por ende representante legal de ${razonSocial} S.A.S.                            

El dignatario designado en el presente acto constitutivo, deja constancia de su expresa aceptación a los cargos para los cuales han sido designados por encontrase presentes y manifiestan que no existen incompatibilidades ni restricciones que pudieran afectar su designación como GERENTE de ${razonSocial} S.A.S.                 

2. PERSONIFICACIÓN JURÍDICA DE LA SOCIEDAD. - Luego de la inscripción del presente documento en el Registro Mercantil, ${razonSocial} S.A.S., formará una persona jurídica distinta de sus accionistas, conforme se dispone en el artículo 2º de la Ley 1258 de 2008.

Para constancia de las decisiones adoptadas por las personas naturales interesadas en constituir la sociedad comercial denominada ${razonSocial} S.A.S se firma por el representante legal y el/los socios que hayan intervenido en este acto, en la ciudad de ${Ciudad}, ${Fecha}.             `;

    const conSuplente = `
1. REPRESENTACIÓN LEGAL. - Los accionistas constituyentes de la sociedad han designado en este acto de constitución, a ${representanteLegal.nombre.toUpperCase()
      } identificada con ${representanteLegal.tipoidentificacion} No. ${valorPesos(
        representanteLegal.identificacion
      )} como GERENTE y por ende representante legal de ${razonSocial} S.A.S, y a ${suplenteLegal?.nombre?.toUpperCase()
      }, identificado con ${suplenteLegal?.tipoidentificacion} No. ${valorPesos(
        suplenteLegal?.identificacion
      )} como SUPLENTE DEL GERENTE.                 

Los dignatarios designados en el presente acto constitutivo, dejan constancia de su expresa aceptación a los cargos para los cuales han sido designados por encontrase presentes y manifiestan que no existen incompatibilidades ni restricciones que pudieran afectar su designación como GERENTE y suplente del Gerente de ${razonSocial} S.A.S, respectivamente.
  
2. PERSONIFICACIÓN JURÍDICA DE LA SOCIEDAD. - Luego de la inscripción del presente documento en el Registro Mercantil, ${razonSocial} S.A.S., formará una persona jurídica distinta de sus accionistas, conforme se dispone en el artículo 2º de la Ley 1258 de 2008.

Para constancia de las decisiones adoptadas por las personas naturales interesadas en constituir la sociedad comercial denominada ${razonSocial} S.A.S se firma por el representante legal y el/los socios que hayan intervenido en este acto, en la ciudad de ${Ciudad}, ${Fecha}.
  `;

    
    const Final = suplenteLegal ? conSuplente : SinSuplente;

    const content5 = content4 + Final;

    // Aumentar el valor de currentY para asegurarse de que el contenido comienza en una nueva línea
    currentY += 7; // Ajusta este valor según sea necesario
    // Dividir el contenido en líneas para manejar el desbordamiento de página
    const lineas = doc.splitTextToSize(content5, textWidth);

    function justifyText(text, x, y, width, doc, isLastLine) {
      const words = text.split(' ');
      const numWords = words.length;
      if (numWords === 0) return y;

      // Calculamos el ancho total del texto sin los espacios
      const totalTextWidth = words.reduce((acc, word) => acc + doc.getTextWidth(word), 0);

      // Si no es la última línea, justificamos el texto
      if (!isLastLine) {
        // Calculamos el espacio total restante para distribuir entre las palabras
        const totalExtraSpace = width - totalTextWidth;
        const extraSpace = numWords > 1 ? totalExtraSpace / (numWords - 1) : 0;

        let xOffset = x;

        words.forEach((word, i) => {
          // Dibujamos la palabra en la posición actual
          doc.text(word, xOffset, y);

          if (i < numWords - 1) {
            // Agregamos el espacio calculado entre palabras (para todas menos la última)
            xOffset += doc.getTextWidth(word) + extraSpace;
          }
        });
      } else {
        // Si es la última línea, no justificamos, solo mostramos las palabras tal como están
        doc.text(text, x, y);
      }

      // Devolvemos la nueva posición Y (después de agregar la línea)
      return y + 5; // Ajusta esta altura de línea según tu necesidad
    }

    lineas.forEach((linea, indice) => {
      // Verificar si se necesita una nueva página
      if (currentY > 270) {
        doc.addPage();
        currentY = 20; // Restablecer la posición Y para la nueva página
      }

      // Corregir la posición de las llaves y paréntesis en la siguiente línea
      currentY = justifyText(linea, 20, currentY, textWidth, doc, false);
      currentY += 1; // Aumentar la posición Y para la siguiente línea
    });

    currentY += 7; // Ajusta según sea necesario

    // Funciones auxiliares
    const addSignatureLine = (doc, x, y, title, name, id, align = "center") => {
      doc.text("________________________", x, y);
      doc.setFont("helvetica", "bold");
      doc.text(title, x + 25, y + 5, align);
      doc.setFont("helvetica", "normal");
      doc.text(name.toUpperCase(), x + 25, y + 10, align);
      doc.text(`C.C. ${valorPesos(id)}`, x + 25, y + 15, align);
    };

    const addSignatures = (doc, currentY, representanteLegal, suplenteLegal, Socios) => {
      const pageHeight = doc.internal.pageSize.height;
      const marginBottom = 30;

      // Función para verificar y añadir nueva página si es necesario
      const checkNewPage = (neededSpace) => {
        if (currentY + neededSpace > pageHeight - marginBottom) {
          doc.addPage();
          currentY = 40;
          return true;
        }
        return false;
      };

      // Añadir firma del representante legal
      checkNewPage(45);
      addSignatureLine(
        doc,
        30,
        currentY + 10,
        "Representante Legal",
        representanteLegal.nombre,
        representanteLegal.identificacion
      );

      // Añadir firma del suplente si existe
      if (suplenteLegal) {
        addSignatureLine(
          doc,
          130,
          currentY + 10,
          "Representante Suplente",
          suplenteLegal.nombre,
          suplenteLegal.identificacion
        );
      }

      currentY += 40; // Espacio después de las firmas de representantes

      // Añadir firmas de los socios
      if (Socios && Socios.length > 0) {
        for (let i = 0; i < Socios.length; i += 2) {
          if (checkNewPage(45)) {
            currentY = 40;
          }

          // Primer socio de la fila
          addSignatureLine(
            doc,
            30,
            currentY,
            `Socio ${i + 1}`,
            Socios[i].nombre,
            Socios[i].identificacion
          );

          // Segundo socio de la fila (si existe)
          if (i + 1 < Socios.length) {
            addSignatureLine(
              doc,
              130,
              currentY,
              `Socio ${i + 2}`,
              Socios[i + 1].nombre,
              Socios[i + 1].identificacion
            );
          }

          currentY += 40; // Espacio para la siguiente fila de firmas
        }
      }

      return currentY; // Retorna la posición final
    };

    // Uso:
    try {
      // currentY es la posición actual donde termina el contenido anterior
      const finalY = addSignatures(doc, currentY, representanteLegal, suplenteLegal, Socios);

      // Si necesitas continuar con más contenido después de las firmas
      currentY = finalY;
    } catch (error) {
      console.error('Error al agregar firmas:', error);
    }

    // Restablecer la posición Y para otros elementos del documento si es necesario
    currentY += 10; // Ajusta según sea necesario

    // Enviar información del acta al servidor
    // Al finalizar, cambia el estado de carga y muestra el PDF
    setPdfDataUri(doc.output("datauristring"));
    setIsLoading(false);
    handleOpenPdf();
  };

  const guardarActa = async () => {
    if (!pdfDataUri) {
      Swal.fire({
        icon: "error",
        title: "No hay PDF generado",
        text: "Primero debe generar el acta antes de descargarla",
      });
      return;
    }

    setIsLoading(true);

    try {
      const userData = {
        razonSocial,
        telefono,
        Departamento,
        Ciudad,
        Direccion,
        representante: representante[0],
        suplente,
        objetoSocial,
        correo,
      };

      if (userData.correo === "" || userData.telefono === "") {
        Swal.fire({
          icon: 'error',
          title: 'Datos incompletos',
          text: 'Por favor, complete todos los campos de contacto',
        });
        setIsLoading(false);
        return;
      }

      // Guardar datos en el servidor (manteniendo tu lógica actual)
      await fetch(`${process.env.BACKEND_URL}/auth/acta`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(userData),
      });

      // Descargar el PDF
      const a = document.createElement('a');
      a.href = pdfDataUri;
      a.download = "acta_constitucion_" + razonSocial + ".pdf";
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);

      Swal.fire({
        icon: 'success',
        title: 'Acta guardada y descargada',
        text: 'El acta se ha guardado y descargado correctamente'
      });

    } catch (error) {
      console.error("Error:", error);
      Swal.fire({
        icon: 'error',
        title: 'Error al guardar',
        text: 'Ha ocurrido un error al guardar el acta'
      });
    }

    setIsLoading(false);
  };

  const handleOpenPdf = () => setOpenPdf(true);
  const handleClosePdf = () => setOpenPdf(false);

return (
    <div className={`${bgColor} min-h-screen py-6 px-4`}>
      <div className={`${cardBg} max-w-5xl mx-auto rounded-2xl shadow-lg p-8`}>
        <div className={`${darkMode ? 'bg-gradient-to-r from-blue-900 to-blue-800' : 'bg-gradient-to-r from-blue-600 to-blue-700'} text-white rounded-xl p-6 mb-8 flex items-center justify-center gap-3`}>
          <span className="material-icons text-3xl">business</span>
          <h1 className="text-2xl font-bold">Acta de Constitución S.A.S</h1>
        </div>

        <div className="space-y-8">
          {/* Datos Básicos */}
          <div className={`${darkMode ? 'bg-gray-700/30' : 'bg-blue-50'} rounded-lg p-6 border ${borderColor}`}>
            <div className="flex items-center gap-2 mb-4 pb-3 border-b" style={{ borderColor: borderColor === 'border-gray-700' ? '#4b5563' : '#bfdbfe' }}>
              <span className="material-icons text-blue-600">business</span>
              <h2 className={`text-lg font-bold ${textPrimary}`}>Datos Básicos de la Empresa</h2>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className={`block text-xs font-bold mb-2 ${labelColor}`}>Razón Social (sin S.A.S)</label>
                <input
                  type="text"
                  value={razonSocial}
                  onChange={handleRazonSocialChange}
                  className={`w-full px-3 py-2 border rounded-lg ${inputBg} ${inputFocus} text-sm`}
                />
              </div>
              <div>
                <label className={`block text-xs font-bold mb-2 ${labelColor}`}>Dirección</label>
                <input
                  type="text"
                  value={Direccion}
                  onChange={handleDireccionChange}
                  className={`w-full px-3 py-2 border rounded-lg ${inputBg} ${inputFocus} text-sm`}
                />
              </div>
              <div>
                <label className={`block text-xs font-bold mb-2 ${labelColor}`}>Departamento</label>
                <select
                  value={Departamento}
                  onChange={handleDepartamentoChange}
                  className={`w-full px-3 py-2 border rounded-lg ${inputBg} ${inputFocus} text-sm`}
                >
                  {departamentos.map((dep, index) => (
                    <option key={index} value={dep}>{dep}</option>
                  ))}
                </select>
              </div>
              <div>
                <label className={`block text-xs font-bold mb-2 ${labelColor}`}>Ciudad</label>
                <select
                  value={Ciudad}
                  onChange={handleCiudadChange}
                  className={`w-full px-3 py-2 border rounded-lg ${inputBg} ${inputFocus} text-sm`}
                >
                  {ciudades.map((city, idx) => (
                    <option key={idx} value={city}>{city}</option>
                  ))}
                </select>
              </div>
              <div>
                <label className={`block text-xs font-bold mb-2 ${labelColor}`}>Fecha de Constitución</label>
                <input
                  type="date"
                  onChange={handleFechaChange}
                  className={`w-full px-3 py-2 border rounded-lg ${inputBg} ${inputFocus} text-sm`}
                />
              </div>
            </div>
          </div>

          {/* Información de Contacto */}
          <div className={`${darkMode ? 'bg-gray-700/30' : 'bg-blue-50'} rounded-lg p-6 border ${borderColor}`}>
            <div className="flex items-center gap-2 mb-4 pb-3 border-b" style={{ borderColor: borderColor === 'border-gray-700' ? '#4b5563' : '#bfdbfe' }}>
              <span className="material-icons text-blue-600">contact_mail</span>
              <h2 className={`text-lg font-bold ${textPrimary}`}>Información de Contacto</h2>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className={`block text-xs font-bold mb-2 ${labelColor}`}>Correo Electrónico</label>
                <input
                  type="email"
                  value={correo}
                  onChange={handleCorreoChange}
                  className={`w-full px-3 py-2 border rounded-lg ${inputBg} ${inputFocus} text-sm`}
                />
              </div>
              <div>
                <label className={`block text-xs font-bold mb-2 ${labelColor}`}>Teléfono</label>
                <input
                  type="tel"
                  value={telefono}
                  onChange={handleTelefonoChange}
                  className={`w-full px-3 py-2 border rounded-lg ${inputBg} ${inputFocus} text-sm`}
                />
              </div>
            </div>
          </div>

          {/* Socios */}
          <div className={`${darkMode ? 'bg-gray-700/30' : 'bg-blue-50'} rounded-lg p-6 border ${borderColor}`}>
            <div className="flex items-center gap-2 mb-4 pb-3 border-b" style={{ borderColor: borderColor === 'border-gray-700' ? '#4b5563' : '#bfdbfe' }}>
              <span className="material-icons text-blue-600">group_add</span>
              <h2 className={`text-lg font-bold ${textPrimary}`}>Socios de la Empresa</h2>
            </div>
            {renderSocios()}
          </div>

          {/* Información Financiera */}
          <div className={`${darkMode ? 'bg-gray-700/30' : 'bg-blue-50'} rounded-lg p-6 border ${borderColor}`}>
            <div className="flex items-center gap-2 mb-4 pb-3 border-b" style={{ borderColor: borderColor === 'border-gray-700' ? '#4b5563' : '#bfdbfe' }}>
              <span className="material-icons text-blue-600">monetization_on</span>
              <h2 className={`text-lg font-bold ${textPrimary}`}>Información Financiera</h2>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className={`block text-xs font-bold mb-2 ${labelColor}`}>Valor Nominal de las Acciones</label>
                <div className="flex items-center gap-2">
                  <span className={labelColor}>$</span>
                  <input
                    type="number"
                    value={valorNominal}
                    onChange={handleValorNominalChange}
                    className={`flex-1 px-3 py-2 border rounded-lg ${inputBg} ${inputFocus} text-sm`}
                  />
                </div>
              </div>
              <div>
                <label className={`block text-xs font-bold mb-2 ${labelColor}`}>Valor Total Acciones Autorizadas</label>
                <div className="flex items-center gap-2">
                  <span className={labelColor}>$</span>
                  <input
                    type="number"
                    value={valorAutorizado}
                    onChange={handleValorAutorizadoChange}
                    className={`flex-1 px-3 py-2 border rounded-lg ${inputBg} ${inputFocus} text-sm`}
                  />
                </div>
              </div>
            </div>
          </div>

          {/* Representación Legal */}
          <div className={`${darkMode ? 'bg-gray-700/30' : 'bg-blue-50'} rounded-lg p-6 border ${borderColor}`}>
            <div className="flex items-center gap-2 mb-4 pb-3 border-b" style={{ borderColor: borderColor === 'border-gray-700' ? '#4b5563' : '#bfdbfe' }}>
              <span className="material-icons text-blue-600">badge</span>
              <h2 className={`text-lg font-bold ${textPrimary}`}>Representación Legal</h2>
            </div>
            {renderrepresentanteLegal()}
            {rendersuplenteLegal()}
          </div>

          {/* Objeto Social */}
          <div className={`${darkMode ? 'bg-gray-700/30' : 'bg-blue-50'} rounded-lg p-6 border ${borderColor}`}>
            <div className="flex items-center gap-2 mb-4 pb-3 border-b" style={{ borderColor: borderColor === 'border-gray-700' ? '#4b5563' : '#bfdbfe' }}>
              <span className="material-icons text-blue-600">description</span>
              <h2 className={`text-lg font-bold ${textPrimary}`}>Objeto Social</h2>
            </div>
            {renderObjetoSocial()}
          </div>

          {/* Botones de Acción */}
          <div className="flex justify-center pt-4">
            <button
              className="px-8 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-semibold transition-colors flex items-center justify-center gap-2 shadow-lg"
            
              onClick={generatePdf}
              disabled={isLoading}
            >
              <span className="material-icons text-sm">picture_as_pdf</span>
              Generar Acta
            </button>
            {pdfDataUri && (
            <button
              className="px-8 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 font-semibold transition-colors flex items-center justify-center gap-2 shadow-lg ml-4"
              onClick={guardarActa}
              disabled={isLoading || !pdfDataUri}
            >
              <span className="material-icons text-sm">save_alt</span>
              Guardar Acta
            </button>
            )}
          </div>

          {/* Cargando Indicador */}
          {isLoading && (
            <div className="flex justify-center mt-4">
              <div className="loader ease-linear rounded-full border-8 border-t-8 border-gray-200 h-12 w-12"></div>
            </div>
          )}

          {/* Visor de PDF Modal */}
          <div>
                {pdfDataUri ? (
                  <iframe
                    src={pdfDataUri}
                    title="Visor de PDF"
                    className="w-full"
                    style={{ border: 'none', height: '600px' }}
                  ></iframe>
                ) : (
                  <p className="text-center">No hay PDF para mostrar.</p>
                )}
              </div>
          <div>

          </div>

        </div>
        
      </div>
    </div>
  );
}

export default Acta;