// Consumer Search (multi-filter) + Owner Telegram Inbox
const { searchCatalog, brands, seasons, parts, telegramFeed } = WU_DATA;

// ────────────────────────────────────────────────────
// Consumer SEARCH — brand × season × part cross filter
// ────────────────────────────────────────────────────
function ConsumerSearch({ variant = 'pill' }) {
  const [q, setQ] = useState('');
  const [sel, setSel] = useState({ brand: ['WORKUP'], season: ['가을'], part: ['상의'] });
  const [sort, setSort] = useState('NEW');

  const toggle = (g, v) => setSel(s => ({ ...s, [g]: s[g].includes(v) ? s[g].filter(x => x !== v) : [...s[g], v] }));
  const clear = () => setSel({ brand: [], season: [], part: [] });

  const filtered = searchCatalog.filter(p => {
    if (q && !p.kr.includes(q) && !p.code.toLowerCase().includes(q.toLowerCase()) && !p.brand.toLowerCase().includes(q.toLowerCase())) return false;
    if (sel.brand.length && !sel.brand.includes(p.brand)) return false;
    if (sel.season.length && !p.seasons.some(s => sel.season.includes(s))) return false;
    if (sel.part.length && !p.parts.some(s => sel.part.includes(s))) return false;
    return true;
  });

  const activeCount = sel.brand.length + sel.season.length + sel.part.length;

  return (
    <div className="wu wu-scroll" style={{ height: '100%', overflow: 'auto', background: 'var(--wu-bg)', paddingBottom: variant === 'pill' ? 100 : 80 }}>
      <div style={{ padding: 'calc(env(safe-area-inset-top, 20px) + 12px) 16px 8px' }}>
        <div className="mono" style={{ fontSize: 10, color: 'var(--wu-mute)' }}>SEARCH · 상품 찾기</div>
        <div className="display" style={{ fontSize: 32, marginTop: 4 }}>FIND IT.</div>
        <div style={{ background: '#fff', border: '1.5px solid var(--wu-ink)', borderRadius: 999, padding: '10px 16px', marginTop: 14, display: 'flex', alignItems: 'center', gap: 10 }}>
          <svg width="14" height="14" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="9" cy="9" r="6"/><path d="M14 14l4 4"/></svg>
          <input value={q} onChange={e => setQ(e.target.value)} placeholder="브랜드 · SKU · 품명" className="kr" style={{ flex: 1, border: 0, outline: 0, background: 'transparent', fontSize: 13, fontWeight: 600 }} />
          {q && <button onClick={() => setQ('')} style={{ color: 'var(--wu-mute)' }}>✕</button>}
        </div>
      </div>

      {/* Filter facets */}
      <div style={{ padding: '8px 16px 0' }}>
        {[
          { key: 'brand', label: 'BRAND · 브랜드', options: brands },
          { key: 'part', label: 'PART · 부위', options: parts },
          { key: 'season', label: 'SEASON · 시즌', options: seasons },
        ].map(g => (
          <div key={g.key} style={{ marginTop: 14 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
              <div className="mono" style={{ fontSize: 10, color: 'var(--wu-mute)', letterSpacing: '0.08em' }}>{g.label}</div>
              {sel[g.key].length > 0 && <span className="mono" style={{ fontSize: 9, color: 'var(--wu-ink)', fontWeight: 700 }}>● {sel[g.key].length} 선택됨</span>}
            </div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
              {g.options.map(o => {
                const active = sel[g.key].includes(o);
                return (
                  <button key={o} onClick={() => toggle(g.key, o)} style={{
                    padding: '7px 12px', fontSize: 11, fontWeight: 700, borderRadius: 4,
                    background: active ? 'var(--wu-ink)' : '#fff',
                    color: active ? 'var(--wu-paper)' : 'var(--wu-ink)',
                    border: '1px solid ' + (active ? 'var(--wu-ink)' : 'var(--wu-line)'),
                    fontFamily: g.key === 'brand' ? 'Archivo' : 'Pretendard',
                  }}>{o}</button>
                );
              })}
            </div>
          </div>
        ))}
      </div>

      {/* Active filter summary + sort */}
      <div style={{ margin: '18px 16px 0', background: activeCount > 0 ? 'var(--wu-lime)' : 'var(--wu-paper)', border: '1px solid var(--wu-line)', padding: '12px 14px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div>
          <div className="mono" style={{ fontSize: 10, color: 'var(--wu-ink)', fontWeight: 700 }}>{activeCount > 0 ? `${activeCount} FILTERS · ${filtered.length} 결과` : `${filtered.length} 전체 상품`}</div>
          {activeCount > 0 && <button onClick={clear} className="kr" style={{ fontSize: 11, textDecoration: 'underline', marginTop: 4 }}>초기화 →</button>}
        </div>
        <div style={{ display: 'flex', background: '#fff', padding: 2, borderRadius: 4, border: '1px solid var(--wu-ink)' }}>
          {['NEW', '₩↑', '₩↓'].map(s => (
            <button key={s} onClick={() => setSort(s)} className="mono" style={{ padding: '4px 8px', fontSize: 10, fontWeight: 700, background: sort === s ? 'var(--wu-ink)' : 'transparent', color: sort === s ? 'var(--wu-lime)' : 'var(--wu-ink)' }}>{s}</button>
          ))}
        </div>
      </div>

      {/* Results grid */}
      <div style={{ padding: '18px 16px 0' }}>
        {filtered.length === 0 ? (
          <div style={{ padding: '40px 20px', background: 'var(--wu-paper)', border: '1px dashed var(--wu-line)', textAlign: 'center' }}>
            <div className="display" style={{ fontSize: 22, color: 'var(--wu-mute)' }}>NO MATCH.</div>
            <div className="kr" style={{ fontSize: 12, color: 'var(--wu-mute)', marginTop: 6 }}>필터 조합을 바꿔보세요.</div>
          </div>
        ) : (
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            {filtered.map(p => (
              <button key={p.id} onClick={() => {
                if (window.__showProductDetail) window.__showProductDetail({
                  title: p.kr, body: '', photos: [],
                  parsed: { brand: p.brand, name: p.kr, kr: p.kr, code: p.code, retail: p.retail, wholesale: 0, sizes: [], colors_kr: [], parts: p.parts, seasons: p.seasons },
                  highlights: [],
                });
              }} style={{ textAlign: 'left', cursor: 'pointer', background: 'none', border: 'none', padding: 0 }}>
                <div style={{ position: 'relative' }}>
                  <WuPhoto label={p.code} ratio="4/5" tint={p.colors?.[0] ? `linear-gradient(160deg, ${p.colors[0]}33, ${p.colors[0]}66)` : undefined} />
                  {p.tag && <span className="wu-tag" style={{ position: 'absolute', top: 8, left: 8, background: p.tag === 'NEW' ? 'var(--wu-lime)' : 'var(--wu-orange)', color: p.tag === 'NEW' ? 'var(--wu-ink)' : '#fff' }}>{p.tag}</span>}
                  <span className="mono" style={{ position: 'absolute', bottom: 8, left: 8, background: 'rgba(255,255,255,0.9)', padding: '2px 6px', fontSize: 9, fontWeight: 700 }}>{p.brand}</span>
                </div>
                <div style={{ marginTop: 8 }}>
                  <div className="kr" style={{ fontSize: 12, fontWeight: 700 }}>{p.kr}</div>
                  <div style={{ display: 'flex', gap: 4, marginTop: 4, flexWrap: 'wrap' }}>
                    {p.parts.map(x => <span key={x} className="mono" style={{ fontSize: 9, color: 'var(--wu-mute)' }}>#{x}</span>)}
                    {p.seasons.slice(0, 1).map(x => <span key={x} className="mono" style={{ fontSize: 9, color: 'var(--wu-mute)' }}>#{x}</span>)}
                  </div>
                  <div className="display" style={{ fontSize: 14, marginTop: 6 }}>{wuPrice(p.retail)}</div>
                </div>
              </button>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────
// OWNER TELEGRAM INBOX — products ingested from Telegram channels
// ────────────────────────────────────────────────────
function OwnerTelegramInbox() {
  const [selected, setSelected] = useState('T1');
  const [persona, setPersona] = useState('OWNER'); // OWNER | CONSUMER
  const msg = telegramFeed.find(t => t.id === selected);

  return (
    <div className="wu" style={{ height: '100%', background: 'var(--wu-bg)', display: 'flex', overflow: 'hidden' }}>
      {/* Left: channels + feed */}
      <div style={{ width: 340, background: 'var(--wu-paper)', borderRight: '1px solid var(--wu-line)', display: 'flex', flexDirection: 'column', flexShrink: 0 }}>
        <div style={{ padding: '20px 18px 10px' }}>
          <div className="mono" style={{ fontSize: 10, color: 'var(--wu-mute)' }}>TELEGRAM INGEST · ● LIVE</div>
          <div className="display" style={{ fontSize: 22, marginTop: 2 }}>텔레그램 인박스</div>
          <div className="kr" style={{ fontSize: 11, color: 'var(--wu-mute)', marginTop: 4, lineHeight: 1.5 }}>연결된 채널에서 이미지·설명을 받아 상품으로 변환합니다.</div>
        </div>

        <div style={{ padding: '6px 14px' }}>
          <div style={{ background: 'var(--wu-bg)', border: '1px solid var(--wu-line)', borderRadius: 6, padding: 10 }}>
            <div className="mono" style={{ fontSize: 9, color: 'var(--wu-mute)' }}>CONNECTED · 6 CHANNELS</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginTop: 6 }}>
              {['@workup_hq_supply', '@forge_supplier', '@oaklane_drop', '@millhouse_ko', '@ironcloth_bot', '+2'].map(c => (
                <span key={c} className="mono" style={{ fontSize: 9, padding: '2px 6px', background: 'var(--wu-ink)', color: 'var(--wu-lime)', fontWeight: 600 }}>{c}</span>
              ))}
            </div>
          </div>
        </div>

        <div className="wu-scroll" style={{ flex: 1, overflow: 'auto', paddingBottom: 10 }}>
          {telegramFeed.map(t => (
            <div key={t.id} onClick={() => setSelected(t.id)} style={{
              padding: '12px 14px', borderTop: '1px solid var(--wu-line)', cursor: 'pointer',
              background: selected === t.id ? 'var(--wu-bg)' : 'transparent',
              borderLeft: '3px solid ' + (selected === t.id ? 'var(--wu-ink)' : 'transparent'),
              display: 'flex', gap: 10, alignItems: 'flex-start',
            }}>
              {t.kind === 'image' ? (
                <div style={{ width: 48, height: 48, flexShrink: 0 }}><WuPhoto label="" ratio="1/1" tint={t.tint} /></div>
              ) : (
                <div style={{ width: 48, height: 48, background: '#E8E4DB', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, fontFamily: 'JetBrains Mono', fontSize: 9, color: 'var(--wu-mute)' }}>TXT</div>
              )}
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--wu-ink)', fontWeight: 700 }}>{t.author}</div>
                  <div className="mono" style={{ fontSize: 9, color: 'var(--wu-mute)' }}>{t.ts}</div>
                </div>
                <div className="mono" style={{ fontSize: 9, color: 'var(--wu-mute)', marginTop: 1 }}>{t.channel}</div>
                <div className="kr" style={{ fontSize: 11, color: 'var(--wu-ink)', marginTop: 4, overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', lineHeight: 1.4 }}>{t.caption}</div>
                <div style={{ display: 'flex', gap: 4, marginTop: 6 }}>
                  <span style={{ fontSize: 8, padding: '2px 5px', fontFamily: 'JetBrains Mono', fontWeight: 700,
                    background: t.status === 'PARSED' ? 'var(--wu-lime)' : t.status === 'NEW' ? 'var(--wu-orange)' : t.status === 'NEEDS_IMAGE' ? '#E3DFD6' : 'var(--wu-ink)',
                    color: t.status === 'PARSED' || t.status === 'NEEDS_IMAGE' ? 'var(--wu-ink)' : '#fff' }}>{t.status}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Middle: Telegram message preview */}
      <div style={{ width: 380, borderRight: '1px solid var(--wu-line)', background: 'var(--wu-bg)', display: 'flex', flexDirection: 'column', flexShrink: 0 }}>
        <div style={{ padding: '16px 18px', borderBottom: '1px solid var(--wu-line)', background: 'var(--wu-paper)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                {/* Tg paper-plane glyph */}
                <svg width="14" height="14" viewBox="0 0 14 14" fill="var(--wu-ink)"><path d="M1 6.5L13 1 11 13 7 9 4.5 11.5 4.5 8.5 10 4z"/></svg>
                <div className="mono" style={{ fontSize: 10, color: 'var(--wu-ink)', fontWeight: 700 }}>{msg.channel}</div>
              </div>
              <div className="kr" style={{ fontSize: 13, fontWeight: 700, marginTop: 2 }}>{msg.author}</div>
            </div>
            <div className="mono" style={{ fontSize: 10, color: 'var(--wu-mute)' }}>{msg.ts}</div>
          </div>
        </div>

        <div style={{ padding: 18, flex: 1, overflow: 'auto' }} className="wu-scroll">
          <div style={{ background: 'var(--wu-paper)', borderRadius: '14px 14px 14px 2px', overflow: 'hidden', border: '1px solid var(--wu-line)' }}>
            {msg.kind === 'image' && <WuPhoto label="TELEGRAM IMAGE" ratio="4/5" tint={msg.tint} />}
            <div className="kr" style={{ padding: 14, fontSize: 12, lineHeight: 1.6, whiteSpace: 'pre-wrap' }}>{msg.caption}</div>
          </div>
          <div className="mono" style={{ fontSize: 9, color: 'var(--wu-mute)', marginTop: 6, paddingLeft: 4 }}>RECEIVED {msg.ts} · SIG ✓</div>
        </div>
      </div>

      {/* Right: parsed product card */}
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <div style={{ padding: '16px 24px', borderBottom: '1px solid var(--wu-line)', background: 'var(--wu-paper)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div>
            <div className="mono" style={{ fontSize: 10, color: 'var(--wu-mute)' }}>AUTO-PARSED · CONVERT TO PRODUCT</div>
            <div className="display" style={{ fontSize: 18, marginTop: 2 }}>PARSE REVIEW</div>
          </div>
          <div style={{ display: 'flex', gap: 6 }}>
            <button className="wu-btn ghost" style={{ fontSize: 11, padding: '8px 12px' }}>건너뛰기</button>
            <button className="wu-btn lime" style={{ fontSize: 11, padding: '8px 12px' }}>상품 생성 →</button>
          </div>
        </div>

        <div className="wu-scroll" style={{ flex: 1, overflow: 'auto', padding: 24 }}>
          {/* Extracted fields */}
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
            <div className="mono" style={{ fontSize: 10, color: 'var(--wu-mute)', letterSpacing: '0.08em' }}>EXTRACTED FIELDS</div>
            <div className="mono" style={{ fontSize: 9, color: 'var(--wu-mute)' }}>공급가·판매가 자동 인식</div>
          </div>
          <div style={{ background: 'var(--wu-paper)', border: '1px solid var(--wu-line)' }}>
            {[
              ['브랜드', msg.parsed.brand, 'CONFIDENT'],
              ['상품명', msg.parsed.kr, 'CONFIDENT'],
              ['SKU', msg.parsed.code || '—', msg.parsed.code ? 'CONFIDENT' : 'MISSING'],
              ['공급가 · WHOLESALE', msg.parsed.wholesale ? wuPrice(msg.parsed.wholesale) + '  🔒 점주 전용' : '—', msg.parsed.wholesale ? 'CONFIDENT' : 'MISSING'],
              ['판매가 · RETAIL', msg.parsed.retail ? wuPrice(msg.parsed.retail) + '  👁 공개' : '—', msg.parsed.retail ? 'CONFIDENT' : 'MISSING'],
              ...(msg.parsed.wholesale && msg.parsed.retail ? [['마진율', Math.round(((msg.parsed.retail - msg.parsed.wholesale) / msg.parsed.retail) * 100) + '% · ' + wuPrice(msg.parsed.retail - msg.parsed.wholesale), 'DERIVED']] : []),
              ...(msg.parsed.sizes ? [['사이즈', msg.parsed.sizes.join(' / '), 'CONFIDENT']] : []),
              ...(msg.parsed.moq ? [['입수량', msg.parsed.moq + '장', 'CONFIDENT']] : []),
              ['부위', (msg.parsed.parts || []).join(' · ') || '—', 'INFERRED'],
              ['시즌', (msg.parsed.seasons || []).join(' · ') || '—', 'INFERRED'],
            ].map(([l, v, conf], i) => (
              React.createElement(React.Fragment, { key: l },
              <div style={{ display: 'grid', gridTemplateColumns: '150px 1fr auto', gap: 12, padding: '10px 14px', borderTop: i ? '1px solid var(--wu-line)' : 'none', alignItems: 'center',
                background: l.includes('공급가') ? 'rgba(214,255,61,0.18)' : l.includes('판매가') ? 'rgba(255,90,31,0.06)' : 'transparent' }}>
                <div className="mono" style={{ fontSize: 10, color: 'var(--wu-mute)', letterSpacing: '0.06em' }}>{l.toUpperCase()}</div>
                <div className="kr" style={{ fontSize: 13, fontWeight: l.includes('가') ? 700 : 600 }}>{v}</div>
                <span className="mono" style={{ fontSize: 9, padding: '2px 6px', fontWeight: 700,
                  background: conf === 'CONFIDENT' ? 'var(--wu-lime)' : conf === 'MISSING' ? 'var(--wu-orange)' : conf === 'DERIVED' ? 'var(--wu-ink)' : '#E3DFD6',
                  color: conf === 'MISSING' || conf === 'DERIVED' ? '#fff' : 'var(--wu-ink)' }}>{conf === 'CONFIDENT' ? '● OK' : conf === 'MISSING' ? '● 누락' : conf === 'DERIVED' ? 'f(x)' : '◐ 추론'}</span>
              </div>
              )
            ))}
          </div>

          {/* Generated product card preview with persona toggle */}
          <div style={{ marginTop: 24 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
              <div className="mono" style={{ fontSize: 10, color: 'var(--wu-mute)', letterSpacing: '0.08em' }}>PRODUCT CARD PREVIEW · 미리보기</div>
              <div style={{ display: 'flex', background: 'var(--wu-paper)', border: '1px solid var(--wu-ink)', padding: 2 }}>
                <button onClick={() => setPersona('OWNER')} className="mono" style={{ padding: '5px 10px', fontSize: 10, fontWeight: 700, background: persona === 'OWNER' ? 'var(--wu-ink)' : 'transparent', color: persona === 'OWNER' ? 'var(--wu-lime)' : 'var(--wu-ink)' }}>🔒 점주 뷰</button>
                <button onClick={() => setPersona('CONSUMER')} className="mono" style={{ padding: '5px 10px', fontSize: 10, fontWeight: 700, background: persona === 'CONSUMER' ? 'var(--wu-ink)' : 'transparent', color: persona === 'CONSUMER' ? 'var(--wu-lime)' : 'var(--wu-ink)' }}>👁 고객 뷰</button>
              </div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 16, background: persona === 'OWNER' ? 'var(--wu-ink)' : 'var(--wu-paper)', color: persona === 'OWNER' ? 'var(--wu-paper)' : 'var(--wu-ink)', border: '1px solid var(--wu-line)', padding: 18, position: 'relative' }}>
              <span className="mono" style={{ position: 'absolute', top: 8, right: 10, fontSize: 9, color: persona === 'OWNER' ? 'var(--wu-lime)' : 'var(--wu-mute)', fontWeight: 700 }}>{persona === 'OWNER' ? '● PARTNER VIEW' : '● CONSUMER VIEW'}</span>
              <div>
                <WuPhoto label={msg.parsed.code || 'NEW'} ratio="4/5" tint={msg.tint} dark={persona === 'OWNER'} />
              </div>
              <div>
                <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
                  <span className="mono" style={{ fontSize: 9, padding: '2px 6px', background: persona === 'OWNER' ? 'var(--wu-lime)' : 'var(--wu-ink)', color: persona === 'OWNER' ? 'var(--wu-ink)' : 'var(--wu-lime)', fontWeight: 700 }}>{msg.parsed.brand}</span>
                  {msg.parsed.code && <span className="mono" style={{ fontSize: 9, padding: '2px 6px', background: 'var(--wu-lime)', color: 'var(--wu-ink)', fontWeight: 700 }}>NEW</span>}
                  {msg.parsed.season_tag && <span className="mono" style={{ fontSize: 9, padding: '2px 6px', background: persona === 'OWNER' ? '#1A1A17' : 'var(--wu-bg)', color: persona === 'OWNER' ? 'var(--wu-paper)' : 'var(--wu-ink)', fontWeight: 700 }}>{msg.parsed.season_tag.toUpperCase()}</span>}
                </div>
                <div className="kr" style={{ fontSize: 20, fontWeight: 700, marginTop: 10 }}>{msg.parsed.kr}</div>
                <div className="mono" style={{ fontSize: 11, color: persona === 'OWNER' ? 'var(--wu-mute)' : 'var(--wu-mute)', marginTop: 4 }}>{msg.parsed.code || 'SKU 미정'}</div>
                <div style={{ display: 'flex', gap: 4, marginTop: 10, flexWrap: 'wrap' }}>
                  {(msg.parsed.parts || []).map(p => <span key={p} className="kr" style={{ fontSize: 10, padding: '3px 7px', background: persona === 'OWNER' ? '#1A1A17' : 'var(--wu-bg)', border: '1px solid ' + (persona === 'OWNER' ? '#2A2A26' : 'var(--wu-line)') }}>#{p}</span>)}
                  {(msg.parsed.seasons || []).map(s => <span key={s} className="kr" style={{ fontSize: 10, padding: '3px 7px', background: persona === 'OWNER' ? '#1A1A17' : 'var(--wu-bg)', border: '1px solid ' + (persona === 'OWNER' ? '#2A2A26' : 'var(--wu-line)') }}>#{s}</span>)}
                </div>

                {/* PRICE BLOCK — persona-gated */}
                <div style={{ marginTop: 16, paddingTop: 14, borderTop: '1px solid ' + (persona === 'OWNER' ? '#2A2A26' : 'var(--wu-line)') }}>
                  {persona === 'OWNER' ? (
                    <>
                      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
                        <div className="mono" style={{ fontSize: 10, color: 'var(--wu-lime)', letterSpacing: '0.08em' }}>🔒 공급가 · WHOLESALE</div>
                        <div className="display" style={{ fontSize: 22, color: 'var(--wu-lime)' }}>{wuPrice(msg.parsed.wholesale)}</div>
                      </div>
                      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginTop: 8 }}>
                        <div className="mono" style={{ fontSize: 10, color: 'var(--wu-mute)', letterSpacing: '0.08em' }}>👁 판매가 · RETAIL</div>
                        <div className="mono" style={{ fontSize: 15, fontWeight: 700, color: 'var(--wu-paper)' }}>{wuPrice(msg.parsed.retail)}</div>
                      </div>
                      <div className="mono" style={{ fontSize: 10, color: 'var(--wu-mute)', marginTop: 8, paddingTop: 8, borderTop: '1px dashed #2A2A26' }}>마진 {Math.round(((msg.parsed.retail - msg.parsed.wholesale) / msg.parsed.retail) * 100)}% · {wuPrice(msg.parsed.retail - msg.parsed.wholesale)} {msg.parsed.moq && '· 입수 ' + msg.parsed.moq + '장'}</div>
                    </>
                  ) : (
                    <>
                      <div className="mono" style={{ fontSize: 10, color: 'var(--wu-mute)', letterSpacing: '0.08em' }}>판매가</div>
                      <div className="display" style={{ fontSize: 28, marginTop: 2 }}>{wuPrice(msg.parsed.retail)}</div>
                      <div className="mono" style={{ fontSize: 10, color: 'var(--wu-mute)', marginTop: 6, fontStyle: 'italic' }}>— 공급가는 점주 전용 정보로 숨김 —</div>
                    </>
                  )}
                </div>
              </div>
            </div>

            <div className="mono" style={{ fontSize: 10, color: 'var(--wu-mute)', marginTop: 8, lineHeight: 1.5 }}>○ 템플릿: · 점주 <b>MEMBERSHIP: OWNER</b> → 공급가 · 판매가 · 마진 전체 노출 &nbsp;&nbsp; · 일반 회원 <b>MEMBERSHIP: CONSUMER</b> → 판매가만 노출, 공급가 자동 마스킹</div>
          </div>

          {/* Publish targets */}
          <div style={{ marginTop: 20, background: 'var(--wu-ink)', color: 'var(--wu-paper)', padding: 16, display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{ width: 32, height: 32, borderRadius: 999, background: 'var(--wu-lime)', color: 'var(--wu-ink)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'Archivo Black' }}>→</div>
            <div style={{ flex: 1 }}>
              <div className="kr" style={{ fontSize: 13, fontWeight: 700 }}>상품 생성 시 자동 반영</div>
              <div className="kr mono" style={{ fontSize: 10, color: 'var(--wu-mute)', marginTop: 4 }}>소비자 홈 · 신상 피드 · 검색 인덱스 · 점주 카탈로그</div>
            </div>
            <button className="wu-btn lime" style={{ fontSize: 11, padding: '10px 16px' }}>발행 → 4곳</button>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ConsumerSearch, OwnerTelegramInbox });