/* KeywordSetsPanel — 페르소나 카테고리에서 GFA 맞춤타겟 키워드 세트 자동 발굴
   1세트 최대 100개, 총 최대 2000개. 복사 / 다운로드 / 포맷 전환.
*/

const { useState: useKWState, useMemo: useKWMemo } = React;

function KeywordSetsPanel({ query }) {
  const [perSet, setPerSet] = useKWState(100);
  const [maxTotal, setMaxTotal] = useKWState(2000);
  const [format, setFormat] = useKWState('grouped');
  const [showAll, setShowAll] = useKWState(false);
  const [copied, setCopied] = useKWState(false);

  const sets = useKWMemo(() => {
    if (!window.KeywordEngine) return [];
    return window.KeywordEngine.generateKeywordSets(query, { perSet, maxTotal });
  }, [JSON.stringify(query), perSet, maxTotal]);

  const summary = useKWMemo(() => window.KeywordEngine?.summary(sets), [sets]);
  const formattedOutput = useKWMemo(() => {
    if (!window.KeywordEngine) return '';
    if (format === 'flat')    return window.KeywordEngine.format(sets, 'flat');
    if (format === 'csv')     return window.KeywordEngine.format(sets, 'csv');
    return window.KeywordEngine.format(sets, 'newline');
  }, [sets, format]);

  function copyAll() {
    window.safeCopy(formattedOutput);
    setCopied(true);
    setTimeout(() => setCopied(false), 1800);
  }
  function downloadTxt() {
    const blob = new Blob([formattedOutput], { type: 'text/plain;charset=utf-8' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `keywords_${sets.length}sets_${summary.totalKeywords}건.txt`;
    a.click();
    URL.revokeObjectURL(url);
  }

  if (!sets.length) {
    return (
      <div className="kw-empty">
        <div style={{ fontSize: 28, color: 'var(--text-mute)' }}>◇</div>
        <div style={{ fontSize: 13, marginTop: 6 }}>키워드 세트를 발굴할 카테고리가 없습니다</div>
        <div style={{ fontSize: 11, color: 'var(--text-mute)', marginTop: 4 }}>
          페르소나의 관심사·구매의도가 키워드 시드에 매칭되어야 합니다.
        </div>
      </div>
    );
  }

  return (
    <div className="kw-panel">
      <div className="kw-head">
        <div>
          <strong style={{ fontSize: 16 }}>맞춤타겟 키워드 세트</strong>
          <div className="mono mute" style={{ fontSize: 11, marginTop: 2 }}>
            {summary.setCount}개 세트 · 총 <strong style={{ color: 'var(--signal)' }}>{summary.totalKeywords.toLocaleString()}</strong>개 키워드 · 평균 {summary.avgPerSet}개/세트
          </div>
        </div>
        <div className="kw-actions">
          <button onClick={copyAll} className="kw-btn" data-tone={copied ? 'plant' : 'signal'}>
            {copied ? '✓ 복사됨' : '📋 전체 복사'}
          </button>
          <button onClick={downloadTxt} className="kw-btn">⬇ TXT 다운로드</button>
        </div>
      </div>

      <div className="kw-controls">
        <label>
          <span>세트당 키워드</span>
          <input type="number" min="10" max="100" step="10" value={perSet}
                 onChange={e => setPerSet(Math.min(100, Math.max(10, +e.target.value || 100)))} />
          <small>최대 100</small>
        </label>
        <label>
          <span>총 키워드 한도</span>
          <input type="number" min="100" max="2000" step="100" value={maxTotal}
                 onChange={e => setMaxTotal(Math.min(2000, Math.max(100, +e.target.value || 2000)))} />
          <small>최대 2,000</small>
        </label>
        <label>
          <span>출력 형식</span>
          <div className="kw-format">
            <button aria-pressed={format === 'grouped'} onClick={() => setFormat('grouped')}>그룹별</button>
            <button aria-pressed={format === 'flat'} onClick={() => setFormat('flat')}>플랫</button>
            <button aria-pressed={format === 'csv'} onClick={() => setFormat('csv')}>CSV</button>
          </div>
        </label>
      </div>

      <div className="kw-sets">
        {sets.slice(0, showAll ? sets.length : 5).map((s, i) => (
          <div key={i} className="kw-set">
            <div className="kw-set-head">
              <strong>■ {s.label}</strong>
              <span className="mono mute">{s.count}건</span>
            </div>
            <div className="kw-set-list">
              {s.keywords.map((k, ki) => (
                <span key={ki} className="kw-chip">{k}</span>
              ))}
            </div>
          </div>
        ))}
        {!showAll && sets.length > 5 && (
          <button className="kw-more" onClick={() => setShowAll(true)}>
            +{sets.length - 5}개 세트 더 보기 →
          </button>
        )}
      </div>

      <details className="kw-output-details">
        <summary>붙여넣기용 텍스트 (선택해서 Ctrl+C)</summary>
        <textarea readOnly value={formattedOutput} className="kw-textarea" />
      </details>

      <style>{`
        .kw-panel { display: flex; flex-direction: column; gap: 14px; }
        .kw-empty {
          padding: 30px; text-align: center;
          color: var(--text-dim);
          background: oklch(0.10 0.02 240 / 0.5);
          border: 1px dashed var(--border-strong);
        }
        .kw-head {
          display: flex; justify-content: space-between; align-items: flex-start;
          gap: 12px;
          padding: 12px 14px;
          background: linear-gradient(120deg, oklch(0.80 0.14 72 / 0.06), transparent 60%);
          border: 1px solid rgba(255,240,220,0.10);
          border-left: 2px solid var(--signal);
        }
        .kw-actions { display: flex; gap: 6px; flex-shrink: 0; }
        .kw-btn {
          padding: 6px 12px;
          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;
        }
        .kw-btn[data-tone="signal"] { background: var(--signal); color: var(--ink-000); border-color: var(--signal); }
        .kw-btn[data-tone="plant"]  { background: var(--plant);  color: var(--ink-000); border-color: var(--plant); }
        .kw-btn:hover { transform: translateY(-1px); }
        .kw-controls {
          display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
          gap: 10px;
          padding: 10px 14px;
          background: oklch(0.08 0.01 240 / 0.5);
          border: 1px solid var(--border);
        }
        .kw-controls label {
          display: flex; flex-direction: column; gap: 4px;
        }
        .kw-controls label > span { font-size: 11px; color: var(--text-dim); font-weight: 600; }
        .kw-controls input {
          background: rgba(255,240,220,0.04);
          border: 1px solid var(--border-strong);
          color: var(--text);
          padding: 6px 10px; font-size: 13px;
          font-family: var(--font-mono);
          outline: none;
        }
        .kw-controls input:focus { border-color: var(--signal); }
        .kw-controls small { font-size: 9px; color: var(--text-mute); }
        .kw-format { display: flex; }
        .kw-format button {
          flex: 1; padding: 6px 10px;
          background: oklch(0.10 0.02 240);
          border: 1px solid var(--border-strong);
          color: var(--text-dim);
          font-size: 11px; cursor: pointer;
        }
        .kw-format button + button { border-left: none; }
        .kw-format button[aria-pressed="true"] {
          background: var(--signal); color: var(--ink-000); border-color: var(--signal); font-weight: 600;
        }
        .kw-sets { display: flex; flex-direction: column; gap: 10px; }
        .kw-set {
          padding: 10px 12px;
          background: oklch(0.10 0.02 240 / 0.5);
          border: 1px solid var(--border);
        }
        .kw-set-head {
          display: flex; justify-content: space-between; align-items: baseline;
          gap: 8px; margin-bottom: 8px;
        }
        .kw-set-head strong { font-size: 12px; color: var(--text); font-weight: 600; }
        .kw-set-list { display: flex; flex-wrap: wrap; gap: 4px; max-height: 140px; overflow-y: auto; }
        .kw-chip {
          padding: 2px 7px;
          background: rgba(255,240,220,0.05);
          border: 1px solid var(--border-strong);
          font-family: var(--font-mono);
          font-size: 10px;
          color: var(--text);
        }
        .kw-more {
          padding: 8px 12px;
          background: none;
          border: 1px dashed var(--border-strong);
          color: var(--cyan);
          font-size: 12px; cursor: pointer; font-family: var(--font-sans);
        }
        .kw-more:hover { background: oklch(0.78 0.12 220 / 0.05); }
        .kw-output-details summary {
          padding: 8px 12px;
          background: oklch(0.10 0.02 240 / 0.5);
          border: 1px solid var(--border);
          cursor: pointer;
          font-size: 12px; font-weight: 600;
          color: var(--text-dim);
        }
        .kw-output-details[open] summary { color: var(--text); }
        .kw-textarea {
          width: 100%; min-height: 200px;
          background: oklch(0.08 0.01 240 / 0.7);
          border: 1px solid var(--border);
          border-top: none;
          color: var(--bone-200);
          padding: 10px 12px;
          font-family: var(--font-mono);
          font-size: 11px;
          line-height: 1.6;
          resize: vertical;
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { KeywordSetsPanel });