// Verificador público de certificado — vista al exterior (auditor / tercero)
// Self-contained: no requiere chrome admin, usa solo icons + tokens
const { useState: _cv_useState } = React;

// Mock cert · usado como fallback si window.CERTIFICATES está vacío
const CERT_DEMO = {
  code:        'CERT-2026-c-01-04821',
  status:      'vigente',                              // vigente | vencido | anulado | invalido
  emp:         { initials: 'AM', name: 'Andrés Felipe Mejía', doc: 'CC 1.087.456.231 *** *** 31', cargo: 'Operario de Clasificación', area: 'Operaciones', site: 'Cali' },
  empresa:     { name: 'Atica S.A.S.', nit: '900.123.456-7', logo: 'a' },
  plataforma:     { name: 'Atica SOMOS', logo: 'a' },
  course:      { name: 'Manejo seguro de maquinaria de clasificación', code: 'c-01', duration: '8 horas', mode: 'Presencial' },
  competencia: { id: 'CMP-01', name: 'Manejo seguro de maquinaria de clasificación', norma: 'Resolución 0312 de 2019 · SG-SST · Decreto 1072' },
  session:     { id: 'SES-2026-0412', date: '12/04/2026', site: 'Cali · Aula 2', instructor: 'Carlos Fernando Vélez', instructorOrg: 'ARL Sura', contentVersion: 'v3.2' },
  result:      { score: 92, minScore: 80, passed: true, issuedAt: '12/04/2026 16:42' },
  vigencia:    { from: '12/04/2026', to: '12/04/2027', daysLeft: 343 },
  evidence:    {
    attendanceSigned: true,
    attendanceMethod: 'OTP · email + SMS',
    evaluationApplied: true,
    evaluationQuestions: 5,
    evidencesCount: 4,
    evidencesList: ['Acta del instructor firmada', 'Foto del aula', 'Lista de asistencia escaneada', 'Material entregado'],
    contentVersionLocked: 'v3.2',
  },
  hash:        'a4f2c1e89b7d3f5e26c8d4b1a9f3e7c5d8b2a4f6e9c1d3b5a7f8e0c2d4b6a9f1',
  bitacoraEvents: [
    { when: '12/04/2026 16:42', text: 'Sesión cerrada · hash criptográfico generado',         tone: 'green' },
    { when: '12/04/2026 16:42', text: 'Certificado emitido automáticamente al colaborador',    tone: 'green' },
    { when: '12/04/2026 16:38', text: 'Evaluación aprobada con 92/100 (mínimo 80)',            tone: 'green' },
    { when: '12/04/2026 09:14', text: 'Asistencia firmada electrónicamente vía OTP email',     tone: 'green' },
    { when: '12/04/2026 08:00', text: 'Sesión iniciada · 18 inscritos',                        tone: 'navy' },
  ],
};

const STATUS_META_CV = {
  vigente:   { label: 'Certificado vigente',        tone: 'green', icon: 'IconCheck',  desc: 'Verificación exitosa · contenido auditable' },
  vencido:   { label: 'Certificado vencido',        tone: 'amber', icon: 'IconClock',  desc: 'Recurrencia anual · pendiente recertificar' },
  anulado:   { label: 'Certificado anulado',        tone: 'rose',  icon: 'IconAlert',  desc: 'Anulado por nota de ajuste · revisar bitácora' },
  invalido:  { label: 'Código no encontrado',       tone: 'rose',  icon: 'IconAlert',  desc: 'No existe ningún certificado con ese código' },
};

// Mock QR pattern (21x21 grid)
const MockQR = ({ size = 100 }) => {
  const N = 21;
  const grid = Array.from({ length: N * N }, (_, i) => {
    const r = Math.floor(i / N), c = i % N;
    const inFinder = (x, y) => r >= y && r < y + 7 && c >= x && c < x + 7;
    const ring = (x, y) => inFinder(x, y) && (r === y || r === y + 6 || c === x || c === x + 6 || (r >= y + 2 && r <= y + 4 && c >= x + 2 && c <= x + 4));
    if (inFinder(0, 0))  return ring(0, 0)  ? 1 : 0;
    if (inFinder(14, 0)) return ring(14, 0) ? 1 : 0;
    if (inFinder(0, 14)) return ring(0, 14) ? 1 : 0;
    return ((r * 31 + c * 17 + r * c) % 5) < 2 ? 1 : 0;
  });
  return (
    <div className="cv-qr" style={{ width: size, height: size }}>
      {grid.map((v, i) => <span key={i} className={v ? 'on' : ''} />)}
    </div>
  );
};

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

