// Performance · Fase C · 1-on-1 / Check-ins recurrentes
// Conversaciones programadas jefe-colaborador con plantilla, agenda compartida,
// notas, acuerdos y firma electrónica al cierre.
// Aparece en la agenda del jefe y del colaborador (portal).

const { useState: _o1_useState, useMemo: _o1_useMemo, useEffect: _o1_useEffect } = React;

const AGENDA_PRESETS = [
  ['Avance objetivos del trimestre',     'objetivos'],
  ['Plan de formación pendiente',        'capacitaciones'],
  ['Bienestar y salud emocional',         'bienestar'],
  ['Carrera y desarrollo',                'carrera'],
  ['Feedback en doble vía',               'feedback'],
  ['Conflictos / dinámica del equipo',    'equipo'],
  ['Cambios operativos / turnos',         'operativo'],
  ['Reconocimientos / kudos',             'kudos'],
];

// ─── OneOnOneTab ──────────────────────────────────────────

const OneOnOneTab = () => {
  const [tick, setTick] = _o1_useState(0);
  const [openCapture, setOpenCapture] = _o1_useState(null); // null | {empId, jefeId, fecha?}
  const [openDetail, setOpenDetail]   = _o1_useState(null);

  const all = _o1_useMemo(() => {
    return [...(window.CHECKINS_1ON1 || [])].sort((a, b) => {
      const pa = a.fecha.split('/').reverse().join('-');
      const pb = b.fecha.split('/').reverse().join('-');
      return pb.localeCompare(pa);
    });
  }, [tick]);

  const realizados = all.filter(c => c.estado === 'realizado').length;
  const programados = all.filter(c => c.estado === 'programado').length;

  return (
    <div className="o1-tab">
      <div className="tr-kpis">
        <div className="tr-kpi">
          <div className="tr-kpi-icon green"><IconCheck size={18} /></div>
          <div>
            <div className="tr-kpi-num">{realizados}</div>
            <div className="tr-kpi-lbl">Check-ins realizados</div>
            <div className="tr-kpi-foot">Con notas y acuerdos</div>
          </div>
        </div>
        <div className="tr-kpi">
          <div className="tr-kpi-icon navy"><IconCalendar size={18} /></div>
          <div>
            <div className="tr-kpi-num">{programados}</div>
            <div className="tr-kpi-lbl">Próximamente</div>
            <div className="tr-kpi-foot">Recordatorio en portal</div>
          </div>
        </div>
        <div className="tr-kpi">
          <div className="tr-kpi-icon amber"><IconClock size={18} /></div>
          <div>
            <div className="tr-kpi-num">2</div>
            <div className="tr-kpi-lbl">Sin actividad &gt; 60d</div>
            <div className="tr-kpi-foot">Riesgo · sin feedback reciente</div>
          </div>
        </div>
      </div>

      <div className="sst-quickfilter" style={{ marginTop: 16 }}>
        <span className="muted" style={{ fontSize: 12, marginLeft: 'auto' }}>
          {all.length} check-ins en bitácora
        </span>
        <button className="btn primary" onClick={() => setOpenCapture({ empId: 'E0247', jefeId: 'E0067' })}>
          <IconPlus size={14} /> Programar 1-on-1
        </button>
      </div>

      <div className="o1-list">
        {all.map(c => {
          const persona = (window.PERSONAS_DESEMPENO || {})[c.empId] || {};
          const jefe    = (window.PERSONAS_DESEMPENO || {})[c.jefeId] || {};
          return (
            <button key={c.id} className={`o1-row o1-${c.estado}`} onClick={() => setOpenDetail(c)}>
              <div className="o1-date">
                <div className="o1-date-day">{c.fecha.split('/')[0]}</div>
                <div className="o1-date-mes">{c.fecha.split('/')[1]}</div>
              </div>
              <div className="o1-row-body">
                <div className="o1-row-head">
                  <span className="o1-row-name">{persona.nombre || c.empId}</span>
                  <span className="muted" style={{ fontSize: 11.5 }}>← con {jefe.nombre || c.jefeId}</span>
                  <span className={`pill ${c.estado === 'realizado' ? 'green' : 'navy'}`} style={{ fontSize: 10, marginLeft: 'auto' }}>
                    {c.estado}
                  </span>
                </div>
                <div className="o1-row-agenda">
                  {(c.agenda || []).slice(0, 3).map((a, i) => <span key={i} className="o1-agenda-pill">{a}</span>)}
                  {(c.agenda || []).length > 3 && <span className="muted" style={{ fontSize: 11 }}>+ {c.agenda.length - 3} más</span>}
                </div>
                {c.estado === 'realizado' && (
                  <div className="o1-row-acuerdos">
                    <span className="muted-xs">{c.acuerdos.length} acuerdos</span>
                    {c.firmaColaborador && <span className="o1-firmado">✓ firmado</span>}
                  </div>
                )}
              </div>
            </button>
          );
        })}
        {all.length === 0 && (
          <div className="empty-state" style={{ padding: 40 }}>
            <IconCalendar size={28} style={{ color: 'var(--text-subtle)' }} />
            <div style={{ fontWeight: 600, marginTop: 8 }}>Sin check-ins programados</div>
          </div>
        )}
      </div>

      {openCapture && <OneOnOneCaptureModal seed={openCapture} onClose={() => setOpenCapture(null)} onSave={() => setTick(t => t + 1)} />}
      {openDetail && <OneOnOneDetailModal checkin={openDetail} onClose={() => setOpenDetail(null)} />}
    </div>
  );
};

