// commtab.jsx — 溝通表(Comm) + 製作排程(ProdSchedule)

/* 步驟一：以 mail 詢問廠商需求（待回覆後填寫統整溝通表）*/
function genCommInquiry(c) {
  const S = window.STUDIO || {};
  const avoid = (window.AVOID_WORDS[c.riskKind] || []).join('、');
  const qs = [
  '產品核心賣點（建議 3 點）：',
  '本次主打訴求／活動主題：',
  '期望上線時段：',
  '必提重點／指定台詞（品牌一定要露出的訊息）：',
  'NG 事項／禁用字眼（不可出現的競品或語句）：',
  '參考連結／競品案例：',
  '將提供的素材（品牌 logo、產品圖等）：',
  '是否寄送樣品？若是，收件人／地址／電話：',
  '其他特殊需求（拍攝場景、指定畫面等）：'];

  const qLines = qs.map((q, i) => `${i + 1}. ${q}`).join('\n');
  return {
    subject: `合作內容需求詢問― ${c.vendor} × ${S.creator || '國美'}（${c.product}）`,
    body: `${c.contact} 您好，\n\n我是多多，負責國美的合作洽談。為讓這次合作內容更貼近貴品牌需求，麻煩您協助提供以下資訊，我們收到後會整理成製作 brief 交給國美：\n\n${qLines}\n\n貼心提醒：依法規，以下類型的用語我們會避免使用${avoid ? `（如：${avoid}）` : ''}，若品牌有必要訴求，也請一併告知讓我們評估合規寫法。\n\n期待您的回覆，有任何問題歡迎隨時討論！\n\nBest regards,\n多多\n${S.name || '果米工作室'}　官方 LINE：@942njuhl` };
}

function CField({ label, children, span }) {
  return <div style={{ gridColumn: span ? '1 / -1' : 'auto', marginBottom: 2 }}>
    <div className="faint" style={{ fontSize: 10.5, marginBottom: 5 }}>{label}</div>{children}
  </div>;
}

