// casedetail.jsx — 案件詳情：來信 / 風控 / 意願文件 / 報價信

const TABS = [
  { id:'mail',   n:'1', label:'來信內容' },
  { id:'risk',   n:'2', label:'風控評估' },
  { id:'intent', n:'3', label:'合作意願文件' },
  { id:'quote',  n:'4', label:'報價信' },
  { id:'io',     n:'5', label:'委刊單', grp:'deal' },
  { id:'comm',   n:'6', label:'溝通表', grp:'deal' },
  { id:'prod',   n:'7', label:'製作排程', grp:'deal' },
];

/* ---------------- 1 · 來信內容 ---------------- */
function MailTab({ c, onUpdate, onNext, toast }){
  const { Tag, Pill } = window;
  const wantsStr = (c.wants||[]).join('\u3001');
  const setWants = (str)=> onUpdate({ wants: str.split(/[\u3001,\n]/).map(s=>s.trim()).filter(Boolean) });
  return (
    <div className="tabwrap">
      <div className="tabbody">
        <div style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:16 }}>
          <div className="card" style={{ padding:0, overflow:'hidden' }}>
            <div className="mailhead">
              <span className="faint mono" style={{ fontSize:10 }}>寄件人</span>
              <span style={{ fontSize:12.5, fontWeight:600 }}>{c.contact}（{c.vendor}）</span>
              <span className="faint mono" style={{ fontSize:10, marginLeft:'auto' }}>{c.received}</span>
            </div>
            <div className="mailhead" style={{ borderTop:'none' }}>
              <span className="faint mono" style={{ fontSize:10 }}>主旨</span>
              <span style={{ fontSize:12.5 }}>{c.product} 合作邀請</span>
            </div>
            <div className="mailbody">{c.email}</div>
          </div>
          <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
            <div className="card" style={{ padding:'15px 16px' }}>
              <div className="sectlbl">來信解析</div>
              <ERow k="廠商" v={c.vendor} onChange={v=>onUpdate({vendor:v})} />
              <ERow k="窗口" v={c.contact} onChange={v=>onUpdate({contact:v})} />
              <ERow k="職稱" v={c.contactRole} onChange={v=>onUpdate({contactRole:v})} />
              <ERow k="產品" v={c.product} onChange={v=>onUpdate({product:v})} />
              <ERow k="預算提示" v={c.budgetHint} onChange={v=>onUpdate({budgetHint:v})} />
              <div style={{ marginTop:9 }}>
                <div className="faint" style={{ fontSize:10, marginBottom:5 }}>需求項目（以、或逗號分隔）</div>
                <input className="erowinp" style={{width:'100%'}} value={wantsStr} onChange={e=>setWants(e.target.value)} placeholder="例：IG Reels 一則、IG 限動一則" />
                <div style={{ display:'flex', gap:6, flexWrap:'wrap', marginTop:8 }}>{c.wants.map((w,i)=><Tag key={i}>{w}</Tag>)}</div>
              </div>
            </div>
            <div className="card" style={{ padding:'15px 16px' }}>
              <div className="sectlbl">產品類別判定</div>
              <div style={{ display:'flex', alignItems:'center', gap:9 }}>
                <select className="selinp" value={c.riskKind} onChange={e=>onUpdate({riskKind:e.target.value})}>
                  {Object.keys(window.RISK_KIND_LABEL).map(k=><option key={k} value={k}>{window.RISK_KIND_LABEL[k]}</option>)}
                </select>
                <span className="faint" style={{ fontSize:11 }}>將套用對應法規條文</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="tabfoot">
        <button className="btn primary" style={{ marginLeft:'auto' }} onClick={onNext}>進入風控評估 →</button>
      </div>
    </div>
  );
}
function Row({ k, v }){
  return <div style={{ display:'flex', gap:10, padding:'4px 0', fontSize:12 }}>
    <span className="faint" style={{ width:60, flex:'none' }}>{k}</span><span>{v}</span>
  </div>;
}
function ERow({ k, v, onChange }){
  return <div style={{ display:'flex', gap:10, padding:'3px 0', fontSize:12, alignItems:'center' }}>
    <span className="faint" style={{ width:60, flex:'none' }}>{k}</span>
    <input className="erowinp" value={v||''} onChange={e=>onChange(e.target.value)} />
  </div>;
}