window.OneOnOneTab = OneOnOneTab;

// ─── Captura 1-on-1 ───────────────────────────────────────

const OneOnOneCaptureModal = ({ seed, onClose, onSave }) => {
  const [form, setForm] = _o1_useState({
    empId: seed?.empId || 'E0247',
    jefeId: seed?.jefeId || 'E0067',
    fecha: '15/05/2026',
    duracionMin: 30,
    agenda: ['Avance objetivos del trimestre'],
    notasCompartidas: '',
    acuerdos: [],
  });

  _o1_useEffect(() => {
    document.body.style.overflow = 'hidden';
    const onEsc = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onEsc);
    return () => { document.body.style.overflow = ''; window.removeEventListener('keydown', onEsc); };
  }, []);

  const update = (patch) => setForm(f => ({ ...f, ...patch }));
  const toggleAgenda = (label) => {
    const has = form.agenda.includes(label);
    update({ agenda: has ? form.agenda.filter(a => a !== label) : [...form.agenda, label] });
  };

  const submit = () => {
    const id = `1o1-${Date.now().toString(36)}`;
    const checkin = {
      id, empId: form.empId, jefeId: form.jefeId,
      fecha: form.fecha, duracionMin: form.duracionMin,
      estado: 'programado',
      agenda: form.agenda,
      notasCompartidas: form.notasCompartidas,
      acuerdos: form.acuerdos,
      proximaFecha: null,
      firmaColaborador: null,
    };
    (window.CHECKINS_1ON1 || []).unshift(checkin);
    onSave && onSave(checkin);
    onClose();
  };

  return (
    <div className="modal-overlay" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="modal" style={{ maxWidth: 720 }}>
        <div className="modal-head">
          <div>
            <div className="muted mono" style={{ fontSize: 11 }}>Nuevo 1-on-1</div>
            <div className="modal-title">Programar conversación 1-on-1</div>
            <div className="modal-sub">Aparece en la agenda del jefe y del colaborador. Notas y acuerdos firmables al cierre.</div>
          </div>
          <button className="icon-btn" onClick={onClose}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
          </button>
        </div>

        <div className="modal-body" style={{ padding: '20px 24px' }}>
          <div className="pc-form-row">
            <div className="form-field">
              <label>Colaborador</label>
              <select value={form.empId} onChange={(e) => update({ empId: e.target.value })}>
                {Object.entries(window.PERSONAS_DESEMPENO || {}).map(([id, p]) =>
                  <option key={id} value={id}>{p.nombre}</option>
                )}
              </select>
            </div>
            <div className="form-field">
              <label>Jefe / facilitador</label>
              <select value={form.jefeId} onChange={(e) => update({ jefeId: e.target.value })}>
                {Object.entries(window.PERSONAS_DESEMPENO || {}).map(([id, p]) =>
                  <option key={id} value={id}>{p.nombre}</option>
                )}
              </select>
            </div>
          </div>
          <div className="pc-form-row">
            <div className="form-field">
              <label>Fecha</label>
              <input type="text" value={form.fecha} onChange={(e) => update({ fecha: e.target.value })} placeholder="DD/MM/AAAA" />
            </div>
            <div className="form-field">
              <label>Duración (min)</label>
              <input type="number" min="15" max="120" step="15" value={form.duracionMin} onChange={(e) => update({ duracionMin: Number(e.target.value) })} />
            </div>
          </div>

          <div className="muted-xs" style={{ marginTop: 8, marginBottom: 6 }}>Agenda · selecciona los temas (plantilla)</div>
          <div className="o1-agenda-pick">
            {AGENDA_PRESETS.map(([label]) => (
              <button key={label} type="button"
                className={`o1-agenda-chip ${form.agenda.includes(label) ? 'active' : ''}`}
                onClick={() => toggleAgenda(label)}>
                {label}
              </button>
            ))}
          </div>

          <div className="form-field" style={{ marginTop: 14 }}>
            <label>Notas iniciales (opcional · se podrá actualizar luego)</label>
            <textarea rows={3} value={form.notasCompartidas} onChange={(e) => update({ notasCompartidas: e.target.value })}
              placeholder="Contexto del encuentro · qué quieres revisar, dudas tuyas, cosas que el otro debería traer preparadas." />
          </div>
        </div>

        <div className="modal-foot">
          <button className="btn" onClick={onClose}>Cancelar</button>
          <span style={{ marginLeft: 'auto' }} />
          <button className="btn primary" onClick={submit}>
            <IconCalendar size={14} /> Programar
          </button>
        </div>
      </div>
    </div>
  );
};