/* ---------------- 溝通表 ---------------- */
function CommTab({ c, onUpdate, onNext, toast }) {
  const cm = c.comm;
  const set = (patch) => onUpdate({ comm: { ...cm, ...patch } });
  const [showAsk, setShowAsk] = React.useState(false);
  const [showReply, setShowReply] = React.useState(false);
  const [replyText, setReplyText] = React.useState('');
  const [parsing, setParsing] = React.useState(false);
  const handleParseReply = async () => {
    setParsing(true);
    try {
      const r = await window.parseCommReplyWithAI(replyText, c);
      set({ ...r });
      toast('✦ AI 整理完成，請確認欄位內容');
    } catch(e) {
      if(e.message==='no-key'){ toast('請先設定 Gemini API 金鑰'); window.__openAISettings?.(); }
      else toast('AI 整理失敗：'+e.message);
    }
    setParsing(false);
  };
  const inquiry = genCommInquiry(c);
  const copyAsk = () => {window.copyText(inquiry.subject + '\n\n' + inquiry.body, toast, '已複製詢問信到剪貼簿');};
  return (
    <div className="tabwrap">
      <div className="tabbody">
        {!c.io.signed && <div className="warnbar">⚠ 建議於「委刊單」簽署確認合作後再填寫溝通表。</div>}

        {/* 步驟一：以 mail 詢問廠商 */}
        <div className="askbar" style={{ width: '100%', margin: '0 0 16px' }}>
          <div className="askbar-h" onClick={() => setShowAsk((v) => !v)}>
            <span className="stepbadge">1</span>
            <span style={{ fontSize: 14 }}>✉</span>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 700, fontSize: 12.5 }}>以 Email 詢問廠商需求</div>
              <div className="faint" style={{ fontSize: 10.5 }}>先寄這封信詢問廠商資訊，待廠商回覆後再下方填寫統整給國美的溝通表</div>
            </div>
            <span className="linkbtn">{showAsk ? '收合 ⌃' : '展開·取得信件 ⌄'}</span>
          </div>
          {showAsk && <div className="askbody">
            <div className="mailhead" style={{ borderRadius: '8px 8px 0 0' }}>
              <span className="faint mono" style={{ fontSize: 10 }}>主旨</span>
              <span className="ell" style={{ fontSize: 12, fontWeight: 600 }}>{inquiry.subject}</span>
              <button className="btn" style={{ marginLeft: 'auto', height: 28, fontSize: 11.5 }} onClick={copyAsk}>⧉ 複製信件</button>
            </div>
            <textarea className="emailedit" style={{ minHeight: 330, borderRadius: '0 0 8px 8px' }} value={inquiry.body} readOnly />
          </div>}
        </div>

        {/* 步驟 1B：貼上廠商回覆，AI 整理 */}
        <div className="askbar" style={{ width: '100%', margin: '0 0 16px' }}>
          <div className="askbar-h" onClick={()=>setShowReply(v=>!v)}>
            <span className="stepbadge" style={{background:'oklch(0.6 0.12 288)'}}>✦</span>
            <span style={{ fontSize: 14 }}>🤖</span>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 700, fontSize: 12.5 }}>貼上廠商回覆信，AI 自動整理</div>
              <div className="faint" style={{ fontSize: 10.5 }}>廠商回覆需求詢問後，貼上原文，AI 自動填入下方溝通表欄位</div>
            </div>
            <span className="linkbtn">{showReply?'收合 ⌃':'展開 ⌄'}</span>
          </div>
          {showReply && <div className="askbody">
            <textarea className="emailedit" style={{minHeight:200,borderRadius:'8px 8px 0 0'}} value={replyText} onChange={e=>setReplyText(e.target.value)} placeholder="貼上廠商回覆的 email 全文…" />
            <div style={{padding:'8px 0 0',display:'flex',gap:8,alignItems:'center'}}>
              <window.AIBtn onClick={handleParseReply} loading={parsing} disabled={!replyText.trim()}>✦ AI 整理成溝通表</window.AIBtn>
              <span className="faint" style={{fontSize:10.5}}>欄位將自動填入，可再手動調整</span>
            </div>
          </div>}
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
          <span className="stepbadge">2</span>
          <h3 className="serif" style={{ margin: 0, fontSize: 16, fontWeight: 700 }}>統整溝通表（供國美）</h3>
          <span className="faint" style={{ fontSize: 11 }}>依廠商回覆填寫，作為製作 brief</span>
          {cm.filled && <span className="pill risk-low" style={{ marginLeft: 'auto', height: 20 }}><span className="dot"></span>已完成</span>}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '14px 22px' }}>
          <CField label="產品核心賣點（建議 3 點）" span><textarea className="inp" rows={2} value={cm.selling} onChange={(e) => set({ selling: e.target.value })} placeholder="如：300 億 CFU、無添加、日本專利菌株" /></CField>
          <CField label="本次主打訴求／活動主題"><input className="inp" value={cm.theme} onChange={(e) => set({ theme: e.target.value })} placeholder="如：換季日常保養" /></CField>
          <CField label="期望上線時段"><input className="inp" value={cm.onlineWindow} onChange={(e) => set({ onlineWindow: e.target.value })} placeholder="如：7 月第一週" /></CField>
          <CField label="必提重點／指定台詞" span><textarea className="inp" rows={2} value={cm.mustSay} onChange={(e) => set({ mustSay: e.target.value })} placeholder="品牌一定要露出的訊息、官方標語…" /></CField>
          <CField label="NG 事項／禁用字眼" span>
            <textarea className="inp" rows={2} value={cm.avoid} onChange={(e) => set({ avoid: e.target.value })} placeholder="不可出現的競品、誇大字眼…" />
            <div className="faint" style={{ fontSize: 10.5, marginTop: 6 }}>風控建議避開：{(window.AVOID_WORDS[c.riskKind] || []).join('、')}</div>
          </CField>
          <CField label="參考連結／競品案例"><textarea className="inp" rows={2} value={cm.refLinks} onChange={(e) => set({ refLinks: e.target.value })} placeholder="風格參考、過往案例連結…" /></CField>
          <CField label="提供素材（品牌 logo、產品圖）"><textarea className="inp" rows={2} value={cm.materials} onChange={(e) => set({ materials: e.target.value })} placeholder="廠商將提供的素材清單" /></CField>
          <CField label="是否寄送樣品">
            <select className="inp" value={cm.sampleNeeded} onChange={(e) => set({ sampleNeeded: e.target.value })}>
              <option>是</option><option>否</option></select>
          </CField>
          <CField label="收件地址（樣品寄送）"><input className="inp" value={cm.deliveryAddr} onChange={(e) => set({ deliveryAddr: e.target.value })} placeholder="樣品寄送地址" /></CField>
          <CField label="其他特殊需求" span><textarea className="inp" rows={2} value={cm.special} onChange={(e) => set({ special: e.target.value })} placeholder="拍攝場景、指定畫面、合規揭露…" /></CField>
        </div>
      </div>
      <div className="tabfoot">
        <button className="btn" onClick={() => {exportCommDoc(c);toast('已匯出統整溝通表 .doc · 上傳 Google 雲端硬碟可用 Google 文件編輯');}}>↧ 匯出統整溝通表（.doc）</button>
        <button className="btn" onClick={() => {set({ filled: true });toast('溝通表已標記完成');}}>✦ 標記完成</button>
        <button className="btn primary" style={{ marginLeft: 'auto' }} onClick={onNext}>下一步：製作排程 →</button>
      </div>
    </div>);

}

