// ============ AcademIA8 · Consola — Usuarios de prueba (reset por curso) ============
// Vive DENTRO de cada curso (pestaña "Pruebas", junto a "Alumnos"): rearma la
// experiencia de un número de prueba EN ESE CURSO puntual, sin tocar sus
// inscripciones a otros cursos. Sin CLI ni credenciales AWS (C4bis-reset).
//
// El front nunca ve ni manda un teléfono completo para el REARMADO: cada
// número trae un `id` opaco (ver A8Api.listPruebasAllowlist); el backend
// resuelve id->teléfono contra la allowlist fresca de SSM en cada llamada y
// rechaza cualquier `id` que no resuelva. El ALTA es la única excepción
// necesaria: quien agrega un número lo tipea, así que ese teléfono SÍ viaja
// (igual que en `admin_reset allowlist add --phone`).
//
// La allowlist es GLOBAL del entorno (dev/prod) -- los mismos números
// habilitan el rearmado en TODOS los cursos, aunque el alta/baja se gestione
// desde acá adentro de uno puntual. Tope de 5 números y formato E.164
// validados server-side (console_service.py); el front solo refleja.
// Quitar un número de la allowlist NUNCA borra datos de ningún alumno: solo
// deshabilita el rearmado para ese número (ver texto del botón).

function RearmarModal({ course, id, telefonoEnmascarado, onClose, onDone }){
  const [step,setStep] = useState('cargando'); // cargando | listo | ejecutando | resultado
  const [inv,setInv] = useState(null);
  const [error,setError] = useState(null);
  const [resultado,setResultado] = useState(null);

  useEffect(()=>{
    let alive = true;
    (async ()=>{
      try {
        const inventario = await A8Api.pruebasInventario(course.id, id);
        if (alive){ setInv(inventario); setStep('listo'); }
      } catch(e){ if (alive) setError((e&&e.message)||String(e)); }
    })();
    return ()=>{ alive = false; };
  }, [course.id, id]);

  async function confirmar(){
    setStep('ejecutando'); setError(null);
    try {
      const r = await A8Api.pruebasReset(course.id, id);
      setResultado(r);
      setStep('resultado');
      onDone && onDone();
    } catch(e){ setError((e&&e.message)||String(e)); setStep('listo'); }
  }

  return (
    <Modal wide icon="refresh" title="Rearmar experiencia en este curso"
      subtitle={telefonoEnmascarado}
      onClose={onClose}
      foot={step==='resultado'
        ? <><div className="spacer"></div><Btn variant="primary" icon="check" onClick={onClose}>Listo</Btn></>
        : <><div className="spacer"></div><Btn variant="subtle" onClick={onClose}>Cancelar</Btn>
            <Btn variant="magenta" icon="refresh" disabled={step!=='listo'} onClick={confirmar}>
              {step==='ejecutando' ? 'Rearmando…' : 'Confirmar y rearmar'}
            </Btn></>}>

      {error && (
        <div className="readonly-note" style={{background:'var(--dirty-bg)',borderColor:'rgba(206,30,78,.35)',color:'var(--magenta)',marginBottom:'14px'}}>
          <Icon name="alert" /> <span>{error}</span>
        </div>
      )}

      {step==='cargando' && (
        <div className="empty-state" style={{padding:'30px 10px'}}>
          <div className="es-ic"><Icon name="refresh" /></div>
          <h3>Trayendo el inventario…</h3>
        </div>
      )}

      {(step==='listo' || step==='ejecutando') && inv && (
        inv.encontrado ? (
          <>
            <div className="readonly-note" style={{background:'var(--dirty-bg)',borderColor:'rgba(206,30,78,.35)',color:'var(--magenta)'}}>
              <Icon name="alert" /> <span>Esto borra tu avance, conversación e intentos de <b>este curso</b> y te reinscribe desde cero. Tus otros cursos no se tocan. Es definitivo — no hay forma de deshacerlo.</span>
            </div>
            <div className="sec-title" style={{marginTop:'16px',marginBottom:'10px'}}>Se va a borrar</div>
            <div className="drow is-del">
              <div className="drow-top">
                <span className="drow-title">{inv.inscripcion.curso_titulo || inv.inscripcion.curso_id}</span>
                <span className="tag-diff" style={{background:'var(--dirty-bg)',color:'var(--magenta)'}}>{inv.inscripcion.estado}</span>
              </div>
              <div className="drow-meta">
                <span>Unidad {inv.inscripcion.unidad_actual ?? '—'}</span>
                <span>{inv.inscripcion.intentos_recall} intentos recall</span>
                <span>{inv.inscripcion.intentos_quiz_libre} quiz libre</span>
                <span>{inv.inscripcion.repasos} repasos</span>
                {inv.inscripcion.tiene_memoria && <span>con memoria de conversación</span>}
              </div>
            </div>
          </>
        ) : (
          <div className="hint">Sin inscripción en este curso — se creará una nueva.</div>
        )
      )}

      {step==='resultado' && resultado && (
        <div className="empty-state" style={{padding:'20px 10px'}}>
          <div className="es-ic"><Icon name="check" /></div>
          <h3>Experiencia rearmada en este curso</h3>
          <p>
            {resultado.borrado
              ? <>Se borraron {resultado.borrado.items_borrados} registros de la inscripción anterior.<br/></>
              : 'No había inscripción previa en este curso.'}
            Reinscripto como <b>{resultado.reinscripcion.alumno_id}</b>.
          </p>
        </div>
      )}
    </Modal>
  );
}

