// Estratégica — Comité de Convivencia Laboral
// Contenido portado de components/sst.jsx (ConvivenciaSection), con sufijo "EST"
// en los identificadores para no chocar con los del original (mismo scope global
// de scripts). Los modales (CasoConvivenciaModal, MiembroComiteModal,
// SesionConvivenciaModal) se reutilizan directamente de sst.jsx sin duplicar —
// sst.jsx carga antes en el HTML entry, así que ya están disponibles al
// momento de renderizar.
const { useState: _est_useState, useMemo: _est_useMemo } = React;

// Comité de Convivencia Laboral — Resolución 652 y 1356 de 2012, Ley 1010 de 2006
// Atica: 824 colaboradores → composición ampliada 4 principales + 4 suplentes
// Período 2025–2027 (2 años, Res. 1356 art. 3)
const CONVIVENCIA_COMITE_EST = [
  // Principales — empleador (designados)
  { initials: 'CR', name: 'Carolina Restrepo Salazar', role: 'Jefe de RRHH',          source: 'Empleador',    kind: 'principal', position: 'Presidenta',  from: '01/02/2025', to: '01/02/2027', site: 'Cali' },
  { initials: 'PG', name: 'Patricia Gómez Lara',       role: 'Coord. Bienestar',     source: 'Empleador',    kind: 'principal', position: 'Vocal',       from: '01/02/2025', to: '01/02/2027', site: 'Cali' },
  // Principales — trabajadores (elegidos por votación)
  { initials: 'LM', name: 'Luis Miguel Marín',         role: 'Líder de Aprovechamiento',     source: 'Trabajadores', kind: 'principal', position: 'Secretario',  from: '01/02/2025', to: '01/02/2027', site: 'Cali' },
  { initials: 'PV', name: 'Paula Valencia Ríos',       role: 'Téc. Mantenimiento',   source: 'Trabajadores', kind: 'principal', position: 'Vocal',       from: '01/02/2025', to: '01/02/2027', site: 'Cali' },
  // Suplentes — empleador
  { initials: 'MR', name: 'Manuel Rodríguez García',   role: 'Gerente de Planta',    source: 'Empleador',    kind: 'suplente',  position: 'Suplente',    from: '01/02/2025', to: '01/02/2027', site: 'Cali' },
  { initials: 'AC', name: 'Ana Lucía Castaño',         role: 'Aux. RRHH',            source: 'Empleador',    kind: 'suplente',  position: 'Suplente',    from: '01/02/2025', to: '01/02/2027', site: 'Cali' },
  // Suplentes — trabajadores
  { initials: 'AM', name: 'Andrés Felipe Mejía',       role: 'Operario de Clasificación',  source: 'Trabajadores', kind: 'suplente',  position: 'Suplente',    from: '01/02/2025', to: '01/02/2027', site: 'Cali' },
  { initials: 'MF', name: 'María Fernanda López',      role: 'Op. Aprovechamiento',          source: 'Trabajadores', kind: 'suplente',  position: 'Suplente',    from: '01/02/2025', to: '01/02/2027', site: 'Cali' },
];

// Sesiones — 4 ordinarias trimestrales (Res. 1356 art. 4) + extraordinarias por queja
const CONVIVENCIA_SESIONES_EST = [
  { id: 'CCL-2026-Q1',   date: '12/02/2026 · 14:00', kind: 'ordinaria',     topic: 'Sesión ordinaria Q1 · Revisión casos abiertos',      site: 'Cali · Sala Junta', status: 'realizada', acta: 'CCL-ACTA-2026-001', quorum: '4/4' },
  { id: 'CCL-2026-EXT1', date: '21/03/2026 · 10:00', kind: 'extraordinaria', topic: 'Sesión extraordinaria · Caso CCL-2026-002',         site: 'Cali · Sala Junta', status: 'realizada', acta: 'CCL-ACTA-2026-002', quorum: '4/4' },
  { id: 'CCL-2026-Q2',   date: '14/05/2026 · 14:00', kind: 'ordinaria',     topic: 'Sesión ordinaria Q2 · Seguimiento conciliaciones',  site: 'Cali · Sala Junta', status: 'pendiente', acta: null,                quorum: null },
  { id: 'CCL-2026-Q3',   date: '13/08/2026 · 14:00', kind: 'ordinaria',     topic: 'Sesión ordinaria Q3 · Informe semestral',           site: 'Cali · Sala Junta', status: 'pendiente', acta: null,                quorum: null },
  { id: 'CCL-2026-Q4',   date: '12/11/2026 · 14:00', kind: 'ordinaria',     topic: 'Sesión ordinaria Q4 · Cierre anual e informe Gerencia', site: 'Cali · Sala Junta', status: 'pendiente', acta: null,            quorum: null },
];

