// HelperMatch Admin — Phase E-3: Message Templates editor
// List view + detail editor (channel, trigger, variables, multi-lang content, stats)

const CHANNEL_META = {
  EMAIL:    { label: 'Email',    icon: 'mail',  color: '#1A365D', bg: 'var(--a-primary-50)', line: 'var(--a-primary-100)' },
  WHATSAPP: { label: 'WhatsApp', icon: 'chat',  color: '#067647', bg: 'var(--a-success-bg)', line: 'var(--a-success-line)' },
  PUSH:     { label: 'Push',     icon: 'bell',  color: '#5925DC', bg: 'var(--a-violet-bg)',  line: 'var(--a-violet-line)'  },
};

const LANGS = [
  { code: 'zh-TW', label: '繁中', flag: '🇹🇼' },
  { code: 'en',    label: 'EN',   flag: '🇺🇸' },
  { code: 'id',    label: 'ID',   flag: '🇮🇩' },
];

const tplDateRel = (d) => {
  if (!d) return '—';
  const diff = (Date.now() - new Date(d).getTime()) / 86400000;
  if (diff < 1) return '今天';
  if (diff < 7) return Math.floor(diff) + ' 天前';
  if (diff < 30) return Math.floor(diff / 7) + ' 週前';
  return Math.floor(diff / 30) + ' 個月前';
};

const fmtNum = (n) => n >= 1000 ? (n/1000).toFixed(1) + 'k' : String(n);
const pct = (n, d) => d === 0 ? 0 : Math.round(n / d * 100);

