// outreach-queue.jsx — the single "Today's outreach" queue.
// Messages are editable + persisted: edit a draft, insert a saved script,
// add your own custom touch, or remove one from today. All survives reload.
const { useState: useStateQ, useEffect: useEffectQ } = React;
const RSq = window.RaiseShell;

const DONE_LS = 'raiseos.outreach.done.v1';
function loadDone(){ try{ return JSON.parse(localStorage.getItem(DONE_LS)) || []; }catch(e){ return []; } }
function saveDone(v){ try{ localStorage.setItem(DONE_LS, JSON.stringify(v)); }catch(e){} }

function ChTagQ({ id }){ const B=window.OXBits; return B ? <B.ChTag id={id} /> : null; }

// one expandable person in the queue
function QueueRow({ item, open, onToggle, onDone, onRemove }){
  const OX = window.OX, R = window.RAISE;
  const c = R.contactById(item.pid);
  const pains = c ? OX.painsFor(c) : [];
  const [painIdx, setPainIdx] = useStateQ(0);
  const [channel, setChannel] = useStateQ(item.ch);
  const [showZh, setShowZh] = useStateQ(false);
  const [picking, setPicking] = useStateQ(false);
  const gen = OX.genDraft(c, painIdx, channel);
  const ov0 = OX.Store.todayDraft(item.pid, channel);
  const [subject, setSubject] = useStateQ(ov0 ? ov0.subject : gen.subject);
  const [body, setBody] = useStateQ(ov0 ? ov0.body : gen.body);
  const [edited, setEdited] = useStateQ(!!ov0);
  const chMeta = OX.ch(channel);
  const statusCls = item.custom?'custom':item.status==='over'?'over':item.status==='quiet'?'quiet':item.status==='ready'?'ready':'sched';

  // reseed when channel / pain changes (keep any saved override for that channel)
  useEffectQ(()=>{
    const o = OX.Store.todayDraft(item.pid, channel);
    const g = OX.genDraft(c, painIdx, channel);
    setSubject(o ? o.subject : g.subject);
    setBody(o ? o.body : g.body);
    setEdited(!!o);
  }, [channel, painIdx]);

  const persist = (s,b)=>{ OX.Store.setTodayDraft(item.pid, channel, { subject:s, body:b }); setEdited(true); };
  const insert = (s)=>{ const t = OX.scriptText(s, c); const nb = (body?body+'\n\n':'') + t; setBody(nb); persist(subject, nb); RSq.toast('Inserted “'+s.name+'”'); };
  const reset = ()=>{ OX.Store.clearTodayDraft(item.pid, channel); const g=OX.genDraft(c,painIdx,channel); setSubject(g.subject); setBody(g.body); setEdited(false); RSq.toast('Reset to engine draft'); };

  const send = ()=>{
    const msg = channel==='email' ? `Saved to Gmail Drafts · ${c.name} marked contacted`
      : channel==='call' ? `Call logged · ${c.name} marked contacted`
      : `Copied · ${c.name} marked contacted`;
    onDone(item, msg);
  };

  return (
    <div className={'oq-row '+statusCls+(open?' open':'')}>
      <button className="oq-head2" onClick={onToggle}>
        <RSq.Avatar name={c.name} anchor={c.anchor} />
        <div className="oq-who">
          <div className="oq-nm">{c.name} <span className="oq-firm">· {c.firm}</span></div>
          <div className="oq-why"><ChTagQ id={item.ch} /> {item.stepLabel}{edited && <span className="oq-edited">· edited</span>}</div>
        </div>
        <span className={'oq-stat '+statusCls}>{item.statusLabel}</span>
        <span className="oq-rm" title="Remove from today" onClick={e=>{ e.stopPropagation(); onRemove(item); }}>✕</span>
        <span className="oq-chev">{open?'▾':'▸'}</span>
      </button>

      {open && (
        <div className="oq-body">
          {pains.length>1 && (
            <div className="oq-pains">
              <span className="oq-pl">Leads with:</span>
              {pains.map((p,i)=>(
                <button key={i} className={'oq-painchip'+(painIdx===i?' on':'')} onClick={()=>setPainIdx(i)}>{p}</button>
              ))}
            </div>
          )}

          <div className="oq-draft">
            {channel==='email' && (
              <div className="oq-subj"><span className="k">Subject</span>
                <input value={subject||''} onChange={e=>setSubject(e.target.value)} onBlur={e=>persist(e.target.value, body)}
                  style={{flex:1,border:'none',background:'none',font:'inherit',fontWeight:600,color:'var(--ink)',outline:'none'}} />
              </div>
            )}
            {channel==='call' && <div className="oq-subj"><span className="k">Talk track</span><b>Live call — not an email</b></div>}
            <textarea className="oq-text" value={body||''} onChange={e=>setBody(e.target.value)} onBlur={e=>persist(subject, e.target.value)} />
            {channel==='photo' && <div className="oq-attach">▦ Attach: {gen.attach}</div>}
            {channel==='wechat' && (
              <div className="oq-zh">
                <span className="k">中文</span>
                {showZh ? <span className="zhtxt">{gen.zh}</span>
                  : <button className="linkbtn" onClick={()=>{ setShowZh(true); RSq.toast('Queued 中文 → Claude'); }}>Translate to 中文 →</button>}
              </div>
            )}
            <div className="oq-edittools">
              <div className="chpick-wrap">
                <button className="oq-etbtn" onClick={()=>setPicking(true)}>⤵ Insert script</button>
                {picking && <window.OXScriptPicker onPick={insert} onClose={()=>setPicking(false)} title="Insert a saved script" />}
              </div>
              {edited && <button className="oq-etbtn" onClick={reset}>↻ Reset to engine draft</button>}
              <span className="oq-savednote">{edited ? 'Saved — your edits persist' : 'Edits save automatically'}</span>
            </div>
          </div>

          <div className="oq-actions">
            <button className="btn primary sm" onClick={send}>
              {channel==='email' ? 'Send → Gmail Drafts' : channel==='call' ? 'Log the call' : 'Copy → '+chMeta.short+' & mark sent'}
            </button>
            <div className="oq-ch">
              <span className="oq-chlbl">Channel</span>
              {OX.CH_ORDER.map(cid=>{
                const m=OX.ch(cid), on=channel===cid;
                return <button key={cid} className={'oq-chbtn'+(on?' on':'')} title={m.label} onClick={()=>{ setChannel(cid); setShowZh(false); }}
                  style={on?{background:m.color,borderColor:m.color,color:'#fff'}:{}}><span className="gx" style={{background:on?'rgba(255,255,255,.25)':m.color}}>{m.glyph}</span></button>;
              })}
            </div>
            <button className="btn ghost sm" onClick={()=>onDone(item, c.name+' skipped for today')}>Skip</button>
          </div>
          <div className="oq-deliver">{chMeta.manual ? 'Manual send — AI never sends. ' : 'Lands in Gmail Drafts; you press send. '}Written from {c.name}’s intel on your Claude subscription.</div>
        </div>
      )}
    </div>
  );
}

