// ============ AcademIA8 · Consola — Reglas de material + Vista de publicación ============
// El editor de unidad clásico (fragmentos/checkpoints separados) fue reemplazado
// por el organizador (organizer.jsx), coherente con el mapeo a pasos del backend.
// Este archivo conserva las reglas de material (compartidas con el organizador) y
// la vista de publicación, ahora cableada a los endpoints reales del backend
// (GET /diff, GET /disclaimer) — sin diff local ni copia publicada en el front.

// ---------- Reglas por tipo de material (contenido de las ayudas contextuales) ----------
const MEDIA_RULES = {
  video: { types:['MP4'], help:(<>
    <span className="ht-p"><b>Subida directa (hasta 500 MB):</b> se envía como archivo por WhatsApp. Si pesa más de 16 MB se comprime automáticamente al subir (podés ver el progreso en el editor) — el alumno siempre recibe un MP4 dentro del límite de WhatsApp.</span>
    <span className="ht-p"><b>Video largo por link:</b> alternativa si preferís pegar un link (YouTube, Vimeo) en vez de subir el archivo. El alumno recibe el link, no el archivo.</span>
  </>) },
  imagen: { types:['JPEG','PNG'], help:(<span className="ht-p">Hasta <b>5 MB</b>. Formatos: JPEG, PNG.</span>) },
  audio: { types:['AAC','MP3','OGG','Opus'], help:(<span className="ht-p">Hasta <b>16 MB</b>. Formatos: AAC, MP3, OGG, Opus.</span>) },
  documento: { types:['PDF','DOC','DOCX'], help:(<span className="ht-p">Hasta <b>100 MB</b>. Formatos: PDF, DOC, DOCX, etc.</span>) },
};

