// screen-flujo-cedula.jsx — Flujo: Validación de cédula vigente
// React 18 UMD + Babel standalone — NO import/export

// ─── Atoms (locales, copiados/adaptados de vitrina-nodos) ────────────────────

function Banderita({ estado, size }) {
  var sz = size || 16;
  var base = { display:'inline-flex', alignItems:'center', justifyContent:'center', width:sz, height:sz, borderRadius:'50%', flexShrink:0 };
  if (estado === 'cumplida') return <span style={{...base, background:'var(--ax-accent-soft)', border:'1.5px solid var(--ax-accent-line)', color:'var(--ax-accent)'}}><AxIcon name="check" size={sz*0.55}/></span>;
  if (estado === 'critica' || estado === 'pendiente') {
    var col = estado==='critica'?'var(--ax-danger)':'var(--ax-warm)';
    var soft = estado==='critica'?'var(--ax-danger-soft)':'var(--ax-warm-soft)';
    return <span style={{...base, background:soft, border:'1.5px solid '+(estado==='critica'?'rgba(233,76,77,0.25)':'var(--ax-warm-line)'), color:col}}><span style={{width:sz*0.33, height:sz*0.33, borderRadius:'50%', background:col}}/></span>;
  }
  return <span style={{...base, color:'var(--ax-fg-faint)', fontSize:sz*0.75}}>—</span>;
}

function ChipMono({ text }) {
  return (
    <span style={{
      display:'inline-block',
      fontSize:11, fontFamily:'var(--font-mono)', color:'var(--ax-fg-strong)',
      background:'var(--ax-bg-3)', border:'1px solid var(--ax-border)',
      borderRadius:6, padding:'3px 8px'
    }}>
      {text}
    </span>
  );
}

// ─── Franja de metadatos del flujo (A) ────────────────────────────────────────

function FlujoBadges() {
  return (
    <div style={{
      marginBottom:20,
      padding:'12px 16px',
      background:'var(--ax-bg-2)',
      border:'1px solid var(--ax-border)',
      borderRadius:10
    }}>
      <div style={{display:'flex', alignItems:'center', gap:8, flexWrap:'wrap', marginBottom:8}}>
        <AxPill tone="accent">
          <span style={{display:'inline-flex', alignItems:'center', gap:5}}>
            <AxIcon name="shield" size={11}/> Nivel: Regulatorio · agente
          </span>
        </AxPill>
        <AxPill tone="warm">
          <span style={{display:'inline-flex', alignItems:'center', gap:5}}>
            <AxIcon name="shield" size={11}/> No se puede apagar
          </span>
        </AxPill>
        <AxPill tone="ghost">Propósito: cumplimiento regulatorio</AxPill>
      </div>
      <p style={{
        margin:0, fontSize:11, color:'var(--ax-fg-muted)', lineHeight:1.55,
        fontStyle:'italic'
      }}>
        Este flujo es regulatorio: obligatorio, no se desactiva. Su interpretación lo ata a un fin de cumplimiento.
      </p>
    </div>
  );
}

// ─── Dictamen card ────────────────────────────────────────────────────────────

function DictamenCard() {
  return (
    <div style={{
      background:'var(--ax-accent-soft)',
      border:'1px solid var(--ax-accent-line)',
      borderRadius:12, padding:'20px 24px', marginBottom:24
    }}>
      {/* Main verdict row */}
      <div style={{display:'flex', alignItems:'flex-start', justifyContent:'space-between', gap:16, flexWrap:'wrap', marginBottom:14}}>
        <div style={{display:'flex', alignItems:'center', gap:14}}>
          <Banderita estado="cumplida" size={32} />
          <div>
            <div style={{fontSize:18, fontWeight:700, color:'var(--ax-fg-strong)', letterSpacing:'-0.01em', lineHeight:1.2}}>
              Vigente y válida
            </div>
            <div style={{fontSize:12, color:'var(--ax-fg-muted)', marginTop:3, lineHeight:1.5}}>
              Verificada contra el portal de la CNSF · vence en 280 días (15 mar 2027)
            </div>
          </div>
        </div>
        <AxPill tone="accent" dot>Habilitado para vender</AxPill>
      </div>

      {/* Other possible outcomes — as reference chips */}
      <div style={{display:'flex', alignItems:'center', gap:8, flexWrap:'wrap'}}>
        <span style={{fontSize:11, color:'var(--ax-fg-faint)', marginRight:2}}>Otros desenlaces posibles:</span>
        <AxPill tone="warm" dot>Por refrendar</AxPill>
        <AxPill tone="danger" dot>Vencida</AxPill>
        <AxPill tone="danger" dot>No coincide / apócrifa</AxPill>
      </div>
    </div>
  );
}

