// src/screen-preguntas.jsx — «Preguntas para ti» (2026-10-12, rehecho 2026-10-13).
// Las preguntas abiertas de los lienzos de 0.3.2, juntas arriba del panel «Simular»:
// cada una escrita completa, con sus dos respuestas como botones y un «Llévame ahí»
// que deja la pantalla donde se siente la diferencia. Lee y escribe el mismo estado
// que cada bloque (AxEquipo, EXP, CTA_SIM, MACH), así que lo que elijas aquí se ve en la app.
// «Copiar mis respuestas» arma el resumen para pegarlo en la conversación: lo elegido
// vive en el navegador de quien recorre la maqueta y no le llega a nadie más.
//
// 2026-10-13: salen «Tras redactar: Copiar / Abrir en mi correo» (Pedir documentos ahora
// ENVÍA con el machote) y «Nombre y despacho: captura / CNSF» (el nombre sale de la cédula
// que lee el lector). Entra «Cómo se avisa de los datos de uso» (ya no hay pantalla de
// consentimiento: van encendidos y se avisa con transparencia).

function PregBoton({ activo, letra, children, onClick }) {
  return (
    <button type="button" onClick={onClick} aria-pressed={activo} style={{
      display: 'flex', gap: 8, alignItems: 'flex-start', width: '100%', textAlign: 'left',
      padding: '7px 9px', borderRadius: 7, cursor: 'pointer', font: 'inherit', fontSize: 11.5, lineHeight: 1.35,
      border: activo ? '1px solid #111' : '1px solid rgba(0,0,0,.14)',
      background: activo ? '#111' : 'rgba(255,255,255,.7)', color: activo ? '#fff' : '#222',
    }}>
      <b style={{ flex: '0 0 auto', opacity: activo ? 1 : 0.55 }}>{letra}</b>
      <span>{children}</span>
    </button>
  );
}

function Pregunta({ n, q }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 5, padding: '9px 0', borderTop: '1px solid rgba(0,0,0,.08)' }}>
      <div style={{ fontSize: 12, fontWeight: 600, color: '#111', lineHeight: 1.35 }}>{n}. {q.texto}</div>
      <PregBoton letra="A" activo={q.valor === q.a.v} onClick={() => q.elegir(q.a.v)}>{q.a.l}</PregBoton>
      <PregBoton letra="B" activo={q.valor === q.b.v} onClick={() => q.elegir(q.b.v)}>{q.b.l}</PregBoton>
      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'center', fontSize: 10.5, color: '#555' }}>
        <span>Se ve en: {q.donde}</span>
        <button type="button" onClick={q.ir} style={{ flex: '0 0 auto', border: 0, background: 'transparent', color: '#0a7a46', fontWeight: 600, cursor: 'pointer', font: 'inherit', fontSize: 10.5, padding: 0 }}>Llévame ahí →</button>
      </div>
    </div>
  );
}

function pregCopiar(texto) {
  const respaldo = () => {
    const ta = document.createElement('textarea');
    ta.value = texto; ta.style.position = 'fixed'; ta.style.opacity = '0';
    document.body.appendChild(ta); ta.select();
    try { document.execCommand('copy'); } catch (e) { /* sin portapapeles: el texto queda a la vista */ }
    document.body.removeChild(ta);
  };
  try {
    if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(texto).catch(respaldo);
    else respaldo();
  } catch (e) { respaldo(); }
}