window.OneOnOneCaptureModal = OneOnOneCaptureModal;

// ─── Detalle ──────────────────────────────────────────────

const OneOnOneDetailModal = ({ checkin, onClose }) => {
  const c = checkin;
  const persona = (window.PERSONAS_DESEMPENO || {})[c.empId] || {};
  const jefe    = (window.PERSONAS_DESEMPENO || {})[c.jefeId] || {};

  _o1_useEffect(() => {
    document.body.style.overflow = 'hidden';
    const onEsc = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onEsc);
    return () => { document.body.style.overflow = ''; window.removeEventListener('keydown', onEsc); };
  }, []);

  return (
    <div className="modal-overlay" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="modal" style={{ maxWidth: 680 }}>
        <div className="modal-head">
          <div>
            <div className="muted mono" style={{ fontSize: 11 }}>{c.id}</div>
            <div className="modal-title">1-on-1 · {c.fecha}</div>
            <div className="modal-sub">{persona.nombre} ↔ {jefe.nombre} · {c.duracionMin} min</div>
          </div>
          <button className="icon-btn" onClick={onClose}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
          </button>
        </div>

        <div className="modal-body" style={{ padding: '20px 24px' }}>
          <div className="muted-xs" style={{ marginBottom: 6 }}>Agenda</div>
          <div className="o1-agenda-pick">
            {(c.agenda || []).map((a, i) => <span key={i} className="o1-agenda-chip active" style={{ cursor: 'default' }}>{a}</span>)}
          </div>

          {c.notasCompartidas && (
            <div style={{ marginTop: 14 }}>
              <div className="muted-xs" style={{ marginBottom: 6 }}>Notas compartidas</div>
              <div style={{ background: 'var(--surface)', padding: 12, borderRadius: 8, border: '1px solid var(--border)', fontSize: 13.5, lineHeight: 1.55 }}>
                {c.notasCompartidas}
              </div>
            </div>
          )}

          {(c.acuerdos || []).length > 0 && (
            <div style={{ marginTop: 14 }}>
              <div className="muted-xs" style={{ marginBottom: 6 }}>Acuerdos</div>
              {c.acuerdos.map((a, i) => (
                <div key={i} className="o1-acuerdo">
                  <IconCheck size={12} style={{ color: 'var(--green-600)' }} />
                  <span>{a}</span>
                </div>
              ))}
            </div>
          )}

          {c.firmaColaborador && (
            <div style={{ marginTop: 14, padding: 10, background: 'var(--surface-2)', borderRadius: 6 }}>
              <div className="muted" style={{ fontSize: 11.5 }}>
                <IconShield size={11} /> Firmado el <b>{c.firmaColaborador.fecha}</b> · hash <span className="mono">{c.firmaColaborador.hash}</span> · Ley 527/1999
              </div>
            </div>
          )}
        </div>

        <div className="modal-foot">
          <button className="btn" onClick={onClose}>Cerrar</button>
          {c.estado === 'programado' && (
            <button className="btn primary"><IconCheck size={13} /> Marcar como realizado</button>
          )}
        </div>
      </div>
    </div>
  );
};

window.OneOnOneDetailModal = OneOnOneDetailModal;