// Signature flow — 3-step modal for employee e-signing
// Step 1: Notice + summary
// Step 2: Full PDF viewer with reading progress (Sign btn enables at 100%)
// Step 3: Confirmation checkbox + evidence receipt

const { useState: _sig_useState, useRef: _sig_useRef, useEffect: _sig_useEffect } = React;

const SAMPLE_PDF_BODY = [
  { kind: 'h1', text: 'CONTRATO INDIVIDUAL DE TRABAJO A TÉRMINO INDEFINIDO' },
  { kind: 'p', text: 'Entre los suscritos, ATICA S.A.S., sociedad legalmente constituida con NIT 900.123.456-7, con domicilio principal en Cra. 12 #34-56, Cali (Valle del Cauca), representada legalmente por el señor CARLOS ANDRÉS GÓMEZ HENAO, mayor de edad, identificado con cédula de ciudadanía No. 10.087.231.456, en adelante denominada EL EMPLEADOR, y' },
  { kind: 'p', text: 'MARÍA FERNANDA LÓPEZ, mayor de edad, identificada con cédula de ciudadanía No. 1.094.567.890, con domicilio en la ciudad de Cali, en adelante denominada LA TRABAJADORA, hemos convenido celebrar el presente contrato individual de trabajo, que se regirá por las cláusulas siguientes y, en lo no previsto, por las disposiciones del Código Sustantivo del Trabajo y demás normas concordantes.' },
  { kind: 'h2', text: 'PRIMERA. — Objeto del contrato' },
  { kind: 'p', text: 'LA TRABAJADORA se obliga a prestar sus servicios personales, bajo la continuada dependencia y subordinación del EMPLEADOR, en el cargo de OPERARIA DE EMPAQUE, así como a ejecutar todas las labores y funciones inherentes al mismo, incluidas aquellas que le sean razonablemente asignadas por sus superiores en el desarrollo de la operación.' },
  { kind: 'h2', text: 'SEGUNDA. — Lugar de prestación del servicio' },
  { kind: 'p', text: 'LA TRABAJADORA prestará sus servicios en las instalaciones de la planta de operaciones ubicada en Cra. 12 #34-56, Cali, sin perjuicio de la facultad del EMPLEADOR de trasladar al trabajador a otra sede dentro del territorio nacional cuando las necesidades del servicio así lo exijan, conforme a lo dispuesto en el artículo 56 del C.S.T.' },
  { kind: 'h2', text: 'TERCERA. — Duración del contrato' },
  { kind: 'p', text: 'El presente contrato tendrá una duración indefinida y comenzará a regir desde el primero (01) de mayo de dos mil veintiséis (2026), fecha en la cual LA TRABAJADORA deberá presentarse al lugar de trabajo. La relación laboral subsistirá mientras existan las causas que le dieron origen y la materia del trabajo, salvo que se configure alguna causal legal de terminación.' },
  { kind: 'h2', text: 'CUARTA. — Salario' },
  { kind: 'p', text: 'EL EMPLEADOR pagará a LA TRABAJADORA, como contraprestación por sus servicios, un salario mensual de UN MILLÓN CUATROCIENTOS CINCUENTA MIL PESOS M/CTE ($1.450.000), pagadero en períodos vencidos quincenales mediante consignación a la cuenta bancaria indicada por la trabajadora.' },
  { kind: 'h2', text: 'QUINTA. — Jornada laboral' },
  { kind: 'p', text: 'La jornada ordinaria será de cuarenta y ocho (48) horas semanales, distribuidas de lunes a sábado, con los descansos de ley. EL EMPLEADOR podrá, conforme a la legislación vigente y la naturaleza de la operación, establecer turnos rotativos cuando ello sea necesario para el cumplimiento de la operaciones.' },
  { kind: 'h2', text: 'SEXTA. — Período de prueba' },
  { kind: 'p', text: 'Las partes pactan un período de prueba de dos (2) meses contados a partir de la fecha de iniciación del contrato, durante el cual cualquiera de las partes podrá darlo por terminado unilateralmente sin que medie indemnización alguna, conforme a lo establecido en el artículo 78 del C.S.T.' },
  { kind: 'h2', text: 'SÉPTIMA. — Obligaciones de la trabajadora' },
  { kind: 'p', text: 'Además de las obligaciones legales, LA TRABAJADORA se compromete expresamente a: (i) cumplir con el reglamento interno de trabajo y demás políticas corporativas; (ii) guardar absoluta reserva sobre la información confidencial a la que tenga acceso por razón de su cargo; (iii) someterse a los exámenes médicos ocupacionales periódicos; (iv) acatar los protocolos de seguridad y salud en el trabajo establecidos por el SG-SST.' },
  { kind: 'h2', text: 'OCTAVA. — Confidencialidad y propiedad intelectual' },
  { kind: 'p', text: 'LA TRABAJADORA reconoce que toda la información, procesos, fórmulas, recetas de clasificación, listas de proveedores, datos de clientes y demás información de carácter reservado constituyen secreto empresarial del EMPLEADOR. Su obligación de confidencialidad subsistirá durante la vigencia del contrato y por dos (2) años después de su terminación.' },
  { kind: 'h2', text: 'NOVENA. — Causales de terminación' },
  { kind: 'p', text: 'El presente contrato podrá terminarse por las causales legalmente establecidas en los artículos 61, 62 y 63 del C.S.T., así como por mutuo acuerdo de las partes. En caso de terminación sin justa causa por parte del EMPLEADOR, este pagará a LA TRABAJADORA la indemnización legal correspondiente.' },
  { kind: 'h2', text: 'DÉCIMA. — Aceptación' },
  { kind: 'p', text: 'Las partes manifiestan haber leído íntegramente el presente contrato, comprenderlo en todas sus partes y aceptarlo de manera libre y voluntaria, en señal de lo cual lo suscriben por medios electrónicos certificados, conforme a la Ley 527 de 1999 y demás normas concordantes sobre comercio electrónico y firma digital.' },
];