const CertVerifier = () => {
  // Lee el código de la URL (?codigo=XXX) o usa el primero del store como default
  const initialCode = (() => {
    try {
      const u = new URLSearchParams(window.location.search);
      return u.get('codigo') || null;
    } catch (_) { return null; }
  })();

  const store = (window.CERTIFICATES || []);
  const fallback = store[0] || CERT_DEMO;

  const [searchCode, setSearchCode] = _cv_useState(initialCode || fallback.code);
  const [cert, setCert] = _cv_useState(() => {
    if (initialCode) {
      const found = store.find(c => c.code === initialCode);
      return found || { ...CERT_DEMO, status: 'invalido', code: initialCode, _notFound: true };
    }
    return fallback;
  });

  const lookup = (code) => {
    const c = code.trim();
    if (!c) return;
    const found = (window.CERTIFICATES || []).find(x => x.code === c);
    if (found) {
      setCert(found);
    } else {
      setCert({ ...CERT_DEMO, status: 'invalido', code: c, _notFound: true });
    }
  };

  const meta = STATUS_META_CV[cert.status];
  const Ico = window[meta.icon] || IconCheck;
  const [hashCopied, setHashCopied] = _cv_useState(false);

  const copyHash = () => {
    if (!cert.hash) return;
    navigator.clipboard?.writeText(cert.hash);
    setHashCopied(true);
    setTimeout(() => setHashCopied(false), 1600);
  };

  const isExt = cert.origen === 'externo';
  const notFound = !!cert._notFound;

  return (
    <div className="cv-shell">
      {/* Header público con marca dual */}
      <header className="cv-topbar">
        <div className="cv-topbar-inner">
          <div className="cv-brand">
            <div className="cv-brand-mark plataforma"><AticaMark size={22} tri="#fff" leaf="var(--sky-500)" /></div>
            <div>
              <div className="cv-brand-name">Atica SOMOS</div>
              <div className="cv-brand-sub">Verificador público de certificados</div>
            </div>
          </div>
          <div className="cv-topbar-right">
            <span className="cv-secure-tag">
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="4" y="11" width="16" height="10" rx="2" /><path d="M8 11V7a4 4 0 0 1 8 0v4" /></svg>
              verifica.atica.co
            </span>
          </div>
        </div>
      </header>

      <main className="cv-main">

        {/* Barra de consulta · permite buscar otro código */}
        <div className="cv-search">
          <div className="muted-xs">Consulta otro certificado por su código público</div>
          <div className="cv-search-row">
            <input
              type="text"
              placeholder="CERT-2026-c-01-04821"
              value={searchCode}
              onChange={e => setSearchCode(e.target.value)}
              onKeyDown={e => e.key === 'Enter' && lookup(searchCode)}
            />
            <button className="btn primary" onClick={() => lookup(searchCode)}>
              <IconSearch size={13} /> Verificar
            </button>
          </div>
          {(window.CERTIFICATES || []).length > 1 && (
            <div className="cv-search-hints">
              <span className="muted-xs">Códigos demo:</span>
              {(window.CERTIFICATES || []).slice(0, 5).map(c => (
                <button key={c.code} className="cv-search-hint mono" onClick={() => { setSearchCode(c.code); lookup(c.code); }}>
                  {c.code}
                </button>
              ))}
            </div>
          )}
        </div>

        {/* Banner de estado · grande, claro */}
        <div className={`cv-status cv-status-${meta.tone}`}>
          <div className={`cv-status-icon ${meta.tone}`}>
            <Ico size={32} />
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="cv-status-label">{meta.label}</div>
            <div className="cv-status-desc">{meta.desc}</div>
            <div className="cv-status-code mono">{cert.code}</div>
          </div>
          <div className="cv-status-vigencia">
            <div className="muted-xs">Vigencia</div>
            <div className="cv-status-vig-num mono">{cert.vigencia.daysLeft}<small> días</small></div>
            <div className="muted mono" style={{ fontSize: 10.5 }}>hasta {cert.vigencia.to}</div>
          </div>
        </div>

        {notFound && (
          <div className="cv-card" style={{ padding: 32, textAlign: 'center' }}>
            <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 6 }}>No encontramos este código</div>
            <div className="muted" style={{ fontSize: 13, maxWidth: 480, margin: '0 auto', lineHeight: 1.55 }}>
              Verifica que copiaste el código completo del certificado físico o del QR. Si el problema persiste, contacta al área de Talento Humano de la empresa que emitió el certificado.
            </div>
          </div>
        )}

        {!notFound && (<>

        {/* Card principal: el certificado y la cadena de evidencia */}
        <div className="cv-card">

          {/* Header con doble marca */}
          <div className="cv-card-head">
            <div className="cv-card-brand">
              <div className="cv-brand-mark client">{cert.empresa.logo}</div>
              <div>
                <div className="cv-card-org-name">{cert.empresa.name}</div>
                <div className="muted mono" style={{ fontSize: 10.5 }}>NIT {cert.empresa.nit}</div>
              </div>
            </div>
            <div className="cv-card-divider" />
            <div className="cv-card-brand">
              <div className="cv-brand-mark plataforma"><AticaMark size={20} tri="#fff" leaf="var(--sky-500)" /></div>
              <div>
                <div className="cv-card-org-name">Emitido vía Atica SOMOS</div>
                <div className="muted" style={{ fontSize: 10.5 }}>Plataforma de gestión humana</div>
              </div>
            </div>
          </div>

          {/* Cuerpo principal */}
          <div className="cv-card-body">
            <div className="cv-eyebrow">Certificado de capacitación</div>
            <div className="cv-pre">Este certificado acredita que</div>
            <h1 className="cv-name">{cert.emp.name}</h1>
            <div className="cv-doc">{cert.emp.doc} · {cert.emp.cargo} · {cert.emp.site}</div>
            <div className="cv-pre">aprobó satisfactoriamente la capacitación</div>
            <h2 className="cv-course">«{cert.course.name}»</h2>

            <div className="cv-meta">
              <div><div className="muted-xs">Calificación</div><div className="cv-meta-val mono pos">{cert.result.score}/100</div></div>
              <div><div className="muted-xs">Mín. requerido</div><div className="cv-meta-val mono">{cert.result.minScore}/100</div></div>
              <div><div className="muted-xs">Duración</div><div className="cv-meta-val">{cert.course.duration}</div></div>
              <div><div className="muted-xs">Modalidad</div><div className="cv-meta-val">{cert.course.mode}</div></div>
            </div>

            <div className="cv-meta">
              <div><div className="muted-xs">Emitido</div><div className="cv-meta-val mono">{cert.result.issuedAt}</div></div>
              <div><div className="muted-xs">Vence</div><div className="cv-meta-val mono">{cert.vigencia.to}</div></div>
              <div><div className="muted-xs">Sesión</div><div className="cv-meta-val mono">{cert.session.id}</div></div>
              <div><div className="muted-xs">Versión contenido</div><div className="cv-meta-val mono">{cert.session.contentVersion}</div></div>
            </div>
          </div>
        </div>

        {/* Cadena de evidencia · lo que un auditor revisa */}
        <div className="cv-card cv-evidence">
          <div className="cv-evidence-head">
            <div>
              <h3 className="cv-evidence-title">Cadena de evidencia auditable</h3>
              <p className="cv-evidence-sub">
                Este certificado está respaldado por evidencia inmutable conforme a normativa <b>ICONTEC</b> y <b>{cert.competencia.norma}</b>. Cada eslabón puede ser inspeccionado por un auditor.
              </p>
            </div>
            <div className="cv-evidence-shield">
              <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /></svg>
            </div>
          </div>

          <div className="cv-evidence-grid">
            <div className={`cv-ev ${cert.evidence.attendanceSigned ? 'ok' : ''}`}>
              <div className="cv-ev-icon"><IconCheck size={14} /></div>
              <div style={{ flex: 1 }}>
                <div className="cv-ev-label">Asistencia firmada electrónicamente</div>
                <div className="cv-ev-detail">Verificación: {cert.evidence.attendanceMethod} · Ley 527 de 1999</div>
              </div>
            </div>

            <div className={`cv-ev ${cert.evidence.evaluationApplied ? 'ok' : ''}`}>
              <div className="cv-ev-icon"><IconCheck size={14} /></div>
              <div style={{ flex: 1 }}>
                <div className="cv-ev-label">Evaluación aplicada y aprobada</div>
                <div className="cv-ev-detail">{cert.evidence.evaluationQuestions} preguntas · nota {cert.result.score}/100 (mínimo {cert.result.minScore})</div>
              </div>
            </div>

            <div className="cv-ev ok">
              <div className="cv-ev-icon"><IconCheck size={14} /></div>
              <div style={{ flex: 1 }}>
                <div className="cv-ev-label">Evidencias adjuntas · {cert.evidence.evidencesCount} archivos</div>
                <div className="cv-ev-detail">{cert.evidence.evidencesList.join(' · ')}</div>
              </div>
            </div>

            <div className="cv-ev ok">
              <div className="cv-ev-icon"><IconCheck size={14} /></div>
              <div style={{ flex: 1 }}>
                <div className="cv-ev-label">Versión del contenido anclada</div>
                <div className="cv-ev-detail">Contenido versión <b>{cert.evidence.contentVersionLocked}</b> aplicada el {cert.session.date} · ICONTEC requiere trazabilidad de versión</div>
              </div>
            </div>

            <div className="cv-ev ok">
              <div className="cv-ev-icon"><IconCheck size={14} /></div>
              <div style={{ flex: 1 }}>
                <div className="cv-ev-label">Instructor identificado</div>
                <div className="cv-ev-detail">{cert.session.instructor} · {cert.session.instructorOrg}</div>
              </div>
            </div>

            <div className="cv-ev ok">
              <div className="cv-ev-icon"><IconCheck size={14} /></div>
              <div style={{ flex: 1 }}>
                <div className="cv-ev-label">Norma legal vinculada</div>
                <div className="cv-ev-detail">{cert.competencia.norma}</div>
              </div>
            </div>
          </div>
        </div>

        {/* Hash + QR · tarjeta inferior */}
        <div className="cv-card cv-tail">
          <div className="cv-tail-left">
            {isExt ? (
              <>
                <div className="muted-xs">Origen del certificado</div>
                <div style={{ fontSize: 14, fontWeight: 700, marginTop: 4 }}>Emitido por proveedor externo</div>
                <div className="muted" style={{ fontSize: 12, marginTop: 4 }}>
                  Este certificado fue expedido por <b>{cert.session.instructorOrg}</b> en sus sistemas.
                  Atica SOMOS lo archiva, lo vincula a la hoja de vida del colaborador y lo presenta en este verificador.
                  La idoneidad del proveedor se valida al programar la sesión.
                </div>
                <div className="cv-tail-explain">
                  Para acreditar autenticidad ante un auditor, el documento original del proveedor (PDF) prevalece sobre cualquier hash interno. Atica complementa con la cadena de evidencia adicional.
                </div>
              </>
            ) : (
              <>
                <div className="muted-xs">Huella criptográfica · SHA-256</div>
                <div className="cv-hash mono">{cert.hash}</div>
                <button className="btn" onClick={copyHash}>
                  {hashCopied ? <><IconCheck size={13} /> Copiado al portapapeles</> : <>Copiar hash</>}
                </button>
                <div className="cv-tail-explain">
                  Este hash representa la firma criptográfica del expediente completo (asistencia + evaluación + evidencias + versión). Si cualquier dato cambia, el hash deja de coincidir.
                </div>
              </>
            )}
          </div>
          <div className="cv-tail-divider" />
          <div className="cv-tail-right">
            <MockQR size={120} />
            <div className="muted mono" style={{ fontSize: 10.5, textAlign: 'center', marginTop: 8 }}>
              verifica.atica.co/{cert.code.slice(-8)}
            </div>
          </div>
        </div>

        {/* Bitácora pública · pequeña */}
        <div className="cv-card">
          <h3 className="cv-evidence-title" style={{ marginBottom: 12 }}>Eventos del certificado</h3>
          <div className="cv-bitacora">
            {(cert.bitacoraEvents || []).map((e, i) => (
              <div key={i} className={`cv-bit cv-bit-${e.tone}`}>
                <div className="cv-bit-dot" />
                <div className="cv-bit-time mono">{e.when}</div>
                <div className="cv-bit-text">{e.text}</div>
              </div>
            ))}
          </div>
        </div>

        </>)}

        {/* Footer legal */}
        <div className="cv-legal">
          <div className="cv-legal-block">
            <IconShield size={14} />
            <div>
              <div style={{ fontWeight: 700, fontSize: 12.5 }}>Verificación con valor legal</div>
              <div className="muted" style={{ fontSize: 11.5, marginTop: 2, lineHeight: 1.5 }}>
                Este certificado es auditable conforme a las normas ICONTEC ISO 9001 y el Sistema de Gestión SST (Decreto 1072 de 2015 · Resolución 0312 de 2019). La firma electrónica de asistencia tiene plena validez jurídica conforme a la <b>Ley 527 de 1999</b>.
              </div>
            </div>
          </div>
          <div className="cv-legal-meta">
            <span className="muted" style={{ fontSize: 11 }}>Consulta realizada: <span className="mono">{new Date().toLocaleString('es-CO')}</span></span>
            <span className="muted" style={{ fontSize: 11 }}>· IP origen: <span className="mono">190.85.247.32</span></span>
          </div>
        </div>

      </main>

      <footer className="cv-footer">
        <div>
          <span style={{ fontWeight: 700, color: 'var(--text)' }}>Atica SOMOS</span> · Verificador público
          <span className="muted"> · de Atica S.A.S. para Atica</span>
        </div>
        <div className="muted" style={{ fontSize: 11 }}>
          ¿Problema con la verificación? <a href="mailto:soporte@atica.co" style={{ color: 'var(--navy-800)', fontWeight: 600 }}>soporte@atica.co</a>
        </div>
      </footer>
    </div>
  );
};

window.CertVerifier = CertVerifier;