/* ===================================================================
   VISTA DE PUBLICACIÓN  (diff borrador vs publicado — backend Camino A)
   - estado derivado: solo-borrador / publicado-limpio / publicado-con-cambios
   - diff: unidades `editadas` y `nuevas` (no hay movida ni borrada, Camino A)
   - disclaimer de alcance: por unidad editada, cuántos alumnos ya la cursaron
=================================================================== */
function PublishView({ course, actions }){
  const [diff, setDiff] = useState(null);
  const [disc, setDisc] = useState({});
  const [loading, setLoading] = useState(true);
  const [err, setErr] = useState(null);
  const [publishing, setPublishing] = useState(false);

  const estado = course.derivedEstado;
  const firstPub = estado === 'solo-borrador';
  const clean = estado === 'publicado-limpio';

  // mapa unidad_id → {title, pos} desde el borrador cargado
  const unitById = {};
  (course.draft?.units || []).forEach((u,i)=>{ unitById[u.id] = { title:u.title, pos:i+1, u }; });

  useEffect(()=>{
    let alive = true;
    (async ()=>{
      setLoading(true); setErr(null);
      try {
        const d = await A8Api.diff(course.id);
        let dc = {};
        if (d.editadas && d.editadas.length){
          try { dc = await A8Api.disclaimer(course.id); } catch(e){ dc = {}; }
        }
        if (alive){ setDiff(d); setDisc(dc || {}); }
      } catch(e){ if (alive) setErr(e.message || String(e)); }
      finally { if (alive) setLoading(false); }
    })();
    return ()=>{ alive = false; };
  }, [course.id]);

  async function doPublish(){
    setPublishing(true);
    const ok = await actions.publish(course.id);   // recarga + toast; devuelve bool
    setPublishing(false);
    if (ok) actions.openCourse(course.id);
  }

  const nuevas = diff ? diff.nuevas : [];
  const editadas = diff ? diff.editadas : [];
  const metaCambiada = diff ? !!diff.meta_cambiada : false;
  const totalChanges = nuevas.length + editadas.length + (metaCambiada ? 1 : 0);
  const affectedTotal = Object.values(disc).reduce((s,n)=>s+n, 0);

  return (
    <div className="wrap">
      <div className="flex between center">
        <div>
          <div className="page-kick">Vista de publicación</div>
          <h1 className="page-title" style={{marginTop:'8px'}}>{course.meta_draft?.name}</h1>
        </div>
        <Btn variant="ghost" onClick={()=>actions.openCourse(course.id)}>Volver al editor</Btn>
      </div>

      {/* hero resumen */}
      <div className="pub-hero" style={{marginTop:'22px'}}>
        <div className="pg" style={{width:'220px',height:'220px',background:'#01C599',opacity:.3,left:'-60px',top:'-80px'}}></div>
        <div className="pg" style={{width:'200px',height:'200px',background:'#CE1E4E',opacity:.3,right:'-60px',bottom:'-90px'}}></div>
        <div className="pub-hero-in">
          <div className="flex between center">
            <div style={{maxWidth:'560px'}}>
              <div style={{fontFamily:'var(--mono)',fontSize:'10px',letterSpacing:'.2em',textTransform:'uppercase',color:'var(--teal)',fontWeight:700}}>
                {firstPub ? 'Primera publicación' : clean ? 'Sin cambios' : 'Confirmá los cambios'}
              </div>
              <h2 style={{fontFamily:'var(--serif)',fontWeight:700,fontSize:'21px',marginTop:'8px',lineHeight:1.25}}>
                {firstPub
                  ? 'Vas a hacer visible este curso al alumno por primera vez.'
                  : clean
                    ? 'El borrador ya está publicado tal cual. No hay cambios para enviar.'
                    : <>Al publicar, el alumno pasará a ver <span style={{color:'var(--ambar)'}}>tu borrador actual</span>.</>}
              </h2>
            </div>
          </div>
          {!firstPub && !clean && (
            <div className="pub-summary">
              <div className="pub-stat add"><span className="n">+{nuevas.length}</span><span className="l">unidades nuevas</span></div>
              <div className="pub-stat edit"><span className="n">{editadas.length}</span><span className="l">unidades editadas</span></div>
            </div>
          )}
        </div>
      </div>

      {/* alcance del Camino A (informativo, no bloquea) */}
      <div className="readonly-note" style={{marginTop:'18px'}}>
        <Icon name="eye" /> <span>Republicar no reordena ni borra unidades ya publicadas: solo se editan las existentes y se agregan al final. El progreso de cada alumno se conserva.</span>
      </div>

      {loading && (
        <div className="empty-state" style={{padding:'40px 20px'}}>
          <div className="es-ic"><Icon name="refresh" /></div>
          <h3>Calculando diferencias…</h3>
        </div>
      )}

      {err && (
        <div className="readonly-note" style={{marginTop:'18px',background:'var(--dirty-bg)',borderColor:'rgba(206,30,78,.35)',color:'var(--magenta)'}}>
          <Icon name="alert" /> No se pudo calcular el diff: {err}
        </div>
      )}

      {!loading && !err && (
        <>
          {/* diff por unidad */}
          <div className="section-gap"></div>
          <div className="sec-title" style={{marginBottom:'12px'}}>
            {firstPub ? 'Unidades a publicar' : 'Cambios respecto de lo publicado'}
          </div>

          {totalChanges===0 ? (
            <div className="empty-state" style={{padding:'40px 20px'}}>
              <div className="es-ic"><Icon name="check" /></div>
              <h3>{firstPub ? 'El borrador está vacío' : 'Sin cambios'}</h3>
              <p>{firstPub ? 'Agregá unidades y contenido antes de publicar.' : 'El borrador coincide con lo publicado.'}</p>
            </div>
          ) : (
            <div style={{display:'flex',flexDirection:'column',gap:'10px'}}>
              {metaCambiada && (
                <div className="drow is-edit">
                  <div className="drow-top">
                    <span className="drow-pos"><Icon name="settings" style={{width:13,height:13}} /></span>
                    <span className="drow-title">Metadata del curso</span>
                    <span className="tag-diff tag-edit">editada</span>
                  </div>
                  <div className="drow-meta"><span>Nombre, descripción y/o mensaje de bienvenida</span></div>
                </div>
              )}
              {nuevas.map(e=>{
                const u = unitById[e.unidad_id];
                return <DiffRow key={e.unidad_id} title={u?u.title:e.unidad_id} pos={u?u.pos:e.posicion}
                  items={u?u.u.items:[]} tone="add" label={firstPub?'a publicar':'nueva al final'} />;
              })}
              {editadas.map(e=>{
                const u = unitById[e.unidad_id];
                const n = disc[e.unidad_id] || 0;
                const note = n>0 ? `${n} ${n===1?'alumno ya cursó':'alumnos ya cursaron'} esta unidad y no ${n===1?'verá':'verán'} esta edición` : null;
                return <DiffRow key={e.unidad_id} title={u?u.title:e.unidad_id} pos={u?u.pos:e.posicion}
                  items={u?u.u.items:[]} tone="edit" label="editada" note={note} />;
              })}
            </div>
          )}

          {/* disclaimer de alcance */}
          {!firstPub && affectedTotal>0 && (
            <>
              <div className="section-gap"></div>
              <div className="publish-disclaimer">
                <Icon name="alert" />
                <span>Hay <b>{affectedTotal} {affectedTotal===1?'alumno':'alumnos'}</b> que no {affectedTotal===1?'verá':'verán'} {editadas.length===1?'este cambio':'estos cambios'} porque ya {affectedTotal===1?'pasó':'pasaron'} por {editadas.length===1?'esa unidad':'esas unidades'}.</span>
              </div>
            </>
          )}

          {/* barra publicar */}
          <div className="section-gap"></div>
          <div className="card card-pad" style={{display:'flex',alignItems:'center',gap:'16px'}}>
            <div className="frag-type ft-imagen" style={{background:'var(--pub-bg)',color:'var(--verde-prof)',width:'40px',height:'40px'}}><Icon name="publish" /></div>
            <div>
              <div style={{fontWeight:700,fontSize:'14px',color:'var(--tinta)'}}>{firstPub?'Publicar por primera vez':clean?'Nada para publicar':`Publicar ${totalChanges} ${totalChanges===1?'cambio':'cambios'}`}</div>
              <div style={{fontSize:'12.5px',color:'var(--gris)',marginTop:'2px'}}>Esto reemplaza lo que ve el alumno por tu borrador actual. La acción es inmediata.</div>
            </div>
            <div className="grow"></div>
            <Btn variant="subtle" onClick={()=>actions.openCourse(course.id)}>Cancelar</Btn>
            <Btn variant="pub" icon="publish" disabled={publishing || clean || (firstPub && totalChanges===0)} onClick={doPublish}>
              {publishing ? 'Publicando…' : firstPub?'Publicar curso':'Publicar cambios'}
            </Btn>
          </div>
        </>
      )}
    </div>
  );
}

function DiffRow({ title, pos, items, tone, label, note }){
  const cnt = A8.countUnitContent({ items: items || [] });
  const cls = tone==='add'?'is-add':tone==='edit'?'is-edit':'';
  const tagCls = tone==='add'?'tag-new':tone==='edit'?'tag-edit':'tag-move';
  return (
    <div className={`drow ${cls}`}>
      <div className="drow-top">
        <span className="drow-pos">#{pos}</span>
        <span className="drow-title">{title}</span>
        {label && <span className={`tag-diff ${tagCls}`}>{label}</span>}
      </div>
      <div className="drow-meta">
        <span><Icon name="text" /> {cnt.frags} cont.</span>
        <span><Icon name="question" /> {cnt.chks} cuest.</span>
      </div>
      {note && <div className="drow-seen"><Icon name="alert" /> {note}</div>}
    </div>
  );
}

Object.assign(window, { PublishView, DiffRow, MEDIA_RULES });