/* ---------------- 2 · 風控評估 ---------------- */
function RiskTab({ c, onUpdate, onNext, toast }){
  const { Pill } = window;
  const laws = window.LAW_LIB[c.riskKind] || window.LAW_LIB.general;
  const words = window.AVOID_WORDS[c.riskKind] || window.AVOID_WORDS.general;
  const run = async () => {
    onUpdate({ riskStatus:'running' });
    const hasKey = !!(localStorage.getItem('gm_gemini_key')||'').trim();
    const doUpdate = (f, risk) => {
      const newRisk = risk || (c.risk==='mid'?'low':c.risk);
      const newLabel = newRisk==='high'?'需注意':newRisk==='mid'?'待評估':'已審核・低風險';
      onUpdate({ riskStatus:'done', riskFindings:f, risk:newRisk, riskLabel:newLabel,
        stage:(c.stage==='inquiry'||c.stage==='risk')?'intent':c.stage,
        progress:(c.progress==='洽談'||!c.progress)?'意願':c.progress });
    };
    if (!hasKey) {
      setTimeout(()=>{ doUpdate(c.riskFindings||{ pros:['品牌資訊待人工確認'], cons:['注意是否有誇大功效或療效用語','建議查詢是否有裁罰或客訴紀錄'], disputes:[], okAngle:'以生活情境置入為主，避免功效保證。' }); toast('風控完成（⚙ 設定 Gemini API 金鑰可啟用 AI 分析）'); }, 800);
      return;
    }
    try {
      const r = await window.analyzeRiskWithAI(c);
      doUpdate({ pros:r.pros||[], cons:r.cons||[], disputes:r.disputes||[], okAngle:r.okAngle||'' }, r.risk);
      toast('✦ AI 風控審查完成 · 案件移至「意願」');
    } catch(e) {
      onUpdate({ riskStatus:'idle' });
      toast('AI 分析失敗：' + e.message);
    }
  };

  if(c.riskStatus==='idle' || c.riskStatus==='running'){
    const running = c.riskStatus==='running';
    return (
      <div className="tabwrap">
        <div className="tabbody" style={{ display:'grid', placeItems:'center' }}>
          <div style={{ textAlign:'center', maxWidth:420 }}>
            <div className={'risk-orb '+(running?'spin':'')}>§</div>
            <h3 className="serif" style={{ fontSize:18, margin:'14px 0 8px' }}>{running?'審查中…':'尚未執行風控審查'}</h3>
            <p className="muted" style={{ fontSize:12.5, lineHeight:1.7, margin:'0 0 18px' }}>
              {running ? 'Google 查詢產品成分與評價 · 比對法規筆記本 · 整理敏感字眼…'
                : '將以 Google 查詢產品成分、評價與過往爭議，並比對台灣法規（依本案類別套用），條列優劣、爭議事件與文案禁用字眼。'}
            </p>
            {!running && <button className="btn primary" onClick={run}>▶ 執行風控審查</button>}
            {running && <div className="loadbar"><i></i></div>}
          </div>
        </div>
      </div>
    );
  }

  const f = c.riskFindings;
  return (
    <div className="tabwrap">
      <div className="tabbody">
        <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:15 }}>
          <h3 className="serif" style={{ margin:0, fontSize:16, fontWeight:700 }}>產品風控與法規審查</h3>
          <span className="faint mono" style={{ fontSize:10 }}>Google 查詢 · 比對法規庫（{window.RISK_KIND_LABEL[c.riskKind]}）</span>
          <button className="btn ghost" style={{ marginLeft:'auto', height:28, fontSize:11.5 }} onClick={run}>↻ 重新審查</button>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14, marginBottom:14 }}>
          <div className="card" style={{ padding:'15px 16px' }}><Finding tone="pro" title="產品優勢" items={f.pros} /></div>
          <div className="card" style={{ padding:'15px 16px' }}><Finding tone="con" title="疑慮・劣勢" items={f.cons} /></div>
        </div>
        <div className="card rosebox" style={{ padding:'15px 16px', marginBottom:14 }}>
          <div className="boxlbl rose">⚠ 爭議事件 · 法規對照</div>
          {(f.disputes||[]).length===0 && <div className="muted" style={{ fontSize:12, marginBottom:9 }}>未查得重大爭議或裁罰紀錄。</div>}
          {(f.disputes||[]).map((d,i)=>(
            <div key={i} style={{ fontSize:12, color:'var(--rose-ink)', lineHeight:1.5, marginBottom:9 }}>
              <span className="mono" style={{ fontWeight:700 }}>{d.y}　</span>{d.t}
            </div>
          ))}
          <div style={{ display:'flex', flexDirection:'column', gap:7 }}>
            {laws.map((l,i)=>(
              <div key={i} style={{ display:'flex', gap:10, fontSize:11.5, alignItems:'baseline' }}>
                <span className="mono lawcode">{l.code}</span><span className="muted">{l.t}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="card" style={{ padding:'15px 16px' }}>
          <div className="boxlbl">文案應避開的敏感字眼</div>
          <div style={{ display:'flex', gap:7, flexWrap:'wrap', marginBottom:12 }}>
            {words.map((w,i)=><Pill key={i} tone="risk-high" style={{ height:24, textDecoration:'line-through' }}>{w}</Pill>)}
          </div>
          <div className="sagebox"><span style={{ color:'var(--sage-ink)' }}>✓</span>
            <div style={{ fontSize:12, color:'var(--sage-ink)', lineHeight:1.55 }}><b>建議切入角度：</b>{f.okAngle}</div>
          </div>
        </div>
      </div>
      <div className="tabfoot">
        <button className="btn primary" style={{ marginLeft:'auto' }} onClick={()=>{ if(c.stage==='inquiry'||c.stage==='risk'){ onUpdate({ stage:'intent', progress:(c.progress==='洽談'||!c.progress)?'報價':c.progress }); toast('案件移至「意願」'); } onNext(); }}>下一步：產出合作意願文件 →</button>
      </div>
    </div>
  );
}
function Finding({ tone, title, items }){
  const col = tone==='pro'?'var(--sage-ink)':'var(--rose-ink)';
  const mk = tone==='pro'?'＋':'－';
  return (
    <div>
      <div style={{ fontSize:11.5, fontWeight:600, color:col, marginBottom:7 }}>{title}</div>
      <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
        {(items||[]).map((t,i)=>(
          <div key={i} style={{ display:'flex', gap:8, fontSize:12, lineHeight:1.5, color:'var(--ink-2)' }}>
            <span style={{ color:col, flex:'none' }}>{mk}</span><span>{t}</span>
          </div>
        ))}
        {(!items||!items.length) && <span className="faint" style={{ fontSize:11.5 }}>—</span>}
      </div>
    </div>
  );
}

/* ---------------- 3 · 合作意願文件 ---------------- */
const NATURE_OPTS = ['Reels 1 則（40–60 秒）','限時動態 1 則（導連結・免過稿）','META 廣告主授權（1 週）','META 廣告主授權（1 個月）','素材授權'];
function IntentTab({ c, onUpdate, onNext, toast }){
  const it = c.intent;
  const set = (patch)=> onUpdate({ intent:{ ...it, ...patch } });
  const toggle = (opt)=> set({ nature: it.nature.includes(opt) ? it.nature.filter(x=>x!==opt) : [...it.nature, opt] });
  return (
    <div className="tabwrap">
      <div className="tabbody">
        <div style={{ display:'grid', gridTemplateColumns:'minmax(330px,1fr) 1.05fr', gap:18 }}>
          {/* form */}
          <div>
            <div className="sectlbl">編輯欄位</div>
            <Field label="廠商名稱"><input className="inp" value={it.vendor} onChange={e=>set({vendor:e.target.value})} /></Field>
            <Field label="產品名稱"><input className="inp" value={it.product} onChange={e=>set({product:e.target.value})} /></Field>
            <Field label="合作性質">
              <div style={{ display:'flex', flexDirection:'column', gap:7 }}>
                {NATURE_OPTS.map(o=>(
                  <label key={o} className="chk">
                    <input type="checkbox" checked={it.nature.includes(o)} onChange={()=>toggle(o)} />{o}
                  </label>
                ))}
              </div>
            </Field>
            <Field label="預計檔期"><input className="inp" value={it.schedule} placeholder="例：6/25 拍攝 / 7/4 上線" onChange={e=>set({schedule:e.target.value})} /></Field>
            <Field label="商品連結"><input className="inp" value={it.link} onChange={e=>set({link:e.target.value})} /></Field>
            <Field label="參考資料"><textarea className="inp" rows={3} value={it.ref} placeholder="品牌重點、指定素材、NG 事項…" onChange={e=>set({ref:e.target.value})} /></Field>
          </div>
          {/* preview */}
          <div>
            <div className="sectlbl">文件預覽 · 產出圖片送國美確認</div>
            <div className="doc" id={`intentdoc-${c.id}`}>
              <div className="dochead">
                <div className="brandmark"><span className="gm" style={{width:26,height:26}}>果</span>
                  <div style={{lineHeight:1.2}}><div style={{fontWeight:700,fontSize:12}}>合作意願評估單</div>
                  <div className="faint" style={{fontSize:9.5}}>國美ゴメ5cm小人物の日常 · 果米工作室</div></div>
                </div>
                <span className="mono faint" style={{fontSize:9.5}}>{c.id}</span>
              </div>
              <DocRow k="廠商名稱" v={it.vendor} />
              <DocRow k="產品名稱" v={it.product} />
              <DocRow k="合作性質" v={it.nature.length? it.nature.map(n=>'♦ '+n).join('\n') : '—'} pre />
              <DocRow k="預計檔期" v={it.schedule||'—'} />
              <DocRow k="商品連結" v={it.link||'—'} mono />
              <DocRow k="參考資料" v={it.ref||'—'} pre />
              <div className="docnote">＊本單為合作意願評估之用，實際合作意願、檔期與報價以國美最終確認為準。</div>
            </div>
            <IntentConfirm c={c} onUpdate={onUpdate} toast={toast} />
          </div>
        </div>
      </div>
      <div className="tabfoot">
        <button className="btn" onClick={async()=>{ const node=document.getElementById(`intentdoc-${c.id}`); if(node&&window.htmlToImage){ const b=await window.htmlToImage.toBlob(node,{pixelRatio:2,backgroundColor:'#ffffff',skipFonts:true}); const u=URL.createObjectURL(b); const a=document.createElement('a'); a.href=u; a.download=`合作意願評估單_${c.id}.png`; a.click(); URL.revokeObjectURL(u); toast('已下載評估單圖片'); } }}>⎘ 產出圖片</button>
        <button className="btn primary" style={{ marginLeft:'auto' }} onClick={onNext} disabled={c.intentStatus==='declined'}>下一步：撰寫報價信 →</button>
      </div>
    </div>
  );
}
function Field({ label, children }){
  return <div style={{ marginBottom:12 }}>
    <div className="faint" style={{ fontSize:10.5, marginBottom:5 }}>{label}</div>{children}
  </div>;
}
function DocRow({ k, v, pre, mono, warn }){
  return <div className={'docrow'+(warn?' docrow-warn':'')}>
    <div className="dk">{k}</div>
    <div className={'dv'+(mono?' mono':'')} style={{ whiteSpace: pre?'pre-wrap':'normal' }}>{v}</div>
  </div>;
}

/* 國美意願確認流程 */
function IntentConfirm({ c, onUpdate, toast }){
  const st = c.intentStatus || 'draft';
  const [busy, setBusy] = React.useState(false);

  const capture = async ()=>{
    const node = document.getElementById(`intentdoc-${c.id}`);
    if(!node || !window.htmlToImage) return null;
    return await window.htmlToImage.toBlob(node, { pixelRatio:2, backgroundColor:'#ffffff', skipFonts:true });
  };
  const copyImage = async ()=>{
    if(busy) return;
    setBusy(true);
    // 同步發起 clipboard.write（以 Promise 式 ClipboardItem 保留 user-activation）
    try{
      if(navigator.clipboard && window.ClipboardItem){
        try{ window.focus(); }catch(_e){}
        const item = new window.ClipboardItem({ 'image/png': (async()=>{
          const b = await capture();
          if(!b) throw new Error('capture-failed');
          return b;
        })() });
        await navigator.clipboard.write([item]);
        if(st==='draft') onUpdate({ intentStatus:'sent' });
        toast('已複製評估單圖片 · 可貼上 LINE 傳給國美');
        setBusy(false); return;
      }
    }catch(e){ /* 落到下載備案 */ }
    // 備案：自動下載圖片（複製受限時）
    try{
      const blob = await capture();
      if(blob){ downloadBlob(blob); if(st==='draft') onUpdate({ intentStatus:'sent' }); toast('已下載評估單圖片（瀏覽器未允許直接複製）'); }
      else toast('圖片產出失敗，請重試');
    }catch(e){ toast('圖片產出失敗，請重試'); }
    setBusy(false);
  };
  const downloadImage = async ()=>{
    setBusy(true);
    const blob = await capture();
    if(blob){ downloadBlob(blob); toast('已下載評估單圖片'); if(st==='draft') onUpdate({ intentStatus:'sent' }); }
    setBusy(false);
  };
  function downloadBlob(blob){
    const url=URL.createObjectURL(blob); const a=document.createElement('a');
    a.href=url; a.download=`合作意願評估單_${c.id}_${c.vendor}.png`; a.click(); URL.revokeObjectURL(url);
  }
  const accept = ()=> { onUpdate({ intentStatus:'accepted', stage: c.stage==='intent'?'quote':c.stage, progress: (c.progress==='洽談'||c.progress==='意願')?'報價':c.progress }); toast('國美已接受·案件移至「報價」'); };
  const decline = ()=> { onUpdate({ intentStatus:'declined', progress:'婉拒', willing:'婉拒' }); toast('國美婉拒·後續流程已結束'); };
  return (
    <div className="confirmcard">
      <div className="sectlbl" style={{marginBottom:8}}>國美意願確認</div>
      {(st==='draft'||st==='sent') && <>
        <p className="cfnote">將上方評估單<b>產出為圖片</b>，複製後透過官方 LINE <b>@942njuhl</b> 傳給國美本人確認。</p>
        <div className="cfrow">
          <button className="btn primary" onClick={copyImage} disabled={busy}>{busy?'處理中…':'⎘ 產出圖片並複製'}</button>
        </div>
        {st==='sent' && <div className="cfstate sent" style={{marginTop:10}}><span className="pill risk-mid" style={{height:20}}><span className="dot"></span>已送出·待國美回覆</span></div>}
        <p className="cfnote" style={{marginTop:10}}>國美於 LINE 回覆後，請在此登記結果：</p>
        <div className="cfrow">
          <button className="btn primary" onClick={accept}>✓ 國美接受</button>
          <button className="btn" onClick={decline}>✕ 國美婉拒</button>
        </div>
      </>}
      {st==='accepted' && <div className="cfstate ok">
        <span className="pill risk-low" style={{height:22}}><span className="dot"></span>國美已接受</span>
        <span className="cfnote" style={{margin:0}}>可繼續進行報價與委刊。</span>
      </div>}
      {st==='declined' && <div className="cfstate no">
        <span className="pill risk-high" style={{height:22}}><span className="dot"></span>國美婉拒</span>
        <span className="cfnote" style={{margin:0}}>此案已結束，後續流程已關閉。可於「報價信」使用情境二婉拒回覆。</span>
      </div>}
    </div>
  );
}

window.MailTab = MailTab; window.RiskTab = RiskTab; window.IntentTab = IntentTab;
window.DETAIL_TABS = TABS;