// Carnet público · vista para auditor/tercero que recibe el enlace.
// Lee ?codigo=CARN-2026-AT-0247&campos=name,role,doc&exp=2026-05-08T09:41
// Solo muestra los campos que el colaborador autorizó compartir.

const { useState: _cp_useState } = React;

// ─── Datos demo (se sobreescriben con los publicados por el portal) ───
const CP_DEMO_CARNET = window.CARNET_DATA || {
  employeeId:   'AT-2026-0247',
  contractType: 'Término indefinido',
  shift:        'Turno A · 06:00–14:00',
  bloodType:    'O+',
  validFrom:    '02/05/2026',
  validUntil:   '02/05/2027',
  emergency:    { name: 'María Mejía Restrepo', relation: 'Madre', phone: '+57 314 887 5421' },
  affiliations: { eps: 'Sura', arl: 'Sura · Clase III', afp: 'Protección' },
  verifyCode:   'CARN-2026-AT-0247',
  verifyHash:   'b7e2a91c5d83f614',
  issuedAt:     '02/05/2026 08:14',
};

const CP_DEMO_OWNER = window.CARNET_OWNER || {
  initials: 'AM',
  name:     'Andrés Felipe Mejía',
  role:     'Operario de Clasificación',
  area:     'Operaciones',
  site:     'Cali',
  hire:     '02/05/2026',
  doc:      'CC 1.087.456.231',
};

const CP_FIELDS = window.CARNET_FIELDS || [
  { id: 'name', label: 'Nombre completo', group: 'identidad', locked: true },
];

// QR mock — mismo algoritmo del portal y del verificador de certificados
const CarnetPublicQR = ({ size = 140, seed = '' }) => {
  const N = 21;
  const seedN = Array.from(seed).reduce((a, c) => a + c.charCodeAt(0), 0) || 7;
  const cells = [];
  for (let i = 0; i < 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));
    let on = 0;
    if (inFinder(0, 0))       on = ring(0, 0)  ? 1 : 0;
    else if (inFinder(14, 0)) on = ring(14, 0) ? 1 : 0;
    else if (inFinder(0, 14)) on = ring(0, 14) ? 1 : 0;
    else                      on = ((r * 31 + c * 17 + r * c + seedN) % 5) < 2 ? 1 : 0;
    cells.push(on);
  }
  return (
    <div className="cp-qr" style={{ width: size, height: size }}>
      {cells.map((v, i) => <span key={i} className={v ? 'on' : ''} />)}
    </div>
  );
};

// ─── Helpers ─────────────────────────────────────────────

const _cp_parseParams = () => {
  try {
    const u = new URLSearchParams(window.location.search);
    return {
      codigo: u.get('codigo'),
      campos: (u.get('campos') || '').split(',').filter(Boolean),
      exp:    u.get('exp'),
    };
  } catch (_) {
    return { codigo: null, campos: [], exp: null };
  }
};

const _cp_isExpired = (expIso) => {
  if (!expIso) return false;
  try { return new Date(expIso) < new Date(); } catch (_) { return false; }
};

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

