// Gestión del riesgo — Accidentes e incidentes, Matriz de riesgo, COPASST y brigadas
// Contenido portado de components/sst.jsx (IncidentsSection, RiskMatrixSection,
// CopasstSection), con sufijo "GR" en los identificadores para no chocar con los
// del original (mismo scope global de scripts). El botón "Reportar accidente"
// reutiliza directamente FuratModal de sst.jsx (sin duplicar — así el flujo de
// reporte funciona exactamente igual en ambos módulos); sst.jsx carga antes en
// el HTML entry, así que FuratModal ya está disponible al momento de renderizar.
const { useState: _gr_useState } = React;

const INCIDENTS_GR = [
  {
    id: 'INC-2026-018', kind: 'accidente', severity: 'leve',
    emp: { name: 'Carlos Andrés Vélez', initials: 'CV', role: 'Operario de Clasificación' },
    when: '02/05/2026 · 09:42', site: 'Planta Cali · Zona Clasificación',
    body: ['hand-r'], description: 'Quemadura de segundo grado en mano derecha al manipular bandeja de material recién procesado sin guante térmico.',
    measures: 'Atención inmediata en enfermería. Aplicación de protocolo de quemaduras. Remisión a IPS Megacentro.',
    arl: { notified: true, when: '02/05/2026 · 11:30', code: 'SUR-26-1182' },
    status: 'investigacion',
    witnesses: 'Diego Andrés Toro (E0142), Luis Miguel Marín (E0067)',
  },
  {
    id: 'INC-2026-017', kind: 'incidente', severity: 'baja',
    emp: { name: 'María Fernanda López', initials: 'MF', role: 'Op. Aprovechamiento' },
    when: '28/04/2026 · 14:15', site: 'Planta Cali · Línea Aprovechamiento 2',
    body: ['foot-l'], description: 'Casi-accidente: trabajadora resbaló por derrame de aceite no señalizado. No hubo lesión.',
    measures: 'Limpieza inmediata de la zona. Refuerzo de señalización. Recordatorio de protocolo 5S al inicio de turno.',
    arl: { notified: false, when: null, code: null },
    status: 'cerrado',
    witnesses: 'Adriana Restrepo (E0298)',
  },
  {
    id: 'INC-2026-015', kind: 'accidente', severity: 'moderada',
    emp: { name: 'Jorge Iván Patiño', initials: 'JP', role: 'Conductor' },
    when: '15/04/2026 · 06:50', site: 'Vía Cali–Barranquilla · Km 23',
    body: ['back', 'leg-l'], description: 'Accidente de tránsito en ruta laboral. Vehículo de la empresa colisionó por alcance. Lesión lumbar y contusión muslo izquierdo.',
    measures: 'Atención prehospitalaria SOAT. Traslado a Clínica Comfamiliar. Reporte a tránsito y aseguradora.',
    arl: { notified: true, when: '15/04/2026 · 08:00', code: 'SUR-26-0987' },
    status: 'investigacion',
    witnesses: 'Conductor del otro vehículo · placa SVN-487',
  },
  {
    id: 'INC-2026-012', kind: 'enfermedad', severity: 'moderada',
    emp: { name: 'Luis Miguel Marín', initials: 'LM', role: 'Líder de Aprovechamiento' },
    when: '03/04/2026', site: 'Planta Cali',
    body: ['arm-r'], description: 'Diagnóstico médico de síndrome del túnel carpiano derecho — presunta enfermedad laboral por movimientos repetitivos.',
    measures: 'Reubicación temporal. Pausas activas cada 90 min. Inicio proceso calificación origen ante ARL.',
    arl: { notified: true, when: '04/04/2026 · 09:15', code: 'SUR-26-0834' },
    status: 'investigacion',
    witnesses: '—',
  },
  {
    id: 'INC-2026-009', kind: 'incidente', severity: 'baja',
    emp: { name: 'Paula Valencia Ríos', initials: 'PV', role: 'Téc. Mantenimiento' },
    when: '21/03/2026 · 11:20', site: 'Planta Cali · Cuarto eléctrico',
    body: ['head'], description: 'Casi-accidente: golpe leve contra estructura baja. Sin lesión, requirió uso de casco.',
    measures: 'Refuerzo señalización de altura libre. Inducción exprés al equipo de mantenimiento.',
    arl: { notified: false, when: null, code: null },
    status: 'cerrado',
    witnesses: 'Diego Andrés Toro (E0142)',
  },
  {
    id: 'INC-2026-006', kind: 'accidente', severity: 'leve',
    emp: { name: 'Andrés Felipe Mejía', initials: 'AM', role: 'Operario de Clasificación' },
    when: '12/02/2026 · 16:08', site: 'Planta Cali · Bodega',
    body: ['leg-r'], description: 'Caída al mismo nivel, contusión rodilla derecha. Sin incapacidad.',
    measures: 'Atención en enfermería. Reposición de cinta antideslizante en zona.',
    arl: { notified: true, when: '12/02/2026 · 17:30', code: 'SUR-26-0312' },
    status: 'cerrado',
    witnesses: 'Carlos Andrés Vélez (E0205)',
  },
];

