CAPTION

setCaption(e.target.value)} />
          <div className="row gap-sm" style={{ marginTop: 8, flexWrap: 'wrap' }}>
            {channels.map(ch => {
              const cap = PLATFORM_LIMITS[ch];
              if (!cap) return null;
              const len = caption.length;
              const okSoft = len <= cap.soft;
              const okHard = len <= cap.cap;
              return (
                <Badge key={ch} variant={okSoft ? 'green' : okHard ? 'yellow' : 'red'}>
                  {cap.label}: {len}/{cap.soft}
                </Badge>
              );
            })}
          </div>
          <div className="divider"></div>
          <div className="t-2xs strong dimmer" style={{ marginBottom: 6 }}>HASHTAG SET (từ tone "{tone.name}")</div>
          <div className="row gap-sm" style={{ flexWrap: 'wrap' }}>
            {tone.hashtagSet.map(h => <Badge key={h} variant="neutral">{h}</Badge>)}
            <Button variant="ghost" size="sm" icon="plus">Thêm hashtag</Button>
          </div>
        </div>
        <div>
          <div className="t-2xs strong dimmer" style={{ marginBottom: 6 }}>PREVIEW</div>
          <div className="card" style={{ padding: 12, background: 'var(--bg-2)' }}>
            {selected[0] && <Placeholder label={selected[0].label} brand={brandOf(selected[0].brand)} ratio="4/3" big style={{ marginBottom: 10 }} />}
            <div className="t-sm" style={{ whiteSpace: 'pre-wrap', lineHeight: 1.6 }}>{caption || <span className="dimmer">(caption sẽ hiện ở đây)</span>}</div>
            <div className="divider"></div>
            <div className="row gap-sm" style={{ flexWrap: 'wrap' }}>
              {selected.slice(0, 3).map(p => (
                <div key={p.id} className="row gap-sm" style={{ padding: '4px 8px', background: 'var(--surface)', borderRadius: 'var(--r-md)' }}>
                  <BrandLogo brand={brandOf(p.brand)} size={16} />
                  <span className="t-2xs strong">{fmtVND(p.priceVnd || p.vnd)}</span>
                </div>
              ))}
              {selected.length > 3 && <span className="t-2xs dimmer">+{selected.length - 3}</span>}
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

