// outreach-console.jsx — Today's Outreach as a split-view console.
// LEFT: the prioritized queue (select a person). RIGHT: the full email composer
// for whoever's selected, plus the Outbox. Send → marks done + advances. One screen.
const { useState: useStateCo, useEffect: useEffectCo, useMemo: useMemoCo } = React;
const RSco = window.RaiseShell;

const CO_DONE_LS = 'raiseos.outreach.done.v1';   // shared with the legacy queue
function coLoadDone(){ try{ return JSON.parse(localStorage.getItem(CO_DONE_LS)) || []; }catch(e){ return []; } }
function coSaveDone(v){ try{ localStorage.setItem(CO_DONE_LS, JSON.stringify(v)); }catch(e){} }
function CoChTag({ id }){ const B=window.OXBits; return B ? <B.ChTag id={id} /> : null; }

// one compact, selectable person row in the left rail
function ConsoleRow({ item, active, onSelect, onRemove }){
  const R = window.RAISE;
  const c = R.contactById(item.pid);
  const statusCls = item.custom?'custom':item.status==='over'?'over':item.status==='quiet'?'quiet':item.status==='ready'?'ready':'sched';
  return (
    <button className={'cons-row '+statusCls+(active?' sel':'')} onClick={()=>onSelect(item.pid)}>
      <RSco.Avatar name={c.name} anchor={c.anchor} />
      <div className="cons-who">
        <div className="cons-nm">{c.name} <span className="cons-firm">· {c.firm}</span></div>
        <div className="cons-why"><CoChTag id={item.ch} /> <span className="cons-step">{item.stepLabel}</span></div>
      </div>
      <span className={'cons-stat '+statusCls}>{item.statusLabel}</span>
      <span className="cons-rm" title="Remove from today" onClick={e=>{ e.stopPropagation(); onRemove(item); }}>✕</span>
    </button>
  );
}