/* ---------------- 製作排程 ---------------- */
function ProdScheduleTab({ c, onUpdate, onMove, toast }) {
  const pr = c.prod;
  const set = (patch) => onUpdate({ prod: { ...pr, ...patch } });
  const steps = window.PROD_STEPS;
  const filledCount = steps.filter((s) => pr[s.key]).length;

  const [gap, setGap] = React.useState(() => {try {return +localStorage.getItem('gm_gap') || 4;} catch (e) {return 4;}});
  const [autoMode, setAutoMode] = React.useState(true);
  const [pushOpen, setPushOpen] = React.useState(false);

  const applyGap = (g) => {setGap(g);try {localStorage.setItem('gm_gap', g);} catch (e) {}
    if (pr.draft) {const sc = window.autoSchedule(pr.draft, g);if (sc) {set(sc);toast(`已以 ${g} 天間隔重新排期`);}}};

  const onDraftChange = (val) => {
    if (autoMode && val) {
      const sc = window.autoSchedule(val, gap);
      if (sc) {set(sc);return;}
    }
    set({ draft: val });
  };
  const rerun = () => {if (!pr.draft) {toast('請先設定「提供草圖」日期');return;}
    const sc = window.autoSchedule(pr.draft, gap);if (sc) {set(sc);toast('已自動推算後續排程（可再手動微調）');}};

  const exportICS = () => {
    const evts = window.buildProdEvents(c);
    if (!evts.length) {toast('尚未填寫可匯出的日期');return;}
    window.downloadICS(`${c.id}-production.ics`, window.buildICS(c.id, evts));
    toast('已下載 .ics（離線備用；Google 匯入不保留顏色）');
  };

  return (
    <div className="tabwrap">
      <div className="tabbody">
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
          <h3 className="serif" style={{ margin: 0, fontSize: 16, fontWeight: 700 }}>製作排程</h3>
          <span className="faint" style={{ fontSize: 11 }}>訂定草圖日期後自動推算後續排程，可推送至 Google Calendar</span>
          <span className="mono faint" style={{ fontSize: 10.5, marginLeft: 'auto' }}>{filledCount}/{steps.length} 已填</span>
        </div>

        {/* 自動排期控制 */}
        <div className="autobar">
          <label className="autochk"><input type="checkbox" checked={autoMode} onChange={(e) => setAutoMode(e.target.checked)} /> 自動排期</label>
          <span className="faint" style={{ fontSize: 11 }}>里程碑間隔</span>
          <div className="gapseg">
            {[3, 4, 5].map((g) =>
            <button key={g} className={'gapbtn' + (gap === g ? ' on' : '')} onClick={() => applyGap(g)}>{g} 天</button>
            )}
          </div>
          <button className="btn" style={{ height: 28, fontSize: 11.5, marginLeft: 'auto' }} onClick={rerun}>↻ 依草圖日重新排期</button>
        </div>
        <div className="callegend">
          <span className="lgd"><span className="lgddot red"></span>國美工作日· 草圖・腳本・拍攝・成品・上線</span>
          <span className="lgd"><span className="lgddot yellow"></span>區間排程· 修改・後製期</span>
        </div>

        <div className="timeline">
          {steps.map((s, i) => {
            const done = !!pr[s.key];
            const cl = s.color === 'red' ? 'var(--rose)' : 'var(--gold-2)';
            const isDraft = s.key === 'draft';
            return (
              <div key={s.key} className="tlrow">
                <div className="tlnode" style={{ background: done ? cl : 'var(--surface)', color: done ? '#fff' : 'var(--ink-3)', borderColor: done ? 'transparent' : 'var(--line-2)' }}>{s.icon}</div>
                {i < steps.length - 1 && <div className="tlbar" style={{ background: done ? cl : 'var(--line)' }}></div>}
                <div className="tlcard" style={isDraft ? { borderColor: 'var(--clay)', boxShadow: '0 0 0 1px var(--clay-soft)' } : null}>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 12.5, fontWeight: 600 }}>{s.label}
                      <span className="cal-dot" title="會寫入行事曆" style={{ color: cl }}>◵</span>
                      <span className="caltag" style={{ background: s.color === 'red' ? 'var(--rose-soft)' : 'var(--gold-soft)', color: s.color === 'red' ? 'var(--rose-ink)' : 'oklch(0.5 0.09 70)' }}>{s.color === 'red' ? '國美工作日' : '區間'}</span>
                      {isDraft && <span className="faint" style={{ fontSize: 10, marginLeft: 6 }}>起點·自動帶出後續</span>}
                    </div>
                  </div>
                  <input className="miniinp" style={isDraft ? { width: 150, borderColor: 'var(--clay)' } : { width: 150 }} type={s.kind === 'date' ? 'date' : 'text'}
                  value={s.kind === 'date' ? String(pr[s.key] || '').replace(/\//g, '-') : pr[s.key]} placeholder={s.kind === 'range' ? '如 09/11~09/17' : ''}
                  onChange={(e) => isDraft ? onDraftChange(e.target.value) : set({ [s.key]: e.target.value })} />
                </div>
              </div>);

          })}
        </div>
      </div>
      <div className="tabfoot">
        <button className="btn" onClick={() => {onMove('produce');toast('案件已移至「製作中」');}}>標記開始製作</button>
        <button className="btn" style={{ marginLeft: 'auto' }} onClick={exportICS}>◵ .ics 備用</button>
        <button className="btn primary" onClick={() => setPushOpen(true)}>📅 推送至 Google Calendar</button>
      </div>
      <window.GCalPushModal open={pushOpen} onClose={() => setPushOpen(false)} c={c} toast={toast} />
    </div>);

}

