// outreach-composer.jsx — WS3: pain-personalized draft composer across 4 channels + rubric coach.
const { useState: useStateCmp, useMemo: useMemoCmp, useEffect: useEffectCmp } = React;
const RScmp = window.RaiseShell;

function CopyBtn({ text, label }){
  const [done, setDone] = useStateCmp(false);
  const copy = ()=>{ try{ navigator.clipboard.writeText(text); }catch(e){} setDone(true); RScmp.toast('Copied to clipboard'); setTimeout(()=>setDone(false),1400); };
  return <button className="btn sm" onClick={copy}>{done?'Copied ✓':(label||'Copy')}</button>;
}

// the rough-draft coach (paste-your-own mode)
function CoachMode(){
  const OX = window.OX, R = window.RAISE;
  const marcus = R.contactById('c-marcus');
  const [draft, setDraft] = useStateCmp(OX.ROUGH);
  const [reviewed, setReviewed] = useStateCmp(false);
  const before = OX.scoreDraft(marcus, 0, 'email', draft);
  const fixed = OX.genDraft(marcus, 0, 'email');
  const after = OX.scoreDraft(marcus, 0, 'email', fixed);
  return (
    <div className="composer2">
      <div className="cmp-mid">
        <div className="cmp-channels">
          <span style={{fontSize:12,color:'var(--ink-3)'}}>Paste a draft you wrote → the engine scores it on the 10-point cold-email rubric and rewrites the misses.</span>
        </div>
        <div className="cmp-body scroll">
          <div className="drafthd">
            <div className="dwho"><RScmp.Avatar name="Marcus Webb" /> Marcus Webb · your draft</div>
            <button className="btn primary sm" onClick={()=>setReviewed(true)}>Review against rubric</button>
          </div>
          <div className="draft2">
            <div className="d2sub"><span className="sk">Subject</span>
              <input value={draft.subject} onChange={e=>{ setDraft({...draft,subject:e.target.value}); setReviewed(false); }}
                style={{flex:1,border:'none',background:'none',font:'inherit',fontWeight:600,color:'var(--ink)',outline:'none'}} />
            </div>
            <textarea className="d2body" value={draft.body}
              onChange={e=>{ setDraft({...draft,body:e.target.value,words:e.target.value.trim().split(/\s+/).length}); setReviewed(false); }} />
          </div>

          {reviewed && (
            <>
              <div className="intel-lab" style={{marginTop:18}}>Corrected version <span className="engine-tag">engine · rewrite</span></div>
              <div className="draft2">
                <div className="d2sub"><span className="sk">Subject</span><b>{fixed.subject}</b></div>
                <div className="d2body" style={{whiteSpace:'pre-wrap'}}>{fixed.body}</div>
              </div>
              <div className="draft-actions">
                <button className="btn primary sm" onClick={()=>RScmp.toast('Approved → saved to Gmail Drafts · touch logged')}>Approve → Gmail Drafts</button>
                <button className="btn sm" onClick={()=>RScmp.toast('Opened in Claude — draft live for high-stakes edits')}>Draft live in chat</button>
              </div>
            </>
          )}
        </div>
      </div>
      <div className="cmp-right">
        <div className="pane-hd">Rubric score</div>
        <div className="cmp-body scroll">
          {!reviewed
            ? <div className="muted" style={{fontSize:13,lineHeight:1.5}}>Press <b>Review against rubric</b> to score this draft and get a corrected version.</div>
            : <>
                <div className="rubric-score">
                  <b style={{color:before.passed>=7?'var(--green)':'var(--amber)'}}>{before.passed}</b>
                  <span className="of">/ {before.of} before</span>
                  <span className="delta">{after.passed}/{after.of} fixed</span>
                </div>
                <div className="rubric">
                  {before.checks.map((r,i)=>(
                    <div key={i} className={'rline '+(r.ok?'ok':'no')}><span className="rc">{r.ok?'✓':'!'}</span>{r.k}</div>
                  ))}
                </div>
                <div className="coach-note">
                  <b>{before.of - before.passed} misses:</b> {before.checks.filter(c=>!c.ok).map(c=>c.k.toLowerCase()).join(', ')}. The rewrite leads with the commonality, names the pain, and gives two specific call times with a clean out.
                </div>
              </>}
        </div>
      </div>
    </div>
  );
}