// Casos — datos anonimizados (confidencial por art. 14 Res. 652)
const CONVIVENCIA_CASOS_EST = [
  { id: 'CCL-2026-001', received: '08/01/2026', kind: 'maltrato',       state: 'cerrado',      daysOpen: 42, area: 'Aprovechamiento',    summary: 'Conducta verbal reiterativa entre pares · cerrado por conciliación.',         declarante: 'identificado' },
  { id: 'CCL-2026-002', received: '15/03/2026', kind: 'discriminacion', state: 'seguimiento',  daysOpen: 52, area: 'Clasificación',    summary: 'Presunta discriminación por turno · medidas pedagógicas en curso.',            declarante: 'identificado' },
  { id: 'CCL-2026-003', received: '02/04/2026', kind: 'persecucion',    state: 'conciliacion', daysOpen: 34, area: 'Logística', summary: 'Asignación inequitativa de tareas · sesión de conciliación 14/05.',             declarante: 'anonimo'      },
  { id: 'CCL-2026-004', received: '28/04/2026', kind: 'inequidad',      state: 'recibido',     daysOpen: 8,  area: 'Aprovechamiento',    summary: 'Queja sobre evaluación de desempeño · asignación pendiente.',                   declarante: 'identificado' },
];

// 6 modalidades de acoso laboral — Ley 1010 de 2006 art. 2
const KIND_CCL_EST = {
  maltrato:        { label: 'Maltrato laboral',       tone: 'rose'  },
  persecucion:     { label: 'Persecución laboral',    tone: 'rose'  },
  discriminacion:  { label: 'Discriminación laboral', tone: 'amber' },
  inequidad:       { label: 'Inequidad laboral',      tone: 'amber' },
  desproteccion:   { label: 'Desprotección laboral',  tone: 'navy'  },
  entorpecimiento: { label: 'Entorpecimiento laboral', tone: 'navy' },
};

const STATE_CCL_EST = {
  recibido:     { label: 'Recibido',        pill: 'navy',       dot: 'var(--navy-800)'  },
  conciliacion: { label: 'En conciliación', pill: 'amber-soft', dot: 'var(--amber-600)' },
  seguimiento:  { label: 'En seguimiento',  pill: 'blue',       dot: '#0B6BB8'          },
  cerrado:      { label: 'Cerrado',         pill: 'green',      dot: 'var(--green-600)' },
  archivado:    { label: 'Archivado',       pill: 'rose',       dot: 'var(--rose-600)'  },
};

// ─── Root ──────────────────────────────────────────────────