/* Google Calendar API 推送（示範流程）*/
function GCalPushModal({ open, onClose, c, toast }) {
  const { Modal } = window;
  const [connected, setConnected] = React.useState(false);
  const [phase, setPhase] = React.useState('idle');
  const evts = window.buildProdEvents(c);
  const GC = window.GCAL_COLOR;
  const fmtD = (ymd) => ymd ? `${ymd.slice(0, 4)}/${ymd.slice(4, 6)}/${ymd.slice(6, 8)}` : '';
  const connect = () => {
    if (!window.getGoogleClientId?.()) { toast('請先在 ⚙ AI 設定中填入 Google OAuth2 Client ID'); window.__openAISettings?.(); return; }
    if (!window.google?.accounts?.oauth2) { toast('Google 服務未載入，請確認網路連線'); return; }
    window.requestGoogleToken((token, err) => {
      if (err || !token) { toast('連結失敗' + (err ? '：' + err : '')); return; }
      setConnected(true); toast('✓ 已連結 Google 帳號');
    });
  };
  const push = async () => {
    if (!evts.length) { toast('尚未填寫可推送的排程'); return; }
    setPhase('pushing');
    if (window.isGoogleConnected?.()) {
      try { await window.pushCalendarEvents(evts); setPhase('done'); toast(`✓ 已寫入 ${evts.length} 個事件至 Google Calendar`); }
      catch (e) { setPhase('idle'); toast('推送失敗：' + e.message); }
    } else {
      setTimeout(() => { setPhase('done'); toast(`已推送 ${evts.length} 個事件（示範）`); }, 1000);
    }
  };
  return (
    <Modal open={open} onClose={onClose} width={540} title="推送至 Google Calendar" sub={`${c.vendor} · ${c.id} · 使用 Calendar API events.insert（colorId）`}>
      <div style={{ padding: '4px 20px 16px' }}>

        {/* 帳號連結狀態 */}
        <div className="gcalconn">
          <span className="gdot" style={{ background: connected ? 'var(--sage)' : 'var(--line-2)' }}></span>
          <span style={{ fontSize: 12.5 }}>{connected ? (window.isGoogleConnected?.() ? '已連結：Google 帳號（OAuth2）' : '已連結（示範）') : '尚未連結 Google 帳號'}</span>
          {!connected ?
          <button className="btn primary" style={{ height: 30, fontSize: 12, marginLeft: 'auto' }} onClick={connect}>連結 Google 帳號</button> :
          <span className="pill risk-low" style={{ marginLeft: 'auto', height: 20 }}><span className="dot"></span>已授權</span>}
        </div>

        {/* 事件與 colorId 對應 */}
        <div className="gcallist">
          {evts.length === 0 && <div className="faint" style={{ fontSize: 12, padding: '10px 2px' }}>尚未填寫排程。</div>}
          {evts.map((e, i) => {const gc = e.color === 'red' ? GC.red : GC.yellow;return (
              <div key={i} className="gcalrow">
              <span className="gcalsw" style={{ background: gc.hex }}></span>
              <span style={{ fontSize: 12, width: 78 }}>{e.label}</span>
              <span className="mono faint" style={{ fontSize: 11, flex: 1 }}>{e.kind === 'range' ? `${fmtD(e.start)} ~ ${fmtD(e.end)}` : fmtD(e.date)}</span>
              <span className="mono faint" style={{ fontSize: 10.5 }}>colorId {gc.id}·{gc.name}</span>
            </div>);
          })}
        </div>
      </div>
      <div className="modalfoot">
        <button className="btn" onClick={onClose}>關閉</button>
        {phase === 'done' ?
        <button className="btn primary" disabled style={{ marginLeft: 'auto', opacity: .7 }}>✓ 已推送 {evts.length} 個事件</button> :
        <button className="btn primary" style={{ marginLeft: 'auto' }} disabled={!connected || phase === 'pushing'} onClick={push}>
              {phase === 'pushing' ? '推送中…' : `推送 ${evts.length} 個事件`}</button>}
      </div>
    </Modal>);

}