const CarnetPublic = () => {
  const params = _cp_parseParams();

  // Si no hay código en la URL, mostramos un demo con los defaults
  const fallbackCampos = CP_FIELDS.filter(f => f.defaultOn).map(f => f.id);
  const codigoSearch = params.codigo || CP_DEMO_CARNET.verifyCode;
  const camposActivos = params.campos.length > 0 ? params.campos : fallbackCampos;
  const expirado = _cp_isExpired(params.exp);

  const isOn = (id) => camposActivos.includes(id);

  // Match — para esta demo, el código siempre matchea el carnet de demo.
  // En un producto real esto consultaría una API.
  const matchedCarnet = CP_DEMO_CARNET;
  const matchedOwner  = CP_DEMO_OWNER;
  const codigoNoEncontrado = codigoSearch !== matchedCarnet.verifyCode;

  const [hashCopied, setHashCopied] = _cp_useState(false);
  const copyHash = () => {
    if (!matchedCarnet.verifyHash) return;
    navigator.clipboard?.writeText(matchedCarnet.verifyHash);
    setHashCopied(true);
    setTimeout(() => setHashCopied(false), 1600);
  };

  // Estado del carnet
  let estado = 'vigente';
  if (codigoNoEncontrado)  estado = 'invalido';
  else if (expirado)       estado = 'expirado';

  const STATE_META = {
    vigente:  { label: 'Carnet vigente',           tone: 'green',  desc: 'El colaborador hace parte activo de la empresa al momento de la consulta.' },
    expirado: { label: 'Enlace caducado',          tone: 'amber',  desc: 'El colaborador limitó el tiempo de visibilidad del enlace y ya expiró. Solicita uno nuevo.' },
    invalido: { label: 'Código no encontrado',     tone: 'rose',   desc: 'No existe ningún carnet con ese código en Atica SOMOS.' },
  };
  const meta = STATE_META[estado];

  return (
    <div className="cp-shell">
      <header className="cp-topbar">
        <div className="cp-topbar-inner">
          <div className="cp-brand">
            <div className="cp-brand-mark"><AticaMark size={22} tri="#fff" leaf="var(--sky-500)" /></div>
            <div>
              <div className="cp-brand-name">Atica SOMOS</div>
              <div className="cp-brand-sub">Verificador público de carnet del colaborador</div>
            </div>
          </div>
          <div className="cp-topbar-right">
            <span className="cp-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="cp-main">

        {/* Status banner */}
        <div className={`cp-status cp-status-${meta.tone}`}>
          <div className="cp-status-icon">
            {estado === 'vigente'
              ? <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
              : <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M12 9v4"/><path d="M12 17h.01"/><path d="M10.3 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.7 3.86a2 2 0 0 0-3.4 0z"/></svg>
            }
          </div>
          <div style={{ flex: 1 }}>
            <div className="cp-status-title">{meta.label}</div>
            <div className="cp-status-desc">{meta.desc}</div>
          </div>
          <div className="cp-status-code mono">{codigoSearch}</div>
        </div>

        {estado !== 'invalido' && (
          <>
            {/* Tarjeta del carnet · solo con campos autorizados */}
            <div className="cp-carnet">

              <div className="cp-carnet-bg" />

              <div className="cp-carnet-top">
                <div className="cp-carnet-brand">
                  <div className="cp-carnet-logo"><AticaMark size={22} tri="var(--aubergine-800)" leaf="var(--teal-500)" /></div>
                  <div>
                    <div className="cp-carnet-co">Atica</div>
                    <div className="cp-carnet-platform">Atica SOMOS · Carnet del Colaborador</div>
                  </div>
                </div>
                {isOn('employeeId') && <div className="cp-carnet-id mono">{matchedCarnet.employeeId}</div>}
              </div>

              <div className="cp-carnet-body">
                {isOn('photo') && (
                  <div className="cp-carnet-photo">
                    <div className="cp-carnet-photo-initials">{matchedOwner.initials}</div>
                    <div className="cp-carnet-photo-tag mono">FOTO</div>
                  </div>
                )}

                <div className="cp-carnet-info">
                  <div className="cp-carnet-name">{matchedOwner.name}</div>
                  {isOn('role') && <div className="cp-carnet-role">{matchedOwner.role}</div>}

                  <div className="cp-carnet-grid">
                    {isOn('doc')      && (<div><div className="cp-carnet-lbl">Documento</div><div className="cp-carnet-val mono">{matchedOwner.doc}</div></div>)}
                    {isOn('site')     && (<div><div className="cp-carnet-lbl">Sede</div><div className="cp-carnet-val">{matchedOwner.site}</div></div>)}
                    {isOn('area')     && (<div><div className="cp-carnet-lbl">Área</div><div className="cp-carnet-val">{matchedOwner.area}</div></div>)}
                    {isOn('hire')     && (<div><div className="cp-carnet-lbl">Ingreso</div><div className="cp-carnet-val mono">{matchedOwner.hire}</div></div>)}
                    {isOn('validity') && (<div><div className="cp-carnet-lbl">Vigencia</div><div className="cp-carnet-val mono">{matchedCarnet.validFrom} — {matchedCarnet.validUntil}</div></div>)}
                    {isOn('bloodType')&& (<div><div className="cp-carnet-lbl">Tipo de sangre</div><div className="cp-carnet-val mono">{matchedCarnet.bloodType}</div></div>)}
                    {isOn('affil')    && (<div className="cp-span-2"><div className="cp-carnet-lbl">EPS · ARL · AFP</div><div className="cp-carnet-val">{matchedCarnet.affiliations.eps} · {matchedCarnet.affiliations.arl} · {matchedCarnet.affiliations.afp}</div></div>)}
                    {isOn('emergName')&& (<div className="cp-span-2"><div className="cp-carnet-lbl">Contacto de emergencia</div><div className="cp-carnet-val">{matchedCarnet.emergency.name} · {matchedCarnet.emergency.relation}</div></div>)}
                    {isOn('emergPhone') && (<div className="cp-span-2"><div className="cp-carnet-lbl">Teléfono de emergencia</div><div className="cp-carnet-val mono">{matchedCarnet.emergency.phone}</div></div>)}
                  </div>
                </div>
              </div>

              <div className="cp-carnet-footer">
                <span className="cp-carnet-foot-tag">Emitido por Atica SOMOS</span>
                <span className="mono" style={{ opacity: 0.7 }}>{matchedCarnet.verifyCode}</span>
              </div>
            </div>

            {/* Bloque de verificación · QR + hash siempre visibles */}
            <div className="cp-verify">
              <div className="cp-verify-left">
                <div className="muted-xs" style={{ letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 700 }}>Verificación criptográfica</div>
                <div className="cp-verify-title">Este carnet fue emitido por Atica SOMOS</div>
                <div className="cp-verify-desc">
                  Cualquier información que veas arriba la autorizó <b>{matchedOwner.name}</b> al generar este enlace.
                  El sello digital y el QR garantizan que el carnet no ha sido alterado.
                </div>

                <div className="cp-verify-rows">
                  <div className="cp-verify-row">
                    <span className="muted-xs">Código del carnet</span>
                    <span className="mono">{matchedCarnet.verifyCode}</span>
                  </div>
                  <div className="cp-verify-row">
                    <span className="muted-xs">Sello digital · SHA-256</span>
                    <button className="cp-hash-btn mono" onClick={copyHash}>
                      {matchedCarnet.verifyHash} {hashCopied ? '· copiado' : ''}
                    </button>
                  </div>
                  <div className="cp-verify-row">
                    <span className="muted-xs">Emitido</span>
                    <span className="mono">{matchedCarnet.issuedAt}</span>
                  </div>
                  {params.exp && (
                    <div className="cp-verify-row">
                      <span className="muted-xs">Enlace caduca</span>
                      <span className="mono">{params.exp.replace('T', ' · ')}</span>
                    </div>
                  )}
                </div>
              </div>
              <div className="cp-verify-right">
                <CarnetPublicQR size={140} seed={matchedCarnet.verifyCode} />
                <div className="muted" style={{ fontSize: 11, marginTop: 6, textAlign: 'center' }}>
                  Escanea para revalidar
                </div>
              </div>
            </div>

            {/* Listado de campos autorizados / ocultos */}
            <div className="cp-fields">
              <div className="cp-fields-head">
                <h3>Campos autorizados por el colaborador</h3>
                <span className="muted mono" style={{ fontSize: 11 }}>{camposActivos.length} de {CP_FIELDS.length}</span>
              </div>
              <p className="cp-fields-desc">
                Conforme a la <b>Ley 1581 de 2012</b> de protección de datos personales, el colaborador eligió qué información compartir contigo. Los campos no autorizados <b>no son visibles</b> en este enlace.
              </p>

              <div className="cp-fields-grid">
                {CP_FIELDS.map(f => (
                  <div key={f.id} className={`cp-field ${isOn(f.id) ? 'on' : 'off'}`}>
                    <span className="cp-field-icon">
                      {isOn(f.id)
                        ? <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M20 6 9 17l-5-5"/></svg>
                        : <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M18 6 6 18M6 6l12 12"/></svg>
                      }
                    </span>
                    <span>{f.label}</span>
                  </div>
                ))}
              </div>
            </div>
          </>
        )}

        <footer className="cp-foot">
          <div>Atica SOMOS · Plataforma de gestión humana</div>
          <div>Reportar uso indebido del enlace · <span style={{ color: 'var(--navy-800)', fontWeight: 600 }}>privacidad@atica.co</span></div>
        </footer>
      </main>
    </div>
  );
};

window.CarnetPublic = CarnetPublic;