// components/Modals/ConfirmationModal.jsx
import React, { useState, useEffect } from 'react';
import './ConfirmationModal.css'; // Estilos separados
import { useContext } from 'react';
import { langContext } from '../../context/LenguageContext';


export default function ConfirmationOutcome({ isOpen, onConfirm, onCancel, formHousekepeer, idproduct, nameProduct, productStock }) {
  /*const [formHousekepeer, setFormHousekepeer] = useState(null)/*/
  const { lang } = useContext(langContext);
  if (!isOpen) return null;
  const [PCO, setProduct] = useState(idproduct);
  const [UCO, setUnits] = useState(null);
  const [HCO, setHousekeeper] = useState(null);
  const [form, setForm] = useState({
    PCO: idproduct || '',
    UCO: '',
    HCO: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    
    if (name === 'UCO') {
      const numericValue = Number(value);
      const maxStock = Number(productStock) || 0;
      if (value === '') {
        setForm((prev) => ({ ...prev, [name]: '' }));
      } else if (!isNaN(numericValue) && numericValue >= 0) {
        const cappedValue = numericValue > maxStock ? maxStock : numericValue;
        setForm((prev) => ({ ...prev, [name]: cappedValue.toString() }));
      }
    } else {
      setForm((prev) => ({ ...prev, [name]: value }));
    }
  };

  const handleConfirmClick = () => {
    // Envía los valores al padre (Outcomes.jsx)
    onConfirm(form.PCO, form.UCO, form.HCO);
  };
  return (
    <div className="modal-overlay">
      <div className="modal">
        <div className="modal-header">
          <h3>{lang === "en" ? "Confirm the status change" : "Confirmar el cambio de estado"}</h3>
          <button className="close-button" onClick={onCancel}>×</button>
        </div>
        <div className="modal-body">
          <div>
            <p>{lang === "en" ? "Product" : "Producto"}</p>
            <input 
              name="PCO" 
              value={nameProduct} 
              onChange={handleChange} 
              disabled={true}
              style={{ color: '#000', width: '100%', padding: '8px' }}
            />
          </div>
          <div>
            <p>{lang === "en" ? "Units" : "Unidades"}</p>
            <input 
              type='number' 
              name="UCO" 
              value={form.UCO} 
              min={0}
              max={productStock ? Number(productStock) : undefined}
              disabled={!productStock || Number(productStock) <= 0}
              title={(!productStock || Number(productStock) <= 0) ? (lang === "es" ? "No se puede consumir cuando el stock es 0" : "Cannot consume when stock is 0") : (lang === "es" ? `Máximo disponible: ${productStock}` : `Maximum available: ${productStock}`)}
              onKeyDown={(e) => {
                if (e.key === '-' || e.key === 'e' || e.key === 'E' || e.key === '+') {
                  e.preventDefault();
                }
              }}
              onChange={handleChange}
              style={{
                color: '#000',
                width: '100%',
                padding: '8px',
                backgroundColor: (!productStock || Number(productStock) <= 0) ? '#f0f0f0' : 'white',
                cursor: (!productStock || Number(productStock) <= 0) ? 'not-allowed' : 'text',
                opacity: (!productStock || Number(productStock) <= 0) ? 0.6 : 1
              }}
            />
            {(!productStock || Number(productStock) <= 0) && (
              <p style={{ color: 'red', fontSize: '12px', marginTop: '5px', marginBottom: 0 }}>
                {lang === "es" ? "No hay stock disponible" : "There is no stock"}
              </p>
            )}
          </div>
          <div>
            <p>{lang === "en" ? "Housekeeper" : "Camarista"}</p>
            <select 
              name="HCO" 
              value={form.HCO} 
              onChange={handleChange}
              style={{ color: '#000', width: '100%', padding: '8px' }}
            >
              <option value="">{lang === "en" ? "Select a Housekepeer" : "Selecciona una ama de llaves"}</option>
              {formHousekepeer && formHousekepeer.map(HK => (
                <option key={HK.rfc_employee} value={HK.rfc_employee}>{HK.name_emp}</option>
              ))}
            </select>
          </div>
          <div className="modal-buttons">
            <button 
              className="modal-button yes" 
              onClick={handleConfirmClick}
              disabled={!productStock || Number(productStock) <= 0}
              style={{
                opacity: (!productStock || Number(productStock) <= 0) ? 0.5 : 1,
                cursor: (!productStock || Number(productStock) <= 0) ? 'not-allowed' : 'pointer'
              }}
            >
              {lang === "en" ? "SAVE" : "GUARDAR"}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}
