/* Seed Recommender — 3 scenarios (공격적 / 균형적 / 보수적) with
   Excel-filter style toggle and drag-and-drop reordering of leaves.
*/

const { useState: useSRState, useMemo: useSRMemo, useRef: useSRRef } = React;

function SeedRecommender({ query, onApply }) {
  const allSelected = query.flatMap(g => g.leaves);
  const seed = allSelected[0] || null;
  const [activeScenario, setActiveScenario] = useSRState('balanced');
  const [filterOpen, setFilterOpen] = useSRState(false);
  const [orderedLeaves, setOrderedLeaves] = useSRState(null); // optional user-reorder

  const rec = useSRMemo(() => {
    if (!seed) return null;
    setOrderedLeaves(null);  // reset reorder when seed changes
    return window.SimEngine.recommendFromSeedScenarios(seed, window.TAXONOMY);
  }, [seed]);

  if (!seed) {
    return <Empty />;
  }
  if (!rec) return null;

  const scenarios = ['aggressive', 'balanced', 'conservative'];
  const scenarioMeta = {
    aggressive:   { label: '공격적 모수 확보',   abbr: '공격적',   tone: 'alert',  icon: '◤' },
    balanced:     { label: '균형적 모수 확보',   abbr: '균형적',   tone: 'signal', icon: '◆' },
    conservative: { label: '보수적 모수 확보', abbr: '보수적',   tone: 'plant',  icon: '◇' },
  };

  const active = rec.scenarios[activeScenario];
  // user-reordered leaves take priority
  const leaves = orderedLeaves || active.leaves;

  const seedShort = window.SimEngine.shortLabel(seed);
  const seedTier = seed.startsWith('구매의도') ? '구매의도'
                 : seed.startsWith('관심사')   ? '관심사' : '모바일';
  const tierColor = seedTier === '구매의도' ? 'plant' : seedTier === '관심사' ? 'signal' : 'cyan';

  function applyCurrent() {
    onApply({ op: active.op, leaves, label: active.label });
  }
  function reorder(from, to) {
    const base = [...leaves];
    const [moved] = base.splice(from, 1);
    base.splice(to, 0, moved);
    setOrderedLeaves(base);
  }
  function removeLeaf(idx) {
    if (idx === 0) return; // seed locked
    const base = [...leaves];
    base.splice(idx, 1);
    setOrderedLeaves(base);
  }
  function reset() {
    setOrderedLeaves(null);
  }

  return (
    <div className="sr-wrap">
      {/* Seed bar */}
      <div className="sr-head">
        <div className="sr-seed">
          <span className="label" style={{ fontSize: 10 }}>시드 카테고리</span>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 2 }}>
            <span className="chip" data-tone={tierColor}>{seedTier}</span>
            <strong style={{ fontSize: 15 }}>{seedShort}</strong>
          </div>
          <div className="mono mute" style={{ fontSize: 10, marginTop: 4 }}>{seed}</div>
        </div>
        <div className="sr-seed-stats">
          <span className="label" style={{ fontSize: 10 }}>시드 단독 추정</span>
          <div style={{ display: 'flex', gap: 14, marginTop: 4, fontFamily: 'var(--font-mono)' }}>
            <StatPair label="도달" v={window.SimEngine.fmtN(rec.seedStats.reach) + '명'} />
            <StatPair label="CTR" v={rec.seedStats.ctr + '%'} />
            <StatPair label="CPM" v={'₩' + rec.seedStats.cpm.toLocaleString()} />
            <StatPair label="CVR" v={rec.seedStats.conv + '%'} />
          </div>
        </div>
      </div>

      {/* Scenario filter (Excel-style) */}
      <div className="sr-filter">
        <div className="sr-filter-current" onClick={() => setFilterOpen(v => !v)}>
          <span className="label" style={{ fontSize: 10, color: 'var(--text-mute)' }}>시나리오</span>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span className="sr-filter-icon" data-tone={scenarioMeta[activeScenario].tone}>
              {scenarioMeta[activeScenario].icon}
            </span>
            <strong style={{ fontSize: 15 }}>{scenarioMeta[activeScenario].label}</strong>
            <span className="mono mute" style={{ fontSize: 11 }}>
              {active.leaves.length}개 · {active.op === 'OR' ? '합집합' : '교집합'}
            </span>
            <span className="sr-filter-caret">{filterOpen ? '▴' : '▾'}</span>
          </div>
        </div>
        {filterOpen && (
          <div className="sr-filter-options">
            {scenarios.map(id => {
              const s = rec.scenarios[id];
              const m = scenarioMeta[id];
              const isActive = id === activeScenario;
              return (
                <div key={id}
                     className={'sr-option' + (isActive ? ' on' : '')}
                     onClick={() => { setActiveScenario(id); setFilterOpen(false); setOrderedLeaves(null); }}>
                  <span className="sr-option-icon" data-tone={m.tone}>{m.icon}</span>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 600 }}>
                      {m.label}
                      {isActive && <span className="mono" style={{ fontSize: 9, marginLeft: 6, color: 'var(--signal)' }}>현재</span>}
                    </div>
                    <div style={{ fontSize: 11, color: 'var(--text-dim)', marginTop: 2 }}>
                      {s.narrative}
                    </div>
                  </div>
                  <div className="sr-option-stats">
                    <div><span>도달</span><strong>{s.result ? window.SimEngine.fmtN(s.result.finalReach) : '-'}</strong></div>
                    <div><span>유효성</span><strong>{s.result?.validity ?? '-'}</strong></div>
                    <div><span>CTR</span><strong>{s.result?.ctr ?? '-'}%</strong></div>
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </div>

      {/* Active scenario detail */}
      <div className="sr-scenario">
        <div className="sr-scenario-stats">
          <Big label="예상 도달" v={window.SimEngine.fmtN(active.result?.finalReach || 0)} unit="명" tone="cyan"/>
          <Big label="월 노출"  v={window.SimEngine.fmtN(active.result?.impressions || 0)} unit="회" />
          <Big label="CTR"       v={(active.result?.ctr ?? 0) + '%'} unit="" tone="signal" />
          <Big label="CPM"       v={'₩' + window.SimEngine.fmtN(active.result?.cpm || 0)} unit="" />
          <Big label="유효성"     v={active.result?.validity || 0} unit="/100" tone={(active.result?.validity ?? 0) > 60 ? 'plant' : 'signal'} />
          <Big label="경쟁도"     v={active.result?.compete || 0} unit="/100" tone={(active.result?.compete ?? 0) > 70 ? 'alert' : ''} />
        </div>

        <div className="sr-leaves-head">
          <span className="label">조합 카테고리 — 드래그로 우선순위 조정</span>
          {orderedLeaves && (
            <button className="btn" data-size="sm" data-variant="ghost" onClick={reset}>↺ 원래대로</button>
          )}
        </div>

        <DnDList
          items={leaves}
          onReorder={reorder}
          onRemove={removeLeaf}
          seedLocked={0}
        />

        <button className="btn" data-variant="primary" onClick={applyCurrent}
                style={{ alignSelf: 'flex-end', marginTop: 4 }}>
          이 조합 적용 →
        </button>
      </div>

      <SRStyles />
    </div>
  );
}

/* === Drag-and-drop list === */
function DnDList({ items, onReorder, onRemove, seedLocked }) {
  const [dragFrom, setDragFrom] = useSRState(null);
  const [dragOver, setDragOver] = useSRState(null);

  function onDragStart(e, idx) {
    if (idx === seedLocked) { e.preventDefault(); return; }
    setDragFrom(idx);
    e.dataTransfer.effectAllowed = 'move';
  }
  function onDragOver(e, idx) {
    e.preventDefault();
    if (idx !== dragOver) setDragOver(idx);
  }
  function onDrop(e, idx) {
    e.preventDefault();
    if (dragFrom !== null && dragFrom !== idx) {
      onReorder(dragFrom, idx);
    }
    setDragFrom(null);
    setDragOver(null);
  }
  function onDragEnd() {
    setDragFrom(null);
    setDragOver(null);
  }

  return (
    <div className="dnd-list">
      {items.map((leaf, i) => {
        const isSeed = i === seedLocked;
        return (
          <div
            key={leaf}
            className={'dnd-row' + (dragOver === i ? ' is-over' : '') + (isSeed ? ' is-seed' : '')}
            draggable={!isSeed}
            onDragStart={e => onDragStart(e, i)}
            onDragOver={e => onDragOver(e, i)}
            onDrop={e => onDrop(e, i)}
            onDragEnd={onDragEnd}
          >
            <span className="dnd-handle" aria-hidden>⋮⋮</span>
            <span className="dnd-rank">{i + 1}</span>
            {isSeed && <span className="dnd-seed-tag">시드</span>}
            {!isSeed && <span className="dnd-tier" data-tier={leafTier(leaf)}>{leafTier(leaf)}</span>}
            <span className="dnd-path">{leaf.split(' > ').slice(-2).join(' › ')}</span>
            <span className="mono mute dnd-reach">
              {window.SimEngine.fmtN(window.SimEngine.leafStats(leaf).reach)}명
            </span>
            {!isSeed && (
              <button className="dnd-remove" onClick={() => onRemove(i)} title="제거">✕</button>
            )}
          </div>
        );
      })}
      {items.length === seedLocked + 1 && (
        <div className="dnd-empty">
          시드 외 추가된 카테고리가 없습니다. 다른 시나리오를 선택하거나 좌측 트리에서 추가하세요.
        </div>
      )}
    </div>
  );
}
function leafTier(p) {
  if (p.startsWith('구매의도')) return '구매의도';
  if (p.startsWith('관심사'))   return '관심사';
  return '모바일';
}

/* === Helpers === */
function StatPair({ label, v }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      <span style={{ fontSize: 9, color: 'var(--text-mute)' }}>{label}</span>
      <span style={{ fontSize: 13, color: 'var(--text)' }}>{v}</span>
    </div>
  );
}
function Big({ label, v, unit, tone }) {
  return (
    <div className={'sr-big ' + (tone || '')}>
      <div className="sr-big-label">{label}</div>
      <div className="sr-big-val">{v}<span className="sr-big-unit">{unit}</span></div>
    </div>
  );
}
function Empty() {
  return (
    <div className="sr-empty">
      <div className="sr-empty-mark">◇</div>
      <div style={{ fontSize: 14, fontWeight: 600 }}>
        시드 카테고리 1개만 선택하세요
      </div>
      <div style={{ fontSize: 12, color: 'var(--text-dim)', marginTop: 6 }}>
        좌측 트리에서 관심사 또는 구매의도 카테고리 하나만 클릭하면<br/>
        AI가 3가지 시나리오로 최적 조합을 자동 계산합니다.
      </div>
      <SRStyles />
    </div>
  );
}

/* === Styles === */
function SRStyles() {
  return <style>{`
    .sr-wrap { display: flex; flex-direction: column; gap: 12px; }
    .sr-empty {
      padding: 28px 18px;
      text-align: center;
      background: linear-gradient(180deg, oklch(0.15 0.02 240 / 0.4), oklch(0.10 0.02 240 / 0.3));
      border: 1px dashed var(--border-strong);
    }
    .sr-empty-mark { font-size: 32px; color: var(--signal); opacity: 0.7; margin-bottom: 8px; }

    .sr-head {
      display: grid; grid-template-columns: 1fr auto; gap: 18px;
      padding: 14px 16px;
      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);
    }
    .sr-seed-stats { text-align: right; }

    /* Excel-filter style scenario picker */
    .sr-filter {
      position: relative;
      border: 1px solid var(--border-strong);
      background: oklch(0.10 0.02 240 / 0.55);
    }
    .sr-filter-current {
      padding: 10px 14px;
      cursor: pointer;
      display: flex; flex-direction: column; gap: 4px;
      transition: background 0.15s;
    }
    .sr-filter-current:hover { background: rgba(255,240,220,0.04); }
    .sr-filter-icon {
      font-size: 16px;
      width: 22px; height: 22px;
      display: grid; place-items: center;
    }
    .sr-filter-icon[data-tone="alert"]  { color: var(--alert); }
    .sr-filter-icon[data-tone="signal"] { color: var(--signal); }
    .sr-filter-icon[data-tone="plant"]  { color: var(--plant); }
    .sr-filter-caret { margin-left: auto; color: var(--text-mute); font-size: 11px; }

    .sr-filter-options {
      position: absolute; top: 100%; left: 0; right: 0;
      z-index: 30;
      background: oklch(0.10 0.02 240 / 0.95);
      backdrop-filter: blur(16px);
      border: 1px solid var(--border-strong);
      border-top: none;
      box-shadow: 0 16px 32px rgba(0,0,0,0.4);
    }
    .sr-option {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 14px;
      cursor: pointer;
      border-bottom: 1px solid var(--border);
      transition: background 0.15s;
    }
    .sr-option:last-child { border-bottom: none; }
    .sr-option:hover { background: rgba(255,240,220,0.05); }
    .sr-option.on { background: oklch(0.80 0.14 72 / 0.08); }
    .sr-option-icon { font-size: 18px; }
    .sr-option-icon[data-tone="alert"]  { color: var(--alert); }
    .sr-option-icon[data-tone="signal"] { color: var(--signal); }
    .sr-option-icon[data-tone="plant"]  { color: var(--plant); }
    .sr-option-stats {
      display: flex; gap: 14px; font-family: var(--font-mono);
    }
    .sr-option-stats > div { display: flex; flex-direction: column; align-items: flex-end; }
    .sr-option-stats span { font-size: 9px; color: var(--text-mute); }
    .sr-option-stats strong { font-size: 13px; color: var(--text); font-weight: 400; }

    .sr-scenario {
      display: flex; flex-direction: column; gap: 10px;
      padding: 14px 16px;
      border: 1px solid var(--border-strong);
      background: oklch(0.10 0.02 240 / 0.5);
    }
    .sr-scenario-stats {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
    }
    .sr-big {
      padding: 10px 12px;
      background: oklch(0.13 0.015 240 / 0.6);
      display: flex; flex-direction: column; gap: 2px;
    }
    .sr-big.cyan { border-bottom: 2px solid var(--cyan); }
    .sr-big.signal { border-bottom: 2px solid var(--signal); }
    .sr-big.plant { border-bottom: 2px solid var(--plant); }
    .sr-big.alert { border-bottom: 2px solid var(--alert); }
    .sr-big-label { font-size: 10px; color: var(--text-dim); font-weight: 500; }
    .sr-big-val {
      font-family: var(--font-mono);
      font-size: 18px;
      color: var(--text);
      line-height: 1.2;
      font-weight: 400;
    }
    .sr-big-unit { font-size: 10px; color: var(--text-mute); margin-left: 3px; }

    .sr-leaves-head {
      display: flex; align-items: center; justify-content: space-between;
      margin-top: 4px;
    }

    /* Drag-and-drop list */
    .dnd-list {
      display: flex; flex-direction: column; gap: 3px;
      border: 1px solid var(--border);
      background: oklch(0.08 0.01 240 / 0.5);
      padding: 4px;
      max-height: 280px;
      overflow-y: auto;
    }
    .dnd-row {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 10px;
      background: oklch(0.13 0.015 240 / 0.55);
      border: 1px solid transparent;
      transition: all 0.12s;
      font-size: 12px;
    }
    .dnd-row:hover { background: rgba(255,240,220,0.05); border-color: rgba(255,240,220,0.08); }
    .dnd-row.is-over {
      border-color: var(--signal);
      background: oklch(0.80 0.14 72 / 0.10);
    }
    .dnd-row.is-seed {
      background: oklch(0.80 0.14 72 / 0.12);
      border-color: oklch(0.80 0.14 72 / 0.35);
    }
    .dnd-row[draggable="true"] { cursor: grab; }
    .dnd-row[draggable="true"]:active { cursor: grabbing; }
    .dnd-handle {
      color: var(--text-mute);
      font-size: 14px;
      letter-spacing: -2px;
      cursor: grab;
      flex: 0 0 12px;
    }
    .dnd-row.is-seed .dnd-handle { opacity: 0.2; cursor: not-allowed; }
    .dnd-rank {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-mute);
      flex: 0 0 18px;
      text-align: right;
    }
    .dnd-seed-tag {
      font-size: 9px;
      padding: 1px 6px;
      background: var(--signal);
      color: var(--ink-000);
      font-weight: 700;
      flex: 0 0 auto;
    }
    .dnd-tier {
      font-size: 9px;
      padding: 1px 6px;
      flex: 0 0 auto;
      font-weight: 600;
    }
    .dnd-tier[data-tier="구매의도"] { background: oklch(0.74 0.13 145 / 0.2); color: var(--plant); }
    .dnd-tier[data-tier="관심사"]   { background: oklch(0.80 0.14 72  / 0.2); color: var(--signal); }
    .dnd-tier[data-tier="모바일"]   { background: oklch(0.78 0.12 220 / 0.2); color: var(--cyan); }
    .dnd-path { flex: 1; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
    .dnd-row.is-seed .dnd-path { color: var(--text); font-weight: 500; }
    .dnd-reach { font-size: 10px; flex: 0 0 70px; text-align: right; }
    .dnd-remove {
      background: none; border: none;
      color: var(--text-mute);
      cursor: pointer; font-size: 11px;
      padding: 2px 5px;
    }
    .dnd-remove:hover { color: var(--alert); }
    .dnd-empty {
      padding: 14px;
      text-align: center;
      color: var(--text-mute);
      font-size: 11px;
      font-style: italic;
    }
  `}</style>;
}

Object.assign(window, { SeedRecommender });