// ─── Leyenda ──────────────────────────────────────────────────────────────────

function Leyenda() {
  return (
    <div style={{
      display:'flex', alignItems:'center', gap:18, flexWrap:'wrap',
      marginBottom:28,
      padding:'8px 14px',
      background:'var(--ax-bg-2)', border:'1px solid var(--ax-border)',
      borderRadius:8
    }}>
      <div style={{display:'flex', alignItems:'center', gap:6}}>
        <span style={{width:9, height:9, borderRadius:'50%', background:'var(--ax-accent)', display:'inline-block', flexShrink:0}}/>
        <span style={{fontSize:11, color:'var(--ax-fg-muted)'}}>Paso interno (determinista, cero red)</span>
      </div>
      <div style={{width:1, height:14, background:'var(--ax-border)', flexShrink:0}}/>
      <div style={{display:'flex', alignItems:'center', gap:6}}>
        <span style={{
          width:9, height:9, borderRadius:'50%',
          background:'var(--ax-info)', display:'inline-block', flexShrink:0,
          outline:'1.5px dashed var(--ax-info)', outlineOffset:2
        }}/>
        <span style={{fontSize:11, color:'var(--ax-fg-muted)'}}>Conector (toca red / servicio externo) · borde punteado</span>
      </div>
    </div>
  );
}

// ─── DOS CAPAS: nodo dice / flujo interpreta (B) ──────────────────────────────

function DosCapas({ nodoDice, flujoInterpreta }) {
  return (
    <div style={{display:'flex', flexDirection:'column', gap:0}}>
      {/* Capa 1: El nodo dice (neutral) */}
      <div style={{
        background:'var(--ax-bg-3)',
        border:'1px solid var(--ax-border)',
        borderRadius:'8px 8px 0 0',
        padding:'8px 12px'
      }}>
        <div style={{
          fontSize:9, textTransform:'uppercase', letterSpacing:'0.08em',
          color:'var(--ax-fg-faint)', fontWeight:700, marginBottom:5
        }}>
          El nodo dice
        </div>
        <span style={{
          fontSize:11, fontFamily:'var(--font-mono)', color:'var(--ax-fg-muted)', lineHeight:1.5
        }}>
          {nodoDice}
        </span>
      </div>
      {/* Divisor punteado sutil */}
      <div style={{
        height:0, border:'none',
        borderTop:'1.5px dashed var(--ax-border-strong)'
      }}/>
      {/* Capa 2: El flujo interpreta (con acento) */}
      <div style={{
        background:'var(--ax-accent-soft)',
        border:'1px solid var(--ax-accent-line)',
        borderTop:'none',
        borderRadius:'0 0 8px 8px',
        padding:'8px 12px'
      }}>
        <div style={{
          fontSize:9, textTransform:'uppercase', letterSpacing:'0.08em',
          color:'var(--ax-accent)', fontWeight:700, marginBottom:5, opacity:0.8
        }}>
          El flujo interpreta
        </div>
        {flujoInterpreta}
      </div>
    </div>
  );
}

// ─── Paso card (tarjeta de actividad en la timeline) ─────────────────────────