const MAX_ALLOWLIST_SIZE = 5;

function AgregarNumeroForm({ count, onAdded }){
  const [phone,setPhone] = useState('');
  const [busy,setBusy] = useState(false);
  const [err,setErr] = useState(null);
  const atTope = count >= MAX_ALLOWLIST_SIZE;
  const ok = !atTope && /^\+[1-9]\d{7,14}$/.test(phone.trim());

  async function submit(){
    if (!ok || busy) return;
    setBusy(true); setErr(null);
    try {
      const numeros = await A8Api.pruebasAllowlistAdd(phone.trim());
      setPhone('');
      onAdded(numeros);
    } catch(e){ setErr((e&&e.message)||String(e)); }
    finally { setBusy(false); }
  }

  return (
    <div style={{marginBottom:'16px'}}>
      <Field label="Agregar número de prueba" hint={atTope
        ? `Tope de ${MAX_ALLOWLIST_SIZE} números alcanzado — sacá uno antes de agregar otro.`
        : 'Formato E.164, con código de país. Ej: +5491112345678.'}>
        <div style={{display:'flex',gap:'8px'}}>
          <input type="text" value={phone} disabled={atTope || busy}
            onChange={e=>setPhone(e.target.value)} placeholder="+5491112345678"
            onKeyDown={e=>{ if(e.key==='Enter'&&ok) submit(); }} style={{flex:1}} />
          <Btn variant="primary" icon="plus" disabled={!ok||busy} onClick={submit}>
            {busy ? 'Agregando…' : 'Agregar'}
          </Btn>
        </div>
      </Field>
      {err && (
        <div className="readonly-note" style={{marginTop:'8px',background:'var(--dirty-bg)',borderColor:'rgba(206,30,78,.35)',color:'var(--magenta)'}}>
          <Icon name="alert" /> <span>{err}</span>
        </div>
      )}
    </div>
  );
}

function PruebasCursoPanel({ course }){
  const [numeros,setNumeros] = useState(null); // null = cargando
  const [error,setError] = useState(null);
  const [openId,setOpenId] = useState(null);
  const [quitandoId,setQuitandoId] = useState(null);

  async function load(){
    setError(null);
    try { setNumeros(await A8Api.listPruebasAllowlist()); }
    catch(e){ setError((e&&e.message)||String(e)); }
  }
  useEffect(()=>{ load(); }, []);

  async function quitar(id){
    setQuitandoId(id); setError(null);
    try { setNumeros(await A8Api.pruebasAllowlistRemove(id)); }
    catch(e){ setError((e&&e.message)||String(e)); }
    finally { setQuitandoId(null); }
  }

  const abierto = numeros && numeros.find(n=>n.id===openId);

  return (
    <div className="rag-wrap">
      <p className="rag-intro">
        Los números de prueba habilitados valen para <b>todos los cursos</b>, no solo este —
        vive acá por comodidad, porque "Rearmar experiencia en este curso" borra tu avance en{' '}
        <b>{course.meta_draft?.name || course.id}</b> y te reinscribe desde cero, sin tocar tus otros cursos.
      </p>
      <div className="rag-ghead">
        <div className="rag-gt"><Icon name="refresh" /> Usuarios de prueba</div>
        <span className="rag-gc">{numeros ? numeros.length : '—'}</span>
      </div>

      {error && (
        <div className="readonly-note" style={{marginTop:'12px',background:'var(--dirty-bg)',borderColor:'rgba(206,30,78,.35)',color:'var(--magenta)'}}>
          <Icon name="alert" /> {error}
        </div>
      )}

      {numeros===null && !error ? (
        <div className="empty-state" style={{padding:'40px 20px'}}>
          <div className="es-ic"><Icon name="refresh" /></div>
          <h3>Cargando…</h3>
        </div>
      ) : (
        <>
          <AgregarNumeroForm count={numeros ? numeros.length : 0} onAdded={setNumeros} />
          {numeros && numeros.length>0 ? (
            <div className="rag-list">
              {numeros.map(n=>(
                <div key={n.id} className="rag-row apoyo">
                  <span className="rag-ic ft-chk"><Icon name="refresh" /></span>
                  <div className="rag-main">
                    <div className="rag-name-row">
                      <div className="rag-name">{n.telefono_enmascarado}</div>
                      <span className="rag-status-inline" style={{display:'flex',alignItems:'center',gap:'10px'}}>
                        <Btn variant="magenta" size="sm" onClick={()=>setOpenId(n.id)}>Rearmar experiencia en este curso</Btn>
                        <Btn variant="ghost" size="sm" icon="trash" disabled={quitandoId===n.id}
                          onClick={()=>quitar(n.id)}>
                          {quitandoId===n.id ? 'Quitando…' : 'Quitar'}
                        </Btn>
                      </span>
                    </div>
                    <div className="hint">Quitar no borra datos del alumno — solo deshabilita el rearmado para este número.</div>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className="rag-empty">No hay números habilitados. Agregá uno arriba.</div>
          )}
        </>
      )}

      {abierto && (
        <RearmarModal course={course} id={abierto.id} telefonoEnmascarado={abierto.telefono_enmascarado}
          onClose={()=>setOpenId(null)} onDone={load} />
      )}
    </div>
  );
}

window.PruebasCursoPanel = PruebasCursoPanel;