const TemplatesPage = () => {
  const { t } = (window.useI18n ? window.useI18n() : { t: (k)=>k });
  const { user } = useAuth();
  const toast = useToast();
  const [tpls, setTpls] = useState(() => ADMIN.msgTemplates.slice());
  const [selId, setSelId] = useState(null);
  const [showNewModal, setShowNewModal] = useState(false);
  const [q, setQ] = useState('');
  const [channelFilter, setChannelFilter] = useState('ALL');
  const [categoryFilter, setCategoryFilter] = useState('ALL');
  const [statusFilter, setStatusFilter] = useState('ALL');

  // Create a new template stub. Drops into the list immediately and opens
  // the drawer so the admin can fill in content per language. Production
  // would POST /api/templates and re-fetch — prototype just appends to the
  // local mock list.
  const createTemplate = (form) => {
    const id = 'tpl_' + Date.now().toString(36).slice(-6);
    const newTpl = {
      id,
      code: form.code,
      name: form.name,
      channel: form.channel,
      category: form.category,
      trigger: form.trigger,
      triggerLabel: form.triggerLabel,
      enabled: true,
      scheduleDelay: 0,
      variables: [],
      content: {
        'zh-TW': { subject: '', body: '' },
        'en':    { subject: '', body: '' },
        'id':    { subject: '', body: '' },
      },
      stats: { sent: 0, delivered: 0, opened: 0, clicked: 0 },
      updatedAt: new Date(),
      updatedBy: user.name,
    };
    setTpls(xs => [newTpl, ...xs]);
    ADMIN.msgTemplates.unshift(newTpl);
    ADMIN.auditLogs.unshift({
      id: 'log_' + Math.random().toString(36).slice(2,8),
      at: new Date(), actor: user.name,
      action: 'TEMPLATE_CREATE',
      targetType: 'Template', targetId: id,
      diff: { name: form.name, channel: form.channel, category: form.category, trigger: form.trigger },
    });
    toast('模板已建立 · 請編輯內容', 'success');
    setShowNewModal(false);
    setSelId(id);
  };

  const categories = useMemo(() => [...new Set(tpls.map(t => t.category))], [tpls]);

  const filtered = useMemo(() => {
    let list = tpls.slice();
    if (channelFilter !== 'ALL') list = list.filter(t => t.channel === channelFilter);
    if (categoryFilter !== 'ALL') list = list.filter(t => t.category === categoryFilter);
    if (statusFilter === 'ENABLED') list = list.filter(t => t.enabled);
    if (statusFilter === 'DISABLED') list = list.filter(t => !t.enabled);
    if (q) {
      const qL = q.toLowerCase();
      list = list.filter(t =>
        t.name.toLowerCase().includes(qL) ||
        t.code.toLowerCase().includes(qL) ||
        t.triggerLabel.toLowerCase().includes(qL)
      );
    }
    return list;
  }, [tpls, channelFilter, categoryFilter, statusFilter, q]);

  const sel = tpls.find(t => t.id === selId);

  const updateTpl = (id, patch) => {
    setTpls(xs => xs.map(t => t.id === id ? { ...t, ...patch, updatedAt: new Date(), updatedBy: user.name } : t));
  };

  const toggleEnabled = (id) => {
    const t = tpls.find(x => x.id === id);
    if (!t) return;
    updateTpl(id, { enabled: !t.enabled });
    toast(t.enabled ? '模板已停用' : '模板已啟用', t.enabled ? 'warn' : 'success');
    ADMIN.auditLogs.unshift({
      id: 'log_' + Math.random().toString(36).slice(2,8),
      at: new Date(), actor: user.name,
      action: t.enabled ? 'TEMPLATE_DISABLE' : 'TEMPLATE_ENABLE',
      targetType: 'Template', targetId: id,
      diff: { enabled: { before: t.enabled, after: !t.enabled } }
    });
  };

  // Aggregate stats for top cards
  const totalSent = tpls.reduce((s,t) => s + t.stats.sent, 0);
  const totalDelivered = tpls.reduce((s,t) => s + t.stats.delivered, 0);
  const totalOpened = tpls.reduce((s,t) => s + t.stats.opened, 0);
  const totalClicked = tpls.reduce((s,t) => s + t.stats.clicked, 0);
  const openRate = pct(totalOpened, totalDelivered);
  const clickRate = pct(totalClicked, totalOpened);

  // Per-channel counts for tabs
  const channelCounts = useMemo(() => {
    const c = { ALL: tpls.length, EMAIL: 0, WHATSAPP: 0, PUSH: 0 };
    for (const t of tpls) c[t.channel] = (c[t.channel] || 0) + 1;
    return c;
  }, [tpls]);

  return (
    <div className="a-page">
      <div className="a-page-header">
        <div>
          <h1 className="a-page-title">{t('admin.templates.title')}</h1>
          <div className="a-page-sub">{t('admin.templates.subtitle')}</div>
        </div>
        <div className="a-page-header-actions">
          <button className="a-btn a-btn-default"><AIcon name="download" size={13}/> 匯出使用報告</button>
          <button className="a-btn a-btn-primary" onClick={() => setShowNewModal(true)}>
            <AIcon name="plus" size={13}/> 新增模板
          </button>
        </div>
      </div>

      {/* KPI row */}
      <div className="grid-4 mb-16">
        <div className="a-stat">
          <div className="a-stat-label">模板總數</div>
          <div className="a-stat-value">{tpls.length}</div>
          <div className="a-stat-foot">{tpls.filter(t=>t.enabled).length} 已啟用 · {tpls.filter(t=>!t.enabled).length} 停用</div>
        </div>
        <div className="a-stat">
          <div className="a-stat-label">30 天寄送量</div>
          <div className="a-stat-value">{fmtNum(totalSent)}</div>
          <div className="a-stat-foot">{fmtNum(totalDelivered)} 已送達 · {pct(totalDelivered, totalSent)}% 送達率</div>
        </div>
        <div className="a-stat">
          <div className="a-stat-label">開啟率</div>
          <div className="a-stat-value">{openRate}%</div>
          <div className="a-stat-foot">{fmtNum(totalOpened)} 次開啟</div>
        </div>
        <div className="a-stat">
          <div className="a-stat-label">點擊率</div>
          <div className="a-stat-value">{clickRate}%</div>
          <div className="a-stat-foot">{fmtNum(totalClicked)} 次點擊</div>
        </div>
      </div>

      {/* Channel tabs — make it obvious this is multi-channel */}
      <div className="a-tpl-chantabs">
        <button
          className={`a-tpl-chantab ${channelFilter==='ALL'?'active':''}`}
          onClick={()=>setChannelFilter('ALL')}
        >
          <AIcon name="grid" size={13}/>
          <span>全部</span>
          <span className="a-tpl-chantab-n">{channelCounts.ALL}</span>
        </button>
        {Object.entries(CHANNEL_META).map(([k,m]) => (
          <button
            key={k}
            className={`a-tpl-chantab ${channelFilter===k?'active':''}`}
            onClick={()=>setChannelFilter(k)}
            style={channelFilter===k ? {'--tabAccent':m.color,'--tabAccentBg':m.bg,'--tabAccentLine':m.line} : undefined}
          >
            <AIcon name={m.icon} size={13}/>
            <span>{m.label}</span>
            <span className="a-tpl-chantab-n">{channelCounts[k] || 0}</span>
          </button>
        ))}
      </div>

      {/* Toolbar */}
      <div className="a-table-toolbar">
        <div className="a-input-group" style={{width:280,flex:'0 0 auto'}}>
          <span className="a-input-group-prefix"><AIcon name="search" size={13}/></span>
          <input className="a-input" placeholder="搜尋模板名稱、代碼、觸發" value={q} onChange={e=>setQ(e.target.value)}/>
        </div>
        <select className="a-select" style={{width:150}} value={categoryFilter} onChange={e=>setCategoryFilter(e.target.value)}>
          <option value="ALL">所有分類</option>
          {categories.map(c => <option key={c} value={c}>{c}</option>)}
        </select>
        <select className="a-select" style={{width:130}} value={statusFilter} onChange={e=>setStatusFilter(e.target.value)}>
          <option value="ALL">全部狀態</option>
          <option value="ENABLED">已啟用</option>
          <option value="DISABLED">停用</option>
        </select>
        <span className="ml-auto text-muted fs-13">{filtered.length} / {tpls.length} 個模板</span>
      </div>

      {/* Table */}
      <div className="a-table-wrap">
        <table className="a-table">
          <thead>
            <tr>
              <th style={{width:32}}></th>
              <th>名稱</th>
              <th style={{width:90}}>通道</th>
              <th style={{width:80}}>分類</th>
              <th>觸發事件</th>
              <th style={{width:100}}>語言</th>
              <th style={{width:90}} className="text-right">30d 寄送</th>
              <th style={{width:70}} className="text-right">Open</th>
              <th style={{width:70}} className="text-right">Click</th>
              <th style={{width:90}}>更新</th>
              <th style={{width:80}}></th>
            </tr>
          </thead>
          <tbody>
            {filtered.length === 0 && (
              <tr><td colSpan={11}>
                <div className="a-empty" style={{padding:40}}>
                  <div className="a-empty-ic"><AIcon name="mail" size={18}/></div>
                  <div className="a-empty-title">無符合的模板</div>
                  <div className="a-empty-sub">嘗試調整篩選條件</div>
                </div>
              </td></tr>
            )}
            {filtered.map(t => {
              const ch = CHANNEL_META[t.channel];
              const langCount = Object.keys(t.content).length;
              return (
                <tr key={t.id} className="clickable" onClick={()=>setSelId(t.id)}>
                  <td onClick={e=>{e.stopPropagation(); toggleEnabled(t.id);}}>
                    <div className={`a-toggle ${t.enabled?'on':''}`} title={t.enabled?'啟用中':'已停用'}>
                      <div className="a-toggle-dot"/>
                    </div>
                  </td>
                  <td>
                    <div className="fw-600" style={{color:'var(--a-ink)'}}>{t.name}</div>
                    <div className="fs-11 text-muted a-mono">{t.code}</div>
                  </td>
                  <td>
                    <span className="a-tpl-ch" style={{background:ch.bg,color:ch.color,border:`1px solid ${ch.line}`}}>
                      <AIcon name={ch.icon} size={11}/>
                      {ch.label}
                    </span>
                  </td>
                  <td className="fs-12">{t.category}</td>
                  <td className="fs-12">
                    <div>{t.triggerLabel}</div>
                    <div className="fs-10 text-muted a-mono">{t.trigger}</div>
                  </td>
                  <td className="fs-11" style={{whiteSpace:'nowrap'}}>
                    {LANGS.map(l => (
                      <span key={l.code} title={l.label} style={{
                        display:'inline-block',marginRight:3,opacity:t.content[l.code]?1:0.25
                      }}>{l.flag}</span>
                    ))}
                    <span className="text-muted" style={{marginLeft:2}}>({langCount})</span>
                  </td>
                  <td className="text-right tnum fs-12">{fmtNum(t.stats.sent)}</td>
                  <td className="text-right tnum fs-12">{pct(t.stats.opened, t.stats.delivered) + '%'}</td>
                  <td className="text-right tnum fs-12">{pct(t.stats.clicked, t.stats.opened) + '%'}</td>
                  <td className="fs-11 text-muted">{tplDateRel(t.updatedAt)}</td>
                  <td>
                    <button className="a-btn a-btn-ghost" style={{padding:'4px 8px',fontSize:11}} onClick={e=>{e.stopPropagation(); setSelId(t.id);}}>編輯</button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      {sel && <TemplateDrawer tpl={sel} onClose={()=>setSelId(null)} onSave={(patch)=>{ updateTpl(sel.id, patch); toast('模板已更新','success'); }}/>}
      {showNewModal && <NewTemplateModal onClose={()=>setShowNewModal(false)} onCreate={createTemplate}/>}
    </div>
  );
};

// ---------- New Template Modal ----------
// Lightweight creation form — captures the metadata fields needed to create
// a stub. Content per-language is filled in later via the drawer (which
// auto-opens after submission). Production: validate `code` uniqueness +
// `trigger` against the live event registry server-side.
const NewTemplateModal = ({ onClose, onCreate }) => {
  const [channel, setChannel] = useState('EMAIL');
  const [category, setCategory] = useState('');
  const [name, setName] = useState('');
  const [code, setCode] = useState('');
  const [trigger, setTrigger] = useState('');
  const [triggerLabel, setTriggerLabel] = useState('');

  const ok = name.trim() && code.trim() && trigger.trim() && triggerLabel.trim() && category.trim();

  const submit = () => {
    if (!ok) return;
    onCreate({
      channel,
      category: category.trim(),
      name: name.trim(),
      code: code.trim().toUpperCase().replace(/\s+/g, '_'),
      trigger: trigger.trim(),
      triggerLabel: triggerLabel.trim(),
    });
  };

  return (
    <AModal open onClose={onClose} title={<><AIcon name="plus" size={16}/> 新增訊息模板</>}
      footer={<>
        <button className="a-btn a-btn-default" onClick={onClose}>取消</button>
        <button className="a-btn a-btn-primary" disabled={!ok} onClick={submit}>
          <AIcon name="check" size={13}/> 建立並編輯內容
        </button>
      </>}
    >
      <div className="fs-13 text-muted mb-16" style={{lineHeight:1.55}}>
        建立後會打開編輯抽屜，再分別填入三語言（繁中 / English / Bahasa）的標題與內文。
      </div>

      <div className="fcol gap-14">
        <div>
          <label className="fs-12 fw-600 text-muted mb-6 block">通道</label>
          <div className="flex gap-8">
            {[
              { k: 'EMAIL',    label: 'Email',    icon: 'mail' },
              { k: 'WHATSAPP', label: 'WhatsApp', icon: 'message' },
              { k: 'PUSH',     label: 'Push',     icon: 'bell' },
            ].map(c => (
              <button
                key={c.k}
                className="flex items-center gap-6"
                onClick={() => setChannel(c.k)}
                style={{
                  flex: 1,
                  padding: '10px 14px',
                  border: '1.5px solid ' + (channel === c.k ? 'var(--a-primary)' : 'var(--a-line)'),
                  borderRadius: 8,
                  background: channel === c.k ? 'var(--a-primary-50, #FBE2D5)' : 'var(--a-paper)',
                  cursor: 'pointer', fontSize: 13, fontWeight: 500,
                  color: channel === c.k ? 'var(--a-primary)' : 'var(--a-ink)',
                  justifyContent: 'center',
                }}
              >
                <AIcon name={c.icon} size={13}/> {c.label}
              </button>
            ))}
          </div>
        </div>

        <div className="grid-2" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14}}>
          <div>
            <label className="fs-12 fw-600 text-muted mb-6 block">分類</label>
            <input className="a-input" value={category} onChange={e=>setCategory(e.target.value)} placeholder="例：審核 / 訂閱 / Referral"/>
          </div>
          <div>
            <label className="fs-12 fw-600 text-muted mb-6 block">代號（自動轉大寫底線）</label>
            <input className="a-input" value={code} onChange={e=>setCode(e.target.value)} placeholder="例：CAND_APPROVED" style={{fontFamily:'JetBrains Mono, monospace'}}/>
          </div>
        </div>

        <div>
          <label className="fs-12 fw-600 text-muted mb-6 block">顯示名稱</label>
          <input className="a-input" value={name} onChange={e=>setName(e.target.value)} placeholder="例：候選人審核通過"/>
        </div>

        <div className="grid-2" style={{display:'grid', gridTemplateColumns:'1fr 1.5fr', gap:14}}>
          <div>
            <label className="fs-12 fw-600 text-muted mb-6 block">事件 trigger</label>
            <input className="a-input" value={trigger} onChange={e=>setTrigger(e.target.value)} placeholder="candidate.approved" style={{fontFamily:'JetBrains Mono, monospace'}}/>
          </div>
          <div>
            <label className="fs-12 fw-600 text-muted mb-6 block">觸發說明</label>
            <input className="a-input" value={triggerLabel} onChange={e=>setTriggerLabel(e.target.value)} placeholder="候選人通過審核時"/>
          </div>
        </div>
      </div>
    </AModal>
  );
};

// ---------- Template Drawer (editor) ----------

const TemplateDrawer = ({ tpl, onClose, onSave }) => {
  const [lang, setLang] = useState('zh-TW');
  const [tab, setTab] = useState('content'); // content / variables / stats / settings
  const [content, setContent] = useState(() => JSON.parse(JSON.stringify(tpl.content)));
  const [enabled, setEnabled] = useState(tpl.enabled);
  const [scheduleDelay, setScheduleDelay] = useState(tpl.scheduleDelay || 0);

  // Detect changes
  const dirty = JSON.stringify(content) !== JSON.stringify(tpl.content)
    || enabled !== tpl.enabled
    || scheduleDelay !== tpl.scheduleDelay;

  const ch = CHANNEL_META[tpl.channel];

  const save = () => {
    onSave({ content, enabled, scheduleDelay });
  };

  const insertVar = (v) => {
    // Insert into currently focused textarea/input is complex; append to body
    setContent(c => ({
      ...c,
      [lang]: { ...c[lang], body: (c[lang]?.body || '') + `{{${v}}}` }
    }));
  };

  // Preview rendered
  const renderPreview = (text) => {
    if (!text) return '';
    return text.replace(/\{\{(\w+)\}\}/g, (_, v) => {
      const samples = { name: '陳小明', employerName: 'Lin 家', candName: 'Siti Nurul', candNat: '🇮🇩 印尼', code: '538291', matchScore: '92', planName: 'Premium', expiryDate: '2025-12-15', renewUrl: 'hm.co/renew', profileUrl: 'hm.co/p/123', helpUrl: 'hm.co/help', walletUrl: 'hm.co/wallet', resubmitUrl: 'hm.co/edit', interviewUrl: 'hm.co/iv/abc', interviewTime: '週六 10:00', reason: '證件照片不清晰', referrerName: '阿明', refereeName: 'Siti', bonusAmount: '20', userName: '王先生', ruleName: '聯絡方式外流', nationality: '印尼' };
      return samples[v] ? `〈${samples[v]}〉` : `{{${v}}}`;
    });
  };

  return (
    <>
      <div className="a-drawer-backdrop" onClick={onClose}/>
      <aside className="a-drawer a-drawer-xl">
        <div className="a-drawer-header">
          <div style={{flex:1,minWidth:0}}>
            <div className="flex items-center gap-8 mb-4">
              <span className="a-tpl-ch" style={{background:ch.bg,color:ch.color,border:`1px solid ${ch.line}`}}>
                <AIcon name={ch.icon} size={11}/>
                {ch.label}
              </span>
              <span className="a-badge a-badge-neutral" style={{fontSize:11,padding:'2px 8px'}}>{tpl.category}</span>
              <span className="fs-11 text-muted a-mono">{tpl.code}</span>
            </div>
            <h2 style={{margin:0,fontSize:18,fontWeight:700,color:'var(--a-ink)'}}>{tpl.name}</h2>
            <div className="fs-12 text-muted mt-2">
              <AIcon name="clock" size={11}/> 觸發：{tpl.triggerLabel} <span className="a-mono">({tpl.trigger})</span>
            </div>
          </div>
          <button className="a-icon-btn" onClick={onClose}><AIcon name="x" size={16}/></button>
        </div>

        <div className="a-tabs" style={{padding:'0 24px',borderBottom:'1px solid var(--a-line)'}}>
          <button className={`a-tab ${tab==='content'?'active':''}`} onClick={()=>setTab('content')}>內容編輯</button>
          <button className={`a-tab ${tab==='variables'?'active':''}`} onClick={()=>setTab('variables')}>變數</button>
          <button className={`a-tab ${tab==='stats'?'active':''}`} onClick={()=>setTab('stats')}>寄送統計</button>
          <button className={`a-tab ${tab==='settings'?'active':''}`} onClick={()=>setTab('settings')}>設定</button>
        </div>

        <div className="a-drawer-body">
          {tab === 'content' && (
            <TemplateContentEditor
              tpl={tpl} content={content} setContent={setContent}
              lang={lang} setLang={setLang}
              renderPreview={renderPreview}
              insertVar={insertVar}
            />
          )}
          {tab === 'variables' && <TemplateVariables tpl={tpl} insertVar={insertVar}/>}
          {tab === 'stats' && <TemplateStats tpl={tpl}/>}
          {tab === 'settings' && (
            <TemplateSettings
              tpl={tpl}
              enabled={enabled} setEnabled={setEnabled}
              scheduleDelay={scheduleDelay} setScheduleDelay={setScheduleDelay}
            />
          )}
        </div>

        <div className="a-drawer-footer">
          <div className="fs-11 text-muted">
            最後更新：{tplDateRel(tpl.updatedAt)} by {tpl.updatedBy}
          </div>
          <div className="flex gap-8">
            <button className="a-btn a-btn-default" onClick={onClose}>取消</button>
            <button className="a-btn a-btn-primary" disabled={!dirty} onClick={save}>
              <AIcon name="check" size={13}/> 儲存變更
            </button>
          </div>
        </div>
      </aside>
    </>
  );
};

// ---------- Content Editor (per language) ----------

const TemplateContentEditor = ({ tpl, content, setContent, lang, setLang, renderPreview, insertVar }) => {
  const cur = content[lang] || { subject: '', body: '' };
  const hasSubject = tpl.channel === 'EMAIL' || tpl.channel === 'PUSH';
  const charLimit = null;

  const updateField = (field, value) => {
    setContent(c => ({ ...c, [lang]: { ...cur, [field]: value } }));
  };

  const removeLang = () => {
    setContent(c => { const n = {...c}; delete n[lang]; return n; });
    const other = Object.keys(content).filter(l => l !== lang)[0];
    if (other) setLang(other);
  };

  const addLangIfMissing = () => {
    if (content[lang]) return;
    setContent(c => ({ ...c, [lang]: { subject: '', body: '' } }));
  };

  return (
    <div>
      {/* Language tabs */}
      <div className="flex items-center gap-6 mb-16">
        {LANGS.map(l => {
          const active = lang === l.code;
          const hasContent = !!content[l.code];
          return (
            <button key={l.code}
              className={`a-lang-tab ${active ? 'active':''} ${!hasContent?'empty':''}`}
              onClick={()=>setLang(l.code)}
            >
              <span style={{marginRight:4}}>{l.flag}</span>{l.label}
              {hasContent ? (
                <span className="a-check-dot"/>
              ) : (
                <span className="fs-10 text-muted" style={{marginLeft:4}}>未設定</span>
              )}
            </button>
          );
        })}
        <div className="ml-auto flex gap-6">
          {!content[lang] && (
            <button className="a-btn a-btn-default" style={{padding:'4px 10px',fontSize:12}} onClick={addLangIfMissing}>
              <AIcon name="plus" size={11}/> 新增 {LANGS.find(l=>l.code===lang).label} 版本
            </button>
          )}
          {content[lang] && Object.keys(content).length > 1 && (
            <button className="a-btn a-btn-ghost" style={{padding:'4px 10px',fontSize:12,color:'var(--a-danger)'}} onClick={removeLang}>
              移除此語言
            </button>
          )}
        </div>
      </div>

      {!content[lang] ? (
        <div className="a-empty" style={{padding:40}}>
          <div className="a-empty-ic"><AIcon name="globe" size={18}/></div>
          <div className="a-empty-title">此語言尚未建立內容</div>
          <div className="a-empty-sub">點擊上方「新增版本」開始編輯</div>
        </div>
      ) : (
        <div className="grid-2 gap-16">
          {/* Editor */}
          <div>
            <div className="fs-11 fw-600 mb-8 text-muted" style={{textTransform:'uppercase',letterSpacing:'0.4px'}}>編輯</div>
            {hasSubject && (
              <div className="mb-12">
                <label className="a-label">主旨 {tpl.channel === 'PUSH' && <span className="a-label-hint">· 顯示為通知標題</span>}</label>
                <input
                  className="a-input"
                  value={cur.subject}
                  onChange={e=>updateField('subject', e.target.value)}
                  placeholder={tpl.channel === 'PUSH' ? '通知標題' : '信件主旨'}
                />
              </div>
            )}
            <div>
              <label className="a-label">
                內文
                {charLimit && (
                  <span className="a-label-hint" style={{color: cur.body.length > charLimit ? 'var(--a-danger)' : undefined}}>
                    · {cur.body.length}/{charLimit} 字元
                  </span>
                )}
              </label>
              <textarea
                className="a-textarea"
                rows={tpl.channel === 'EMAIL' ? 14 : 8}
                value={cur.body}
                onChange={e=>updateField('body', e.target.value)}
                placeholder="訊息內容…"
              />
            </div>

            <div className="mt-12">
              <div className="fs-11 fw-600 mb-6 text-muted" style={{textTransform:'uppercase',letterSpacing:'0.4px'}}>插入變數</div>
              <div className="flex flex-wrap gap-6">
                {tpl.variables.map(v => (
                  <button key={v} className="a-chip" style={{cursor:'pointer'}} onClick={()=>insertVar(v)}>
                    <AIcon name="plus" size={10}/> <span className="a-mono">{`{{${v}}}`}</span>
                  </button>
                ))}
              </div>
            </div>
          </div>

          {/* Preview */}
          <div>
            <div className="fs-11 fw-600 mb-8 text-muted" style={{textTransform:'uppercase',letterSpacing:'0.4px'}}>預覽（已填入範例值）</div>
            <TemplatePreview tpl={tpl} cur={cur} renderPreview={renderPreview} lang={lang}/>
          </div>
        </div>
      )}
    </div>
  );
};

// ---------- Preview (channel-specific) ----------

const TemplatePreview = ({ tpl, cur, renderPreview, lang }) => {
  if (tpl.channel === 'EMAIL') {
    return (
      <div className="a-preview-email">
        <div className="a-preview-email-head">
          <div className="fs-11 text-muted">收件者：陳小明 &lt;demo@example.com&gt;</div>
          <div className="fs-11 text-muted">寄件者：HelperMatch &lt;no-reply@helpermatch.co&gt;</div>
          <div className="fs-13 fw-600 mt-4">{renderPreview(cur.subject) || '(無主旨)'}</div>
        </div>
        <div className="a-preview-email-body">
          {renderPreview(cur.body).split('\n').map((l, i) => <div key={i} style={{minHeight:'1em'}}>{l || '\u00A0'}</div>)}
        </div>
        <div className="a-preview-email-foot">HelperMatch · 若您不希望接收此類訊息，<a>點此取消訂閱</a></div>
      </div>
    );
  }
  if (tpl.channel === 'WHATSAPP') {
    // WhatsApp renders **bold** as bold — simple transformation for preview
    const renderWABody = (txt) => {
      const html = renderPreview(txt)
        .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
        .replace(/\*([^*\n]+)\*/g,'<strong>$1</strong>')
        .replace(/_([^_\n]+)_/g,'<em>$1</em>');
      return html;
    };
    return (
      <div className="a-preview-phone a-preview-phone-wa">
        <div className="a-preview-wa-head">
          <div className="a-preview-wa-avatar">H</div>
          <div style={{flex:1,minWidth:0}}>
            <div className="fs-12 fw-600" style={{color:'#fff'}}>HelperMatch</div>
            <div className="fs-10" style={{color:'rgba(255,255,255,0.7)'}}>Business · 官方帳號</div>
          </div>
          <AIcon name="check" size={13} />
        </div>
        <div className="a-preview-wa-body">
          <div className="a-preview-wa-bubble">
            {renderPreview(cur.body).split('\n').map((l, i) => (
              <div key={i} style={{minHeight:'1em'}} dangerouslySetInnerHTML={{__html: renderWABody(l) || '&nbsp;'}}/>
            ))}
            <div className="a-preview-wa-meta">
              <span>{new Date().toLocaleTimeString('zh-TW',{hour:'2-digit',minute:'2-digit',hour12:false})}</span>
              <AIcon name="check" size={11}/>
            </div>
          </div>
        </div>
      </div>
    );
  }
  // PUSH
  return (
    <div className="a-preview-phone" style={{background:'linear-gradient(180deg,#1a1a2e,#0f0f1e)',color:'#fff'}}>
      <div className="fs-11" style={{opacity:0.6,textAlign:'center',padding:'8px 0'}}>{new Date().toLocaleTimeString('zh-TW',{hour:'2-digit',minute:'2-digit'})}</div>
      <div className="a-preview-push-card">
        <div className="flex items-center gap-8 mb-6">
          <div style={{width:20,height:20,borderRadius:4,background:'var(--a-brand)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:10,color:'#fff',fontWeight:700}}>H</div>
          <div className="fs-11 fw-600">HelperMatch</div>
          <div className="ml-auto fs-10" style={{opacity:0.6}}>現在</div>
        </div>
        <div className="fs-13 fw-700 mb-2">{renderPreview(cur.subject) || 'HelperMatch'}</div>
        <div className="fs-12" style={{opacity:0.85,whiteSpace:'pre-wrap'}}>{renderPreview(cur.body)}</div>
      </div>
    </div>
  );
};

// ---------- Variables tab ----------

const TemplateVariables = ({ tpl, insertVar }) => {
  const VAR_DESC = {
    name: '收件者名稱', employerName: '雇主名稱', candName: '候選人名稱', candNat: '候選人國籍',
    matchScore: '媒合分數（%）', code: '驗證碼', planName: '方案名稱', expiryDate: '到期日',
    renewUrl: '續訂連結', profileUrl: '個人頁面連結', helpUrl: '客服連結', walletUrl: '錢包連結',
    resubmitUrl: '重新送審連結', interviewUrl: '面試連結', interviewTime: '面試時間',
    reason: '原因說明', referrerName: '推薦人名稱', refereeName: '被推薦人名稱',
    bonusAmount: '獎金金額（USD）', userName: '使用者名稱', ruleName: '規則名稱', nationality: '國籍',
  };

  return (
    <div>
      <div className="a-label-hint mb-12">這個模板可用的變數。點擊「插入」會加到當前語言的內文末尾。</div>
      <table className="a-table">
        <thead><tr><th style={{width:160}}>變數</th><th>說明</th><th style={{width:120}}></th></tr></thead>
        <tbody>
          {tpl.variables.map(v => (
            <tr key={v}>
              <td className="a-mono fs-12">{`{{${v}}}`}</td>
              <td className="fs-12">{VAR_DESC[v] || '—'}</td>
              <td>
                <button className="a-btn a-btn-ghost" style={{padding:'3px 10px',fontSize:11}} onClick={()=>insertVar(v)}>插入</button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <div className="mt-16 fs-12 text-muted" style={{padding:12,background:'var(--a-info-bg)',border:'1px solid var(--a-info-line)',borderRadius:8,color:'var(--a-info)'}}>
        <AIcon name="info" size={12}/> 變數名稱由系統提供。若需要新增變數，請聯絡工程團隊擴充觸發事件的 payload。
      </div>
    </div>
  );
};

// ---------- Stats tab ----------

const TemplateStats = ({ tpl }) => {
  const dispatches = useMemo(() =>
    ADMIN.msgDispatches.filter(d => d.templateId === tpl.id).sort((a,b) => new Date(a.date) - new Date(b.date)),
    [tpl.id]
  );
  const max = Math.max(1, ...dispatches.map(d => d.sent));
  const total = dispatches.reduce((s,d) => ({ sent:s.sent+d.sent, delivered:s.delivered+d.delivered, opened:s.opened+d.opened, clicked:s.clicked+d.clicked }), {sent:0,delivered:0,opened:0,clicked:0});
  const isCodedChannel = false;

  return (
    <div>
      {/* Summary */}
      <div className="grid-4 mb-20">
        <div className="a-stat">
          <div className="a-stat-label">30 天寄送</div>
          <div className="a-stat-value">{fmtNum(total.sent)}</div>
          <div className="a-stat-foot">平均每日 {Math.round(total.sent/30)}</div>
        </div>
        <div className="a-stat">
          <div className="a-stat-label">送達率</div>
          <div className="a-stat-value">{pct(total.delivered, total.sent)}%</div>
          <div className="a-stat-foot">{fmtNum(total.delivered)} 已送達</div>
        </div>
        <div className="a-stat">
          <div className="a-stat-label">{isCodedChannel ? '使用率' : '開啟率'}</div>
          <div className="a-stat-value">{isCodedChannel ? '—' : pct(total.opened, total.delivered) + '%'}</div>
          <div className="a-stat-foot">{isCodedChannel ? '驗證類通道不追蹤開啟' : fmtNum(total.opened) + ' 次開啟'}</div>
        </div>
        <div className="a-stat">
          <div className="a-stat-label">點擊率</div>
          <div className="a-stat-value">{isCodedChannel ? '—' : pct(total.clicked, total.opened) + '%'}</div>
          <div className="a-stat-foot">{isCodedChannel ? '' : fmtNum(total.clicked) + ' 次點擊'}</div>
        </div>
      </div>

      {/* Volume chart */}
      <div className="a-label" style={{marginBottom:12}}>每日寄送量（最近 30 天）</div>
      <div style={{display:'flex',alignItems:'flex-end',gap:3,height:140,padding:'0 2px 8px',borderBottom:'1px solid var(--a-line)'}}>
        {dispatches.map((d,i) => {
          const h = Math.max(4, (d.sent / max) * 130);
          return (
            <div key={i} title={`${new Date(d.date).toLocaleDateString('zh-TW',{month:'numeric',day:'numeric'})} · ${d.sent} 寄 / ${d.opened} 開 / ${d.clicked} 點`}
              style={{flex:1,height:h,background:'linear-gradient(180deg,var(--a-primary),var(--a-primary-2))',borderRadius:'2px 2px 0 0',position:'relative'}}>
              {!isCodedChannel && (
                <div style={{position:'absolute',left:0,right:0,bottom:0,height:(d.opened/d.sent)*h,background:'var(--a-success)',opacity:0.7,borderRadius:'0 0 2px 2px'}}/>
              )}
            </div>
          );
        })}
      </div>
      <div className="flex items-center gap-16 mt-8 fs-11 text-muted">
        <span className="flex items-center gap-4"><span style={{width:10,height:10,borderRadius:2,background:'var(--a-primary)'}}/> 寄送量</span>
        {!isCodedChannel && <span className="flex items-center gap-4"><span style={{width:10,height:10,borderRadius:2,background:'var(--a-success)'}}/> 已開啟</span>}
      </div>

      {/* Funnel */}
      <div className="a-label mt-20 mb-12">轉換漏斗</div>
      <div className="fcol gap-8">
        {[
          { label: '寄送', n: total.sent, pct: 100, color: 'var(--a-primary)' },
          { label: '送達', n: total.delivered, pct: pct(total.delivered, total.sent), color: 'var(--a-info)' },
          !isCodedChannel && { label: '開啟', n: total.opened, pct: pct(total.opened, total.sent), color: 'var(--a-success)' },
          !isCodedChannel && { label: '點擊', n: total.clicked, pct: pct(total.clicked, total.sent), color: 'var(--a-violet)' },
        ].filter(Boolean).map((r, i) => (
          <div key={i} className="flex items-center gap-12" style={{fontSize:12}}>
            <div style={{width:48,color:'var(--a-ink-muted)'}}>{r.label}</div>
            <div style={{flex:1,height:20,background:'var(--a-paper-2)',borderRadius:4,overflow:'hidden',border:'1px solid var(--a-line)'}}>
              <div style={{width:r.pct+'%',height:'100%',background:r.color,transition:'width 0.3s'}}/>
            </div>
            <div style={{width:100,textAlign:'right'}} className="tnum"><b>{fmtNum(r.n)}</b> <span className="text-muted fs-11">({r.pct}%)</span></div>
          </div>
        ))}
      </div>
    </div>
  );
};

// ---------- Settings tab ----------

const TemplateSettings = ({ tpl, enabled, setEnabled, scheduleDelay, setScheduleDelay }) => {
  return (
    <div>
      <div className="mb-20">
        <label className="a-label">啟用狀態</label>
        <div className="flex items-center gap-10" style={{padding:14,background:'var(--a-paper-2)',border:'1px solid var(--a-line)',borderRadius:8}}>
          <div className={`a-toggle ${enabled?'on':''}`} onClick={()=>setEnabled(!enabled)} style={{cursor:'pointer'}}>
            <div className="a-toggle-dot"/>
          </div>
          <div style={{flex:1}}>
            <div className="fs-13 fw-600">{enabled ? '已啟用' : '已停用'}</div>
            <div className="fs-11 text-muted mt-1">
              {enabled ? '觸發事件發生時會自動發送此模板' : '停用後觸發事件不會發送此模板的訊息'}
            </div>
          </div>
        </div>
      </div>

      <div className="mb-20">
        <label className="a-label">觸發事件</label>
        <div style={{padding:14,background:'var(--a-paper-2)',border:'1px solid var(--a-line)',borderRadius:8}}>
          <div className="fs-13 fw-600">{tpl.triggerLabel}</div>
          <div className="fs-11 text-muted a-mono mt-2">{tpl.trigger}</div>
          <div className="fs-11 text-muted mt-4">觸發事件由系統定義，無法自訂。</div>
        </div>
      </div>

      <div className="mb-20">
        <label className="a-label">延遲發送</label>
        <div className="flex items-center gap-8">
          <input type="number" className="a-input" style={{maxWidth:100}} min={0} max={1440} step={5}
            value={scheduleDelay} onChange={e=>setScheduleDelay(parseInt(e.target.value||0))}/>
          <span className="fs-12 text-muted">分鐘</span>
        </div>
        <div className="fs-11 text-muted mt-6">設為 0 表示觸發事件發生時立即發送；可用於「新註冊 30 分鐘後提醒」等情境。</div>
      </div>

      <div className="mb-20">
        <label className="a-label">通道設定</label>
        <div style={{padding:14,background:'var(--a-paper-2)',border:'1px solid var(--a-line)',borderRadius:8}}>
          <div className="flex items-center jc-between">
            <div>
              <div className="fs-13 fw-600">{CHANNEL_META[tpl.channel].label}</div>
              <div className="fs-11 text-muted mt-2">通道類型已設定，無法變更。</div>
            </div>
            <span className="a-badge" style={{background:CHANNEL_META[tpl.channel].bg,color:CHANNEL_META[tpl.channel].color,border:`1px solid ${CHANNEL_META[tpl.channel].line}`,fontSize:11,padding:'2px 8px'}}>
              {CHANNEL_META[tpl.channel].label}
            </span>
          </div>
        </div>
      </div>

      <div style={{padding:14,background:'var(--a-warn-bg)',border:'1px solid var(--a-warn-line)',borderRadius:8,color:'var(--a-warn)'}}>
        <div className="fs-12 fw-600"><AIcon name="alert" size={11}/> 危險區</div>
        <div className="fs-11 mt-6" style={{color:'var(--a-ink-soft)'}}>
          此模板已寄送 {fmtNum(tpl.stats.sent)} 次，無法刪除。若要停止使用，請改為停用狀態。
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { TemplatesPage });