/* KeywordBuildup — 스토어 SEO "정석" 기준 키워드 빌드업 뷰.
   한 카테고리 풀에서 ① 카테고리 선호도 게이트 ② 유형 분류 ③ 텀즈 최적화
   ④ 4채널(오가닉/GFA 맞춤키워드/SA/매출견인) 분기를 한 화면에 제시.
   ※ 마누태그·실제 카테고리 선호도·매출 중요도는 네이버 스크래핑이 있어야 정확 → "추정" 표기.
*/

const { useState: useKBState, useMemo: useKBMemo } = React;

const KB_TYPE = {
  independent: { label: '독립형', cls: 'kb-t-ind' },
  combinable:  { label: '조합형', cls: 'kb-t-com' },
  ordered:     { label: '순서고정', cls: 'kb-t-ord' },
  synonym:     { label: '동의어', cls: 'kb-t-syn' },
  unnecessary: { label: '불필요', cls: 'kb-t-unn' },
};

function KeywordBuildup({ query, brand }) {
  const [copied, setCopied] = useKBState('');
  const [shop, setShop] = useKBState(null);
  const [loading, setLoading] = useKBState(false);
  const [msg, setMsg] = useKBState('');
  const [shopQ, setShopQ] = useKBState(brand || '');
  const build = useKBMemo(() => {
    if (!window.KeywordEngine || !window.KeywordEngine.buildup) return null;
    return window.KeywordEngine.buildup(query, { brand, shop });
  }, [JSON.stringify(query), brand, shop]);

  async function pullShop() {
    if (!window.DataLab || !window.KeywordEngine) return;
    const q = (shopQ || brand || (build && build.coreTerms[0]) || '').trim();
    if (!q) { setMsg('조회어(브랜드 또는 카테고리)가 필요합니다'); return; }
    setLoading(true); setMsg('스마트스토어 상품 조회 중…');
    try {
      const res = await window.DataLab.shopSearch({ query: q, display: 40, sort: 'sim' });
      const items = (res && res.items) || [];
      if (!items.length) { setMsg('상품 결과 없음'); setLoading(false); return; }
      const analysis = window.KeywordEngine.analyzeShopItems(items);
      const real = res.__source === 'real';
      analysis.source = real ? 'real' : 'mock';
      setShop(analysis);
      setMsg((real ? '실 API' : 'MOCK(데모)') + ` · ${analysis.n}건 반영 — 텀즈 빈도로 게이트·매출 중요도 ${real ? '실측' : '데모'} 보정`);
    } catch (e) { setMsg('조회 실패: ' + (e.message || e)); }
    setLoading(false);
  }

  if (!build) {
    return <div className="kb-empty">키워드를 빌드업할 카테고리가 없습니다. 페르소나의 관심사·구매의도가 시드에 매칭되어야 합니다.</div>;
  }

  function copyChannel(key, items) {
    const txt = items.map(p => p.kw).join('\n');
    window.safeCopy(txt);
    setCopied(key); setTimeout(() => setCopied(''), 1600);
  }

  const tc = build.typeCounts;
  // 공식 상품명 조립 + 검수 (네이버 쇼핑 검색 SEO 가이드 2025)
  const realCat = shop && shop.realCategory ? shop.realCategory : '';
  const composed = window.KeywordEngine.composeProductName
    ? window.KeywordEngine.composeProductName({ brand, coreTerms: build.nameTerms, category: realCat })
    : build.nameTerms.join(' ');
  const nameStr = composed || build.nameTerms.join(' ');
  const audit = window.KeywordEngine.productNameAudit
    ? window.KeywordEngine.productNameAudit({ name: nameStr, brand, category: realCat })
    : null;
  const tags = window.KeywordEngine.tagSuggestions
    ? window.KeywordEngine.tagSuggestions({ brand, category: realCat, pool: build.channels.gfa.map(p => p.kw).concat(build.coreTerms) })
    : [];

  const channels = [
    { key: 'organic', title: '오가닉 (상품명 SEO)', hint: '7영역 + 텀즈 · 독립/조합/순서고정 위주', items: build.channels.organic },
    { key: 'gfa', title: 'GFA 맞춤키워드', hint: '조합형·동의어 확장 · 카테고리 게이트 통과', items: build.channels.gfa },
    { key: 'sa', title: 'SA (검색광고)', hint: '구매의도·브랜드 텀즈 · 매칭타입', items: build.channels.sa },
    { key: 'revenue', title: '매출견인', hint: '매출 중요도 상위(추정) — 채택 우선', items: build.channels.revenue },
  ];

  return (
    <div className="kb">
      <div className="kb-note">
        <div className="kb-note-top">
          <span><b>빌드업 원칙</b> — 모든 키워드는 <b>카테고리 선호도 게이트</b>를 먼저 통과해야 검색에 잡힙니다.</span>
          <div className="kb-shopctl">
            <input className="kb-shopq" value={shopQ} onChange={e => setShopQ(e.target.value)} placeholder="조회어 (브랜드 또는 카테고리)" title="신규 브랜드는 브랜드명 대신 카테고리어로 조회하면 카테고리 선호도 시그널이 더 정확합니다" />
            <button className="kb-shopbtn" onClick={pullShop} disabled={loading} data-on={!!shop}>
              {loading ? '조회 중…' : shop ? '✓ 재조회' : '🛒 스마트스토어 실측 반영'}
            </button>
          </div>
        </div>
        <span className="kb-prov">
          {shop
            ? (shop.source === 'real'
                ? <>실 검색 상위 상품 <b>{shop.n}건</b>의 타이틀 텀즈 빈도로 게이트·매출 중요도를 <b style={{color:'var(--plant)'}}>실측 보정(tier B)</b>. {msg}</>
                : <>데모(MOCK) 상품 <b>{shop.n}건</b> 반영 — 메커니즘 시연용. 실 프록시 연결 시 <b style={{color:'var(--plant)'}}>tier B 실측</b>으로 상향. {msg}</>)
            : <>게이트·매출 중요도·마누태그는 휴리스틱 <b>추정</b> — 우측 버튼으로 스마트스토어 실 검색 결과를 반영하면 tier B로 상향됩니다. {msg}</>}
        </span>
      </div>

      {shop && (
        <div className="kb-shop">
          <div className="kb-shop-row">
            <div className="kb-shop-cell"><span className="kb-mini">실 카테고리(쇼핑검색)</span><strong>{shop.realCategory || '—'}</strong></div>
            <div className="kb-shop-cell"><span className="kb-mini">가격 중앙값</span><strong>{shop.priceMedian ? '₩' + shop.priceMedian.toLocaleString() : '—'}{shop.priceRange && <em className="kb-prange"> ({shop.priceRange.min.toLocaleString()}~{shop.priceRange.max.toLocaleString()})</em>}</strong></div>
            <div className="kb-shop-cell"><span className="kb-mini">매출 규모(추정·가격×순위가중)</span><strong>{shop.estRevenueTotal ? '₩' + shop.estRevenueTotal.toLocaleString() : '—'}</strong></div>
            <div className="kb-shop-cell"><span className="kb-mini">경쟁 브랜드(상위)</span><strong>{shop.competitors.length ? shop.competitors.slice(0, 5).join(', ') : '—'}</strong></div>
          </div>
          <div className="kb-shop-terms">
            <span className="kb-mini">실 상품 타이틀 상위 텀즈 (빈도 = 인기·카테고리 선호도 실측 시그널)</span>
            <div className="kb-chips">
              {shop.topTerms.slice(0, 16).map((t, i) => (
                <span key={i} className="kb-freq-chip">{t.term}<em>{t.count}</em></span>
              ))}
            </div>
          </div>
        </div>
      )}

      {/* ① 게이트 + 코어 텀즈 */}
      <div className="kb-gate">
        <div className="kb-gate-stat">
          <span className="kb-gate-num">{build.gatedCount}<small>/{build.poolCount}</small></span>
          <span className="kb-gate-lbl">카테고리 게이트 통과</span>
        </div>
        <div className="kb-gate-core">
          <span className="kb-mini">카테고리 코어 텀즈(매칭 기준)</span>
          <div className="kb-chips">
            {build.coreTerms.map((c, i) => <span key={i} className="kb-core-chip">{c}</span>)}
          </div>
        </div>
      </div>

      {/* ② 유형 분포 */}
      <div className="kb-types">
        {['independent','combinable','ordered','synonym','unnecessary'].map(t => (
          <div key={t} className={'kb-typebox ' + KB_TYPE[t].cls}>
            <span className="kb-type-n">{tc[t]}</span>
            <span className="kb-type-l">{KB_TYPE[t].label}</span>
          </div>
        ))}
      </div>
      {build.removed.length > 0 && (
        <div className="kb-removed">
          <b>불필요어 {build.removed.length}개 제거</b> (상품명 텀즈에서 빼고 검색 가능 키워드로 대체):
          <span className="kb-removed-list">{build.removed.slice(0, 14).map(p => p.kw).join(', ')}</span>
        </div>
      )}

      {/* ③ 공식 상품명 빌더 + SEO 검수 (네이버 가이드 2025) */}
      <div className="kb-name">
        <div className="kb-name-head">
          <span className="kb-mini">상품명 = [브랜드 + 속성 + 카테고리 + 시즌성] · 50자 이하 · 중복1회 · 수식어 제외</span>
          <span className="kb-namestat">
            {audit && <span className={'kb-grade kb-g-' + audit.grade}>{audit.grade}</span>}
            <span className="kb-termcount">{audit ? audit.len : nameStr.replace(/\s/g,'').length}/50자 · {audit ? audit.termCount : build.nameTerms.length}텀즈</span>
          </span>
        </div>
        <div className="kb-name-preview">{nameStr || '—'}</div>
        {audit && audit.issues.length > 0 && (
          <ul className="kb-issues">
            {audit.issues.map((iss, i) => (
              <li key={i} className={'kb-iss kb-iss-' + iss.sev}>
                <span className="kb-iss-tag">{iss.sev === 'high' ? '위반' : iss.sev === 'mid' ? '주의' : '권장'}</span>
                {iss.msg}
              </li>
            ))}
          </ul>
        )}
        {audit && audit.issues.length === 0 && (
          <div className="kb-issok">✓ 상품명 SEO 위반 없음 — 적합도·신뢰도 기준 통과(추정)</div>
        )}
        <button className="kb-copy" data-on={copied === 'name'} onClick={() => { window.safeCopy(nameStr); setCopied('name'); setTimeout(() => setCopied(''), 1600); }}>
          {copied === 'name' ? '✓ 복사됨' : '상품명 복사'}
        </button>
      </div>

      {/* ④ 태그 추천 (가이드: 사용용도·시즌성·사용자특성·감성만 / 카테고리·브랜드·홍보 제외) */}
      {tags.length > 0 && (
        <div className="kb-tags">
          <div className="kb-name-head">
            <span className="kb-mini">검색 태그 추천 — 사용용도·시즌성·사용자특성·감성만 (카테고리/브랜드/판매처/홍보 불가)</span>
            <button className="kb-copy" data-on={copied === 'tags'} onClick={() => { window.safeCopy(tags.join(',')); setCopied('tags'); setTimeout(() => setCopied(''), 1600); }}>
              {copied === 'tags' ? '✓' : '복사'} <em>{tags.length}</em>
            </button>
          </div>
          <div className="kb-chips">
            {tags.map((t, i) => <span key={i} className="kb-tag-chip">{t}</span>)}
          </div>
        </div>
      )}

      {/* ④ 4채널 분기 */}
      <div className="kb-channels">
        {channels.map(ch => (
          <div key={ch.key} className="kb-ch">
            <div className="kb-ch-head">
              <div>
                <strong>{ch.title}</strong>
                <div className="kb-mini">{ch.hint}</div>
              </div>
              <button className="kb-copy" data-on={copied === ch.key} onClick={() => copyChannel(ch.key, ch.items)}>
                {copied === ch.key ? '✓' : '복사'} <em>{ch.items.length}</em>
              </button>
            </div>
            <div className="kb-ch-list">
              {ch.items.length === 0 && <span className="kb-mini">해당 채널 후보 없음</span>}
              {ch.items.slice(0, 30).map((p, i) => (
                <span key={i} className={'kb-kw ' + (KB_TYPE[p.type] ? KB_TYPE[p.type].cls : '')}>
                  {p.kw}
                  {ch.key === 'revenue' && shop && p.revActual > 0 && (
                    <em className="kb-rev">₩{p.revActual >= 10000 ? (p.revActual / 10000).toFixed(1) + '만' : p.revActual.toLocaleString()}</em>
                  )}
                </span>
              ))}
            </div>
          </div>
        ))}
      </div>

      <style>{`
        .kb { display: flex; flex-direction: column; gap: 12px; }
        .kb-empty { padding: 24px; text-align: center; color: var(--text-dim); border: 1px dashed var(--border-strong); font-size: 13px; }
        .kb-mini { font-family: var(--font-mono); font-size: 10px; color: var(--text-mute); letter-spacing: 0.01em; }
        .kb-note { font-size: 12px; line-height: 1.6; color: var(--text-dim); padding: 10px 12px; background: oklch(0.80 0.15 72 / 0.05); border-left: 2px solid var(--signal); }
        .kb-note b { color: var(--text); font-weight: 600; }
        .kb-note-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
        .kb-shopctl { display: flex; gap: 6px; flex-shrink: 0; }
        .kb-shopq { width: 150px; background: rgba(0,0,0,0.25); border: 1px solid var(--border-strong); color: var(--text); font-size: 11px; font-family: var(--font-mono); padding: 4px 8px; outline: none; border-radius: 3px; }
        .kb-shopq:focus { border-color: var(--cyan); }
        .kb-shopbtn { flex-shrink: 0; padding: 5px 11px; background: var(--cyan-soft); border: 1px solid var(--cyan); color: var(--cyan); font-size: 11px; font-weight: 600; font-family: var(--font-sans); cursor: pointer; white-space: nowrap; border-radius: 3px; }
        .kb-shopbtn:hover:not(:disabled) { background: var(--cyan); color: var(--ink-000); }
        .kb-shopbtn:disabled { opacity: 0.5; cursor: wait; }
        .kb-shopbtn[data-on="true"] { background: var(--plant-soft); border-color: var(--plant); color: var(--plant); }
        .kb-prov { display: block; margin-top: 5px; font-size: 10.5px; color: var(--text-mute); }
        .kb-prov b { color: var(--cyan); }

        .kb-shop { padding: 11px 12px; background: var(--cyan-soft); border: 1px solid var(--cyan-dim); display: flex; flex-direction: column; gap: 10px; }
        .kb-shop-row { display: flex; flex-wrap: wrap; gap: 16px; }
        .kb-shop-cell { display: flex; flex-direction: column; gap: 2px; min-width: 120px; }
        .kb-shop-cell strong { font-size: 12.5px; color: var(--text); font-weight: 600; }
        .kb-prange { font-style: normal; color: var(--text-mute); font-family: var(--font-mono); font-size: 10px; }
        .kb-shop-terms { display: flex; flex-direction: column; gap: 5px; }
        .kb-freq-chip { font-family: var(--font-mono); font-size: 10px; padding: 2px 4px 2px 7px; background: rgba(0,0,0,0.25); border: 1px solid var(--cyan-dim); color: var(--cyan); border-radius: 3px; display: inline-flex; align-items: center; gap: 4px; }
        .kb-freq-chip em { font-style: normal; background: var(--cyan); color: var(--ink-000); border-radius: 2px; padding: 0 4px; font-size: 9px; }

        .kb-gate { display: flex; gap: 14px; align-items: center; padding: 10px 12px; background: oklch(0.10 0.02 240 / 0.5); border: 1px solid var(--border); flex-wrap: wrap; }
        .kb-gate-stat { display: flex; flex-direction: column; flex-shrink: 0; }
        .kb-gate-num { font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: var(--plant); }
        .kb-gate-num small { font-size: 12px; color: var(--text-mute); }
        .kb-gate-lbl { font-size: 10px; color: var(--text-dim); }
        .kb-gate-core { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 5px; }
        .kb-chips { display: flex; flex-wrap: wrap; gap: 4px; }
        .kb-core-chip { font-family: var(--font-mono); font-size: 10px; padding: 2px 7px; background: var(--plant-soft); border: 1px solid var(--plant); color: var(--plant); border-radius: 3px; }

        .kb-types { display: flex; gap: 1px; background: var(--border); }
        .kb-typebox { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px; background: var(--ink-050, oklch(0.11 0.015 240)); }
        .kb-type-n { font-family: var(--font-mono); font-size: 18px; font-weight: 700; }
        .kb-type-l { font-size: 10px; color: var(--text-dim); }
        .kb-t-ind .kb-type-n { color: var(--text); }
        .kb-t-com .kb-type-n { color: var(--plant); }
        .kb-t-ord .kb-type-n { color: var(--signal); }
        .kb-t-syn .kb-type-n { color: var(--cyan); }
        .kb-t-unn .kb-type-n { color: var(--alert); }

        .kb-removed { font-size: 11px; color: var(--text-mute); padding: 7px 10px; background: oklch(0.68 0.21 22 / 0.05); border: 1px solid oklch(0.68 0.21 22 / 0.2); line-height: 1.5; }
        .kb-removed b { color: var(--alert); }
        .kb-removed-list { color: var(--text-dim); margin-left: 4px; }

        .kb-name { padding: 10px 12px; background: oklch(0.10 0.02 240 / 0.5); border: 1px solid var(--border); }
        .kb-namestat { display: inline-flex; align-items: center; gap: 6px; }
        .kb-grade { font-family: var(--font-mono); font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 3px; }
        .kb-g-A { color: var(--ink-000); background: var(--plant); }
        .kb-g-B { color: var(--ink-000); background: var(--cyan); }
        .kb-g-C { color: var(--ink-000); background: var(--signal); }
        .kb-g-D { color: #fff; background: var(--alert); }
        .kb-issues { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
        .kb-iss { font-size: 11px; line-height: 1.45; color: var(--text-dim); display: flex; gap: 6px; align-items: baseline; }
        .kb-iss-tag { flex-shrink: 0; font-family: var(--font-mono); font-size: 9px; font-weight: 600; padding: 1px 5px; border-radius: 3px; }
        .kb-iss-high .kb-iss-tag { color: #fff; background: var(--alert); }
        .kb-iss-mid .kb-iss-tag { color: var(--ink-000); background: var(--signal); }
        .kb-iss-low .kb-iss-tag { color: var(--text-dim); border: 1px solid var(--border-strong); }
        .kb-issok { font-size: 11px; color: var(--plant); margin-top: 8px; }
        .kb-tags { padding: 10px 12px; background: oklch(0.10 0.02 240 / 0.5); border: 1px solid var(--border); }
        .kb-tag-chip { font-family: var(--font-mono); font-size: 10px; padding: 2px 7px; background: var(--signal-soft, oklch(0.80 0.15 72 / 0.12)); border: 1px solid var(--signal-dim); color: var(--signal); border-radius: 3px; }
        .kb-name-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
        .kb-termcount { font-family: var(--font-mono); font-size: 11px; color: var(--signal); font-weight: 600; white-space: nowrap; }
        .kb-name-preview { font-family: var(--font-mono); font-size: 13px; color: var(--text); line-height: 1.5; padding: 8px 10px; background: rgba(0,0,0,0.25); border: 1px solid var(--border-strong); margin-bottom: 8px; word-break: keep-all; }

        .kb-copy { padding: 4px 10px; background: oklch(0.10 0.02 240 / 0.6); border: 1px solid var(--border-strong); color: var(--text); font-size: 11px; font-weight: 600; font-family: var(--font-sans); cursor: pointer; white-space: nowrap; }
        .kb-copy em { font-style: normal; color: var(--text-mute); font-family: var(--font-mono); }
        .kb-copy:hover { border-color: var(--signal); }
        .kb-copy[data-on="true"] { background: var(--plant); color: var(--ink-000); border-color: var(--plant); }

        .kb-channels { display: flex; flex-wrap: wrap; gap: 10px; }
        .kb-ch { flex: 1 1 320px; min-width: 0; padding: 11px 12px; background: oklch(0.10 0.02 240 / 0.5); border: 1px solid var(--border); }
        .kb-ch-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
        .kb-ch-head strong { font-size: 13px; color: var(--text); }
        .kb-ch-list { display: flex; flex-wrap: wrap; gap: 4px; max-height: 150px; overflow-y: auto; }
        .kb-kw { font-family: var(--font-mono); font-size: 10px; padding: 2px 7px; background: rgba(255,240,220,0.05); border: 1px solid var(--border-strong); color: var(--text); border-radius: 3px; border-left-width: 2px; }
        .kb-kw.kb-t-ind { border-left-color: var(--text-mute); }
        .kb-kw.kb-t-com { border-left-color: var(--plant); }
        .kb-kw.kb-t-ord { border-left-color: var(--signal); }
        .kb-kw.kb-t-syn { border-left-color: var(--cyan); }
        .kb-rev { font-style: normal; margin-left: 4px; color: var(--signal); font-weight: 600; font-size: 9px; }
      `}</style>
    </div>
  );
}

Object.assign(window, { KeywordBuildup });