// ============ AcademIA8 · Consola — Campañas · ROOT del módulo (solapas + lista) ============

const CAMP_COLS = '2.3fr 150px 128px 1.25fr 118px';

function campEstadoPill(e){
  const map = { borrador:'pill-draft', programada:'pill-programada', enviando:'pill-enviando', enviada:'pill-enviada', fallida:'pill-fallida' };
  return map[e]||'pill-neutral';
}
function campFecha(c){
  if (c.estado==='enviada' || c.estado==='fallida') return { lbl:c.estado==='enviada'?'Enviada':'Falló', val:fmtCampDateTime(c.enviadaEn) };
  if (c.estado==='programada') return { lbl:'Programada', val:fmtCampDateTime(c.programadaPara) };
  if (c.estado==='enviando') return { lbl:'Enviando', val:'en curso…' };
  return { lbl:'Editada', val:c.actualizadoEn ? fmtCampDateTime(c.actualizadoEn+'T00:00').replace(', 00:00 hs','') : '—' };
}

// ---------- lista de campañas ----------
function CampaignsList({ notify, onNew, onOpen }){
  const [items, setItems] = useState(null);
  const [q, setQ] = useState('');
  const [filter, setFilter] = useState('todas');
  const [deleting, setDeleting] = useState(null);
  const [cancelling, setCancelling] = useState(null);
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState(null);

  const load = async ()=>{ try{ setErr(null); setItems(await CampAPI.listarCampanias()); }catch(e){ setItems([]); setErr(e.message||'No se pudieron cargar las campañas'); } };
  useEffect(()=>{ load(); },[]);
  // Mientras haya alguna campaña "enviando", refrescamos suave (el backend define el fin).
  useEffect(()=>{
    if (!items) return;
    if (!items.some(c=>c.estado==='enviando')) return;
    const t = setTimeout(()=>{ load(); }, 3500);
    return ()=>clearTimeout(t);
  },[items]);

  const counts = items ? {
    todas: items.length,
    borrador: items.filter(c=>c.estado==='borrador').length,
    programada: items.filter(c=>c.estado==='programada').length,
    enviada: items.filter(c=>c.estado==='enviada'||c.estado==='fallida').length,
  } : {};

  let shown = items||[];
  if (q) shown = shown.filter(c=> (c.nombre+' '+c.asunto).toLowerCase().includes(q.toLowerCase()));
  if (filter==='borrador') shown = shown.filter(c=>c.estado==='borrador');
  else if (filter==='programada') shown = shown.filter(c=>c.estado==='programada');
  else if (filter==='enviada') shown = shown.filter(c=>c.estado==='enviada'||c.estado==='fallida');

  const doDelete = async ()=>{ await CampAPI.eliminarCampania(deleting.id); setDeleting(null); notify('Campaña eliminada'); load(); };
  const doCancel = async ()=>{ setBusy(true); await CampAPI.cancelarProgramacion(cancelling.id); setBusy(false); setCancelling(null); notify('Programación cancelada · vuelve a borrador'); load(); };
  const doDuplicate = async (c)=>{ await CampAPI.duplicarCampania(c.id); notify('Campaña duplicada como borrador'); load(); };

  return (
    <div>
      <div className="list-toolbar">
        <div className="search">
          <Icon name="search" />
          <input placeholder="Buscar campaña…" value={q} onChange={e=>setQ(e.target.value)} />
        </div>
        <div className="filter-chips">
          {[['todas','Todas'],['borrador','Borradores'],['programada','Programadas'],['enviada','Enviadas']].map(([k,l])=>(
            <button key={k} className={`chip${filter===k?' on':''}`} onClick={()=>setFilter(k)}>
              {l}{items && <span className="ct">{counts[k]}</span>}
            </button>
          ))}
        </div>
        <div style={{marginLeft:'auto'}}>
          <Btn variant="magenta" icon="plus" onClick={onNew}>Nueva campaña</Btn>
        </div>
      </div>

      {err ? (
        <div className="empty-state">
          <div className="es-ic"><Icon name="alert" /></div>
          <h3>No se pudieron cargar las campañas</h3>
          <p>{err}</p>
          <div style={{marginTop:'16px'}}><Btn variant="ghost" icon="refresh" onClick={load}>Reintentar</Btn></div>
        </div>
      ) : items===null ? (
        <div className="cmp-loading"><span className="cmp-spin"></span>Cargando campañas…</div>
      ) : shown.length===0 ? (
        <div className="empty-state">
          <div className="es-ic"><Icon name="send" /></div>
          <h3>{items.length===0?'Todavía no hay campañas':'Sin resultados'}</h3>
          <p>{items.length===0?'Creá tu primera campaña de email para tu base de contactos.':'Probá con otra búsqueda o filtro.'}</p>
          {items.length===0 && <div style={{marginTop:'16px'}}><Btn variant="magenta" icon="plus" onClick={onNew}>Nueva campaña</Btn></div>}
        </div>
      ) : (
        <div className="tbl">
          <div className="tbl-head">
            <div className="tbl-row" style={{gridTemplateColumns:CAMP_COLS}}>
              <div className="tbl-cell">Campaña</div>
              <div className="tbl-cell">Estado</div>
              <div className="tbl-cell">Destinatarios</div>
              <div className="tbl-cell">Fecha</div>
              <div className="tbl-cell right">Acciones</div>
            </div>
          </div>
          <div className="tbl-body">
            {shown.map(c=>{
              const f = campFecha(c);
              const editable = c.estado==='borrador';
              return (
                <div key={c.id} className="tbl-row" style={{gridTemplateColumns:CAMP_COLS}}>
                  <div className="tbl-cell cell-clickable" onClick={()=>onOpen(c)}>
                    <div className="cell-strong">{c.nombre}</div>
                    <div className="cell-sub">{c.asunto || 'Sin asunto todavía'}</div>
                  </div>
                  <div className="tbl-cell">
                    <span className={`pill ${campEstadoPill(c.estado)}`}><span className="dt"></span>{CampAPI.ESTADO_CAMPANIA[c.estado]}</span>
                    {c.fallidos>0 && <span className="camp-fail-badge" title="Destinatarios que no recibieron el correo"><Icon name="alert" />{c.fallidos} con error</span>}
                  </div>
                  <div className="tbl-cell">
                    <div className="cell-strong" style={{fontSize:'14px'}}>{c.totalDestinatarios>0?c.totalDestinatarios.toLocaleString('es-AR'):'—'}</div>
                  </div>
                  <div className="tbl-cell">
                    <div style={{fontSize:'11px',fontFamily:'var(--mono)',letterSpacing:'.04em',textTransform:'uppercase',color:'var(--gris)',fontWeight:700}}>{f.lbl}</div>
                    <div className="cell-sub" style={{marginTop:'3px'}}>{f.val}</div>
                  </div>
                  <div className="tbl-cell">
                    <div className="tbl-actions">
                      {editable && <IconBtn icon="edit" title="Editar" onClick={()=>onOpen(c)} />}
                      {editable && <IconBtn icon="trash" danger title="Eliminar" onClick={()=>setDeleting(c)} />}
                      {c.estado==='programada' && <Btn variant="danger" size="sm" icon="x" onClick={()=>setCancelling(c)}>Cancelar</Btn>}
                      {(c.estado==='enviada'||c.estado==='fallida') && <IconBtn icon="copy" title="Duplicar" onClick={()=>doDuplicate(c)} />}
                      {(c.estado==='enviada'||c.estado==='fallida'||c.estado==='enviando') && <Btn variant="ghost" size="sm" icon="eye" onClick={()=>onOpen(c)}>Ver</Btn>}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      )}

      {deleting && <ConfirmDelete what="campaña"
        detail={`Vas a eliminar el borrador “${deleting.nombre}”. Esta acción no se puede deshacer.`}
        onClose={()=>setDeleting(null)} onConfirm={doDelete} />}
      {cancelling && <Modal icon="alert" title="Cancelar programación"
        subtitle="La campaña deja de estar programada y vuelve a borrador. Podés reprogramarla cuando quieras."
        onClose={()=>!busy&&setCancelling(null)}
        foot={<><div className="spacer"></div><Btn variant="subtle" onClick={()=>setCancelling(null)} disabled={busy}>Volver</Btn><Btn variant="magenta" icon="x" onClick={doCancel} disabled={busy}>{busy?'Cancelando…':'Sí, cancelar'}</Btn></>}>
        <p style={{fontSize:'13.5px',lineHeight:1.6,color:'var(--grafito)'}}>“{cancelling.nombre}” estaba programada para <b>{fmtCampDateTime(cancelling.programadaPara)}</b> ({TZ_LABEL}).</p>
      </Modal>}
    </div>
  );
}

// ---------- root del módulo ----------
function CampaignsModule({ notify }){
  const [tab, setTab] = useState('campanias'); // campanias | contactos
  const [view, setView] = useState('list');     // list | edit | detail
  const [editId, setEditId] = useState(null);
  const [counts, setCounts] = useState({ camp:null, cont:null });

  const loadCounts = async ()=>{
    try{
      const [camps, res] = await Promise.all([CampAPI.listarCampanias(), CampAPI.resumenContactos()]);
      setCounts({ camp:camps.length, cont:res.total });
    }catch(e){ /* los conteos del tab son opcionales; no bloquean */ }
  };
  useEffect(()=>{ loadCounts(); },[view]);

  const openCampaign = (c)=>{
    if (c.estado==='borrador'){ setEditId(c.id); setView('edit'); }
    else { setEditId(c.id); setView('detail'); }
  };
  const newCampaign = ()=>{ setEditId('new'); setView('edit'); };
  const backToList = ()=>{ setView('list'); setEditId(null); setTab('campanias'); };

  // vistas de pantalla completa (editor / detalle) — sin las solapas
  if (view==='edit') return <CampaignEditor campId={editId} notify={notify} onDone={backToList} />;
  if (view==='detail') return <SentCampaignView campId={editId} notify={notify} onDone={backToList}
    onDuplicated={(id)=>{ setEditId(id); setView('edit'); }} />;

  // vista de lista con solapas
  return (
    <div className="wrap">
      <div className="cmp-head">
        <div>
          <div className="page-kick">Emails</div>
          <h1 className="page-title" style={{marginTop:'8px'}}>Campañas</h1>
          <div className="cmp-sub">Enviá correos a tu base de contactos por etiqueta. Pegás el HTML, probás y enviás.</div>
        </div>
      </div>

      <div className="cmp-tabs">
        <button className={`cmp-tab${tab==='campanias'?' on':''}`} onClick={()=>setTab('campanias')}>
          <Icon name="send" />Campañas {counts.camp!=null && <span className="cmp-tab-count">{counts.camp}</span>}
        </button>
        <button className={`cmp-tab${tab==='contactos'?' on':''}`} onClick={()=>setTab('contactos')}>
          <Icon name="courses" />Contactos {counts.cont!=null && <span className="cmp-tab-count">{counts.cont.toLocaleString('es-AR')}</span>}
        </button>
      </div>

      {tab==='campanias'
        ? <CampaignsList notify={notify} onNew={newCampaign} onOpen={openCampaign} />
        : <ContactsView notify={notify} />}
    </div>
  );
}

Object.assign(window, { CampaignsModule, CampaignsList });