const SSTEstrategico = () => {
  const [tab, setTab] = _est_useState('convivencia');
  const [casoOpen, setCasoOpen]       = _est_useState(false);
  const [miembroOpen, setMiembroOpen] = _est_useState(false);
  const [sesionOpen, setSesionOpen]   = _est_useState(false);

  return (
    <div className="main" data-screen-label="Estratégica">
      <div className="page-head">
        <div>
          <h1 className="page-title">Estratégica</h1>
          <div className="page-subtitle">
            <b>SG-SST · Resolución 0312 de 2019</b> · Objetivos, indicadores y plan estratégico de SG-SST
          </div>
        </div>
      </div>

      {/* KPIs — nivel estratégico, derivados de los comités (COPASST + Convivencia) */}
      <div className="tr-kpis">
        <div className="tr-kpi">
          <div className="tr-kpi-icon navy"><IconShield size={18} /></div>
          <div>
            <div className="tr-kpi-num">2</div>
            <div className="tr-kpi-lbl">Comités activos</div>
            <div className="tr-kpi-foot muted">COPASST + Comité de Convivencia</div>
          </div>
        </div>
        <div className="tr-kpi">
          <div className="tr-kpi-icon green"><IconCheck size={18} /></div>
          <div>
            <div className="tr-kpi-num">2 <small>/ 5</small></div>
            <div className="tr-kpi-lbl">Sesiones de Convivencia realizadas</div>
            <div className="tr-kpi-foot muted">40% del cronograma 2026</div>
          </div>
        </div>
        <div className="tr-kpi">
          <div className="tr-kpi-icon amber"><IconAlert size={18} /></div>
          <div>
            <div className="tr-kpi-num">3</div>
            <div className="tr-kpi-lbl">Casos de convivencia activos</div>
            <div className="tr-kpi-foot muted">de 4 radicados en 2026</div>
          </div>
        </div>
        <div className="tr-kpi">
          <div className="tr-kpi-icon navy"><IconCalendar size={18} /></div>
          <div>
            <div className="tr-kpi-num mono" style={{ fontSize: 17 }}>14/05</div>
            <div className="tr-kpi-lbl">Próxima sesión</div>
            <div className="tr-kpi-foot muted">Sesión ordinaria Q2</div>
          </div>
        </div>
      </div>

      <div className="doc-tabs">
        <button className={`doc-tab ${tab === 'convivencia' ? 'active' : ''}`} onClick={() => setTab('convivencia')}>
          <IconShield size={14} /> Comité de Convivencia
        </button>
      </div>

      {tab === 'convivencia' && (
        <ConvivenciaSectionEST
          onNewCase={() => setCasoOpen(true)}
          onNewMember={() => setMiembroOpen(true)}
          onNewSession={() => setSesionOpen(true)}
        />
      )}

      {casoOpen    && <CasoConvivenciaModal onClose={() => setCasoOpen(false)} />}
      {miembroOpen && <MiembroComiteModal   onClose={() => setMiembroOpen(false)} />}
      {sesionOpen  && <SesionConvivenciaModal onClose={() => setSesionOpen(false)} />}
    </div>
  );
};

// ─── Section: Comité de Convivencia Laboral ───────────────
// Marco legal: Resolución 652 y 1356 de 2012 · Ley 1010 de 2006