/* ========================= 2. CAPTION LAB ========================= */
function CaptionLabScreen() {
  const app = useApp();
  const queue = useMemoC(() => POSTS.filter(po => po.status === 'text_pending'), []);
  const [openId, setOpenId] = useStateC(queue[0] ? queue[0].id : null);
  const openPost = queue.find(p => p.id === openId) || queue[0];
  const [variantA, setVariantA] = useStateC(openPost ? openPost.caption : '');
  const [variantB, setVariantB] = useStateC('');
  const [activeVariant, setActiveVariant] = useStateC('A');
  const [platforms, setPlatforms] = useStateC(['facebook', 'instagram']);

useEffectC(() => {
    if (openPost) {
      setVariantA(openPost.caption || '');
      setVariantB('');
    }
  }, [openId]);

function regenVariantB() {
    if (!openPost) return;
    const p = app.products.find(x => x.id === openPost.productId);
    if (!p) return;
    const tone = TONE_PRESETS[Math.floor(Math.random() * TONE_PRESETS.length)];
    setVariantB(generateSampleCaption(p, tone, 'single'));
    app.toast && app.toast('Đã gen variant B với tone "' + tone.name + '"', 'sparkle');
  }

if (!openPost) {
    return <div className="page-pad"><Empty icon="sparkle" title="Không có caption đang chờ" desc="Caption Lab chỉ hiện khi có bài đang ở trạng thái chờ duyệt text." /></div>;
  }

const p = app.products.find(x => x.id === openPost.productId);
  const active = activeVariant === 'A' ? variantA : variantB;
  const setActive = activeVariant === 'A' ? setVariantA : setVariantB;

return (
    <div className="page-pad wide">
      <div className="row" style={{ marginBottom: 14, flexWrap: 'wrap', gap: 12 }}>
        <div style={{ flex: 1, minWidth: 240 }}>
          <div className="t-h1">Caption Lab</div>
          <div className="t-sm dim" style={{ marginTop: 2 }}>{queue.length} caption đang chờ · A/B variant · regen từng dòng · spell-check · length per platform.</div>
        </div>
        <Button variant="primary" size="sm" icon="check" onClick={() => app.toast && app.toast('Đã commit variant ' + activeVariant, 'check')}>Commit variant {activeVariant}</Button>
      </div>

<div style={{ display: 'grid', gridTemplateColumns: '260px 1fr', gap: 14, alignItems: 'start' }}>
        {/* Queue list */}
        <div className="card" style={{ overflow: 'hidden', maxHeight: 600, overflowY: 'auto' }}>
          {queue.map(po => {
            const product = app.products.find(x => x.id === po.productId);
            const b = product ? brandOf(product.brand) : null;
            return (
              <div key={po.id} onClick={() => setOpenId(po.id)} style={{
                padding: 10, cursor: 'pointer', borderBottom: '1px solid var(--border)',
                background: openId === po.id ? 'var(--accent-soft)' : 'transparent'
              }}>
                <div className="row gap-sm">
                  {b && <BrandLogo brand={b} size={20} />}
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="t-xs strong clip-1">{product ? product.titleVn : '(unknown)'}</div>
                    <div className="t-2xs dimmer mono clip-1">{po.id}</div>
                  </div>
                  <StatusPill status={po.status} />
                </div>
              </div>
            );
          })}
        </div>

{/* Editor */}
        <div>
          {/* Platforms selector */}
          <div className="card card-pad" style={{ marginBottom: 12 }}>
            <div className="t-2xs strong dimmer" style={{ marginBottom: 6 }}>HIỂN THỊ COUNT THEO</div>
            <div className="row gap-sm" style={{ flexWrap: 'wrap' }}>
              {Object.entries(PLATFORM_LIMITS).map(([k, c]) => (
                <button key={k} className={'badge ' + (platforms.includes(k) ? 'badge-accent' : 'badge-neutral')}
                  style={{ cursor: 'pointer' }}
                  onClick={() => setPlatforms(ps => ps.includes(k) ? ps.filter(x => x !== k) : [...ps, k])}>
                  {c.label}
                </button>
              ))}
            </div>
          </div>

{/* Variant tabs */}
          <div className="row" style={{ marginBottom: 10, gap: 8 }}>
            {['A', 'B'].map(v => (
              <button key={v} onClick={() => setActiveVariant(v)} className={'btn ' + (activeVariant === v ? 'btn-primary' : 'btn-default') + ' btn-sm'}>
                Variant {v}{v === 'B' && !variantB && ' (chưa gen)'}
              </button>
            ))}
            <div className="topbar-spacer"></div>
            <Button variant="ghost" size="sm" icon="sparkle" onClick={regenVariantB}>Re-gen variant B (random tone)</Button>
          </div>

{/* Editor */}
          <div className="card card-pad">
            <textarea className="textarea" rows={10} value={active} onChange={e => setActive(e.target.value)} />
            <div className="row gap-sm" style={{ marginTop: 8, flexWrap: 'wrap' }}>
              {platforms.map(plt => {
                const cap = PLATFORM_LIMITS[plt];
                const len = active.length;
                const okSoft = len <= cap.soft;
                const okHard = len <= cap.cap;
                return (
                  <Badge key={plt} variant={okSoft ? 'green' : okHard ? 'yellow' : 'red'}>
                    {cap.label}: {len}/{cap.soft}
                  </Badge>
                );
              })}
            </div>
            <div className="divider"></div>
            <div className="row gap-sm" style={{ flexWrap: 'wrap' }}>
              <Button variant="ghost" size="sm" icon="sparkle" onClick={() => app.toast && app.toast('Regen dòng đầu', 'sparkle')}>Regen dòng 1</Button>
              <Button variant="ghost" size="sm" icon="sparkle" onClick={() => app.toast && app.toast('Regen CTA', 'sparkle')}>Regen CTA</Button>
              <Button variant="ghost" size="sm" icon="check">Spell-check</Button>
              <Button variant="ghost" size="sm" icon="palette">Emoji set</Button>
              <Button variant="ghost" size="sm" icon="filter">Lọc hashtag spam</Button>
            </div>
          </div>

{/* Side-by-side compare */}
          {variantB && (
            <div className="grid-2" style={{ marginTop: 14, gap: 12 }}>
              {['A', 'B'].map(v => {
                const text = v === 'A' ? variantA : variantB;
                return (
                  <div key={v} className="card card-pad" style={{ background: activeVariant === v ? 'var(--accent-soft)' : 'var(--bg-2)' }}>
                    <div className="t-2xs strong dimmer" style={{ marginBottom: 6 }}>VARIANT {v}</div>
                    <div className="t-xs" style={{ whiteSpace: 'pre-wrap', lineHeight: 1.6, maxHeight: 200, overflowY: 'auto' }}>{text || '(empty)'}</div>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

/* ========================= 3. VISUAL LAB ========================= */
function VisualLabScreen() {
  const app = useApp();
  const queue = useMemoC(() => POSTS.filter(po => ['text_pending', 'image_pending'].includes(po.status)), []);
  const [openId, setOpenId] = useStateC(queue[0] ? queue[0].id : null);
  const openPost = queue.find(p => p.id === openId) || queue[0];
  const product = openPost ? app.products.find(x => x.id === openPost.productId) : null;
  const [frame, setFrame] = useStateC('zei_main');
  const [overlayPrice, setOverlayPrice] = useStateC(true);
  const [overlayDisc, setOverlayDisc] = useStateC(true);
  const [overlayLogo, setOverlayLogo] = useStateC(true);
  const [model, setModel] = useStateC('asian_22');
  const [prompt, setPrompt] = useStateC('');
  const [variants, setVariants] = useStateC(3);

useEffectC(() => {
    if (product) {
      setPrompt(`Cô gái Á Đông 22-25 tuổi, mặc ${product.titleVn.toLowerCase()}, phong cách trẻ trung, ánh sáng studio mềm, phông nền tối giản, focus vào sản phẩm. Aspect 4:3. Style ${brandOf(product.brand).name} lookbook.`);
    }
  }, [openId, product]);

if (!openPost || !product) {
    return <div className="page-pad"><Empty icon="sparkle" title="Không có bài cần làm visual" desc="Visual Lab chỉ hiện khi có post ở trạng thái chờ duyệt text hoặc chờ duyệt ảnh." /></div>;
  }

const frames = [
    { id: 'zei_main',    name: 'Zei JP main',     desc: 'Frame chính Zei JP — logo + brand color' },
    { id: 'zei_sale',    name: 'Zei JP sale',     desc: 'Badge giảm giá to + giá VND' },
    { id: 'zei_lookbook',name: 'Lookbook',        desc: 'Magazine style, không nhiều text' },
    { id: 'zei_story',   name: '9:16 Story',      desc: 'Dọc cho IG/FB story' },
    { id: 'zei_carousel',name: 'Carousel cover',  desc: 'Cover ảnh đầu carousel' },
    { id: 'zei_none',    name: 'Không frame',     desc: 'Raw image, không overlay text' },
  ];
  const models = [
    { id: 'asian_22',  name: 'Nữ Á 22-25',     desc: 'Tóc đen dài, 1m65, trẻ năng động' },
    { id: 'asian_27',  name: 'Nữ Á 27-30',     desc: 'Sang trọng, business casual' },
    { id: 'asian_m',   name: 'Nam Á 25-28',    desc: 'Streetwear, atletic' },
    { id: 'flatlay',   name: 'Flat-lay (no model)', desc: 'Chỉ sản phẩm — phù hợp basics' },
  ];

return (
    <div className="page-pad wide">
      <div className="row" style={{ marginBottom: 14, flexWrap: 'wrap', gap: 12 }}>
        <div style={{ flex: 1, minWidth: 240 }}>
          <div className="t-h1">Visual Lab</div>
          <div className="t-sm dim" style={{ marginTop: 2 }}>Studio ảnh AI · model lock, frame brand, overlay price · batch 3-5 variants từ Banana Pro.</div>
        </div>
        <Button variant="primary" size="sm" icon="sparkle" onClick={() => app.toast && app.toast('Đang gen ' + variants + ' variant bằng Banana Pro…', 'sparkle')}>Gen {variants} variant</Button>
      </div>

<div style={{ display: 'grid', gridTemplateColumns: '260px 1fr 320px', gap: 14, alignItems: 'start' }}>
        {/* Queue */}
        <div className="card" style={{ overflow: 'hidden', maxHeight: 600, overflowY: 'auto' }}>
          {queue.map(po => {
            const pr = app.products.find(x => x.id === po.productId);
            if (!pr) return null;
            const b = brandOf(pr.brand);
            return (
              <div key={po.id} onClick={() => setOpenId(po.id)} style={{
                padding: 10, cursor: 'pointer', borderBottom: '1px solid var(--border)',
                background: openId === po.id ? 'var(--accent-soft)' : 'transparent'
              }}>
                <div className="row gap-sm">
                  <Placeholder label="" brand={b} ratio="3/4" style={{ width: 30, height: 40, borderRadius: 4 }} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="t-xs strong clip-1">{pr.titleVn}</div>
                    <div className="t-2xs dimmer mono">{pr.sku}</div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>

{/* Preview */}
        <div>
          <div className="grid-2" style={{ gap: 10 }}>
            {Array.from({ length: variants }).map((_, i) => (
              <div key={i} className="card" style={{ padding: 8, position: 'relative' }}>
                <Placeholder label={'Variant ' + (i + 1)} brand={brandOf(product.brand)} ratio="4/3" big style={{ borderRadius: 'var(--r-md)' }} />
                {overlayPrice && (
                  <div style={{ position: 'absolute', bottom: 14, left: 14, background: 'rgba(0,0,0,0.7)', color: '#fff', padding: '4px 10px', borderRadius: 'var(--r-sm)', fontFamily: 'JetBrains Mono, monospace', fontSize: 13, fontWeight: 700 }}>
                    {fmtVND(product.priceVnd || product.vnd)}
                  </div>
                )}
                {overlayDisc && product.disc > 0 && (
                  <div style={{ position: 'absolute', top: 14, right: 14, background: 'var(--red)', color: '#fff', padding: '6px 10px', borderRadius: '50%', width: 50, height: 50, display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 14 }}>
                    -{product.disc}%
                  </div>
                )}
                {overlayLogo && (
                  <div style={{ position: 'absolute', top: 14, left: 14, background: 'rgba(255,255,255,0.9)', padding: '4px 8px', borderRadius: 'var(--r-sm)', fontSize: 11, fontWeight: 700, color: 'var(--accent)' }}>Zei JP</div>
                )}
                <div className="row gap-sm" style={{ marginTop: 8 }}>
                  <Button variant="ghost" size="sm" icon="check" onClick={() => app.toast && app.toast('Đã chọn variant ' + (i + 1), 'check')}>Chọn</Button>
                  <Button variant="ghost" size="sm" icon="rotate" onClick={() => app.toast && app.toast('Đang regen variant ' + (i + 1), 'sparkle')}>Regen</Button>
                  <Button variant="ghost" size="sm" icon="external"></Button>
                </div>
              </div>
            ))}
          </div>
        </div>

{/* Controls */}
        <div className="card card-pad">
          <div className="t-2xs strong dimmer" style={{ marginBottom: 8 }}>FRAME BRAND</div>
          <div className="col" style={{ gap: 6, marginBottom: 14 }}>
            {frames.map(f => (
              <button key={f.id} onClick={() => setFrame(f.id)} style={{
                padding: '8px 10px', borderRadius: 'var(--r-md)', cursor: 'pointer', textAlign: 'left',
                background: frame === f.id ? 'var(--accent-soft)' : 'var(--bg-2)',
                border: '1px solid ' + (frame === f.id ? 'var(--accent)' : 'var(--border)'),
                color: 'var(--text)',
              }}>
                <div className="t-xs strong">{f.name}</div>
                <div className="t-2xs dimmer">{f.desc}</div>
              </button>
            ))}
          </div>

<div className="t-2xs strong dimmer" style={{ marginBottom: 8 }}>OVERLAY</div>
          <div className="col" style={{ gap: 8, marginBottom: 14 }}>
            <div className="between"><span className="t-xs">Giá VND</span><Toggle on={overlayPrice} onChange={setOverlayPrice} /></div>
            <div className="between"><span className="t-xs">Badge % giảm</span><Toggle on={overlayDisc} onChange={setOverlayDisc} /></div>
            <div className="between"><span className="t-xs">Logo Zei JP</span><Toggle on={overlayLogo} onChange={setOverlayLogo} /></div>
          </div>

<div className="t-2xs strong dimmer" style={{ marginBottom: 8 }}>MODEL</div>
          <select className="select" value={model} onChange={e => setModel(e.target.value)} style={{ marginBottom: 14 }}>
            {models.map(m => <option key={m.id} value={m.id}>{m.name}</option>)}
          </select>

<div className="t-2xs strong dimmer" style={{ marginBottom: 8 }}>SỐ VARIANT</div>
          <Seg value={String(variants)} options={[{ value: '1', label: '1' }, { value: '3', label: '3' }, { value: '5', label: '5' }]} onChange={v => setVariants(+v)} />

<div className="divider"></div>
          <div className="t-2xs strong dimmer" style={{ marginBottom: 6 }}>PROMPT BANANA PRO</div>
          <textarea className="textarea mono t-2xs" rows={6} value={prompt} onChange={e => setPrompt(e.target.value)} />
          <div className="t-2xs dimmer" style={{ marginTop: 6 }}>Tuân nano-banana-pro-prompts-recommend-skill</div>
        </div>
      </div>
    </div>
  );
}

/* ========================= 4. TONE LIBRARY ========================= */
function ToneLibraryScreen() {
  const app = useApp();
  const [openId, setOpenId] = useStateC(null);
  const openTone = TONE_PRESETS.find(t => t.id === openId);

return (
    <div className="page-pad wide">
      <div className="row" style={{ marginBottom: 14, flexWrap: 'wrap', gap: 12 }}>
        <div style={{ flex: 1, minWidth: 240 }}>
          <div className="t-h1">Tone Library</div>
          <div className="t-sm dim" style={{ marginTop: 2 }}>{TONE_PRESETS.length} tone presets · click "Use this tone" → mở Composer với tone đã chọn sẵn.</div>
        </div>
        <Button variant="primary" size="sm" icon="plus" onClick={() => app.toast && app.toast('Tạo tone mới — clone từ preset gần nhất', 'plus')}>Tone mới</Button>
      </div>

<div className="grid-3" style={{ gap: 16, alignItems: 'start' }}>
        {TONE_PRESETS.map(t => (
          <div key={t.id} className="card card-pad">
            <div className="row gap-sm" style={{ marginBottom: 10 }}>
              <div style={{ width: 44, height: 44, borderRadius: 'var(--r-md)', background: 'var(--bg-2)', display: 'grid', placeItems: 'center', fontSize: 24 }}>
                {t.emoji.split('')[0]}
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="t-h2 clip-1">{t.name}</div>
                <div className="t-2xs dimmer clip-1">{t.persona}</div>
              </div>
            </div>
            <div className="panel" style={{ padding: 12, marginBottom: 12, background: 'var(--bg-2)' }}>
              <div className="t-2xs strong dimmer" style={{ marginBottom: 4 }}>CAPTION MẪU</div>
              <div className="t-xs" style={{ lineHeight: 1.6 }}>"{t.sample}"</div>
            </div>
            <div className="t-2xs strong dimmer" style={{ marginBottom: 4 }}>HASHTAG</div>
            <div className="row gap-sm" style={{ flexWrap: 'wrap', marginBottom: 12 }}>
              {t.hashtagSet.map(h => <Badge key={h} variant="neutral">{h}</Badge>)}
            </div>
            <div className="row gap-sm">
              <Button variant="primary" size="sm" icon="sparkle" className="btn-block" onClick={() => app.toast && app.toast('Mở Composer với tone "' + t.name + '"', 'sparkle')}>Dùng tone này</Button>
              <Button variant="ghost" size="sm" icon="edit" onClick={() => setOpenId(t.id)}></Button>
            </div>
          </div>
        ))}
      </div>

{openTone && (
        <Drawer title={'Chi tiết tone · ' + openTone.name} sub={openTone.persona} onClose={() => setOpenId(null)}
          foot={<>
            <Button variant="ghost" onClick={() => setOpenId(null)}>Đóng</Button>
            <Button variant="primary" icon="sparkle" onClick={() => { app.toast && app.toast('Mở Composer với tone "' + openTone.name + '"', 'sparkle'); setOpenId(null); }}>Dùng tone này</Button>
          </>}>
          <Field label="Persona"><textarea className="textarea" rows={2} defaultValue={openTone.persona} /></Field>
          <div style={{ height: 10 }}></div>
          <Field label="Emoji set"><input className="input" defaultValue={openTone.emoji} /></Field>
          <div style={{ height: 10 }}></div>
          <Field label="Caption mẫu"><textarea className="textarea" rows={3} defaultValue={openTone.sample} /></Field>
          <div className="divider"></div>
          <div className="grid-2" style={{ gap: 12 }}>
            <Field label="DO"><textarea className="textarea" rows={4} defaultValue={openTone.do.join('\n')} /></Field>
            <Field label="DON'T"><textarea className="textarea" rows={4} defaultValue={openTone.dont.join('\n')} /></Field>
          </div>
        </Drawer>
      )}
    </div>
  );
}

Object.assign(window, {
  ComposeScreen, CaptionLabScreen, VisualLabScreen, ToneLibraryScreen,
  PLATFORM_LIMITS, CONTENT_TYPES,
});