const STATUS_INC_GR = {
  investigacion: { label: 'En investigación', pill: 'amber-soft', dot: '#854D0E' },
  cerrado:       { label: 'Cerrado',          pill: 'green',      dot: 'var(--green-600)' },
};

const KIND_INC_GR = {
  accidente:   { label: 'Accidente',           tone: 'rose' },
  incidente:   { label: 'Incidente',           tone: 'amber' },
  enfermedad:  { label: 'Enfermedad laboral',  tone: 'navy' },
};

const RISK_MATRIX_GR = [
  { role: 'Operario de Clasificación',     site: 'Cali',    factor: 'físico',       sub: 'Calor · ruido', level: 'alto',     controls: ['Guantes térmicos', 'Protección auditiva 25 dB', 'Pausas en zona ventilada'], arl: 'Sura',      cot: '2.436%' },
  { role: 'Op. Aprovechamiento',             site: 'Cali',    factor: 'biomecánico',  sub: 'Movimiento repetitivo', level: 'medio', controls: ['Rotación de puestos', 'Pausas activas cada 2 h', 'Ajuste ergonómico'],         arl: 'Sura',      cot: '0.522%' },
  { role: 'Téc. Mantenimiento',      site: 'Cali',    factor: 'físico',       sub: 'Eléctrico · alturas',   level: 'critico', controls: ['LOTO obligatorio', 'Permiso de trabajo en altura', 'EPP completo categoría III', 'Compañero de seguridad'], arl: 'Sura', cot: '6.960%' },
  { role: 'Conductor',               site: 'Barranquilla',  factor: 'físico',       sub: 'Vial · postural',       level: 'alto',     controls: ['Plan estratégico de seguridad vial', 'Examen visual semestral', 'Bitácora de descansos'], arl: 'Sura',      cot: '4.350%' },
  { role: 'Aux. Calidad',            site: 'Cali',    factor: 'químico',      sub: 'Reactivos de laboratorio', level: 'medio',  controls: ['Hojas de seguridad MSDS', 'Cabina de extracción', 'EPP químico'],                          arl: 'Sura',      cot: '1.044%' },
  { role: 'Líder de Aprovechamiento',        site: 'Cali',    factor: 'psicosocial',  sub: 'Carga mental · liderazgo', level: 'medio',  controls: ['Batería riesgo psicosocial bienal', 'Espacios 1:1', 'Plan de acompañamiento'],            arl: 'Sura',      cot: '0.522%' },
  { role: 'Aux. Recursos Humanos',   site: 'Cali',    factor: 'ergonómico',   sub: 'Postura mantenida',     level: 'bajo',     controls: ['Silla ergonómica', 'Pausas activas', 'Capacitación higiene postural'],                       arl: 'Sura',      cot: '0.522%' },
  { role: 'Operaria de Planta',      site: 'Cali',    factor: 'biomecánico',  sub: 'Movimiento repetitivo · postura', level: 'alto',  controls: ['Ajuste ergonómico de puesto', 'Rotación cada 2 h', 'Programa epidemiológico DME'], arl: 'Sura',      cot: '4.350%' },
];

const RISK_LEVEL_GR = {
  bajo:    { label: 'Bajo',    pill: 'green',      tone: 'var(--green-600)' },
  medio:   { label: 'Medio',   pill: 'amber-soft', tone: '#854D0E' },
  alto:    { label: 'Alto',    pill: 'amber',      tone: 'var(--amber-600)' },
  critico: { label: 'Crítico', pill: 'rose',       tone: 'var(--rose-600)' },
};

const FACTOR_TONE_GR = {
  'físico':       'blue',
  'químico':      'amber',
  'biomecánico':  'navy',
  'ergonómico':   'navy',
  'psicosocial':  'rose',
  'biológico':    'green',
};