function PreguntasParaTi({ navigate }) {
  const eq = useEquipo();
  const ex = typeof useExp === 'function' ? useExp() : null;
  const ct = typeof useCta === 'function' ? useCta() : null;
  const mc = typeof useMach === 'function' ? useMach() : null;
  const [copiado, setCopiado] = useState(false);

  // Equipo: deja al miembro con algo en espera (o algo que no se aplicó) para que la marca se vea.
  const comoMiembro = () => AxEquipo.setVer('miembro');
  const conEspera = () => { comoMiembro(); if (AxEquipo.conteo().espera === 0) { AxEquipo.setPrincipal('apagada'); AxEquipo.reiniciar(); } };
  const conNoAplicado = () => { conEspera(); if (AxEquipo.conteo().nose === 0) AxEquipo.simularAplicacion('choca'); };
  const fichaExp = () => navigate('/clientes/' + AdmixPersonas.EXP_SEED_ID + '?tab=documentos');
  const primerArranque = () => {
    if (typeof CTA_FLOW !== 'undefined') CTA_FLOW.inicio = null;
    // igual que «Simular primer arranque» de CuentaTweaks (screen-primer-arranque.jsx)
    Object.assign(CTA_CUENTA, { creada: false, correo: '', nombre: '', despacho: '', cedula: '', cedulaArchivo: null, licencia: 'sin_cedula', confirmada: false, venceEl: '', avisoLicencia: null });
    Object.assign(CTA_PRIV, { avisoVersion: 1, decision: null, version: 0, fecha: '', tarjeta: 'vista' });
    ctaSim({ corrida: CTA_SIM.corrida + 1 });
    navigate('/crear-cuenta');
  };

  const grupos = [
    { titulo: 'Equipo', qs: [
      { texto: 'Cuando Sofía registra un cobro y la computadora principal todavía no lo recibe, ¿qué dice la marca del recibo?',
        valor: eq.rotulo, a: { v: 'A', l: '«En espera de la computadora principal» (la frase completa)' }, b: { v: 'B', l: '«En espera», con el motivo en una línea abajo (más corta)' },
        elegir: (v) => AxEquipo.set({ rotulo: v }), donde: 'Pólizas › ficha › Cobranza, como miembro',
        ir: () => { conEspera(); navigate('/polizas/p0004?abrir=cobranza&recibo=QUA-760778-03'); } },
      { texto: 'Un cambio de Sofía que la computadora principal NO aplicó (p. ej. el canal preferido, que la principal cambió antes; un cobro nunca se rechaza), ¿cuándo sale de su lista?',
        valor: eq.limpieza, a: { v: 'A', l: 'Se queda hasta que Sofía da «Entendido»' }, b: { v: 'B', l: 'Se limpia sola a los 7 días' },
        elegir: (v) => AxEquipo.set({ limpieza: v }), donde: 'Ajustes › Equipo, como miembro',
        ir: () => { conNoAplicado(); navigate('/equipo-sincronizacion'); } },
      { texto: 'Los contadores de la barra de arriba («N cambios en espera», «N no se aplicaron»), ¿cuándo se ven?',
        valor: eq.contadores, a: { v: 'A', l: 'Sólo cuando hay algo (más de 0)' }, b: { v: 'B', l: 'Siempre, aunque estén en 0' },
        elegir: (v) => AxEquipo.set({ contadores: v }), donde: 'la barra de arriba, como miembro',
        ir: () => { comoMiembro(); navigate('/inicio'); } },
    ] },
    ex && { titulo: 'Expediente', qs: [
      { texto: 'Que las copias archivadas se guardan 10 años, ¿dónde se le dice al agente?',
        valor: ex.conserv, a: { v: 'pantalla', l: 'En la pantalla, junto a «Archivadas (N)»' }, b: { v: 'ayuda', l: 'Sólo en la ayuda; la pantalla queda más limpia' },
        elegir: (v) => expSet({ conserv: v }), donde: 'Clientes › ficha › Documentos › abre «Archivadas»', ir: fichaExp },
    ] },
    ct && { titulo: 'Crea tu cuenta', qs: [
      { texto: 'Al crear la cuenta, ¿subir la cédula es obligatorio para terminar?',
        valor: ct.cedula, a: { v: 'salta', l: 'Se puede dejar para después («La subo después»); la app funciona igual' }, b: { v: 'obligatoria', l: 'Obligatorio: sin cédula la cuenta no queda lista' },
        elegir: (v) => ctaSim({ cedula: v }), donde: 'el primer arranque, paso 3', ir: primerArranque },
      { texto: 'Si la cédula sale vencida, ¿qué pasa con la app?',
        valor: ct.vencida, a: { v: 'completa', l: 'Funciona completa, con un aviso' }, b: { v: 'limitada', l: 'Se limita: no redacta avisos nuevos de renovación ni de cobranza' },
        elegir: (v) => ctaSim({ vencida: v }), donde: 'el primer arranque con la CNSF diciendo «vencida»',
        ir: () => { ctaSim({ cnsf: 'vencida' }); primerArranque(); } },
    ] },
    ct && { titulo: 'Datos de uso', qs: [
      { texto: 'Los datos de uso van encendidos y se avisa al crear la cuenta. ¿Cómo se le cuenta al agente?',
        valor: ct.privForma || 'linea', a: { v: 'linea', l: 'Sólo una línea al crear la cuenta (con «Apagar» en Ajustes)' }, b: { v: 'tarjeta', l: 'Esa línea y, la primera vez en Inicio, una tarjeta pequeña que se descarta' },
        elegir: (v) => ctaSim({ privForma: v }), donde: 'el primer arranque, paso 1, y luego Inicio', ir: primerArranque },
      { texto: 'Si el agente apagó los datos de uso, ¿puede mandarnos un reporte de problema?',
        valor: ct.d2, a: { v: 'A', l: 'No: apagados, no sale nada, ni reportes ni avisos del equipo' }, b: { v: 'B', l: 'Sí: mandar un reporte cuenta como permiso para ESE reporte, y los avisos del equipo sí llegan' },
        elegir: (v) => ctaSim({ d2: v }), donde: 'Ajustes › Privacidad, con los datos de uso apagados',
        ir: () => { ctaPrivSet({ decision: 'ahora_no', version: CTA_PRIV.avisoVersion }); navigate('/ajustes'); } },
    ] },
    mc && { titulo: 'Machotes', qs: [
      { texto: 'Si el despacho sube varios PDF a la vez, ¿cómo quedan nombrados?',
        valor: mc.q1, a: { v: 'A', l: 'Cada uno con su nombre de archivo; el campo «Nombre» sólo vale al subir uno' }, b: { v: 'B', l: 'Piixi pide un nombre para cada archivo antes de guardar' },
        elegir: (v) => machSet({ q1: v }), donde: 'Ajustes › Textos y machotes › Documentos propios › Subir',
        ir: () => navigate('/ajustes/machotes/documentos') },
      { texto: 'Para escribir su propio texto de aviso (con su IA, fuera de Piixi), ¿de dónde parte el despacho?',
        valor: mc.q2, a: { v: 'A', l: 'Piixi le ofrece «Descargar texto de ejemplo» para partir de ahí' }, b: { v: 'B', l: 'Lo trae desde cero y la revisión le dice qué le falta' },
        elegir: (v) => machSet({ q2: v }), donde: 'Ajustes › Machotes › Entrega de póliza › Textos',
        ir: () => navigate('/ajustes/machotes/entrega') },
      { texto: 'Al elegir en qué pólizas viaja un documento, ¿cómo se filtra?',
        valor: mc.q3, a: { v: 'A', l: 'Un solo desplegable «Ramo o producto» (lo más corto)' }, b: { v: 'B', l: 'Dos desplegables: primero el ramo, luego el producto (más preciso)' },
        elegir: (v) => machSet({ q3: v }), donde: 'Documentos propios › «Dónde viaja» de un documento',
        ir: () => navigate('/ajustes/machotes/documentos') },
    ] },
  ].filter(Boolean);

  let n = 0;
  const numeradas = grupos.map((g) => ({ titulo: g.titulo, qs: g.qs.map((q) => ({ n: ++n, q })) }));
  const resumen = 'Mis respuestas de la maqueta 0.3.2:\n' + numeradas.map((g) => g.titulo + '\n' + g.qs.map(({ n: k, q }) => {
    const elegida = q.valor === q.b.v ? ['B', q.b.l] : ['A', q.a.l];
    return '  ' + k + '. ' + q.texto + '\n     → ' + elegida[0] + ': ' + elegida[1];
  }).join('\n')).join('\n');
  const copiar = () => { pregCopiar(resumen); setCopiado(true); setTimeout(() => setCopiado(false), 4000); };

  return (
    <>
      <TweakSection label="Preguntas para ti"/>
      <div style={{ fontSize: 11, color: '#444', lineHeight: 1.4 }}>
        Lo que los diseños dejaron abierto. Elige A o B y la app cambia en ese momento; «Llévame ahí» te deja donde se nota. Al terminar, «Copiar mis respuestas» y pégalas en la conversación: lo que eliges aquí sólo vive en tu navegador.
      </div>
      <button type="button" onClick={copiar} style={{ marginTop: 6, width: '100%', padding: '8px 10px', borderRadius: 7, border: '1px solid #0a7a46', background: copiado ? '#0a7a46' : 'rgba(255,255,255,.8)', color: copiado ? '#fff' : '#0a7a46', font: 'inherit', fontSize: 12, fontWeight: 600, cursor: 'pointer' }}>
        {copiado ? 'Copiado: pégalo en la conversación' : 'Copiar mis respuestas (' + n + ')'}
      </button>
      {numeradas.map((g) => (
        <div key={g.titulo} style={{ marginTop: 6 }}>
          <div style={{ fontSize: 10, letterSpacing: '.12em', textTransform: 'uppercase', color: '#777', fontWeight: 600 }}>{g.titulo}</div>
          {g.qs.map(({ n: k, q }) => <Pregunta key={k} n={k} q={q}/>)}
        </div>
      ))}
    </>
  );
}

Object.assign(window, { PreguntasParaTi });