// ── add a custom message to today ─────────────────────────────────
function AddTodayMsg({ onClose }){
  const OX = window.OX, R = window.RAISE;
  const [cid, setCid] = useStateQ(R.contacts.find(c=>c.stage==='outreach')?.id || R.contacts[0].id);
  const [ch, setCh] = useStateQ('email');
  const [label, setLabel] = useStateQ('');
  const c = R.contactById(cid);
  const add = ()=>{
    const g = OX.genDraft(c, 0, ch);
    OX.Store.addTodayMsg({ pid:cid, ch, label: label.trim() || 'Custom touch' });
    OX.Store.setTodayDraft(cid, ch, { subject:g.subject, body:g.body });
    RSq.toast('Added '+c.name+' to today');
    onClose();
  };
  return (
    <div className="note-overlay" onClick={onClose}>
      <div className="enr-modal" style={{width:'min(440px,100%)'}} onClick={e=>e.stopPropagation()}>
        <div className="enr-modal-hd">
          <div style={{flex:1}}><div className="em-t">Add a message to today</div><div className="em-s">Pick who and how — starts from an engine draft you can edit.</div></div>
          <button className="sheet-x" onClick={onClose}>✕</button>
        </div>
        <div className="enr-modal-body scroll">
          <div className="intel-lab" style={{marginTop:0}}>Contact</div>
          <RSq.PersonCombo value={cid} onChange={setCid} allowSelf={false} />
          <div className="intel-lab">Channel</div>
          <div className="oq-ch" style={{flexWrap:'wrap'}}>
            {OX.CH_ORDER.map(cid2=>{ const m=OX.ch(cid2), on=ch===cid2;
              return <button key={cid2} className={'oq-chbtn'+(on?' on':'')} title={m.label} onClick={()=>setCh(cid2)}
                style={on?{background:m.color,borderColor:m.color,color:'#fff',width:'auto',padding:'0 10px'}:{width:'auto',padding:'0 10px'}}>
                <span className="gx" style={{background:on?'rgba(255,255,255,.25)':m.color}}>{m.glyph}</span><span style={{marginLeft:6,fontSize:12}}>{m.short}</span></button>;
            })}
          </div>
          <div className="intel-lab">Note <span style={{fontWeight:400,textTransform:'none',letterSpacing:0,color:'var(--ink-3)'}}>(optional)</span></div>
          <input className="vde-inp" value={label} onChange={e=>setLabel(e.target.value)} placeholder="e.g. Re-surface with new signal" />
        </div>
        <div className="enr-modal-foot">
          <button className="btn sm" style={{marginLeft:'auto'}} onClick={onClose}>Cancel</button>
          <button className="btn primary sm" onClick={add}>Add to today</button>
        </div>
      </div>
    </div>
  );
}

