import React, { useState } from 'react';
import { Button } from "react-bootstrap";
import { ChevronLeft, ChevronRight, Settings } from 'lucide-react';
import styles from './FormActions.module.css';

interface FormActionsProps {
    mostrarBotonCupsElectricos: boolean;
    mostrarBotonCupsGas: boolean;
    botonesOcultos?: number[];
    isProcessing?: boolean;
    onTramitarContrato: () => void;
    onGenerar0: () => void;
    onGenerar1: () => void;
    onGenerar2: () => void;
    onGenerar3: () => void;
    onGenerar4: () => void;
    onGenerar5: () => void;
    onGenerar6: () => void;
    onGenerar7: () => void;
    onGenerar8: () => void;
    onVolver: () => void;
}

const FormActions: React.FC<FormActionsProps> = ({
    mostrarBotonCupsElectricos,
    mostrarBotonCupsGas,
    botonesOcultos = [],
    isProcessing = false,
    onTramitarContrato,
    onGenerar0,
    onGenerar1,
    onGenerar2,
    onGenerar3,
    onGenerar4,
    onGenerar5,
    onGenerar6,
    onGenerar7,
    onGenerar8,
    onVolver,
}) => {
  const [isOpen, setIsOpen] = useState(false);

  const togglePanel = () => setIsOpen(!isOpen);

  return (
    <>
      {/* Contenedor flotante en la derecha */}
      <div className={`${styles.floatingTabContainer} ${isOpen ? styles.open : ''}`}>
          
          {/* Botón pestaña naranja */}
          <button 
              className={styles.floatingTabButton} 
              onClick={togglePanel}
              title={isOpen ? "Ocultar acciones" : "Mostrar acciones"}
          >
              <div className={styles.tabText}>ACCIONES</div>
              <div className={styles.tabIcon}>
                {isOpen ? <ChevronRight size={24} /> : <ChevronLeft size={24} />}
              </div>
          </button>

          {/* Panel con botones verticales */}
          <div className={styles.floatingPanel}>
              <div className="d-flex align-items-center mb-4 border-bottom border-secondary pb-3">
                  <Settings className="text-warning me-2" size={20} />
                  <h5 className="mb-0 text-white fw-bold">Acciones del Contrato</h5>
              </div>
              
              <div className="d-flex flex-column gap-3 overflow-y-auto" style={{ maxHeight: 'calc(100% - 60px)' }}>
                  {!botonesOcultos.includes(0) && (
                      <Button
                          type="button"
                          onClick={onTramitarContrato}
                          className={styles.btnTramitar}
                          disabled={isProcessing}
                      >
                          {isProcessing ? (
                              <>
                                  <span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                                  Procesando...
                              </>
                          ) : 'Tramitar Contrato'}
                      </Button>
                  )}
                  {!botonesOcultos.includes(1) && (
                      <Button
                          type="button"
                          onClick={onGenerar0}
                          className={styles.btnGenerar}
                      >
                          Gen. Condiciones Económicas
                      </Button>
                  )}
                  {!botonesOcultos.includes(2) && (
                      <Button
                          type="button"
                          onClick={onGenerar1}
                          className={styles.btnGenerarAlt}
                      >
                          Gen. Condiciones Generales
                      </Button>
                  )}
                  {!botonesOcultos.includes(3) && (
                      <Button
                          type="button"
                          onClick={onGenerar2}
                          className={styles.btnGenerarAlt}
                      >
                          Gen. Condiciones Particulares
                      </Button>
                  )}

                  {mostrarBotonCupsElectricos && !botonesOcultos.includes(4) && (
                      <Button
                          type="button"
                          onClick={onGenerar3}
                          className={styles.btnCupsElectrico}
                      >
                          Gen. Anexos de CUPS Elect.
                      </Button>
                  )}

                  {mostrarBotonCupsGas && !botonesOcultos.includes(5) && (
                      <Button
                          type="button"
                          onClick={onGenerar4}
                          className={styles.btnCupsGas}
                      >
                          Gen. Anexos de CUPS Gas
                      </Button>
                  )}
                  
                  {!botonesOcultos.includes(6) && (
                      <Button
                          type="button"
                          onClick={onGenerar5}
                          className={styles.btnGenerar}
                      >
                          Generar SEPAs
                      </Button>
                  )}
                  {!botonesOcultos.includes(7) && (
                      <Button
                          type="button"
                          onClick={onGenerar6}
                          className={styles.btnGenerar}
                      >
                          OKs COM
                      </Button>
                  )}
                  {!botonesOcultos.includes(8) && (
                      <Button
                          type="button"
                          onClick={onGenerar7}
                          className={styles.btnGenerar}
                      >
                          Generar Contrato PDF
                      </Button>
                  )}

                  {!botonesOcultos.includes(9) && (
                      <Button
                          type="button"
                          onClick={onGenerar8}
                          className={styles.btnGenerarAlt}
                      >
                          Gen. Anexos CPT
                      </Button>
                  )}

                  <hr className="border-secondary my-2" />

                  <Button
                      type="button"
                      onClick={onVolver}
                      className={styles.btnVolver}
                  >
                      Volver
                  </Button>
              </div>
          </div>
      </div>
      
      {/* Backdrop opcional cuando el panel está abierto para atraer más la atención */}
      {isOpen && (
          <div 
            className="position-fixed top-0 start-0 w-100 h-100" 
            style={{ backgroundColor: 'rgba(0,0,0,0.3)', zIndex: 1040 }} 
            onClick={togglePanel} 
          />
      )}
    </>
  );
};

export default FormActions;