window.CommTab = CommTab;window.ProdScheduleTab = ProdScheduleTab;window.CField = CField;
window.GCalPushModal = GCalPushModal;

/* ---------- 匯出可編輯 .doc（Google 文件可開啟編輯）---------- */
function exportCommDoc(c) {
  const S = window.STUDIO || {};const cm = c.comm || {};
  const esc = (s) => String(s == null || s === '' ? '　' : s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br/>');
  const row = (k, v) => `<tr><td class="k">${k}</td><td class="v">${esc(v)}</td></tr>`;
  const avoid = (window.AVOID_WORDS[c.riskKind] || []).join('、');
  const html = `<!DOCTYPE html><html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40"><head><meta charset="utf-8"><title>合作溝通表</title>
<style>body{font-family:"Noto Sans TC","新細明體",sans-serif;font-size:11pt;color:#222;line-height:1.6;}
h1{font-size:18pt;letter-spacing:2px;margin:0 0 2px;} .sub{color:#888;font-size:9pt;margin:0 0 14px;}
table{border-collapse:collapse;width:100%;margin-top:8px;} td{border:1px solid #bbb;padding:7px 10px;vertical-align:top;font-size:10.5pt;}
td.k{width:170px;background:#f4efe7;color:#555;font-weight:bold;} td.v{min-height:20px;}
.note{color:#999;font-size:9pt;margin-top:12px;}</style></head><body>
<h1>合作溝通表</h1>
<p class="sub">${esc(S.name || '果米工作室')} · KOL 國美ゴメ5cm小人物の日常　|　案件 ${esc(c.id)}　廠商：${esc(c.vendor)}　產品：${esc(c.product)}</p>
<table>
${row('產品核心賣點', cm.selling)}
${row('本次主打訴求／活動主題', cm.theme)}
${row('期望上線時段', cm.onlineWindow)}
${row('必提重點／指定台詞', cm.mustSay)}
${row('NG 事項／禁用字眼', cm.avoid)}
${row('風控建議避開', avoid)}
${row('參考連結／競品案例', cm.refLinks)}
${row('提供素材', cm.materials)}
${row('是否寄送樣品', cm.sampleNeeded)}
${row('收件地址（樣品寄送）', cm.deliveryAddr)}
${row('其他特殊需求', cm.special)}
</table>
<p class="note">＊本文件可上傳至 Google 雲端硬碟，以 Google 文件開啟後即可線上編輯。</p>
</body></html>`;
  const blob = new Blob(['\ufeff' + html], { type: 'application/msword' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');a.href = url;a.download = `合作溝通表_${c.vendor}_${c.id}.doc`;
  document.body.appendChild(a);a.click();
  setTimeout(() => {document.body.removeChild(a);URL.revokeObjectURL(url);}, 200);
}