// the generate mode — pain + channel personalization
function GenerateMode(){
  const OX = window.OX, R = window.RAISE;
  const [cid, setCid] = useStateCmp(()=>{
    const f = localStorage.getItem('raiseos.outreach.composeFor');
    if(f){ localStorage.removeItem('raiseos.outreach.composeFor'); if(R.contactById(f)) return f; }
    return 'c-marcus';
  });
  const [painIdx, setPainIdx] = useStateCmp(0);
  const [channel, setChannel] = useStateCmp(()=>{
    const ch = localStorage.getItem('raiseos.outreach.composeChannel');
    if(ch){ localStorage.removeItem('raiseos.outreach.composeChannel'); if(OX.CHANNELS[ch]) return ch; }
    return 'email';
  });
  const [showZh, setShowZh] = useStateCmp(false);
  const [secPick, setSecPick] = useStateCmp({});
  const c = R.contactById(cid);
  const pains = OX.painsFor(c);
  const common = OX.commonalityFor(c);
  const angle = OX.angleFor(c);
  const chMeta = OX.ch(channel);
  // structured email spec (labeled sections); reset variant picks when contact/pain change
  const spec = useMemoCmp(()=>OX.genSections(c, painIdx), [cid, painIdx]);
  useEffectCmp(()=>{ setSecPick({}); }, [cid, painIdx]);
  const pick = (k)=> (secPick[k]||0);
  const emailBody = 'Hi '+OX.firstName(c.name)+',\n\n'
    + spec.sections.map(s=> s.variants[pick(s.key)%s.variants.length]).join('\n\n')
    + '\n\n'+spec.signoff;
  const emailSubject = spec.subject[pick('_subj')%spec.subject.length];
  const emailDraft = { subject:emailSubject, body:emailBody, words:emailBody.trim().split(/\s+/).length };
  const otherDraft = useMemoCmp(()=>OX.genDraft(c, painIdx, channel), [cid, painIdx, channel]);
  const draft = channel==='email' ? emailDraft : otherDraft;
  const score = OX.scoreDraft(c, painIdx, channel, draft);
  const tone = OX.toneFlag(draft.body);
  const regen = (k)=> setSecPick(p=>({ ...p, [k]:(p[k]||0)+1 }));

  return (
    <div className="composer2">
      {/* LEFT — contact + pain personalization */}
      <div className="cmp-left">
        <div className="pane-hd">Personalize</div>
        <div className="cmp-body scroll">
          <RScmp.PersonCombo value={cid} onChange={(id)=>{ setCid(id); setPainIdx(0); }} allowSelf={false} />

          <div className="intel-lab">Commonality <span className="engine-tag">engine</span></div>
          <div className="commonbox">{common}</div>

          <div className="intel-lab">Pain point to lead with</div>
          <div className="pain-hint" style={{marginBottom:9}}>Pick the pain — the draft regenerates around it.</div>
          {pains.map((p,i)=>(
            <button key={i} className={'painopt'+(painIdx===i?' on':'')} onClick={()=>setPainIdx(i)}>
              <span className="pradio" />
              <span className="ptxt">{p}</span>
            </button>
          ))}

          <div className="intel-lab">Suggested angle <span className="engine-tag">engine</span></div>
          <div className="angle-card">{angle}</div>
        </div>
      </div>

      {/* MID — channel + draft */}
      <div className="cmp-mid">
        <div className="cmp-channels">
          {OX.CH_ORDER.map(c2=>{
            const m = OX.ch(c2); const on = channel===c2;
            return (
              <button key={c2} className={'cmp-chtab'+(on?' on':'')} onClick={()=>{ setChannel(c2); setShowZh(false); }}
                style={on?{ background:m.color, borderColor:m.color }:{}}>
                <span className="gx" style={{ background:on?'rgba(255,255,255,.25)':m.color }}>{m.glyph}</span>{m.label}
              </button>
            );
          })}
        </div>
        <div className="cmp-body scroll">
          <div className="drafthd">
            <div className="dwho"><RScmp.Avatar name={c.name} anchor={c.anchor} /> {c.name} · {chMeta.label}</div>
            <span className="chip ready" style={{textTransform:'none'}}>{draft.words} words</span>
          </div>

          {channel==='email' ? (
            <>
              <div className={'tone-flag'+(tone.length===0?' clean':'')}>
                <span className="tf-ic">{tone.length===0?'✓':'!'}</span>
                {tone.length===0
                  ? <span>Tone reads education-first and institutional — no hard-sell flags.</span>
                  : <span>Reads a little pushy: <b>{tone.join(', ')}</b>. Soften before sending.</span>}
              </div>
              <div className="dc-subject">
                <span className="dc-lab">Subject</span>
                <input value={emailSubject} readOnly />
                <button className="dc-regen" onClick={()=>regen('_subj')}>↻</button>
              </div>
              {spec.sections.map(s=>(
                <div key={s.key} className="dc-section">
                  <div className="dc-sec-hd">
                    <span className="dc-lab">{s.label}</span>
                    <span className="dc-rub">· {s.rubric}</span>
                    <div className="dc-tools"><button className="dc-regen" onClick={()=>regen(s.key)}>↻ Regenerate</button></div>
                  </div>
                  <textarea className="dc-sec-body" key={s.key+pick(s.key)} defaultValue={s.variants[pick(s.key)%s.variants.length]} rows={s.key==='value'||s.key==='pain'?2:1} />
                </div>
              ))}
              <div style={{fontSize:13,color:'var(--ink-2)',padding:'2px 2px 0'}}>— {spec.signoff}</div>
              <div className="draft-actions">
                <button className="btn primary sm" onClick={()=>RScmp.toast('Saved to Gmail Drafts · touch logged on '+c.name)}>Approve → Gmail Drafts</button>
                <button className="btn sm" onClick={()=>RScmp.toast('Queued to Claude — fresh full draft coming back')}>Regenerate all</button>
              </div>
            </>
          ) : (
            <>
              <div className="draft2">
                {channel==='call' && <div className="d2sub"><span className="sk">Talk track</span><b>Live call — not a draft</b></div>}
                <textarea className="d2body" key={cid+painIdx+channel} defaultValue={draft.body} />
              </div>

              {channel==='photo' && (
                <div className="photoslot">
                  <div className="pi">▦</div>
                  <div className="pl"><b>Attach:</b> {draft.attach}</div>
                </div>
              )}

              {channel==='wechat' && (
                <div className="zhpanel">
                  <div className="zhh"><span>WeChat · 中文</span><span className="zt">translation — Austin finalizes</span></div>
                  {showZh
                    ? <div className="zhbody">{draft.zh}</div>
                    : <div className="zh-cta"><span>Draft is in English. Queue a 中文 version for WeChat.</span></div>}
                  <div style={{display:'flex',gap:8,padding:'0 12px 12px'}}>
                    <button className="btn sm" onClick={()=>{ setShowZh(true); RScmp.toast('Queued 中文 translation → Claude'); }}>{showZh?'Re-translate 中文':'Translate to 中文 →'}</button>
                    {showZh && <CopyBtn text={draft.zh} label="Copy 中文" />}
                  </div>
                </div>
              )}

              <div className="draft-actions">
                {channel==='call'
                  ? <button className="btn primary sm" onClick={()=>RScmp.toast('Call queued in Today’s Focus')}>Queue call in Today</button>
                  : <CopyBtn text={draft.body} label={'Copy → '+chMeta.short} />}
                <button className="btn sm" onClick={()=>RScmp.toast('Queued to Claude — fresh take coming back to drafts')}>Regenerate via engine</button>
              </div>
            </>
          )}
          <div className="deliver-note"><span style={{color:chMeta.color}}>●</span> Delivery: {chMeta.deliver}. {chMeta.manual? 'Manual send by Austin — AI never sends.' : 'Lands in Gmail Drafts; you press send.'}</div>
        </div>
      </div>

      {/* RIGHT — rubric */}
      <div className="cmp-right">
        <div className="pane-hd">Rubric check</div>
        <div className="cmp-body scroll">
          <div className="rubric-score">
            <b style={{color:score.passed>=8?'var(--green)':'var(--amber)'}}>{score.passed}</b>
            <span className="of">/ {score.of}</span>
            {score.passed===score.of && <span className="delta">rubric-clean</span>}
          </div>
          <div className="rubric">
            {score.checks.map((r,i)=>(
              <div key={i} className={'rline '+(r.ok?'ok':'no')}><span className="rc">{r.ok?'✓':'!'}</span>{r.k}</div>
            ))}
          </div>
          <div className="engine-queue">
            <span className="eq-dot" />
            <span>Generated on Austin’s Claude subscription from {c.name}’s intel — no API. Edit inline; the rubric re-checks on review.</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function OXComposer(){
  const [mode, setMode] = useStateCmp('generate');
  return (
    <>
      <div style={{display:'flex',alignItems:'center',gap:12,padding:'12px 22px',borderBottom:'1px solid var(--border)'}}>
        <div className="mode-seg">
          <button className={mode==='generate'?'on':''} onClick={()=>setMode('generate')}>Generate</button>
          <button className={mode==='coach'?'on':''} onClick={()=>setMode('coach')}>Coach my draft</button>
        </div>
        <span style={{fontSize:12,color:'var(--ink-3)'}}>
          {mode==='generate' ? 'Pick the pain + channel — the engine writes a rubric-clean touch.' : 'Score a draft you wrote and get a corrected version.'}
        </span>
      </div>
      {mode==='generate' ? <GenerateMode /> : <CoachMode />}
    </>
  );
}

window.OXComposer = OXComposer;