// Wellness — Bienestar: calendario de eventos de bienestar + cumpleaños del día
const MESES_BIENESTAR = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];

const EVENTOS_BIENESTAR_INICIAL = [
  { id: 'wb-01', month: 'Marzo',      name: 'Día del Género',               status: 'activo',   desc: 'Sensibilizar sobre equidad de género y prevenir la discriminación en el entorno laboral.' },
  { id: 'wb-02', month: 'Abril',      name: 'Día del Niño',                 status: 'inactivo', desc: 'Actividad recreativa para los hijos de los colaboradores en cada sede.' },
  { id: 'wb-03', month: 'Mayo',       name: 'Celebración Día de la Madre',  status: 'activo',   desc: 'Reconocimiento y detalle especial para las colaboradoras que son madres.' },
  { id: 'wb-04', month: 'Mayo',       name: 'Día del Trabajador',           status: 'activo',   desc: 'Jornada de reconocimiento a la labor de todos los colaboradores.' },
  { id: 'wb-05', month: 'Septiembre', name: 'Día del Amor y la Amistad',    status: 'activo',   desc: 'Actividad de integración y amigo secreto entre equipos.' },
  { id: 'wb-06', month: 'Octubre',    name: 'Evento de Halloween',          status: 'activo',   desc: 'Concurso de disfraces y actividad de integración por sede.' },
  { id: 'wb-07', month: 'Octubre',    name: 'Semana de la Salud Mental',    status: 'inactivo', desc: 'Charlas y pausas activas enfocadas en el bienestar emocional.' },
  { id: 'wb-08', month: 'Diciembre',  name: 'Entrega de Regalos Navideños', status: 'activo',   desc: 'Entrega de detalle navideño a colaboradores y sus familias.' },
  { id: 'wb-09', month: 'Diciembre',  name: 'Cena y Bingo de Fin de Año',   status: 'activo',   desc: 'Cierre de año con cena, bingo y reconocimientos del equipo.' },
];

// Modal única para crear / editar / ver un evento de bienestar
const WellnessEventModal = ({ mode, event, onClose, onSave }) => {
  const [name, setName] = React.useState('');
  const [month, setMonth] = React.useState(MESES_BIENESTAR[0]);
  const [desc, setDesc] = React.useState('');

  React.useEffect(() => {
    if (!mode) return;
    setName(event?.name || '');
    setMonth(event?.month || MESES_BIENESTAR[0]);
    setDesc(event?.desc || '');
  }, [mode, event]);

  if (!mode) return null;
  const readOnly = mode === 'ver';
  const title = mode === 'crear' ? 'Nuevo evento de bienestar' : mode === 'editar' ? 'Editar evento de bienestar' : 'Detalle del evento';

  const handleSave = () => {
    if (!name.trim()) return;
    onSave({ name: name.trim(), month, desc: desc.trim() });
  };

  return (
    <Modal open={!!mode} onClose={onClose}
      title={title}
      subtitle={readOnly ? undefined : 'Nombre, mes y objetivo del evento de bienestar'}
      width={560}
      footer={
        readOnly ? (
          <button className="btn" onClick={onClose}>Cerrar</button>
        ) : (
          <>
            <button className="btn" onClick={onClose}>Cancelar</button>
            <button className="btn primary" onClick={handleSave}>{mode === 'crear' ? 'Crear evento' : 'Guardar cambios'}</button>
          </>
        )
      }>
      <div className="form-grid">
        <FormField label="Nombre del evento" span={6}>
          <input className="form-input" disabled={readOnly} placeholder='Ej. "Semana de la Salud Mental"' value={name} onChange={e => setName(e.target.value)} />
        </FormField>
        <FormField label="Mes" span={6}>
          <select className="form-input" disabled={readOnly} value={month} onChange={e => setMonth(e.target.value)}>
            {MESES_BIENESTAR.map(m => <option key={m} value={m}>{m}</option>)}
          </select>
        </FormField>
        <FormField label="Objetivo / descripción" span={6}>
          <textarea className="form-input" rows={4} disabled={readOnly} placeholder="¿Cuál es el objetivo de este evento?" value={desc} onChange={e => setDesc(e.target.value)} />
        </FormField>
      </div>
    </Modal>
  );
};

const Wellness = () => {
  const [eventos, setEventos] = React.useState(EVENTOS_BIENESTAR_INICIAL);
  const [modalMode, setModalMode] = React.useState(null); // null | 'crear' | 'editar' | 'ver'
  const [activeEvent, setActiveEvent] = React.useState(null);

  const closeModal = () => setModalMode(null);

  const saveEvent = (data) => {
    if (activeEvent) {
      setEventos(list => list.map(e => e.id === activeEvent.id ? { ...e, ...data } : e));
    } else {
      setEventos(list => [...list, { id: `wb-${Date.now()}`, status: 'activo', ...data }]);
    }
    closeModal();
  };

  const removeEvent = (ev) => {
    if (!confirm(`¿Eliminar el evento "${ev.name}"?`)) return;
    setEventos(list => list.filter(e => e.id !== ev.id));
  };

  return (
    <div className="main">
      <div className="page-head">
        <div>
          <h1 className="page-title">Bienestar</h1>
          <div className="page-subtitle">Eventos de bienestar organizacional y celebraciones del equipo</div>
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <div>
            <h3>Calendario de eventos</h3>
            <div className="sub">{eventos.length} eventos registrados en el calendario de bienestar</div>
          </div>
          <button className="btn primary" onClick={() => { setActiveEvent(null); setModalMode('crear'); }}>
            <IconPlus size={14} /> Nuevo evento
          </button>
        </div>
        <table className="data-table">
          <thead><tr><th>Mes</th><th>Tipo de evento</th><th>Estado</th><th style={{ textAlign: 'right' }}>Funciones</th></tr></thead>
          <tbody>
            {eventos.map(ev => (
              <tr key={ev.id}>
                <td>{ev.month}</td>
                <td style={{ fontWeight: 500 }}>{ev.name}</td>
                <td><span className={`pill ${ev.status === 'activo' ? 'green' : ''}`}>{ev.status === 'activo' ? 'Activo' : 'Inactivo'}</span></td>
                <td style={{ textAlign: 'right' }}>
                  <div style={{ display: 'inline-flex', gap: 6 }}>
                    <button className="btn" style={{ padding: '4px 10px', fontSize: 12 }} onClick={() => { setActiveEvent(ev); setModalMode('ver'); }}>Ver</button>
                    <button className="btn" style={{ padding: '4px 10px', fontSize: 12 }} onClick={() => { setActiveEvent(ev); setModalMode('editar'); }}>Editar</button>
                    <button className="btn danger" style={{ padding: '4px 10px', fontSize: 12 }} onClick={() => removeEvent(ev)}>Eliminar</button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <WellnessEventModal mode={modalMode} event={activeEvent} onClose={closeModal} onSave={saveEvent} />
    </div>
  );
};

window.Wellness = Wellness;