const COPASST_GR = [
  { initials: 'CR', name: 'Carolina Restrepo Salazar', role: 'Presidenta',          source: 'Designada por empleador', from: '01/02/2025', to: '01/02/2027', site: 'Cali' },
  { initials: 'JC', name: 'Jaime Castro Ordóñez',      role: 'Vicepresidente',      source: 'Elegido por trabajadores', from: '01/02/2025', to: '01/02/2027', site: 'Cali' },
  { initials: 'PG', name: 'Patricia Gómez Lara',       role: 'Secretaria',          source: 'Designada por empleador', from: '01/02/2025', to: '01/02/2027', site: 'Cali' },
  { initials: 'AM', name: 'Andrés Felipe Mejía',       role: 'Vocal principal',     source: 'Elegido por trabajadores', from: '01/02/2025', to: '01/02/2027', site: 'Cali' },
  { initials: 'NC', name: 'Nicolás Cárdenas',          role: 'Vocal principal',     source: 'Elegido por trabajadores', from: '01/02/2025', to: '01/02/2027', site: 'Barranquilla' },
  { initials: 'PV', name: 'Paula Valencia Ríos',       role: 'Suplente',            source: 'Elegida por trabajadores', from: '01/02/2025', to: '01/02/2027', site: 'Cali' },
];

const MEETINGS_GR = [
  { date: '08/05/2026 · 14:00', topic: 'Análisis accidentes abril · seguimiento INC-2026-018',     status: 'pendiente', site: 'Cali', who: 'COPASST' },
  { date: '15/05/2026 · 09:00', topic: 'Simulacro de evacuación general · cronograma',             status: 'pendiente', site: 'Cali', who: 'Brigada' },
  { date: '12/04/2026 · 14:00', topic: 'Seguimiento matriz de riesgos · cierre acciones Q1',       status: 'realizada', site: 'Cali', who: 'COPASST' },
  { date: '22/04/2026 · 16:00', topic: 'Capacitación de brigada · primeros auxilios refuerzo',     status: 'realizada', site: 'Cali', who: 'Brigada' },
];

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

const SSTGestionRiesgo = () => {
  const [tab, setTab] = _gr_useState('incidents');
  const [furatOpen, setFuratOpen] = _gr_useState(false);

  return (
    <div className="main" data-screen-label="Gestión del riesgo">
      <div className="page-head">
        <div>
          <h1 className="page-title">Gestión del riesgo</h1>
          <div className="page-subtitle">
            <b>SG-SST · Resolución 0312 de 2019</b> · Identificación, valoración y control de riesgos
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn primary" onClick={() => setFuratOpen(true)}>
            <IconAlert size={14} /> Reportar accidente
          </button>
        </div>
      </div>

      {/* KPIs — derivados de los propios datos de este módulo (accidentes, matriz, COPASST) */}
      <div className="tr-kpis">
        <div className="tr-kpi">
          <div className="tr-kpi-icon rose"><IconAlert size={18} /></div>
          <div>
            <div className="tr-kpi-num">3</div>
            <div className="tr-kpi-lbl">Casos en investigación</div>
            <div className="tr-kpi-foot muted">de 6 accidentes/incidentes 2026</div>
          </div>
        </div>
        <div className="tr-kpi">
          <div className="tr-kpi-icon amber"><IconShield size={18} /></div>
          <div>
            <div className="tr-kpi-num">4 <small>/ 6</small></div>
            <div className="tr-kpi-lbl">Casos notificados a ARL</div>
            <div className="tr-kpi-foot down">2 casos sin notificar</div>
          </div>
        </div>
        <div className="tr-kpi">
          <div className="tr-kpi-icon navy"><IconBarChart size={18} /></div>
          <div>
            <div className="tr-kpi-num">4 <small>/ 8</small></div>
            <div className="tr-kpi-lbl">Cargos en riesgo alto o crítico</div>
            <div className="tr-kpi-foot muted">1 crítico · 3 altos en la matriz</div>
          </div>
        </div>
        <div className="tr-kpi">
          <div className="tr-kpi-icon green"><IconUsers size={18} /></div>
          <div>
            <div className="tr-kpi-num">6</div>
            <div className="tr-kpi-lbl">Miembros COPASST</div>
            <div className="tr-kpi-foot muted">próxima reunión 08/05 · Cali</div>
          </div>
        </div>
      </div>

      <div className="doc-tabs">
        <button className={`doc-tab ${tab === 'incidents' ? 'active' : ''}`} onClick={() => setTab('incidents')}>
          <IconAlert size={14} /> Accidentes e incidentes
        </button>
        <button className={`doc-tab ${tab === 'matrix' ? 'active' : ''}`} onClick={() => setTab('matrix')}>
          <IconBarChart size={14} /> Matriz de riesgo
        </button>
        <button className={`doc-tab ${tab === 'copasst' ? 'active' : ''}`} onClick={() => setTab('copasst')}>
          <IconUsers size={14} /> COPASST y brigadas
        </button>
      </div>

      {tab === 'incidents' && <IncidentsSectionGR onNew={() => setFuratOpen(true)} />}
      {tab === 'matrix'    && <RiskMatrixSectionGR />}
      {tab === 'copasst'   && <CopasstSectionGR />}

      {furatOpen && <FuratModal onClose={() => setFuratOpen(false)} />}
    </div>
  );
};