function OXQueue(){
  const OX = window.OX, R = window.RAISE, S = OX.Store;
  const [,bump] = useStateQ(0);
  useEffectQ(()=> S.subscribe(()=>bump(x=>x+1)), []);
  const [done, setDone] = useStateQ(loadDone);
  const [adding, setAdding] = useStateQ(false);

  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, name:c?c.name:'Contact', anchor:c&&c.anchor, firm:c?c.firm:'', ch:x.ch,
      stepLabel:x.label||'Custom touch', status:'ready', statusLabel:'custom', goal:'Get on a call',
      stepNum:1, stepTotal:1, seqId:'—', seqName:'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 [open, setOpen] = useStateQ(()=> all.find(d=> d.custom || !loadDone().includes(d.pid))?.pid || null);
  const [showDone, setShowDone] = useStateQ(false);

  const total = all.length;
  const overdue = queue.filter(d=>d.status==='over'||d.status==='quiet').length;
  const completed = total - queue.length;

  const advance = (item)=>{ const next = queue.find(d=>d.pid!==item.pid); setOpen(next ? next.pid : null); };
  const markDone = (item, msg)=>{
    if(item.custom){ S.removeTodayExtra(item.extraId); S.clearTodayDraft(item.pid, item.ch); }
    else { const nd=[...done, item.pid]; setDone(nd); saveDone(nd); }
    RSq.celebrate(window.innerWidth/2, 90, false);
    RSq.toast(msg);
    advance(item);
  };
  const removeItem = (item)=>{
    if(item.custom){ S.removeTodayExtra(item.extraId); S.clearTodayDraft(item.pid, item.ch); }
    else { S.removeToday(item.pid); }
    RSq.toast('Removed from today');
    advance(item);
  };
  const undo = (pid)=>{ const nd = done.filter(x=>x!==pid); setDone(nd); saveDone(nd); };
  const resetDay = ()=>{ setDone([]); saveDone([]); S.restoreToday(); setOpen(all[0]?.pid||null); RSq.toast('Queue reset'); };

  return (
    <div className="oq scroll">
      <div className="oq-wrap">
        <div className="oq-top">
          <div>
            <h2 className="oq-title">Today’s outreach</h2>
            <div className="oq-sub">{queue.length} to send · {overdue} overdue or quiet · {completed} done</div>
          </div>
          <div style={{display:'flex',gap:10,alignItems:'center'}}>
            <button className="btn primary sm" onClick={()=>setAdding(true)}>＋ Add a message</button>
            {(completed>0 || removed.length>0) && <button className="linkbtn" onClick={resetDay}>Reset day</button>}
          </div>
        </div>
        <div className="oq-progress"><i style={{width:(total? completed/total*100:0)+'%'}} /></div>

        {queue.length===0
          ? <div className="oq-empty"><div className="oq-empty-ic">✓</div><div className="oq-empty-t">All caught up</div><div className="oq-empty-s">{completed} {completed===1?'person':'people'} contacted today. Drafts are in Gmail; sequences advance automatically.</div></div>
          : <div className="oq-list">
              {queue.map(item=>(
                <QueueRow key={item.id||item.pid} item={item} open={open===item.pid}
                  onToggle={()=>setOpen(open===item.pid?null:item.pid)} onDone={markDone} onRemove={removeItem} />
              ))}
            </div>}

        {doneItems.length>0 && (
          <div className="oq-donewrap">
            <button className="oq-donehd" onClick={()=>setShowDone(s=>!s)}>
              <span>Done today · {doneItems.length}</span><span>{showDone?'▾':'▸'}</span>
            </button>
            {showDone && doneItems.map(d=>{
              const c=R.contactById(d.pid);
              return (
                <div key={d.pid} className="oq-donerow">
                  <RSq.Avatar name={c.name} anchor={c.anchor} />
                  <div className="oq-who"><div className="oq-nm" style={{textDecoration:'line-through',color:'var(--ink-3)'}}>{c.name}</div><div className="oq-why">{d.stepLabel}</div></div>
                  <button className="linkbtn" onClick={()=>undo(d.pid)}>Undo</button>
                </div>
              );
            })}
          </div>
        )}

        <div className="oq-foot">
          The schedule behind this lives in <button className="linkbtn" onClick={()=>window.__oxSetView&&window.__oxSetView('seq')}>Sequences</button>; saved call &amp; objection scripts are in <button className="linkbtn" onClick={()=>window.__oxSetView&&window.__oxSetView('scripts')}>Scripts</button>.
        </div>
      </div>
      {adding && <AddTodayMsg onClose={()=>setAdding(false)} />}
    </div>
  );
}

window.OXQueue = OXQueue;
window.OXAddToday = AddTodayMsg;