const ConvivenciaSectionEST = ({ onNewCase, onNewMember, onNewSession }) => {
  const [filter, setFilter] = _est_useState('todos');

  const principales = CONVIVENCIA_COMITE_EST.filter(m => m.kind === 'principal');
  const suplentes   = CONVIVENCIA_COMITE_EST.filter(m => m.kind === 'suplente');

  const proxima      = CONVIVENCIA_SESIONES_EST.find(s => s.status === 'pendiente');
  const realizadas   = CONVIVENCIA_SESIONES_EST.filter(s => s.status === 'realizada').length;
  const cumplimiento = Math.round((realizadas / CONVIVENCIA_SESIONES_EST.length) * 100);

  const counts = _est_useMemo(() => ({
    todos:        CONVIVENCIA_CASOS_EST.length,
    recibido:     CONVIVENCIA_CASOS_EST.filter(c => c.state === 'recibido').length,
    conciliacion: CONVIVENCIA_CASOS_EST.filter(c => c.state === 'conciliacion').length,
    seguimiento:  CONVIVENCIA_CASOS_EST.filter(c => c.state === 'seguimiento').length,
    cerrado:      CONVIVENCIA_CASOS_EST.filter(c => c.state === 'cerrado').length,
  }), []);

  const activos = counts.recibido + counts.conciliacion + counts.seguimiento;
  const cerrados = counts.cerrado;
  const casos = filter === 'todos' ? CONVIVENCIA_CASOS_EST : CONVIVENCIA_CASOS_EST.filter(c => c.state === filter);

  const slaBadge = (c) => {
    if (c.state === 'cerrado' || c.state === 'archivado') return null;
    if (c.daysOpen > 60) return <span className="pill rose" style={{ fontSize: 10.5 }}>SLA vencido</span>;
    if (c.daysOpen > 30) return <span className="pill amber-soft" style={{ fontSize: 10.5 }}>SLA por vencer</span>;
    return null;
  };

  const groupHeader = (label) => (
    <div className="muted" style={{ fontSize: 11, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase', padding: '8px 16px 4px' }}>
      {label}
    </div>
  );

  const renderMember = (m, i) => {
    const tone = m.position === 'Presidenta' ? 'navy'
               : m.position === 'Secretario' ? 'blue'
               : m.kind === 'suplente'       ? 'amber-soft'
               :                                'green';
    return (
      <div key={`${m.kind}-${i}`} className="sst-member">
        <div className="doc-avatar" style={{ width: 36, height: 36, fontSize: 12 }}>{m.initials}</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontWeight: 600, fontSize: 13 }}>{m.name}</div>
          <div className="muted" style={{ fontSize: 11.5, marginTop: 2 }}>
            {m.role} · {m.source} · {m.site}
          </div>
          <div className="muted mono" style={{ fontSize: 11, marginTop: 4 }}>
            <IconCalendar size={10} /> Vig. {m.from} → {m.to}
          </div>
        </div>
        <span className={`pill ${tone}`} style={{ fontSize: 11 }}>{m.position}</span>
      </div>
    );
  };

  return (
    <>
      {/* Banner marco legal */}
      <div className="doc-list-card" style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', marginBottom: 12, borderLeft: '3px solid var(--navy-800)' }}>
        <IconShield size={16} />
        <div style={{ fontSize: 12.5, lineHeight: 1.5 }}>
          <b>Marco legal:</b> Resolución 652 y 1356 de 2012 · Ley 1010 de 2006 ·
          <span className="muted"> Reuniones ordinarias trimestrales · Período 2025–2027 · Composición ampliada (4 + 4)</span>
        </div>
      </div>

      {/* Estado del comité — franja compacta (stat-tile), a propósito distinta
          de las tarjetas tr-kpi de arriba para que no se lea como un duplicado */}
      <div style={{ display: 'flex', gap: 12, marginBottom: 20 }}>
        <div className="stat-tile">
          <div className="stat-num" style={{ color: 'var(--amber-600)' }}>{activos}</div>
          <div className="stat-lbl">Casos activos</div>
          <div className="muted" style={{ fontSize: 11, marginTop: 4 }}>recibido · conciliación · seguimiento</div>
        </div>
        <div className="stat-tile">
          <div className="stat-num" style={{ color: 'var(--green-600)' }}>{cerrados}</div>
          <div className="stat-lbl">Casos cerrados YTD</div>
          <div className="muted" style={{ fontSize: 11, marginTop: 4 }}>resueltos por conciliación</div>
        </div>
        <div className="stat-tile">
          <div className="stat-num mono">{proxima ? proxima.date.split(' · ')[0] : '—'}</div>
          <div className="stat-lbl">Próxima sesión</div>
          <div className="muted" style={{ fontSize: 11, marginTop: 4 }}>{proxima ? proxima.topic.split(' · ')[0] : 'sin agendar'}</div>
        </div>
        <div className="stat-tile">
          <div className="stat-num">{cumplimiento}<small style={{ fontSize: 14 }}>%</small></div>
          <div className="stat-lbl">Cumplimiento sesiones</div>
          <div className="muted" style={{ fontSize: 11, marginTop: 4 }}>{realizadas} de {CONVIVENCIA_SESIONES_EST.length} realizadas</div>
        </div>
      </div>

      {/* Grid 2 columnas: Integrantes + Sesiones */}
      <div className="sst-copasst-grid">
        {/* Integrantes */}
        <div className="sst-card">
          <div className="sst-card-head">
            <div>
              <div className="sst-card-title">Integrantes del Comité</div>
              <div className="muted" style={{ fontSize: 12, marginTop: 3 }}>
                Período 2025–2027 · {principales.length} principales + {suplentes.length} suplentes
              </div>
            </div>
            <button className="btn" onClick={onNewMember}><IconPlus size={13} /> Agregar miembro</button>
          </div>

          {groupHeader('Principales')}
          <div className="sst-members">
            {principales.map(renderMember)}
          </div>

          {groupHeader('Suplentes')}
          <div className="sst-members">
            {suplentes.map(renderMember)}
          </div>
        </div>

        {/* Sesiones */}
        <div className="sst-card">
          <div className="sst-card-head">
            <div>
              <div className="sst-card-title">Cronograma de sesiones 2026</div>
              <div className="muted" style={{ fontSize: 12, marginTop: 3 }}>
                Ordinarias trimestrales (Res. 1356 art. 4) + extraordinarias por queja
              </div>
            </div>
            <button className="btn primary" onClick={onNewSession}><IconPlus size={13} /> Programar sesión</button>
          </div>
          <div className="sst-meetings">
            {CONVIVENCIA_SESIONES_EST.map((s, i) => (
              <div key={i} className={`sst-meeting ${s.status === 'realizada' ? 'past' : ''}`}>
                <div className="sst-meeting-date">
                  <IconCalendar size={14} />
                  <span className="mono" style={{ fontSize: 12, fontWeight: 600 }}>{s.date}</span>
                </div>
                <div className="sst-meeting-body">
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontWeight: 600, fontSize: 13 }}>
                    <span className={`pill ${s.kind === 'extraordinaria' ? 'rose' : 'navy'}`} style={{ fontSize: 10.5 }}>
                      {s.kind === 'extraordinaria' ? 'Extraordinaria' : 'Ordinaria'}
                    </span>
                    <span>{s.topic}</span>
                  </div>
                  <div className="muted mono" style={{ fontSize: 11, marginTop: 3 }}>
                    {s.id} · {s.site}
                    {s.acta && <> · <IconExternal size={10} /> Acta {s.acta}</>}
                    {s.quorum && <> · Quórum {s.quorum}</>}
                  </div>
                </div>
                <span className={`pill ${s.status === 'pendiente' ? 'amber-soft' : 'green'}`} style={{ fontSize: 11 }}>
                  {s.status === 'pendiente' ? 'Pendiente' : 'Realizada'}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Quickfilter de casos + Nuevo caso */}
      <div className="sst-quickfilter" style={{ marginTop: 16 }}>
        {[
          { id: 'todos',        label: 'Todos',         tone: '' },
          { id: 'recibido',     label: 'Recibidos',     tone: '' },
          { id: 'conciliacion', label: 'Conciliación',  tone: 'amber' },
          { id: 'seguimiento',  label: 'Seguimiento',   tone: '' },
          { id: 'cerrado',      label: 'Cerrados',      tone: 'green' },
        ].map(o => (
          <button
            key={o.id}
            className={`sst-chip ${o.tone} ${filter === o.id ? 'active' : ''}`}
            onClick={() => setFilter(o.id)}
          >
            {o.label}
            <span className="sst-chip-count">{counts[o.id]}</span>
          </button>
        ))}
        <div style={{ flex: 1 }} />
        <button className="btn"><IconBarChart size={14} /> Informe Gerencia</button>
        <button className="btn primary" onClick={onNewCase}><IconPlus size={14} /> Nuevo caso</button>
      </div>

      {/* Lista de casos — timeline */}
      <div className="sst-incident-list">
        {casos.map(c => {
          const k = KIND_CCL_EST[c.kind];
          const s = STATE_CCL_EST[c.state];
          return (
            <div key={c.id} className="sst-incident">
              <div className="sst-incident-rail">
                <div className={`sst-inc-dot ${k.tone}`}>
                  <IconShield size={14} />
                </div>
                <div className="sst-inc-line" />
              </div>
              <div className="sst-incident-body">
                <div className="sst-incident-head">
                  <div>
                    <div className="sst-incident-id mono">{c.id}</div>
                    <div className="sst-incident-title">
                      <span className={`pill ${k.tone}`} style={{ fontSize: 11 }}>{k.label}</span>
                      <span>Área: {c.area}</span>
                      <span className="pill rose" style={{ fontSize: 10.5 }}>Confidencial</span>
                      {slaBadge(c)}
                    </div>
                  </div>
                  <span className={`pill ${s.pill}`}>
                    <span className="status-dot" style={{ background: s.dot }} /> {s.label}
                  </span>
                </div>

                <div className="sst-incident-meta">
                  <div>
                    <div className="muted-xs">Recibido</div>
                    <div className="sst-incident-val mono" style={{ fontSize: 12 }}>{c.received}</div>
                  </div>
                  <div>
                    <div className="muted-xs">Días en gestión</div>
                    <div className="sst-incident-val mono" style={{ fontSize: 12 }}>{c.daysOpen} días</div>
                  </div>
                  <div>
                    <div className="muted-xs">Declarante</div>
                    <div className="sst-incident-val" style={{ fontSize: 12 }}>
                      {c.declarante === 'anonimo' ? 'Anónimo' : 'Identificado'}
                    </div>
                  </div>
                </div>

                <div style={{ marginTop: 8, fontSize: 12.5, color: 'var(--text)' }}>
                  {c.summary}
                </div>

                <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
                  <button className="btn" style={{ padding: '5px 10px', fontSize: 12 }}>
                    <IconExternal size={12} /> Expediente
                  </button>
                  <button className="btn" style={{ padding: '5px 10px', fontSize: 12 }}>
                    <IconCalendar size={12} /> Citar conciliación
                  </button>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </>
  );
};

window.SSTEstrategico = SSTEstrategico;