const SignatureFlow = ({ doc, onClose }) => {
  const [step, setStep] = _sig_useState(1);
  const [progress, setProgress] = _sig_useState(0);
  const [accepted, setAccepted] = _sig_useState(false);
  const [signing, setSigning] = _sig_useState(false);
  const scrollRef = _sig_useRef(null);

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

  const onScroll = (e) => {
    const el = e.currentTarget;
    const max = el.scrollHeight - el.clientHeight;
    const p = max <= 0 ? 100 : Math.min(100, Math.round((el.scrollTop / max) * 100));
    setProgress(p);
  };

  const t = DOC_TYPES[doc.type];
  const TIco = window[t.icon] || IconDoc;
  const colaborador = doc.signers.find(s => s.role === 'Colaborador') || doc.signers[0];
  const generator = 'Carolina Restrepo · Jefe de RRHH';

  const goSign = () => {
    setSigning(true);
    setTimeout(() => { setSigning(false); setStep(4); }, 1200);
  };

  // ── Step 4: success state (post-confirm) ─────────────
  if (step === 4) {
    return (
      <div className="modal-overlay" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
        <div className="modal sig-modal" style={{ maxWidth: 540 }}>
          <div className="sig-success">
            <div className="sig-success-icon"><IconCheck size={36} /></div>
            <div className="sig-success-title">Firma registrada</div>
            <div className="sig-success-sub">
              Tu firma quedó vinculada al documento <b>{t.label}</b>. Se envió una copia con la evidencia de firma a tu correo personal y al correo corporativo.
            </div>
            <div className="sig-evidence">
              <div className="sig-evidence-row">
                <span className="muted-xs">Documento</span>
                <span className="mono" style={{ fontSize: 12 }}>{doc.id}</span>
              </div>
              <div className="sig-evidence-row">
                <span className="muted-xs">Firmado por</span>
                <span style={{ fontSize: 12.5 }}>{colaborador.name}</span>
              </div>
              <div className="sig-evidence-row">
                <span className="muted-xs">Fecha y hora</span>
                <span className="mono" style={{ fontSize: 12 }}>05/05/2026 14:32:18</span>
              </div>
              <div className="sig-evidence-row">
                <span className="muted-xs">Hash SHA-256</span>
                <span className="mono" style={{ fontSize: 11.5 }}>{doc.hash.slice(0, 12)}…{doc.hash.slice(-12)}</span>
              </div>
              <div className="sig-evidence-row">
                <span className="muted-xs">Método</span>
                <span style={{ fontSize: 12.5 }}>Firma electrónica certificada · token correo + IP</span>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 8, width: '100%', marginTop: 4 }}>
              <button className="btn" style={{ flex: 1 }} onClick={onClose}><IconExternal size={14} /> Descargar evidencia</button>
              <button className="btn primary" style={{ flex: 1 }} onClick={onClose}>Cerrar</button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="modal-overlay" onMouseDown={(e) => { if (e.target === e.currentTarget && step !== 2) onClose(); }}>
      <div className={`modal sig-modal ${step === 2 ? 'sig-modal-wide' : ''}`} style={{ maxWidth: step === 2 ? 1100 : 640 }}>
        <div className="modal-head sig-head">
          <div style={{ display: 'flex', gap: 12, alignItems: 'center', minWidth: 0 }}>
            <div className="doc-type-icon lg"><TIco size={18} /></div>
            <div style={{ minWidth: 0 }}>
              <div className="modal-title" style={{ fontSize: 16 }}>{t.label}</div>
              <div className="modal-sub mono" style={{ fontSize: 12, marginTop: 2 }}>{doc.id} · {doc.emp.name}</div>
            </div>
          </div>
          <button className="icon-btn" onClick={onClose} title="Cerrar">
            <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="sig-stepper">
          <div className={`sig-step ${step >= 1 ? 'active' : ''} ${step > 1 ? 'done' : ''}`}>
            <span className="sig-step-num">{step > 1 ? <IconCheck size={11} /> : '1'}</span>
            <span>Aviso</span>
          </div>
          <div className={`sig-step-line ${step > 1 ? 'done' : ''}`} />
          <div className={`sig-step ${step >= 2 ? 'active' : ''} ${step > 2 ? 'done' : ''}`}>
            <span className="sig-step-num">{step > 2 ? <IconCheck size={11} /> : '2'}</span>
            <span>Lectura</span>
          </div>
          <div className={`sig-step-line ${step > 2 ? 'done' : ''}`} />
          <div className={`sig-step ${step >= 3 ? 'active' : ''}`}>
            <span className="sig-step-num">3</span>
            <span>Firma</span>
          </div>
        </div>

        {/* ── STEP 1 — notice ───────────────────────── */}
        {step === 1 && (
          <>
            <div className="modal-body">
              <div className="sig-notice">
                <div className="sig-notice-icon"><IconAlert size={22} /></div>
                <div>
                  <div className="sig-notice-title">Tienes un documento pendiente de tu firma</div>
                  <div className="sig-notice-sub">
                    Este documento requiere tu firma electrónica para hacerse efectivo. Al firmar, manifiestas haber leído y aceptado su contenido conforme a la Ley 527 de 1999.
                  </div>
                </div>
              </div>

              <div className="sig-summary">
                <div className="sig-summary-row">
                  <div className="muted-xs">Documento</div>
                  <div style={{ fontSize: 13.5, fontWeight: 600 }}>{t.label}</div>
                </div>
                <div className="sig-summary-row">
                  <div className="muted-xs">Generado por</div>
                  <div style={{ fontSize: 13 }}>{generator}</div>
                </div>
                <div className="sig-summary-row">
                  <div className="muted-xs">Generado el</div>
                  <div className="mono" style={{ fontSize: 12.5 }}>{doc.generated}</div>
                </div>
                <div className="sig-summary-row">
                  <div className="muted-xs">Vigencia</div>
                  <div style={{ fontSize: 13 }}>{doc.validity}</div>
                </div>
                <div className="sig-summary-row">
                  <div className="muted-xs">Firmantes</div>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    {doc.signers.map((sg, i) => (
                      <span key={i} className={`signer-chip ${sg.signed ? 'signed' : ''}`}>
                        {sg.signed && <IconCheck size={10} />}
                        {sg.name} · {sg.role}
                      </span>
                    ))}
                  </div>
                </div>
              </div>

              <div className="sig-warn">
                <IconShield size={14} /> La firma electrónica tiene plena validez legal en Colombia (Ley 527 de 1999). Tus datos de firma quedan vinculados criptográficamente al documento.
              </div>
            </div>
            <div className="modal-foot">
              <button className="btn" onClick={onClose}>Cancelar</button>
              <button className="btn primary" onClick={() => setStep(2)}>
                <IconExternal size={14} /> Ver documento completo
              </button>
            </div>
          </>
        )}

        {/* ── STEP 2 — full reader ───────────────────── */}
        {step === 2 && (
          <>
            <div className="sig-reader-bar">
              <div className="sig-reader-meta">
                <span className="muted" style={{ fontSize: 12 }}>Página 1 de 4</span>
                <span className="muted" style={{ fontSize: 12 }}>·</span>
                <span className="muted" style={{ fontSize: 12 }}>Lectura {progress}%</span>
              </div>
              <div className="sig-progress">
                <div className="sig-progress-fill" style={{ width: `${progress}%` }} />
              </div>
            </div>
            <div className="sig-reader" ref={scrollRef} onScroll={onScroll}>
              <div className="sig-pdf-page">
                <div className="sig-pdf-head">
                  <div className="sig-pdf-brand">
                    <span className="sig-brand-mark">a</span>
                    <div>
                      <div style={{ fontWeight: 700, fontSize: 12.5 }}>Atica S.A.S.</div>
                      <div className="muted mono" style={{ fontSize: 10.5 }}>NIT 900.123.456-7 · Cali, Valle del Cauca</div>
                    </div>
                  </div>
                  <div className="muted mono" style={{ fontSize: 10.5, textAlign: 'right' }}>
                    {doc.id}<br />Generado {doc.generated}
                  </div>
                </div>
                {SAMPLE_PDF_BODY.map((b, i) => {
                  if (b.kind === 'h1') return <h1 key={i} className="sig-pdf-h1">{b.text}</h1>;
                  if (b.kind === 'h2') return <h2 key={i} className="sig-pdf-h2">{b.text}</h2>;
                  return <p key={i} className="sig-pdf-p">{b.text}</p>;
                })}
                <div className="sig-pdf-sig-block">
                  <div className="sig-pdf-sig-col">
                    <div className="sig-pdf-sig-line" />
                    <div style={{ fontWeight: 600, fontSize: 12 }}>{doc.emp.name}</div>
                    <div className="muted" style={{ fontSize: 11 }}>LA TRABAJADORA · CC 1.094.567.890</div>
                  </div>
                  <div className="sig-pdf-sig-col">
                    <div className="sig-pdf-sig-line signed" />
                    <div style={{ fontWeight: 600, fontSize: 12 }}>Carlos Andrés Gómez H.</div>
                    <div className="muted" style={{ fontSize: 11 }}>EL EMPLEADOR · CC 10.087.231.456</div>
                    <div className="mono" style={{ fontSize: 10.5, color: 'var(--green-600)', marginTop: 4 }}>✓ Firmado 02/05/2026 14:30</div>
                  </div>
                </div>
                <div className="sig-pdf-foot">
                  <span className="mono">Hash SHA-256: {doc.hash.slice(0, 24)}…</span>
                  <span>Página 1 de 4</span>
                </div>
              </div>
            </div>
            <div className="modal-foot sig-foot">
              <button className="btn" onClick={() => setStep(1)}>
                <IconChevronLeft size={14} /> Volver
              </button>
              <span className="muted" style={{ fontSize: 12, marginLeft: 'auto', marginRight: 12 }}>
                {progress < 100 ? 'Desplázate hasta el final del documento para habilitar la firma' : 'Documento leído completamente'}
              </span>
              <button
                className="btn primary"
                disabled={progress < 100}
                onClick={() => setStep(3)}
                title={progress < 100 ? 'Lee el documento completo' : 'Continuar a firma'}
              >
                <IconCheck size={14} /> Firmar documento
              </button>
            </div>
          </>
        )}

        {/* ── STEP 3 — confirm ───────────────────────── */}
        {step === 3 && (
          <>
            <div className="modal-body">
              <div className="sig-confirm-head">
                <div className="sig-confirm-icon"><IconShield size={22} /></div>
                <div>
                  <div className="sig-notice-title">Confirmación de firma</div>
                  <div className="sig-notice-sub">Al confirmar, se generará la firma electrónica y se vinculará al documento mediante hash criptográfico.</div>
                </div>
              </div>

              <label className="sig-accept">
                <input type="checkbox" checked={accepted} onChange={(e) => setAccepted(e.target.checked)} />
                <span>He leído y acepto el contenido de este documento. Manifiesto que mi firma electrónica tiene la misma validez legal que mi firma manuscrita, conforme a la <b>Ley 527 de 1999</b> y la jurisprudencia colombiana sobre comercio electrónico.</span>
              </label>

              <div className="sig-evidence-pre">
                <div className="muted-xs" style={{ marginBottom: 8 }}>Evidencia que será registrada</div>
                <div className="sig-evidence">
                  <div className="sig-evidence-row">
                    <span className="muted-xs">Firmante</span>
                    <span style={{ fontSize: 12.5 }}>{colaborador.name} · CC 1.094.567.890</span>
                  </div>
                  <div className="sig-evidence-row">
                    <span className="muted-xs">Dispositivo</span>
                    <span style={{ fontSize: 12.5 }}>Chrome 132 · macOS · IP 190.85.247.32</span>
                  </div>
                  <div className="sig-evidence-row">
                    <span className="muted-xs">Geolocalización</span>
                    <span style={{ fontSize: 12.5 }}>Cali, Valle del Cauca · aproximada</span>
                  </div>
                  <div className="sig-evidence-row">
                    <span className="muted-xs">Token de firma</span>
                    <span className="mono" style={{ fontSize: 12 }}>SIG-2026-{doc.id.toUpperCase()}-{Math.floor(Math.random() * 9000 + 1000)}</span>
                  </div>
                </div>
              </div>
            </div>
            <div className="modal-foot">
              <button className="btn" onClick={() => setStep(2)} disabled={signing}>
                <IconChevronLeft size={14} /> Volver al documento
              </button>
              <button
                className="btn primary"
                disabled={!accepted || signing}
                onClick={goSign}
              >
                {signing ? (<><span className="sig-spinner" /> Registrando firma…</>) : (<><IconCheck size={14} /> Confirmar firma</>)}
              </button>
            </div>
          </>
        )}
      </div>
    </div>
  );
};

window.SignatureFlow = SignatureFlow;