function PasoCard({ paso, isConector }) {
  var borderStyle = isConector
    ? '1px dashed var(--ax-border-strong)'
    : '1px solid var(--ax-border)';

  return (
    <div style={{
      background:'var(--ax-bg-2)',
      border:borderStyle,
      borderRadius:10, padding:'14px 16px',
      flex:1
    }}>
      {/* Header: nombre + pills */}
      <div style={{display:'flex', alignItems:'center', gap:8, flexWrap:'wrap', marginBottom:10}}>
        <span style={{fontSize:13, fontWeight:600, color:'var(--ax-fg-strong)'}}>
          {paso.nombre}
        </span>
        <AxPill tone={isConector ? 'info' : 'accent'}>
          {isConector ? 'conector' : 'interno'}
        </AxPill>
        {isConector && <AxPill tone="ghost">red en vivo</AxPill>}
      </div>

      {/* Nodo técnico */}
      <div style={{marginBottom:10}}>
        <ChipMono text={paso.nodo} />
      </div>

      {/* Resultado */}
      <div style={{borderTop:'1px solid var(--ax-border)', paddingTop:10}}>
        <div style={{fontSize:10, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--ax-fg-faint)', marginBottom:6, fontWeight:600}}>
          Resultado
        </div>
        {paso.resultado()}
      </div>
    </div>
  );
}

// ─── Timeline item ────────────────────────────────────────────────────────────

function TimelineItem({ paso, index, total }) {
  var isConector = paso.zona === 'conector';
  var isLast = index === total - 1;
  var dotColor = isConector ? 'var(--ax-info)' : 'var(--ax-accent)';
  var dotBg = isConector ? 'var(--ax-info-soft)' : 'var(--ax-accent-soft)';
  var dotBorder = isConector ? 'var(--ax-info-line)' : 'var(--ax-accent-line)';

  return (
    <div style={{display:'flex', gap:0, alignItems:'stretch'}}>
      {/* Left: dot + vertical line */}
      <div style={{display:'flex', flexDirection:'column', alignItems:'center', width:36, flexShrink:0}}>
        {/* Dot */}
        <div style={{
          display:'flex', alignItems:'center', justifyContent:'center',
          width:28, height:28, borderRadius:'50%',
          background:dotBg,
          border: isConector
            ? '1.5px dashed ' + dotColor
            : '1.5px solid ' + dotBorder,
          color:dotColor,
          flexShrink:0, zIndex:1
        }}>
          <Banderita estado="cumplida" size={16} />
        </div>
        {/* Line below dot */}
        {!isLast && (
          <div style={{
            flex:1, width:1.5, minHeight:16,
            background:'var(--ax-border-strong)',
            margin:'2px 0'
          }}/>
        )}
      </div>

      {/* Right: card */}
      <div style={{flex:1, paddingBottom: isLast ? 0 : 16, paddingLeft:12}}>
        <div style={{display:'flex', alignItems:'center', gap:8, height:28, marginBottom:8}}>
          <span style={{
            fontSize:10, fontWeight:700, textTransform:'uppercase',
            letterSpacing:'0.07em', color:'var(--ax-fg-faint)'
          }}>
            {index + 1}
          </span>
        </div>
        <PasoCard paso={paso} isConector={isConector} />
      </div>
    </div>
  );
}

// ─── Data de los 7 pasos ──────────────────────────────────────────────────────

var PASOS = [
  {
    nombre: 'Cargar cédula (PDF)',
    zona: 'interno',
    nodo: 'cargar-pdf',
    resultado: function() {
      return (
        <div style={{display:'flex', alignItems:'center', gap:8,
          background:'var(--ax-bg-3)', border:'1px solid var(--ax-border)',
          borderRadius:7, padding:'7px 10px'
        }}>
          <AxIcon name="pdf" size={15} />
          <span style={{fontSize:12, color:'var(--ax-fg-strong)', fontWeight:500}}>cedula_agente_9876543.pdf</span>
          <span style={{fontSize:11, color:'var(--ax-fg-faint)', fontFamily:'var(--font-mono)', marginLeft:4}}>240 KB · cargado</span>
          <Banderita estado="cumplida" size={14} />
        </div>
      );
    }
  },
  {
    nombre: 'Extracción',
    zona: 'conector',
    nodo: 'extracción',
    resultado: function() {
      var campos = [
        { k:'Nombre', v:'Juan Pérez García' },
        { k:'Cédula', v:'9876543' },
        { k:'Tipo', v:'Agente' },
        { k:'Vigencia', v:'15 mar 2027' },
        { k:'QR detectado', v:'✓' }
      ];
      return (
        <div style={{display:'flex', flexDirection:'column', gap:4}}>
          <span style={{fontSize:11, color:'var(--ax-fg-muted)', marginBottom:4}}>Campos extraídos del PDF:</span>
          <div style={{
            display:'grid', gridTemplateColumns:'auto 1fr', columnGap:14, rowGap:5,
            background:'var(--ax-bg-3)', border:'1px solid var(--ax-border)',
            borderRadius:7, padding:'8px 12px'
          }}>
            {campos.map(function(c) {
              return (
                <React.Fragment key={c.k}>
                  <span style={{fontSize:11, color:'var(--ax-fg-faint)', fontWeight:500, whiteSpace:'nowrap'}}>{c.k}</span>
                  <span style={{fontSize:11, fontFamily:'var(--font-mono)', color:'var(--ax-fg-strong)'}}>{c.v}</span>
                </React.Fragment>
              );
            })}
          </div>
        </div>
      );
    }
  },
  {
    nombre: 'Guardar datos',
    zona: 'interno',
    nodo: 'guardar-dato',
    resultado: function() {
      return (
        <div style={{display:'flex', alignItems:'center', gap:8}}>
          <Banderita estado="cumplida" size={14} />
          <span style={{fontSize:12, color:'var(--ax-fg-muted)'}}>Guardado en</span>
          <ChipMono text="cedula_agente" />
          <span style={{fontSize:12, color:'var(--ax-accent)', fontWeight:600}}>✓</span>
        </div>
      );
    }
  },
  {
    // Paso 4: dos capas visibles (B)
    nombre: 'Validar fecha de vigencia',
    zona: 'interno',
    nodo: 'validar (modo: fecha-vigencia)',
    resultado: function() {
      return (
        <DosCapas
          nodoDice="hoy está a 280 días de la fecha objetivo (campo: vigencia_fin)"
          flujoInterpreta={
            <div style={{display:'flex', alignItems:'center', gap:8}}>
              <AxPill tone="accent" dot>Vigente</AxPill>
              <span style={{fontSize:11, color:'var(--ax-fg-muted)'}}>El nodo midió días; el flujo sabe que eso es "vigente" en este contexto regulatorio.</span>
            </div>
          }
        />
      );
    }
  },
  {
    nombre: 'Derivar URL del QR',
    zona: 'interno',
    nodo: 'leer-dato / calcular',
    resultado: function() {
      return (
        <div style={{display:'flex', flexDirection:'column', gap:6}}>
          <ChipMono text="agentesajustadores.cnsf.gob.mx/qr_agente?cedula=9876543" />
          <span style={{fontSize:11, color:'var(--ax-fg-faint)', fontStyle:'italic'}}>
            Construida de lo extraído · no se le pidió al agente
          </span>
        </div>
      );
    }
  },
  {
    nombre: 'Cruce con CNSF',
    zona: 'conector',
    nodo: 'cruce-cnsf',
    resultado: function() {
      return (
        <div style={{display:'flex', flexDirection:'column', gap:7}}>
          <div style={{display:'flex', alignItems:'center', gap:7}}>
            <Banderita estado="cumplida" size={14} />
            <span style={{fontSize:12, color:'var(--ax-fg-strong)'}}>Portal CNSF consultado (Playwright)</span>
          </div>
          <div style={{display:'flex', alignItems:'center', gap:7}}>
            <Banderita estado="cumplida" size={14} />
            <span style={{fontSize:12, color:'var(--ax-fg-muted)'}}>Nombre y número <strong style={{color:'var(--ax-fg-strong)'}}>COINCIDEN</strong> con el PDF</span>
          </div>
          <div style={{display:'flex', alignItems:'center', gap:7}}>
            <Banderita estado="cumplida" size={14} />
            <span style={{fontSize:12, color:'var(--ax-fg-muted)'}}>Ancla de host válida</span>
          </div>
          <AxPill tone="info">red en vivo</AxPill>
        </div>
      );
    }
  },
  {
    // Paso 7: dos capas visibles (B)
    nombre: 'Dictamen',
    zona: 'interno',
    nodo: 'dictaminar',
    resultado: function() {
      return (
        <DosCapas
          nodoDice="señales recibidas: fecha_ok=true · coincidencia_nombre=true · ancla_host=true · qr_valido=true"
          flujoInterpreta={
            <div style={{display:'flex', alignItems:'center', gap:8}}>
              <Banderita estado="cumplida" size={16} />
              <span style={{fontSize:12, fontWeight:600, color:'var(--ax-accent)', lineHeight:1.4}}>
                Cédula vigente y válida según la CNSF ✓
              </span>
            </div>
          }
        />
      );
    }
  }
];

// ─── Callout de modularidad (C) ───────────────────────────────────────────────

function CalloutModularidad() {
  return (
    <div style={{
      marginTop:28,
      background:'var(--ax-bg-2)',
      border:'1px solid var(--ax-border)',
      borderRadius:10, padding:'14px 16px',
      display:'flex', gap:12, alignItems:'flex-start'
    }}>
      <div style={{
        flexShrink:0, marginTop:1,
        color:'var(--ax-info)'
      }}>
        <AxIcon name="info" size={15}/>
      </div>
      <p style={{
        margin:0, fontSize:11, color:'var(--ax-fg-muted)', lineHeight:1.65
      }}>
        <strong style={{color:'var(--ax-fg-strong)', fontWeight:600}}>El nodo es genérico — Piixi es tonto.</strong>{' '}
        La interpretación la pone el flujo. La misma validación de fecha, con otra interpretación, sirve a otro contexto:{' '}
        aquí es regulatoria (cédula CNSF); en un flujo de aseguradora podría validar un paso que exige Conexión GNP;
        en uno operativo, que enviaste tus renovaciones a tiempo.
      </p>
    </div>
  );
}

// ─── Main screen ──────────────────────────────────────────────────────────────

function FlujoCedulaScreen() {
  var routeState = useHashRoute ? useHashRoute() : { navigate: function() {} };
  var navigate = routeState.navigate;

  return (
    <div style={{ flex:1, display:'flex', flexDirection:'column', overflow:'hidden' }}>
      <AxPageHeader
        eyebrow="FLUJO DE TRABAJO · NIVEL AGENTE · REGULATORIO"
        title="Validación de cédula vigente"
        subtitle="Anti-apócrifo: cruza tu cédula contra el portal oficial de la CNSF."
        actions={
          <AxButton variant="secondary" icon="arrow-right" onClick={function(){ navigate('/cumplimiento'); }}>
            Volver
          </AxButton>
        }
      />
      <div style={{ flex:1, overflow:'auto', padding:'24px 32px 48px' }}>

        {/* A · Metadatos del flujo */}
        <FlujoBadges />

        {/* 1 · Dictamen */}
        <DictamenCard />

        {/* 2 · Leyenda */}
        <Leyenda />

        {/* 3 · Línea de tiempo */}
        <div style={{
          background:'var(--ax-bg-2)', border:'1px solid var(--ax-border)',
          borderRadius:12, padding:'24px 24px 20px'
        }}>
          <div style={{marginBottom:20}}>
            <AxEyebrow>SECUENCIA DE ACTIVIDADES</AxEyebrow>
            <h3 style={{margin:'4px 0 0', fontSize:15, fontWeight:700, color:'var(--ax-fg-strong)', letterSpacing:'-0.01em'}}>
              7 pasos · 2 conectores · 5 internos
            </h3>
          </div>

          {PASOS.map(function(paso, i) {
            return (
              <TimelineItem
                key={paso.nodo + i}
                paso={paso}
                index={i}
                total={PASOS.length}
              />
            );
          })}
        </div>

        {/* C · Callout de modularidad */}
        <CalloutModularidad />

      </div>
    </div>
  );
}

window.FlujoCedulaScreen = FlujoCedulaScreen;