function OXConsole(){
  const OX = window.OX, R = window.RAISE, S = OX.Store;
  const [,bump] = useStateCo(0);
  useEffectCo(()=> S.subscribe(()=>bump(x=>x+1)), []);
  const [done, setDone] = useStateCo(coLoadDone);
  const [adding, setAdding] = useStateCo(false);
  const [painIdx, setPainIdx] = useStateCo(0);

  // ── build today's queue (same model as the legacy queue) ──
  const removed = S.todayRemoved();
  const extras = S.todayExtra();
  const extraItems = extras.map(x=>{ const c=R.contactById(x.pid);
    return { id:x.id, extraId:x.id, pid:x.pid, ch:x.ch, stepLabel:x.label||'Custom touch',
      status:'ready', statusLabel:'custom', custom:true }; });
  const live = OX.liveSteps().filter(d=>!removed.includes(d.pid));
  const all = [...extraItems, ...live];
  const queue = all.filter(d=> d.custom || !done.includes(d.pid));
  const doneItems = live.filter(d=>done.includes(d.pid));

  const [selected, setSelected] = useStateCo(()=> queue[0]?.pid || null);
  // keep selection valid as the queue changes; reset pain on contact change
  useEffectCo(()=>{
    if(!selected || !queue.some(d=>d.pid===selected)) setSelected(queue[0]?.pid || null);
  }, [queue.map(d=>d.pid).join(',')]);
  useEffectCo(()=>{ setPainIdx(0); }, [selected]);

  const total = all.length;
  const completed = total - queue.length;
  const overdue = queue.filter(d=>d.status==='over'||d.status==='quiet').length;
  const selItem = queue.find(d=>d.pid===selected);
  const selContact = selected ? R.contactById(selected) : null;
  const outbox = S.outbox();

  const selectNext = (fromPid)=>{ const rest = queue.filter(d=>d.pid!==fromPid); setSelected(rest[0]?.pid || null); };
  const markDone = (item)=>{
    if(item.custom){ S.removeTodayExtra(item.extraId); S.clearTodayDraft(item.pid, item.ch); }
    else { const nd=[...done, item.pid]; setDone(nd); coSaveDone(nd); }
    selectNext(item.pid);
  };
  const removeItem = (item)=>{
    if(item.custom){ S.removeTodayExtra(item.extraId); S.clearTodayDraft(item.pid, item.ch); }
    else { S.removeToday(item.pid); }
    RSco.toast('Removed from today');
    if(item.pid===selected) selectNext(item.pid);
  };
  const undo = (pid)=>{ const nd = done.filter(x=>x!==pid); setDone(nd); coSaveDone(nd); };
  const resetDay = ()=>{ setDone([]); coSaveDone([]); S.restoreToday(); setSelected(all[0]?.pid||null); RSco.toast('Queue reset'); };

  // composer's onSent → mark this person handled for today, jump to next
  const onSent = (action)=>{ if((action==='sent'||action==='scheduled') && selItem) markDone(selItem); };

  return (
    <div className="console">
      {/* LEFT — the queue */}
      <div className="cons-queue">
        <div className="cons-qhd">
          <div className="cons-qtop">
            <h2 className="cons-qtitle">Today’s outreach</h2>
            <button className="btn primary sm" onClick={()=>setAdding(true)}>＋ Add</button>
          </div>
          <div className="cons-qsub">{queue.length} to send · {overdue} overdue or quiet · {completed} done
            {(completed>0 || removed.length>0) && <> · <button className="linkbtn" onClick={resetDay}>Reset</button></>}
          </div>
          <div className="cons-progress"><i style={{width:(total? completed/total*100:0)+'%'}} /></div>
        </div>

        <div className="cons-list scroll">
          {queue.length===0
            ? <div className="cons-empty"><div className="cons-empty-ic">✓</div><div className="cons-empty-t">All caught up</div><div className="cons-empty-s">{completed} contacted today. Drafts are in the Outbox; sequences advance automatically.</div></div>
            : queue.map(item=>(
                <ConsoleRow key={item.id||item.pid} item={item} active={selected===item.pid}
                  onSelect={setSelected} onRemove={removeItem} />
              ))}

          {doneItems.length>0 && (
            <div className="cons-donewrap">
              <div className="cons-donehd">Done today · {doneItems.length}</div>
              {doneItems.map(d=>{ const c=R.contactById(d.pid);
                return (
                  <div key={d.pid} className="cons-donerow">
                    <RSco.Avatar name={c.name} anchor={c.anchor} />
                    <div className="cons-who"><div className="cons-nm" style={{textDecoration:'line-through',color:'var(--ink-3)'}}>{c.name}</div></div>
                    <button className="linkbtn" onClick={()=>undo(d.pid)}>Undo</button>
                  </div>
                );
              })}
            </div>
          )}

          <div className="cons-foot">
            Schedule lives in <button className="linkbtn" onClick={()=>window.__oxSetView&&window.__oxSetView('seq')}>Sequences</button> · scripts in <button className="linkbtn" onClick={()=>window.__oxSetView&&window.__oxSetView('scripts')}>Scripts</button>.
          </div>
        </div>
      </div>

      {/* RIGHT — composer */}
      <div className="cons-right">
        {selContact
          ? <div className="cons-compose scroll">
              <window.OXComposePane cid={selected} lockContact
                painIdx={painIdx} setPainIdx={setPainIdx}
                queueCtx={{ stepLabel: selItem && selItem.stepLabel, channel: selItem && selItem.ch }}
                onSent={onSent} />
            </div>
          : <div className="cons-rightempty">
              <div className="cons-empty-ic">✓</div>
              <div className="cons-empty-t">Inbox zero for outreach</div>
              <div className="cons-empty-s">Nobody left in today’s queue. Add someone, or check Email › Outbox for what’s gone out.</div>
              <button className="btn primary sm" style={{marginTop:14}} onClick={()=>setAdding(true)}>＋ Add a message</button>
            </div>}
      </div>

      {adding && <window.OXAddToday onClose={()=>setAdding(false)} />}
    </div>
  );
}

window.OXConsole = OXConsole;