// src/screen-revision.jsx — Revisión de extracción (vive DENTRO de Importar).
// Antes era "/pendientes"; se mudó a /importar/revision al liberar "Pendientes"
// para la cola priorizada. Aquí Piixi extrajo lo que pudo de cada PDF y tú
// confirmas o corriges los campos faltantes; la póliza pasa a tu libro. §5a + §5b.

function RevisionScreen() {
  const { match } = useHashRoute();
  const detailMatch = match('/importar/revision/:id');
  if (detailMatch) return <RevisionDetail id={detailMatch.params.id}/>;
  return <RevisionQueue/>;
}

// ─────────────────────────────────────────────────────────────
// QUEUE
// ─────────────────────────────────────────────────────────────
function RevisionQueue() {
  const { state } = useAxStore();
  const { navigate } = useHashRoute();

  const [carrierF, setCarrierF] = useState('all');
  const [ramoF, setRamoF] = useState('all');
  const [reasonF, setReasonF] = useState('all');
  const [search, setSearch] = useState('');

  const filtered = useMemo(() => {
    return state.pendientes.filter((p) => {
      if (carrierF !== 'all' && p.carrier !== carrierF) return false;
      if (ramoF !== 'all' && p.ramo !== ramoF) return false;
      if (reasonF !== 'all' && p.reason !== reasonF) return false;
      if (search) {
        const s = search.toLowerCase();
        const k = p.contratante ? AdmixData.contratanteById(p.contratante) : null;
        const matches = [
          p.filename, p.polizaNumero,
          k ? k.nombre : '', k ? k.rfc : '',
        ].some((x) => (x || '').toLowerCase().includes(s));
        if (!matches) return false;
      }
      return true;
    });
  }, [state.pendientes, carrierF, ramoF, reasonF, search]);

  return (
    <div style={{ flex: 1, overflow: 'auto', display: 'flex', flexDirection: 'column' }}>
      <AxPageHeader
        breadcrumb={<AxCrumb items={[{ label: 'Importar', to: '/importar' }, { label: 'Revisión' }]}/>}
        eyebrow="Importar · revisión de extracción"
        title={`${state.pendientes.length} archivos esperan tu mirada`}
        subtitle="Piixi extrajo lo que pudo. Tú confirmas o corriges los campos faltantes, y la póliza pasa a tu libro."
      />

      {/* Filter bar */}
      <div style={{
        padding: '14px 32px', display: 'flex', gap: 10, alignItems: 'center',
        borderBottom: '1px solid var(--ax-border)', background: 'var(--ax-bg-1)',
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8,
          background: 'var(--ax-bg-4)', border: '1px solid var(--ax-border)',
          padding: '0 10px', height: 32, borderRadius: 6, flex: '0 0 280px',
        }}>
          <AxIcon name="search" size={13} style={{ color: 'var(--ax-fg-faint)' }}/>
          <input
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder="Buscar por archivo, póliza, cliente, RFC…"
            style={{
              flex: 1, background: 'transparent', border: 0, outline: 'none',
              color: 'var(--ax-fg)', fontSize: 13,
            }}
          />
          {search ? (
            <button onClick={() => setSearch('')} className="ax-btn ax-btn--tertiary" style={{ width: 20, height: 20, padding: 0 }}>
              <AxIcon name="x" size={11}/>
            </button>
          ) : null}
        </div>

        <FilterChip label="Aseguradora" value={carrierF} onChange={setCarrierF} options={[
          { v: 'all', label: 'Todas' },
          ...AdmixData.CARRIERS.map((c) => ({ v: c.id, label: c.name })),
        ]}/>
        <FilterChip label="Ramo" value={ramoF} onChange={setRamoF} options={[
          { v: 'all', label: 'Todos' },
          { v: 'GMM', label: 'GMM' },
          { v: 'VIDA', label: 'Vida' },
          { v: 'AUTOS', label: 'Autos' },
          { v: 'DANOS', label: 'Daños' },
        ]}/>
        <FilterChip label="Motivo" value={reasonF} onChange={setReasonF} options={[
          { v: 'all', label: 'Todos' },
          { v: 'UNMATCHED_TAXONOMY', label: 'Formato no reconocido' },
          { v: 'REQUIRED_MISSING',   label: 'Faltan campos' },
          { v: 'VALIDATION_ERRORS',  label: 'Validación' },
        ]}/>

        <div style={{ flex: 1 }}/>
        <span style={{ fontSize: 11, color: 'var(--ax-fg-faint)', fontFamily: 'var(--font-mono)' }}>
          {filtered.length} de {state.pendientes.length}
        </span>
      </div>

      {/* Queue table */}
      {filtered.length === 0 ? (
        state.pendientes.length === 0 ? (
          <AxEmpty
            icon="check"
            title="No tienes pólizas por revisar"
            body="Cuando importes nuevas pólizas o Piixi aprenda formatos nuevos, aparecerán aquí."
          />
        ) : (
          <AxEmpty
            icon="search"
            title="Sin resultados"
            body="Prueba quitar un filtro o limpiar la búsqueda."
          />
        )
      ) : (
        <div style={{ flex: 1, overflow: 'auto' }}>
          <table className="ax-table">
            <thead>
              <tr>
                <th style={{ width: 60 }}>Archivo</th>
                <th>Cliente y póliza</th>
                <th style={{ width: 140 }}>Aseguradora</th>
                <th style={{ width: 110 }}>Ramo</th>
                <th style={{ width: 200 }}>Motivo</th>
                <th style={{ width: 110 }}>Importado</th>
                <th style={{ width: 60 }}/>
              </tr>
            </thead>
            <tbody>
              {filtered.map((p) => {
                const k = p.contratante ? AdmixData.contratanteById(p.contratante) : null;
                const c = p.carrier ? AdmixData.carrierById(p.carrier) : null;
                const reason = AdmixData.PENDING_REASONS[p.reason];
                return (
                  <tr key={p.id} onClick={() => navigate(`/importar/revision/${p.id}`)}>
                    <td>
                      <div style={{
                        width: 28, height: 32, borderRadius: 3,
                        background: 'var(--ax-bg-3)',
                        border: '1px solid var(--ax-border-strong)',
                        color: 'var(--ax-fg-muted)',
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                      }}>
                        <AxIcon name="pdf" size={14}/>
                      </div>
                    </td>
                    <td>
                      <div style={{ fontSize: 13, color: 'var(--ax-fg-strong)', fontWeight: 500 }}>
                        {k ? k.nombre : <span style={{ color: 'var(--ax-fg-faint)', fontStyle: 'italic' }}>Sin contratante</span>}
                      </div>
                      <div className="ax-mono" style={{ fontSize: 11, color: 'var(--ax-fg-muted)', marginTop: 2 }}>
                        {p.polizaNumero || '—'} · <span style={{ color: 'var(--ax-fg-faint)' }}>{p.filename}</span>
                      </div>
                    </td>
                    <td>
                      {c ? (
                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                          <AxCarrierAvatar id={p.carrier} size={20}/>
                          <span style={{ fontSize: 13 }}>{c.name}</span>
                        </div>
                      ) : <span style={{ color: 'var(--ax-fg-faint)', fontStyle: 'italic', fontSize: 12 }}>Sin clasificar</span>}
                    </td>
                    <td><AxRamoTag code={p.ramo}/></td>
                    <td>
                      <AxPill tone="warm">{reason.label}</AxPill>
                    </td>
                    <td style={{ fontSize: 12, color: 'var(--ax-fg-muted)' }}>
                      <span className="ax-mono">{AdmixData.formatDateES(p.importedAt)}</span>
                    </td>
                    <td style={{ textAlign: 'right' }}>
                      <AxIcon name="chevron-right" size={14} style={{ color: 'var(--ax-fg-faint)' }}/>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}

function FilterChip({ label, value, onChange, options }) {
  const sel = options.find((o) => o.v === value);
  return (
    <div style={{ position: 'relative' }}>
      <select
        value={value}
        onChange={(e) => onChange(e.target.value)}
        style={{
          appearance: 'none',
          background: 'var(--ax-bg-4)',
          border: '1px solid var(--ax-border)',
          color: 'var(--ax-fg)',
          padding: '0 28px 0 10px', height: 32, borderRadius: 6,
          fontSize: 12, cursor: 'default',
        }}
      >
        {options.map((o) => <option key={o.v} value={o.v}>{label}: {o.label}</option>)}
      </select>
      <AxIcon name="chevron-down" size={11} style={{
        position: 'absolute', right: 9, top: '50%', transform: 'translateY(-50%)',
        color: 'var(--ax-fg-faint)', pointerEvents: 'none',
      }}/>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// DETAIL — §5b — split view: PDF preview + canonical fields form
// ─────────────────────────────────────────────────────────────
const COHORT_REQUIRED = [
  { key: 'polizaNumero',     label: 'Número de póliza',     hint: 'p. ej. GNP-123456' },
  { key: 'contratante_nombre',label: 'Contratante',         hint: 'Nombre completo del contratante' },
  { key: 'contratante_rfc',  label: 'RFC del contratante',  hint: '13 caracteres con homoclave' },
  { key: 'inicioVigencia',   label: 'Inicio de vigencia',   hint: 'AAAA-MM-DD' },
  { key: 'finVigencia',      label: 'Fin de vigencia',      hint: 'AAAA-MM-DD' },
];

const IDENTITY_FIELDS = [
  { key: 'aseguradora_nombre', label: 'Aseguradora' },
  { key: 'ramo_nombre',        label: 'Ramo' },
  { key: 'producto_nombre',    label: 'Producto' },
];

function RevisionDetail({ id }) {
  const { state, approvePendiente, discardPendiente, pushToast } = useAxStore();
  const { navigate } = useHashRoute();
  const pn = state.pendientes.find((p) => p.id === id);
  const [page, setPage] = useState(1);
  const [discardOpen, setDiscardOpen] = useState(false);
  const [showAllFields, setShowAllFields] = useState(false);
  const [submitConsent, setSubmitConsent] = useState(false);

  const initial = useMemo(() => {
    if (!pn) return null;
    const k = pn.contratante ? AdmixData.contratanteById(pn.contratante) : null;
    return {
      polizaNumero:      pn.polizaNumero || '',
      contratante_nombre: k ? k.nombre : '',
      contratante_rfc:   k ? k.rfc : '',
      inicioVigencia:    pn.inicioVigencia || '',
      finVigencia:       pn.finVigencia || '',
      primaTotal:        pn.primaTotal != null ? Math.round(pn.primaTotal) : '',
      formaPago:         pn.formaPago || 'Anual',
      moneda:            pn.moneda || 'MXN',
      diaPago:           '',
      domicilio:         k ? k.direccion.calle + ', ' + k.direccion.colonia : '',
      telefono:          k ? k.telefono : '',
      email:             k ? k.email : '',
    };
  }, [pn]);

  const [fields, setFields] = useState(initial);
  useEffect(() => { setFields(initial); }, [initial]);

  if (!pn) {
    return (
      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <AxEmpty icon="inbox" title="Archivo no encontrado" body="Quizá ya fue aprobado o descartado." action={<AxButton variant="secondary" onClick={() => navigate('/importar/revision')}>Volver a revisión</AxButton>}/>
      </div>
    );
  }

  const carrier = pn.carrier ? AdmixData.carrierById(pn.carrier) : null;
  const reason = AdmixData.PENDING_REASONS[pn.reason];

  const errors = {};
  for (const f of COHORT_REQUIRED) {
    if (!fields[f.key] || (typeof fields[f.key] === 'string' && fields[f.key].trim() === '')) {
      errors[f.key] = 'Falta este dato';
    }
  }
  if (fields.contratante_rfc && fields.contratante_rfc.length > 0 && fields.contratante_rfc.length < 12) {
    errors.contratante_rfc = 'RFC debería tener 12 o 13 caracteres';
  }

  const canSave = Object.keys(errors).length === 0;
  const onApprove = () => {
    if (!canSave) {
      pushToast({ kind: 'warn', message: 'Faltan campos requeridos antes de aprobar.' });
      return;
    }
    approvePendiente(pn.id, fields);
    navigate('/importar/revision');
  };

  const setF = (k, v) => setFields((s) => ({ ...s, [k]: v }));

  return (
    <div style={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
      <div style={{ padding: '18px 24px', borderBottom: '1px solid var(--ax-border)', display: 'flex', alignItems: 'center', gap: 14 }}>
        <button className="ax-btn ax-btn--tertiary ax-btn--sm" onClick={() => navigate('/importar/revision')}>
          <AxIcon name="arrow-left" size={12}/> Cola
        </button>
        <div style={{ flex: 1, minWidth: 0 }}>
          <AxCrumb items={[
            { label: 'Importar', to: '/importar' },
            { label: 'Revisión', to: '/importar/revision' },
            { label: pn.filename },
          ]}/>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 6 }}>
            <h1 style={{
              margin: 0, fontFamily: 'var(--font-body)', fontWeight: 600,
              fontSize: 18, color: 'var(--ax-fg-strong)',
              overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
              fontFeatureSettings: '"tnum"',
            }} className="ax-mono">
              {pn.filename}
            </h1>
            <AxPill tone="warm">{reason.label}</AxPill>
          </div>
        </div>
        <AxButton variant="tertiary" onClick={() => setDiscardOpen(true)}>
          Marcar como no-póliza
        </AxButton>
        <AxButton variant="secondary" disabled>
          Saltar y siguiente
        </AxButton>
        <AxButton variant="primary" icon="check" onClick={onApprove} disabled={!canSave}>
          Guardar y aprobar
        </AxButton>
      </div>

      <div style={{ flex: 1, overflow: 'hidden', display: 'grid', gridTemplateColumns: '1.05fr 1fr' }}>
        {/* PDF preview */}
        <div style={{
          background: '#181818',
          borderRight: '1px solid var(--ax-border)',
          display: 'flex', flexDirection: 'column', overflow: 'hidden',
        }}>
          <div style={{
            padding: '10px 16px', borderBottom: '1px solid var(--ax-border)',
            display: 'flex', alignItems: 'center', gap: 10,
            background: 'var(--ax-bg-1)',
          }}>
            <AxIcon name="pdf" size={14} style={{ color: 'var(--ax-fg-muted)' }}/>
            <span style={{ flex: 1, fontSize: 12, color: 'var(--ax-fg-muted)', fontFamily: 'var(--font-mono)' }}>
              Vista previa · {pn.pages} páginas
            </span>
            <button className="ax-btn ax-btn--tertiary ax-btn--sm" disabled={page === 1} onClick={() => setPage((p) => Math.max(1, p - 1))}>
              <AxIcon name="arrow-left" size={12}/>
            </button>
            <span className="ax-mono" style={{ fontSize: 11, color: 'var(--ax-fg-muted)', minWidth: 36, textAlign: 'center' }}>
              {page} / {pn.pages}
            </span>
            <button className="ax-btn ax-btn--tertiary ax-btn--sm" disabled={page === pn.pages} onClick={() => setPage((p) => Math.min(pn.pages, p + 1))}>
              <AxIcon name="arrow-right" size={12}/>
            </button>
          </div>
          <div style={{ flex: 1, overflow: 'auto', padding: 20, display: 'flex', justifyContent: 'center' }}>
            <PdfPlaceholder pn={pn} fields={fields} page={page}/>
          </div>
        </div>

        {/* Fields form */}
        <div style={{ overflow: 'auto', padding: '20px 24px' }}>
          {/* Identity (read-only) */}
          <div style={{
            padding: 16, background: 'var(--ax-bg-2)', border: '1px solid var(--ax-border)',
            borderRadius: 10, marginBottom: 16,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
              <AxEyebrow>Identidad</AxEyebrow>
              <span style={{ fontSize: 10, color: 'var(--ax-fg-faint)', fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
                de huella digital
              </span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
              <ReadField label="Aseguradora">
                {carrier ? (
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                    <AxCarrierAvatar id={pn.carrier} size={16}/>
                    <span>{carrier.name}</span>
                  </span>
                ) : <em style={{ color: 'var(--ax-fg-faint)' }}>no reconocida</em>}
              </ReadField>
              <ReadField label="Ramo">
                {pn.ramo ? AdmixData.formatRamoLabel(pn.ramo) : <em style={{ color: 'var(--ax-fg-faint)' }}>—</em>}
              </ReadField>
              <ReadField label="Producto">
                {pn.producto || <em style={{ color: 'var(--ax-fg-faint)' }}>—</em>}
              </ReadField>
            </div>
            {pn.reason === 'UNMATCHED_TAXONOMY' ? (
              <div style={{
                marginTop: 12, padding: '10px 12px',
                background: 'var(--ax-warm-soft)',
                border: '1px solid var(--ax-warm-line)',
                borderRadius: 6, fontSize: 12, color: 'var(--ax-fg)',
                display: 'flex', gap: 8, alignItems: 'flex-start',
              }}>
                <AxIcon name="info" size={14} style={{ color: 'var(--ax-warm)', marginTop: 1 }}/>
                <div>
                  Piixi aún no reconoce este formato del 100%. Cuando lo apruebes, sirve como ejemplo para mejorar el catálogo si tu opt-in está activo.
                </div>
              </div>
            ) : null}
          </div>

          {/* Cohort-required */}
          <AxEyebrow style={{ marginBottom: 10 }}>Campos requeridos</AxEyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <AxField label="Número de póliza" required error={errors.polizaNumero ? errors.polizaNumero : null}>
              <AxInput
                value={fields.polizaNumero}
                placeholder="GNP-123456"
                onChange={(e) => setF('polizaNumero', e.target.value)}
              />
            </AxField>
            <AxField label="RFC del contratante" required error={errors.contratante_rfc} helper={!errors.contratante_rfc ? '12 personas morales · 13 personas físicas' : null}>
              <AxInput
                value={fields.contratante_rfc}
                onChange={(e) => setF('contratante_rfc', e.target.value.toUpperCase())}
                style={{ fontFamily: 'var(--font-mono)' }}
                placeholder="MORC850712H43"
              />
            </AxField>
            <div style={{ gridColumn: '1 / -1' }}>
              <AxField label="Nombre del contratante" required error={errors.contratante_nombre}>
                <AxInput
                  value={fields.contratante_nombre}
                  onChange={(e) => setF('contratante_nombre', e.target.value)}
                  placeholder="Nombre completo"
                />
              </AxField>
            </div>
            <AxField label="Inicio de vigencia" required error={errors.inicioVigencia}>
              <AxInput
                value={fields.inicioVigencia}
                onChange={(e) => setF('inicioVigencia', e.target.value)}
                placeholder="AAAA-MM-DD"
                style={{ fontFamily: 'var(--font-mono)' }}
              />
            </AxField>
            <AxField label="Fin de vigencia" required error={errors.finVigencia}>
              <AxInput
                value={fields.finVigencia}
                onChange={(e) => setF('finVigencia', e.target.value)}
                placeholder="AAAA-MM-DD"
                style={{ fontFamily: 'var(--font-mono)' }}
              />
            </AxField>
          </div>

          {/* More fields */}
          <button
            onClick={() => setShowAllFields((s) => !s)}
            style={{
              marginTop: 18, appearance: 'none', background: 'transparent', border: 0,
              color: 'var(--ax-fg-muted)', fontSize: 13, padding: '8px 0',
              cursor: 'default', display: 'flex', alignItems: 'center', gap: 6,
            }}
          >
            <AxIcon name="chevron-right" size={11} style={{ transform: showAllFields ? 'rotate(90deg)' : 'none', transition: 'transform 200ms' }}/>
            <span>Más campos {showAllFields ? '' : '(prima, financieros, contacto)'}</span>
          </button>

          {showAllFields ? (
            <div className="ax-fade-in" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginTop: 8 }}>
              <AxField label="Prima total" helper="MXN, sin formato">
                <AxInput
                  value={fields.primaTotal}
                  onChange={(e) => setF('primaTotal', e.target.value)}
                  style={{ fontFamily: 'var(--font-mono)' }}
                  placeholder="12500"
                />
              </AxField>
              <AxField label="Forma de pago">
                <AxSelect value={fields.formaPago} onChange={(e) => setF('formaPago', e.target.value)}>
                  <option>Anual</option><option>Semestral</option><option>Trimestral</option><option>Mensual</option>
                </AxSelect>
              </AxField>
              <AxField label="Teléfono del contratante">
                <AxInput value={fields.telefono} onChange={(e) => setF('telefono', e.target.value)}/>
              </AxField>
              <AxField label="Correo del contratante">
                <AxInput value={fields.email} onChange={(e) => setF('email', e.target.value)}/>
              </AxField>
              <div style={{ gridColumn: '1 / -1' }}>
                <AxField label="Domicilio">
                  <AxInput value={fields.domicilio} onChange={(e) => setF('domicilio', e.target.value)}/>
                </AxField>
              </div>
            </div>
          ) : null}

          {/* Sample submission opt-in */}
          <div style={{
            marginTop: 22, padding: 14,
            background: 'var(--ax-bg-2)',
            border: '1px solid var(--ax-border)',
            borderRadius: 8,
          }}>
            <label style={{ display: 'flex', alignItems: 'flex-start', gap: 10, cursor: 'default' }}>
              <input
                type="checkbox"
                checked={submitConsent}
                onChange={(e) => setSubmitConsent(e.target.checked)}
                style={{ marginTop: 3, accentColor: 'var(--ax-accent)' }}
              />
              <div style={{ fontSize: 12, color: 'var(--ax-fg)', lineHeight: 1.5 }}>
                <div style={{ fontWeight: 500, color: 'var(--ax-fg-strong)' }}>
                  Enviar este PDF para que Piixi aprenda este formato
                </div>
                <div style={{ color: 'var(--ax-fg-muted)', marginTop: 2 }}>
                  Opcional. Ayuda al catálogo público. Si el master switch en Ajustes está apagado, esta casilla no hace nada aunque la marques.
                </div>
              </div>
            </label>
          </div>

          <div style={{
            marginTop: 22,
            padding: 14, background: 'var(--ax-bg-2)',
            border: '1px solid var(--ax-border)', borderRadius: 8,
            display: 'flex', gap: 14, alignItems: 'flex-start',
          }}>
            <div style={{ color: 'var(--ax-fg-muted)' }}><AxIcon name="info" size={15}/></div>
            <div style={{ fontSize: 12, color: 'var(--ax-fg-muted)', lineHeight: 1.55, flex: 1 }}>
              <strong style={{ color: 'var(--ax-fg)' }}>Datos extraídos por Piixi.</strong>{' '}
              Cambia lo que necesites. Al guardar, queda una versión auditable de la póliza —
              puedes ver el historial en la pantalla de la póliza después de aprobar.
            </div>
          </div>
        </div>
      </div>

      <AxModal open={discardOpen} onClose={() => setDiscardOpen(false)}
        title="Marcar este archivo como no-póliza"
        footer={
          <>
            <AxButton variant="tertiary" onClick={() => setDiscardOpen(false)}>Cancelar</AxButton>
            <AxButton variant="danger" icon="trash" onClick={() => { discardPendiente(pn.id); navigate('/importar/revision'); }}>
              Mover a no-pólizas
            </AxButton>
          </>
        }
      >
        <p style={{ margin: 0, fontSize: 13, color: 'var(--ax-fg)', lineHeight: 1.6 }}>
          El PDF se mueve a un bucket auditable; no se borra del sistema.
          Esto es para archivos que llegaron por error, están corruptos, o no son pólizas.
        </p>
        <div style={{ marginTop: 14, padding: 12, background: 'var(--ax-bg-3)', borderRadius: 6, fontSize: 12, color: 'var(--ax-fg-muted)', display: 'flex', gap: 8 }}>
          <AxIcon name="info" size={14} style={{ color: 'var(--ax-fg-muted)', flexShrink: 0, marginTop: 1 }}/>
          <span>El registro de extracción y el archivo original quedan intactos en tu base local. No se elimina nada.</span>
        </div>
      </AxModal>
    </div>
  );
}

function ReadField({ label, children }) {
  return (
    <div>
      <div style={{ fontSize: 10, color: 'var(--ax-fg-faint)', fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: 4 }}>
        {label}
      </div>
      <div style={{ fontSize: 13, color: 'var(--ax-fg-strong)' }}>
        {children}
      </div>
    </div>
  );
}

// ─── PDF placeholder — looks like a GNP-style emission page ─────
function PdfPlaceholder({ pn, fields, page }) {
  const carrier = pn.carrier ? AdmixData.carrierById(pn.carrier) : null;
  const carrierColor = pn.carrier ? CARRIER_COLORS[pn.carrier] : '#888';
  return (
    <div style={{
      width: 460, minHeight: 600,
      background: '#FAF7F2',
      color: '#1A1A1A',
      borderRadius: 4,
      boxShadow: '0 12px 36px rgba(0,0,0,0.45)',
      fontFamily: '"Helvetica Neue", Arial, sans-serif',
      fontSize: 9, lineHeight: 1.5,
      padding: '32px 36px', position: 'relative',
    }}>
      {/* Header band */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '2px solid ' + carrierColor, paddingBottom: 12, marginBottom: 16 }}>
        <div>
          <div style={{ fontWeight: 800, fontSize: 18, color: carrierColor, letterSpacing: '0.02em' }}>
            {carrier ? carrier.name.toUpperCase() : 'ASEGURADORA'}
          </div>
          <div style={{ fontSize: 8, color: '#666', marginTop: 2, textTransform: 'uppercase', letterSpacing: '0.18em' }}>
            {pn.ramo ? AdmixData.formatRamoLabel(pn.ramo) : 'Póliza'} · Emisión
          </div>
        </div>
        <div style={{ textAlign: 'right', fontSize: 8, color: '#444' }}>
          <div>FOLIO {pn.polizaNumero || '—'}</div>
          <div>Página {page} de {pn.pages}</div>
        </div>
      </div>

      {page === 1 ? (
        <>
          <FakeBlock label="Contratante">
            <FakeRow k="Nombre" v={fields.contratante_nombre || '________________________'}/>
            <FakeRow k="RFC" v={fields.contratante_rfc || '___________'}/>
            <FakeRow k="Domicilio" v={fields.domicilio || '________________________________________'}/>
            <FakeRow k="Tel." v={fields.telefono || '________________'}/>
          </FakeBlock>

          <FakeBlock label="Datos de la póliza">
            <FakeRow k="Número" v={fields.polizaNumero || '____________'}/>
            <FakeRow k="Producto" v={pn.producto || '_______________________'}/>
            <FakeRow k="Vigencia" v={`${fields.inicioVigencia || '____-__-__'}  al  ${fields.finVigencia || '____-__-__'}`}/>
            <FakeRow k="Forma de pago" v={fields.formaPago || 'Anual'}/>
            <FakeRow k="Moneda" v={fields.moneda || 'MXN'}/>
          </FakeBlock>

          <FakeBlock label="Prima">
            <FakeRow k="Prima neta"     v={fields.primaTotal ? AdmixData.formatMoney(Number(fields.primaTotal) * 0.86) : '________'}/>
            <FakeRow k="Recargo"        v="$ 1,200.00"/>
            <FakeRow k="IVA (16%)"      v="$ 2,000.00"/>
            <FakeRow k="Prima total"    v={fields.primaTotal ? AdmixData.formatMoney(Number(fields.primaTotal)) : '________'} bold/>
          </FakeBlock>
        </>
      ) : (
        <FakeBlock label={'Coberturas y deducibles · Hoja ' + page}>
          {Array.from({ length: 10 }, (_, i) => (
            <FakeRow key={i}
              k={i % 2 === 0 ? '——————— ——— ——— ——————' : '———————— ————— ———— ———'}
              v={(50 + i * 17) + ',000.00'}/>
          ))}
        </FakeBlock>
      )}

      <div style={{ position: 'absolute', bottom: 18, left: 36, right: 36, fontSize: 7, color: '#888', borderTop: '1px solid #DDD', paddingTop: 6, display: 'flex', justifyContent: 'space-between' }}>
        <span>Documento generado el 13/05/2026</span>
        <span>{pn.filename}</span>
      </div>
    </div>
  );
}

function FakeBlock({ label, children }) {
  return (
    <div style={{ marginBottom: 14 }}>
      <div style={{
        fontSize: 8, letterSpacing: '0.16em', textTransform: 'uppercase',
        color: '#888', marginBottom: 6, fontWeight: 600,
      }}>{label}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>{children}</div>
    </div>
  );
}
function FakeRow({ k, v, bold }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '90px 1fr', gap: 12, fontSize: 9 }}>
      <span style={{ color: '#666' }}>{k}</span>
      <span style={{ color: '#1A1A1A', fontWeight: bold ? 700 : 500, fontFamily: '"Courier New", monospace' }}>{v}</span>
    </div>
  );
}

window.RevisionScreen = RevisionScreen;