// ─── Section: Accidentes e incidentes ──────────────────────

const IncidentsSectionGR = ({ onNew }) => {
  const [filter, setFilter] = _gr_useState('todos');
  const list = filter === 'todos' ? INCIDENTS_GR : INCIDENTS_GR.filter(i => i.kind === filter);

  return (
    <>
      <div className="sst-quickfilter">
        <button className={`sst-chip ${filter === 'todos' ? 'active' : ''}`}      onClick={() => setFilter('todos')}>Todos<span className="sst-chip-count">{INCIDENTS_GR.length}</span></button>
        <button className={`sst-chip rose ${filter === 'accidente' ? 'active' : ''}`}    onClick={() => setFilter('accidente')}>Accidentes<span className="sst-chip-count">{INCIDENTS_GR.filter(i => i.kind === 'accidente').length}</span></button>
        <button className={`sst-chip amber ${filter === 'incidente' ? 'active' : ''}`}    onClick={() => setFilter('incidente')}>Incidentes<span className="sst-chip-count">{INCIDENTS_GR.filter(i => i.kind === 'incidente').length}</span></button>
        <button className={`sst-chip ${filter === 'enfermedad' ? 'active' : ''}`}  onClick={() => setFilter('enfermedad')}>Enfermedad laboral<span className="sst-chip-count">{INCIDENTS_GR.filter(i => i.kind === 'enfermedad').length}</span></button>
        <div style={{ flex: 1 }} />
        <button className="btn primary" onClick={onNew}><IconPlus size={14} /> Nuevo reporte FURAT</button>
      </div>

      <div className="sst-incident-list">
        {list.map(i => {
          const k = KIND_INC_GR[i.kind];
          const s = STATUS_INC_GR[i.status];
          return (
            <div key={i.id} className="sst-incident">
              <div className="sst-incident-rail">
                <div className={`sst-inc-dot ${k.tone}`}>
                  <IconAlert 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">{i.id}</div>
                    <div className="sst-incident-title">
                      <span className={`pill ${k.tone}`} style={{ fontSize: 11 }}>{k.label}</span>
                      <span>{i.emp.name} · {i.emp.role}</span>
                    </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">Fecha y hora</div><div className="sst-incident-val mono" style={{ fontSize: 12 }}>{i.when}</div></div>
                  <div><div className="muted-xs">Lugar</div><div className="sst-incident-val">{i.site}</div></div>
                  <div>
                    <div className="muted-xs">ARL</div>
                    <div className="sst-incident-val">
                      {i.arl.notified ? (
                        <>
                          <IconCheck size={11} style={{ color: 'var(--green-600)' }} /> Notificada
                          <span className="muted mono" style={{ fontSize: 11, marginLeft: 6 }}>{i.arl.code}</span>
                        </>
                      ) : (
                        <span className="muted" style={{ fontSize: 12 }}>No aplica</span>
                      )}
                    </div>
                  </div>
                </div>

                <div className="sst-incident-desc">{i.description}</div>

                <div className="sst-incident-foot">
                  <span className="muted" style={{ fontSize: 12 }}>
                    <b>Medidas:</b> {i.measures}
                  </span>
                  <button className="btn" style={{ marginLeft: 'auto' }}><IconExternal size={13} /> Ver caso</button>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </>
  );
};

// ─── Section: Matriz de riesgo ─────────────────────────────

const RiskMatrixSectionGR = () => {
  return (
    <>
      <div className="sst-quickfilter">
        <select>
          <option>Todas las sedes</option>
          <option>Cali</option>
          <option>Barranquilla</option>
          <option>Bogotá</option>
        </select>
        <select>
          <option>Todos los factores</option>
          <option>Físico</option>
          <option>Químico</option>
          <option>Biomecánico</option>
          <option>Ergonómico</option>
          <option>Psicosocial</option>
        </select>
        <select>
          <option>Cualquier nivel</option>
          <option>Crítico</option>
          <option>Alto</option>
          <option>Medio</option>
          <option>Bajo</option>
        </select>
        <div style={{ flex: 1 }} />
        <button className="btn"><IconExternal size={14} /> Descargar matriz</button>
      </div>

      <div className="doc-list-card">
        <table className="doc-table">
          <thead>
            <tr>
              <th>Cargo · Sede</th>
              <th>Factor de riesgo</th>
              <th>Nivel</th>
              <th>Controles implementados</th>
              <th>ARL · cotización</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {RISK_MATRIX_GR.map((r, i) => {
              const lvl = RISK_LEVEL_GR[r.level];
              const factTone = FACTOR_TONE_GR[r.factor] || 'navy';
              return (
                <tr key={i}>
                  <td>
                    <div style={{ fontWeight: 600, fontSize: 13 }}>{r.role}</div>
                    <div className="muted" style={{ fontSize: 11.5 }}>{r.site}</div>
                  </td>
                  <td>
                    <div className="sst-factor">
                      <span className={`tr-cat-badge ${factTone}`} style={{ textTransform: 'capitalize' }}>{r.factor}</span>
                      <span className="muted" style={{ fontSize: 12 }}>{r.sub}</span>
                    </div>
                  </td>
                  <td>
                    <span className={`pill ${lvl.pill}`} style={{ fontWeight: 700 }}>
                      <span className="status-dot" style={{ background: lvl.tone }} /> {lvl.label}
                    </span>
                  </td>
                  <td>
                    <div className="sst-controls">
                      {r.controls.map((c, j) => (
                        <span key={j} className="sst-control"><IconCheck size={10} /> {c}</span>
                      ))}
                    </div>
                  </td>
                  <td>
                    <div style={{ fontSize: 12.5, fontWeight: 600 }}>{r.arl}</div>
                    <div className="mono" style={{ fontSize: 11.5, color: 'var(--text-muted)' }}>{r.cot}</div>
                  </td>
                  <td>
                    <div className="doc-actions">
                      <button className="icon-action" title="Editar controles"><IconExternal size={14} /></button>
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </>
  );
};

// ─── Section: COPASST y Brigadas ───────────────────────────

const CopasstSectionGR = () => {
  return (
    <>
      <div className="sst-copasst-grid">
        <div className="sst-card">
          <div className="sst-card-head">
            <div>
              <div className="sst-card-title">Integrantes COPASST</div>
              <div className="muted" style={{ fontSize: 12, marginTop: 3 }}>Período 2025–2027 · {COPASST_GR.length} miembros</div>
            </div>
            <button className="btn"><IconPlus size={13} /> Agregar miembro</button>
          </div>
          <div className="sst-members">
            {COPASST_GR.map((m, i) => {
              const tone = m.role.includes('Presidenta') ? 'navy'
                         : m.role.includes('Vicepresid')  ? 'navy'
                         : m.role.includes('Secret')      ? 'blue'
                         : 'green';
              return (
                <div key={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.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.role}</span>
                </div>
              );
            })}
          </div>
        </div>

        <div className="sst-card">
          <div className="sst-card-head">
            <div>
              <div className="sst-card-title">Próximas reuniones</div>
              <div className="muted" style={{ fontSize: 12, marginTop: 3 }}>COPASST y Brigada de Emergencias</div>
            </div>
            <button className="btn primary"><IconPlus size={13} /> Programar</button>
          </div>
          <div className="sst-meetings">
            {MEETINGS_GR.map((m, i) => (
              <div key={i} className={`sst-meeting ${m.status === 'realizada' ? 'past' : ''}`}>
                <div className="sst-meeting-date">
                  <IconCalendar size={14} />
                  <span className="mono" style={{ fontSize: 12, fontWeight: 600 }}>{m.date}</span>
                </div>
                <div className="sst-meeting-body">
                  <div style={{ fontWeight: 600, fontSize: 13 }}>{m.topic}</div>
                  <div className="muted" style={{ fontSize: 11.5, marginTop: 3 }}>{m.who} · {m.site}</div>
                </div>
                <span className={`pill ${m.status === 'pendiente' ? 'amber-soft' : 'green'}`} style={{ fontSize: 11 }}>
                  {m.status === 'pendiente' ? 'Pendiente' : 'Realizada'}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
};

window.SSTGestionRiesgo = SSTGestionRiesgo;