/* ============================================================
   Episode browse · detail (persona selector) · submit · history
   ============================================================ */
const { useState: useSE, useMemo: useME, useEffect: useEE } = React;

/* selection helpers — selection = [{episodeId, personaLabel}] */
const selHas = (sel, id) => sel.some((s) => s.episodeId === id);
const selPersonaLabel = (sel, id) => (sel.find((s) => s.episodeId === id) || {}).personaLabel || null;
/* an episode's persona objects: prefer personas[] (4 fields), fall back to legacy persona1/2/3 */
const epPersonas = (ep) => {
  const arr = Array.isArray(ep && ep.personas) ? ep.personas : [];
  const fromNew = arr.filter((p) => p && String(p.title || '').trim());
  if (fromNew.length) return fromNew.map((p) => ({ title: String(p.title).trim(), description: p.description || '', buildup: p.buildup || '', solution: p.solution || '' }));
  return [ep && ep.persona1, ep && ep.persona2, ep && ep.persona3]
    .filter((x) => x && String(x).trim())
    .map((t) => ({ title: String(t).trim(), description: '', buildup: '', solution: '' }));
};
/* just the labels (titles) — used where only the name is needed */
const epPersonaOptions = (ep) => epPersonas(ep).map((p) => p.title);

/* ---- card list controls (shared by ② 카드 관리 + 라이브러리 피커) ---- */
// Split a free-text 설명 into bullet lines for card display. Honors explicit
// line breaks and bullet chars; otherwise breaks on sentence ends (다././?/!),
// so a single paragraph reads as scannable bullets. 문장 끝+공백을 개행으로 치환 후
// 분리 — 정규식 lookbehind는 구형 Safari/WebView에서 모듈 로드를 깨뜨려 쓰지 않는다.
const descBullets = (text) =>
  String(text || '')
    .split(/\n+/)
    .flatMap((line) => line.replace(/([.!?。])\s+/g, '$1\n').split('\n'))
    .map((s) => s.replace(/^[\s•·\-–—]+/, '').trim())
    .filter(Boolean);
// 설명을 "설명" 라벨 + 불릿 리스트로 — 카드 본문(EpisodeCard·라이브러리 피커 공용).
// 불릿이 하나도 없으면(빈/공백뿐 설명) 라벨까지 통째로 미렌더.
const EpDescBlock = ({ text }) => {
  const items = descBullets(text);
  return items.length === 0 ? null : (
    <div className="ep-desc-block">
      <div className="ep-desc-label">설명</div>
      <ul className="ep-desc-list">{items.map((b, i) => <li key={i}>{b}</li>)}</ul>
    </div>
  );
};
// 카드 배치 여부 (단일 배치: 0 또는 1). 사용 유무 = placeCount > 0
const placeCount = (c) => (c.placement ? 1 : 0);
// 배치 "이동" 판정 + 확인 다이얼로그 (인라인/모달/라이브러리 피커 공용).
// 기존 배치(prev)가 있고 다른 테마(next)로 바뀌면 이동. count>1 = 일괄(라이브러리 피커).
const isMove = (prevThemeId, nextThemeId) => !!prevThemeId && !!nextThemeId && prevThemeId !== nextThemeId;
const confirmMove = (count = 1) => window.confirm(count > 1 ? `선택한 카드 중 ${count}개는 다른 곳에서 이동됩니다. 진행할까요?` : '이 카드를 다른 테마로 이동할까요?');
// ko-collated comparator; String() guards non-string values (JSON columns).
const koCompare = (a, b) => String(a).localeCompare(String(b), 'ko');
// union of every product across the given cards, ko-collated.
const cardProductOptions = (cards) => {
  const s = new Set();
  (cards || []).forEach((c) => (c.products || []).forEach((p) => p && s.add(p)));
  return Array.from(s).sort(koCompare);
};
// does a card pass the {q, product, usage} filter? (search over title·설명·텐션·제품·페르소나)
const matchCard = (c, { q, product, usage }) => {
  if (product && !(c.products || []).includes(product)) return false;
  if (usage === 'used' && placeCount(c) === 0) return false;
  if (usage === 'unused' && placeCount(c) > 0) return false;
  const needle = (q || '').trim().toLowerCase();
  if (!needle) return true;
  const hay = [c.title, c.description, c.tension, ...(c.products || []), ...epPersonaOptions(c)]
    .filter(Boolean).join(' ').toLowerCase();
  return hay.includes(needle);
};
// 콘텐츠(project)·월(month)·테마(theme) 등록 위치 필터.
// project '' = 전체, '__none__' = 미등록(배치 없음), 그 외 = 해당 콘텐츠에 배치된 카드.
const PROJECT_NONE = '__none__';
// 필터 줄의 셀렉트 셀 공통 스타일 (균등폭 한 줄)
const FILTER_CELL = { flex: '1 1 0', minWidth: 120 };
const matchPlacement = (c, { project, month, theme }) => {
  if (project === PROJECT_NONE) return !c.placement;
  if (!project && !month && !theme) return true;
  const p = c.placement;
  return !!p &&
    (!project || p.projectId === project) &&
    (!month || p.monthId === month) &&
    (!theme || p.themeId === theme);
};

// search box + 제품 select + 전체/사용중/미사용 segment. `children` = extra trailing
// control (e.g. the manager's sort select); picker passes none.
// Row 1 = 검색(전폭). Row 2 = 제품·(사용여부)·등록위치·정렬 셀들을 균등폭으로 한 줄에.
// `children`(매니저의 콘텐츠/월/테마/정렬 셀렉트)는 각자 flex:1 1 0 로 같은 폭을 차지하도록 둔다.
function CardFilterBar({ q, setQ, product, setProduct, productOptions, usage, setUsage, showUsage = true, showProduct = true, mb = 12, children }) {
  return (
    <div style={{ marginBottom: mb }}>
      <div style={{ position: 'relative', marginBottom: 8 }}>
        <Icon.search style={{ width: 14, height: 14, position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)', color: 'var(--ink-3, #9aa0a7)' }} />
        <input className="input" value={q} onChange={(e) => setQ(e.target.value)} placeholder="제목·설명·텐션·제품·페르소나 검색" style={{ paddingLeft: 30, paddingRight: q ? 28 : 12, width: '100%' }} />
        {q && <button className="icon-btn" onClick={() => setQ('')} title="검색 지우기" style={{ position: 'absolute', right: 4, top: '50%', transform: 'translateY(-50%)', width: 22, height: 22 }}><Icon.x style={{ width: 12, height: 12 }} /></button>}
      </div>
      <div className="flex center wrap-flex" style={{ gap: 8 }}>
        {showProduct && (
          <select className="input" value={product} onChange={(e) => setProduct(e.target.value)} style={FILTER_CELL}>
            <option value="">전체 제품</option>
            {productOptions.map((p) => <option key={p} value={p}>{p}</option>)}
          </select>
        )}
        {showUsage && (
          <div className="seg" style={{ marginBottom: 0, flex: '0 0 auto' }}>
            <button className={usage === 'all' ? 'on red' : ''} onClick={() => setUsage('all')}>전체</button>
            <button className={usage === 'used' ? 'on red' : ''} onClick={() => setUsage('used')}>등록됨</button>
            <button className={usage === 'unused' ? 'on red' : ''} onClick={() => setUsage('unused')}>미등록</button>
          </div>
        )}
        {children}
      </div>
    </div>
  );
}

// "조건에 맞는 카드가 없습니다" + 필터 초기화 — shown when a filter hides everything.
function CardFilterEmpty({ onReset }) {
  return <EmptyState icon={<Icon.search />} title="조건에 맞는 카드가 없습니다" desc="검색어나 필터를 바꿔보세요."
    action={<Btn variant="ghost" onClick={onReset}>필터 초기화</Btn>} />;
}

/* ============================================================
   EPISODE BROWSE  (view / select / submit — no authoring)
   ============================================================ */
function EpisodeBrowse({ project, month, user, navigate, toast }) {
  const { loading, error, data, reload } = useAsync(() => window.api.getContent(project.id), [project.id]);

  // month tab state — keyed by month.id; guard so tab switching works after reload
  const [curMonthId, setCurMonthId] = useSE(null);
  useEE(() => {
    if (data && (!curMonthId || !data.months.some((m) => m.id === curMonthId))) {
      setCurMonthId(data.months[0]?.id ?? null);
    }
  }, [data]);

  const [sel, setSel] = useSE([]);
  // session-only persona choices for not-yet-selected episodes: shown (blue) on
  // the card without selecting/submitting the episode. Carried into the
  // selection if/when the episode is later checked.
  const [personaDraft, setPersonaDraft] = useSE({});
  const [detail, setDetail] = useSE(null);      // episode being viewed
  const [submitOpen, setSubmitOpen] = useSE(false);
  const [submitting, setSubmitting] = useSE(false);

  useEE(() => { if (data) setSel(data.currentSelection || []); }, [data]);

  // per-month quota
  const cm = data ? data.months.find((m) => m.id === curMonthId) : null;
  const monthCap = cm ? (cm.maxSelections || 0) : 0;
  // build episode→monthId map from themes
  const epMonth = useME(() => {
    const map = {};
    if (data) data.themes.forEach((t) => t.episodes.forEach((ep) => { map[ep.id] = t.monthId; }));
    return map;
  }, [data]);
  const monthSelCount = sel.filter((s) => epMonth[s.episodeId] === curMonthId).length;

  const count = sel.length;
  const allPersona = sel.every((s) => s.personaLabel);

  const persist = (next) => { setSel(next); window.api.setSelection(project.id, null, next); };

  const toggleSelect = (ep) => {
    if (ep.status === 'paused') return;
    if (selHas(sel, ep.id)) {
      persist(sel.filter((s) => s.episodeId !== ep.id));
    } else {
      // enforce the per-month cap (0 = unlimited); mirrors backend MONTH_QUOTA
      if (monthCap > 0 && monthSelCount >= monthCap) {
        toast(`${cm?.label ?? '이 달'}은 최대 ${monthCap}개까지 선택할 수 있습니다`);
        return;
      }
      persist([...sel, { episodeId: ep.id, personaLabel: personaDraft[ep.id] ?? null }]);
    }
  };
  const assignPersona = (epId, personaLabel) => {
    // Picking a persona never selects the episode — selection goes through
    // toggleSelect, which enforces the month cap (mirrors backend MONTH_QUOTA).
    // Always remember the choice as a session draft (so it shows on the card);
    // if the episode is already selected, also persist it onto the snapshot.
    setPersonaDraft((d) => ({ ...d, [epId]: personaLabel }));
    if (selHas(sel, epId)) persist(sel.map((s) => (s.episodeId === epId ? { ...s, personaLabel } : s)));
  };

  const doSubmit = async (note) => {
    setSubmitting(true);
    await window.api.submit(project.id, null, { items: sel, note });
    setSubmitting(false); setSubmitOpen(false);
    toast(`에피소드 ${sel.length}개가 제출되었습니다`);
    navigate({ name: 'project', projectId: project.id, tab: user.role === 'LGE' ? 'episodes' : 'history' });
  };

  // flat episode map (for drawer/submit-modal episode lookups)
  const epById = useME(() => flatEpisodes(data ? data.themes : []), [data]);

  // themes for the selected month tab, showing ONLY 운영가이드 표기-ON episodes
  // (status !== 'paused'). Themes left with no visible episode are dropped so the
  // LGE guide never shows paused/hidden content; if nothing is left the month
  // renders the empty-state notice below.
  const visibleThemes = data
    ? data.themes
        .filter((t) => t.monthId === curMonthId)
        .map((t) => ({ ...t, episodes: t.episodes.filter((ep) => ep.status !== 'paused') }))
        .filter((t) => t.episodes.length > 0)
    : [];

  return (
    <div className="page-wrap">
      {/* sticky submit bar — hidden when the selected month has no 표기-ON content */}
      {visibleThemes.length > 0 && (
      <div className="submitbar">
        <div className="quota">
          {monthCap > 0
            ? <Ring value={monthSelCount} total={monthCap} />
            : <Ring value={count} total={Math.max(count, 1)} />}
          <div className="quota-txt">
            <div className="ql">에피소드 선택</div>
            {monthCap > 0
              ? <div className={`qs ${monthSelCount >= 1 ? 'ok' : 'under'}`}>
                  에피소드를 <b>{monthCap}개</b> 선택해주세요. (현재 <b> {monthSelCount}개)</b>
                </div>
              : <div className={`qs ${count >= 1 ? 'ok' : 'under'}`}>
                  <b>{count}개</b> 선택됨{count >= 1 ? ' · 제출 가능' : ' · 1개 이상 선택'}
                </div>}
          </div>
        </div>
        <div className="sb-actions">
          {!allPersona && count >= 1 && <span className="qs under hide-mobile" style={{ fontSize: 12 }}><Icon.alert style={{ width: 13, height: 13, verticalAlign: '-2px' }} /> 페르소나 미지정 {sel.filter((s) => !s.personaLabel).length}개</span>}
          {user.role !== 'LGE' && <Btn variant="ghost" icon={<Icon.clock />} className="hide-mobile" onClick={() => navigate({ name: 'project', projectId: project.id, tab: 'history' })}>제출 히스토리</Btn>}
          <Btn variant="primary" icon={<Icon.send />} disabled={count < 1} onClick={() => setSubmitOpen(true)}>
            제출{count > 0 ? ` (${count})` : ''}
          </Btn>
        </div>
      </div>
      )}

      {/* Month tabs */}
      {!loading && !error && data && data.months.length > 0 && (
        <div className="seg" style={{ marginBottom: 18 }}>
          {data.months.map((m) => (
            <button key={m.id} className={m.id === curMonthId ? 'on red' : ''} onClick={() => setCurMonthId(m.id)}>{m.label}</button>
          ))}
        </div>
      )}

      {loading && [0, 1].map((i) => (
        <div className="theme-box" key={i}><Skel w="40%" h={18} /><div className="ep-grid" style={{ marginTop: 16 }}>{[0, 1, 2].map((j) => <div key={j}><Skel h={120} r={12} /></div>)}</div></div>
      ))}
      {error && <ErrorState onRetry={reload} msg={error} />}
      {!loading && !error && visibleThemes.length === 0 && (
        <EmptyState icon={<Icon.layers />} title="표시할 콘텐츠가 없습니다"
          desc="이 달에 운영가이드 표기(ON)된 에피소드가 아직 없습니다." />
      )}

      {!loading && !error && visibleThemes.map((t, ti) => (
        <div className="theme-box" key={t.id}>
          <div className="theme-hd">
            <span className="theme-pill">Theme {String(ti + 1).padStart(2, '0')}</span>
            <div style={{ minWidth: 0 }}>
              <div className="theme-name">{t.name}</div>
              <div className="theme-sub">{t.subtitle}</div>
            </div>
          </div>
          <div className="ep-grid">
            {t.episodes.map((ep, ei) => {
              const ec = ep;
              return (
                <EpisodeCard key={ec.id} ep={ec} selected={selHas(sel, ec.id)}
                  personaLabel={selPersonaLabel(sel, ec.id) || personaDraft[ec.id] || null} isStaff={false}
                  onToggle={() => toggleSelect(ec)} onOpen={() => setDetail({ ...ec, themeId: t.id, themeName: t.name })} />
              );
            })}
          </div>
        </div>
      ))}

      {/* DETAIL DRAWER — no onEdit affordance */}
      {detail && (
        <EpisodeDetailDrawer episode={detail} project={project} user={user}
          selectedPersonaLabel={selPersonaLabel(sel, detail.id)} isSelected={selHas(sel, detail.id)}
          draftPersonaLabel={personaDraft[detail.id] || null}
          onClose={() => setDetail(null)} onToggleSelect={() => toggleSelect(detail)}
          onAssignPersona={(label) => assignPersona(detail.id, label)}
          onEdit={null} navigate={navigate} />
      )}

      {/* SUBMIT MODAL */}
      {submitOpen && (
        <SubmitModal sel={sel} episodes={epById} toast={toast}
          submitting={submitting} reSubmit={false}
          onAssign={assignPersona} onClose={() => setSubmitOpen(false)} onConfirm={doSubmit} />
      )}
    </div>
  );
}

/* ============================================================
   CONTENT DETAIL  (month tabs / themes / pool / edit modals —
   extracted from EpisodeAdmin so EpisodeAdmin stays a thin shell)
   ============================================================ */
function ContentDetail({ projectId, user, toast }) {
  const { loading, error, data, reload } = useAsync(
    () => projectId ? window.api.getContent(projectId) : Promise.resolve(null),
    [projectId]
  );

  // month tab state — keyed by month.id; guard so tab switching works after reload
  const [curMonthId, setCurMonthId] = useSE(null);
  useEE(() => {
    if (data && (!curMonthId || !data.months.some((m) => m.id === curMonthId))) {
      setCurMonthId(data.months[0]?.id ?? null);
    }
  }, [data]);

  const [editEp, setEditEp] = useSE(null);         // {themeId, episode} — edit an already-placed card
  const [pickTheme, setPickTheme] = useSE(null);   // {theme} — library picker target
  const [editTheme, setEditTheme] = useSE(null);   // {theme|null, defaultMonthId?}
  const [editMonth, setEditMonth] = useSE(null);   // {month|null} for month create/edit
  const [confirm, setConfirm] = useSE(null);
  const [importRef, setImportRef] = useSE(null);   // file input ref

  /* CNX mutations */
  // Editing a placed card edits the shared library card (reflected everywhere it's linked).
  const saveEpisode = async (themeId, body) => {
    await window.api.updateEpisode(body.id, {
      title: body.title, description: body.description,
      tension: body.tension, products: body.products, voc: body.voc, rtb: body.rtb,
      personas: body.personas,
    });
    if (body.placeChanged) await window.api.setPlacement(body.id, body.placeThemeId);
    setEditEp(null); toast('에피소드가 수정되었습니다'); reload();
  };
  const epStatus = async (ep, status) => { await window.api.updateEpisode(ep.id, { status }); toast(status === 'paused' ? '에피소드 일시중지됨' : '에피소드 활성화됨'); reload(); };
  // 단일 배치: 테마에서 제거 = 배치 해제(미배치). 카드는 라이브러리에 남는다.
  const unlinkEpisode = async () => { const { episode } = confirm.ep; setConfirm(null); await window.api.setPlacement(episode.id, null); toast('테마에서 제거됨'); reload(); };
  // 단일 배치: 카드를 이 테마로 배치(이미 다른 테마면 이동). setPlacement가 set/move를 모두 처리.
  const linkEpisodes = async (themeId, episodeIds) => {
    for (const eid of episodeIds) await window.api.setPlacement(eid, themeId);
    setPickTheme(null); toast(`${episodeIds.length}개 카드가 추가되었습니다`); reload();
  };
  const saveTheme = async (body) => {
    if (body.id) await window.api.updateTheme(body.id, body);
    else await window.api.createTheme(projectId, body);
    setEditTheme(null); toast(body.id ? '테마 수정됨' : '테마 추가됨'); reload();
  };
  const delTheme = async () => { const t = confirm.theme; setConfirm(null); await window.api.deleteTheme(t.id); toast('테마 삭제됨'); reload(); };

  const saveMonth = async (body) => {
    try {
      if (body.id) {
        await window.api.updateMonth(body.id, { label: body.label, maxSelections: body.maxSelections, sortOrder: body.sortOrder });
        toast('월 수정됨');
      } else {
        const created = await window.api.createMonth(projectId, { label: body.label, maxSelections: body.maxSelections, sortOrder: body.sortOrder ?? 0 });
        if (created && created.id) setCurMonthId(created.id);
        toast('월 추가됨');
      }
      setEditMonth(null); reload();
    } catch (ex) { toast('오류: ' + ex.message); }
  };
  const delMonth = async () => {
    const m = confirm.month; setConfirm(null);
    try { await window.api.deleteMonth(m.id); toast('월 삭제됨'); reload(); }
    catch (ex) { toast('오류: ' + ex.message); }
  };

  const handleImport = async (e) => {
    const file = e.target.files && e.target.files[0];
    if (!file) return;
    e.target.value = '';
    try {
      const r = await window.api.importEpisodes(file);
      toast(`${r.imported}개 생성` + (r.skipped && r.skipped.length ? `, ${r.skipped.length}개 스킵` : ''));
      reload();
    } catch (ex) { toast('오류: ' + ex.message); }
  };

  const visibleThemes = data ? data.themes.filter((t) => t.monthId === curMonthId) : [];

  return (
    <div>
      {/* Month tabs + 월 추가/편집 */}
      {!loading && !error && data && (
        <div className="flex center between wrap-flex" style={{ marginBottom: 14, gap: 8 }}>
          <div className="seg" style={{ marginBottom: 0 }}>
            {data.months.length === 0 && <span className="muted" style={{ fontSize: 12.5, padding: '0 8px' }}>월 없음 — 아래에서 추가하세요</span>}
            {data.months.map((m) => (
              <button key={m.id} className={m.id === curMonthId ? 'on red' : ''} onClick={() => setCurMonthId(m.id)}>{m.label}{m.maxSelections > 0 ? ` (최대 ${m.maxSelections})` : ''}</button>
            ))}
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            {curMonthId && (() => {
              const curMonth = data.months.find((m) => m.id === curMonthId);
              return curMonth ? (
                <>
                  <button className="icon-btn" style={{ width: 28, height: 28 }} title="월 수정" onClick={() => setEditMonth({ month: curMonth })}><Icon.edit style={{ width: 14, height: 14 }} /></button>
                  <button className="icon-btn" style={{ width: 28, height: 28 }} title="월 삭제" onClick={() => setConfirm({ month: curMonth })}><Icon.trash style={{ width: 14, height: 14 }} /></button>
                </>
              ) : null;
            })()}
            <Btn size="sm" variant="ghost" icon={<Icon.plus />} onClick={() => setEditMonth({ month: null })}>월 추가</Btn>
          </div>
        </div>
      )}

      {/* CNX toolbar: add-theme + import (only when a month is selected) */}
      {!loading && !error && data && curMonthId && (
        <div className="flex between center" style={{ marginBottom: 14, gap: 8, flexWrap: 'wrap' }}>
          <span className="muted" style={{ fontSize: 12.5 }}>{visibleThemes.length}개 테마</span>
          <div className="flex center" style={{ gap: 6 }}>
            <Btn size="sm" variant="ghost" icon={<Icon.plus />} onClick={() => setEditTheme({ theme: null, defaultMonthId: curMonthId })}>테마 추가</Btn>
            <Btn size="sm" variant="ghost" onClick={() => window.api.exportEpisodeTemplate().catch((ex) => toast('오류: ' + ex.message))}>양식 다운로드</Btn>
            <Btn size="sm" variant="ghost" icon={<Icon.plus />} onClick={() => importRef && importRef.click()}>엑셀 업로드</Btn>
            <input type="file" accept=".xlsx" style={{ display: 'none' }} ref={(el) => setImportRef(el)} onChange={handleImport} />
          </div>
        </div>
      )}

      {loading && [0, 1].map((i) => (
        <div className="theme-box" key={i}><Skel w="40%" h={18} /><div className="ep-grid" style={{ marginTop: 16 }}>{[0, 1, 2].map((j) => <div key={j}><Skel h={120} r={12} /></div>)}</div></div>
      ))}
      {error && <ErrorState onRetry={reload} msg={error} />}

      {/* No month state */}
      {!loading && !error && data && data.months.length === 0 && (
        <EmptyState icon={<Icon.layers />} title="월이 없습니다"
          desc="먼저 월을 추가하고, 테마와 에피소드를 등록하세요."
          action={<Btn variant="primary" icon={<Icon.plus />} onClick={() => setEditMonth({ month: null })}>월 추가</Btn>} />
      )}

      {!loading && !error && data && curMonthId && visibleThemes.length === 0 && data.months.length > 0 && (
        <EmptyState icon={<Icon.layers />} title="등록된 테마가 없습니다"
          desc="테마를 추가하고 에피소드를 등록하세요."
          action={<Btn variant="primary" icon={<Icon.plus />} onClick={() => setEditTheme({ theme: null, defaultMonthId: curMonthId })}>테마 추가</Btn>} />
      )}

      {!loading && !error && visibleThemes.map((t, ti) => (
        <div className="theme-box" key={t.id}>
          <div className="theme-hd">
            <span className="theme-pill">Theme {String(ti + 1).padStart(2, '0')}</span>
            <div style={{ minWidth: 0 }}>
              <div className="theme-name">{t.name}</div>
              <div className="theme-sub">{t.subtitle}</div>
            </div>
            <div className="theme-actions">
              <Btn size="sm" variant="soft" icon={<Icon.plus />} onClick={() => setPickTheme({ theme: t })}>에피소드 추가</Btn>
              <Menu trigger={<button className="icon-btn"><Icon.dots /></button>}>
                <button onClick={() => setEditTheme({ theme: t })}><Icon.edit />테마 수정</button>
                <div className="menu-div" />
                <button className="danger" onClick={() => setConfirm({ theme: t })}><Icon.trash />테마 삭제</button>
              </Menu>
            </div>
          </div>
          <div className="ep-grid">
            {t.episodes.map((ep, ei) => {
              const ec = ep;
              return (
                <EpisodeCard key={ec.id} ep={ec} selected={false} isStaff={true}
                  onToggle={() => {}} onOpen={() => {}}
                  onEdit={() => setEditEp({ themeId: t.id, episode: ep, placement: { themeId: t.id } })}
                  onPause={() => epStatus(ec, ec.status === 'paused' ? 'active' : 'paused')}
                  onDelete={() => setConfirm({ ep: { themeId: t.id, episode: ec } })} />
              );
            })}
            {t.episodes.length === 0 && <div className="muted" style={{ fontSize: 12.5, padding: '12px 0' }}>에피소드가 없습니다.</div>}
          </div>
        </div>
      ))}

      {/* EDIT MODALS */}
      {editEp && <EpisodeEditModal key={editEp.episode?.id || 'new'} data={editEp} onClose={() => setEditEp(null)} onSave={(body) => saveEpisode(editEp.themeId, body)} />}
      {pickTheme && (
        <LibraryPickerModal
          theme={pickTheme.theme}
          linkedIds={(pickTheme.theme.episodes || []).map((e) => e.id)}
          onClose={() => setPickTheme(null)}
          onConfirm={(ids) => linkEpisodes(pickTheme.theme.id, ids)} />
      )}
      {editTheme && (
        <ThemeEditModal
          theme={editTheme.theme}
          defaultMonthId={editTheme.defaultMonthId}
          months={data ? data.months : []}
          onClose={() => setEditTheme(null)}
          onSave={saveTheme} />
      )}
      {editMonth && <MonthEditModal month={editMonth.month} months={data ? data.months : []} onClose={() => setEditMonth(null)} onSave={saveMonth} />}
      {confirm && (
        <Modal
          title={confirm.month ? '월 삭제' : confirm.theme ? '테마 삭제' : '테마에서 제거'}
          sub={confirm.month ? confirm.month.label : confirm.theme ? confirm.theme.name : confirm.ep.episode.title}
          onClose={() => setConfirm(null)}
          footer={<><Btn onClick={() => setConfirm(null)}>취소</Btn><Btn variant="primary" icon={<Icon.trash />} onClick={confirm.month ? delMonth : confirm.theme ? delTheme : unlinkEpisode}>{confirm.ep ? '제거' : '삭제'}</Btn></>}>
          <p style={{ color: 'var(--ink-2)' }}>
            {confirm.month ? '이 월과 포함된 모든 테마가 삭제됩니다.' : confirm.theme ? '이 테마와 포함된 모든 배치가 해제됩니다.' : '이 카드를 테마에서 제거합니다. 카드는 라이브러리에 남습니다.'}
          </p>
        </Modal>
      )}
    </div>
  );
}

/* ============================================================
   LIBRARY PICKER  (① 테마에 라이브러리 카드를 링크로 추가)
   ============================================================ */
function LibraryPickerModal({ theme, linkedIds, onClose, onConfirm }) {
  const { loading, error, data, reload } = useAsync(() => window.api.getEpisodes(), []);
  const [picked, setPicked] = useSE([]);   // episodeId[]
  const [busy, setBusy] = useSE(false);
  // list controls — mirror ② 카드 관리: search · product · usage
  const [q, setQ] = useSE('');
  const [product, setProduct] = useSE('');
  const [usage, setUsage] = useSE('all');   // 'all' | 'used' | 'unused'

  const available = useME(() => { const linked = new Set(linkedIds || []); return (data || []).filter((e) => !linked.has(e.id)); }, [data, linkedIds]);
  const productOptions = useME(() => cardProductOptions(available), [available]);
  const shown = useME(() => available.filter((c) => matchCard(c, { q, product, usage })), [available, q, product, usage]);

  const filtered = !!(q.trim() || product || usage !== 'all');
  const resetFilters = () => { setQ(''); setProduct(''); setUsage('all'); };
  const toggle = (id) => setPicked((p) => (p.includes(id) ? p.filter((x) => x !== id) : [...p, id]));
  // 단일 배치: 이 피커는 이 테마에 없는 카드만 보여주므로, placement 있는 picked는 모두 "이동".
  const moveCount = useME(() => (data || []).filter((c) => picked.includes(c.id) && c.placement).length, [data, picked]);
  const confirmAdd = async () => {
    if (moveCount > 0 && !confirmMove(moveCount)) return;
    setBusy(true);
    try { await onConfirm(picked); } finally { setBusy(false); }
  };
  return (
    <Modal wide title={`라이브러리에서 카드 추가 — ${theme.name}`} sub="이미 이 테마에 배치된 카드는 제외됩니다." onClose={onClose}
      footer={<><Btn onClick={onClose}>취소</Btn><Btn variant="primary" disabled={picked.length === 0 || busy} icon={<Icon.check />} onClick={confirmAdd}>{picked.length > 0 ? `${picked.length}개 추가` : '추가'}</Btn></>}>
      {loading && <div className="ep-grid">{[0,1,2].map((i) => <Skel key={i} h={110} r={12} />)}</div>}
      {error && <ErrorState onRetry={reload} msg={error} />}
      {!loading && !error && available.length === 0 && (
        <EmptyState icon={<Icon.layers />} title="추가할 카드가 없습니다" desc="라이브러리의 모든 카드가 이미 이 테마에 배치되어 있거나, 라이브러리가 비어 있습니다. ② 에피소드 카드 관리에서 카드를 추가하세요." />
      )}
      {!loading && !error && available.length > 0 && (
        <>
          <CardFilterBar q={q} setQ={setQ} product={product} setProduct={setProduct} productOptions={productOptions} usage={usage} setUsage={setUsage} />
          <div className="muted" style={{ fontSize: 11.5, marginBottom: 10 }}>
            {filtered ? `${shown.length} / ${available.length}개 표시` : `${available.length}개 추가 가능`} · 선택 {picked.length}개
            {moveCount > 0 && <span style={{ color: 'var(--amber, #b97509)', fontWeight: 700 }}> · {moveCount}개 이동</span>}
          </div>
          {shown.length === 0
            ? <CardFilterEmpty onReset={resetFilters} />
            : (
              <div className="ep-grid">
                {shown.map((ec) => {
                  const on = picked.includes(ec.id);
                  return (
                    <div key={ec.id} className={`ep ${on ? 'sel' : ''}`} style={{ position: 'relative', cursor: 'pointer' }} onClick={() => toggle(ec.id)}>
                      <button className="ep-check" onClick={(e) => { e.stopPropagation(); toggle(ec.id); }} aria-label="선택"><Icon.check /></button>
                      {ec.placement && <span className="tag" style={{ position: 'absolute', top: 10, left: 10, background: 'var(--amber-50, #fef3e2)', color: 'var(--amber, #b97509)', fontWeight: 800 }}>이동</span>}
                      <div className="ep-ttl" style={ec.placement ? { paddingLeft: 44 } : null}>{ec.title}</div>
                      {(ec.products || []).length > 0 && <div className="ep-tags">{(ec.products || []).map((p, j) => <span className="tag" key={j}>{p}</span>)}</div>}
                      <EpDescBlock text={ec.description} />
                      <PlacementInfo placement={ec.placement} />
                    </div>
                  );
                })}
              </div>
            )}
        </>
      )}
    </Modal>
  );
}

/* ============================================================
   CONTENT CARD  (single card; lazy-loads its own counts)
   ============================================================ */
function ContentCard({ project, onOpen, onEdit, onDelete }) {
  const { data } = useAsync(() => window.api.getContent(project.id), [project.id]);
  const monthsN = data ? data.months.length : null;
  const themesN = data ? data.themes.length : null;
  const epN = data ? data.themes.reduce((a, t) => a + ((t.episodes && t.episodes.length) || 0), 0) : null;
  // Use periodStart — badge is start-based (due date is optional)
  const hasPeriod = !!project.periodStart;
  const fmtDate = (d) => d ? String(d).slice(0, 10) : '';
  const periodTxt = hasPeriod
    ? `${fmtDate(project.periodStart)}${project.periodEnd ? ` – ${fmtDate(project.periodEnd)}` : ' ~ 미정'}`
    : '기간 미설정';
  const isLive = project.status === 'active';
  const Badge = ({ on, children }) => (
    <span style={{ fontSize: 11.5, fontWeight: 600, padding: '3px 9px', borderRadius: 20,
      background: on ? 'var(--accent-50, #f1f2f4)' : 'var(--line, #f1f2f4)',
      color: on ? 'var(--accent, #16181d)' : 'var(--ink-3, #9aa0a7)' }}>{children}</span>
  );
  return (
    <div role="button" tabIndex={0} onClick={onOpen} style={{ position: 'relative', textAlign: 'left', cursor: 'pointer', padding: 15,
      border: isLive ? '2px solid var(--lg-red, #c0392b)' : '1px solid var(--line, #e2e4e8)',
      borderRadius: 12,
      background: isLive ? 'var(--lg-red-50, #fdecea)' : 'var(--surface, #fff)',
      boxShadow: isLive ? '0 0 0 2px var(--lg-red-50, #fdecea)' : 'none' }}>
      <div style={{ fontSize: 15, fontWeight: 700, marginBottom: 3, paddingRight: 32, display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 4 }}>
        {project.name}
        {isLive && <span style={{ fontSize: 10.5, fontWeight: 700, color: 'var(--lg-red, #c0392b)', background: 'var(--lg-red-50, #fdecea)', border: '1px solid var(--lg-red, #c0392b)', padding: '2px 7px', borderRadius: 20 }}>운영가이드 노출중</span>}
      </div>
      <div style={{ fontSize: 12, color: 'var(--ink-3, #8a9098)', marginBottom: 11 }}>{periodTxt}</div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
        <Badge on={hasPeriod}>{hasPeriod ? '기간 설정됨' : '기간 미설정'}</Badge>
        <Badge on={monthsN > 0}>월 {monthsN == null ? '·' : monthsN}</Badge>
        <Badge on={themesN > 0}>테마 {themesN == null ? '·' : themesN}</Badge>
        <Badge on={epN > 0}>에피소드 {epN == null ? '·' : epN}</Badge>
      </div>
      {(onEdit || onDelete) && (
        <div style={{ position: 'absolute', top: 10, right: 10, display: 'flex', gap: 5 }}>
          {onEdit && (
            <button title="콘텐츠 수정" onClick={(e) => { e.stopPropagation(); onEdit(project); }}
              style={{ width: 28, height: 28, borderRadius: 6, border: '1px solid var(--line, #e2e4e8)', background: 'var(--surface, #fff)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ink-3, #8a9098)' }}>
              <Icon.edit style={{ width: 13, height: 13 }} />
            </button>
          )}
          {onDelete && (
            <button title="콘텐츠 삭제" onClick={(e) => { e.stopPropagation(); onDelete(project); }}
              style={{ width: 28, height: 28, borderRadius: 6, border: '1px solid var(--line, #e2e4e8)', background: 'var(--surface, #fff)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ink-3, #8a9098)' }}>
              <Icon.trash style={{ width: 13, height: 13 }} />
            </button>
          )}
        </div>
      )}
    </div>
  );
}

/* ============================================================
   CONTENT GRID  (project card grid + 콘텐츠 추가)
   ============================================================ */
function ContentGrid({ onOpen, toast }) {
  const projects = useAsync(() => window.api.getProjects(), []);
  const [createProject, setCreateProject] = useSE(false);
  const [editProject, setEditProject] = useSE(null);
  const [delProject, setDelProject] = useSE(null);
  const [delBusy, setDelBusy] = useSE(false);
  return (
    <div>
      {projects.loading && <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 14 }}>{[0,1,2].map((i) => <Skel key={i} h={120} r={12} />)}</div>}
      {!projects.loading && (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 14 }}>
          {(projects.data || []).map((p) => <ContentCard key={p.id} project={p} onOpen={() => onOpen(p.id)} onEdit={(p) => setEditProject(p)} onDelete={(p) => setDelProject(p)} />)}
          <button onClick={() => setCreateProject(true)} style={{ border: '1px dashed var(--line, #e2e4e8)', borderRadius: 12, background: 'transparent', color: 'var(--accent, #16181d)', fontWeight: 600, cursor: 'pointer', minHeight: 120 }}>＋ 콘텐츠 추가</button>
        </div>
      )}
      {createProject && <ProjectCreateModal onClose={() => setCreateProject(false)} onSave={async (body) => {
        try { const p = await window.api.createProject(body); await projects.reload(); setCreateProject(false); toast('콘텐츠가 추가되었습니다'); if (p && p.id) onOpen(p.id); }
        catch (ex) { toast('오류: ' + ex.message); }
      }} />}
      {editProject && <ContentEditModal project={editProject} onClose={() => setEditProject(null)} onSave={async (body) => {
        try {
          const visChanged = (editProject.status === 'active') !== body.visible;
          await window.api.updateProject(editProject.id, { name: body.name, description: body.description, periodStart: body.periodStart, periodEnd: body.periodEnd });
          await window.api.setProjectVisible(editProject.id, body.visible);
          await projects.reload(); setEditProject(null); toast('콘텐츠가 수정되었습니다');
          // 운영중(표기) 변경은 운영가이드 뷰어의 프로젝트 선택(app.jsx projQ, [user] 캐시)에
          // 영향을 주므로 하드 리프레시로 바로 반영시킨다 (토스트가 잠깐 보인 뒤 리로드).
          if (visChanged) setTimeout(() => window.location.reload(), 500);
        } catch (ex) { toast('오류: ' + ex.message); }
      }} />}
      {delProject && (
        <Modal title="콘텐츠 삭제" sub={delProject.name} onClose={() => setDelProject(null)}
          footer={<><Btn onClick={() => setDelProject(null)}>취소</Btn><Btn variant="primary" disabled={delBusy} icon={<Icon.trash />} onClick={async () => {
            setDelBusy(true);
            try { await window.api.deleteProject(delProject.id); await projects.reload(); setDelProject(null); toast('콘텐츠가 삭제되었습니다'); }
            catch (ex) { toast('오류: ' + ex.message); }
            finally { setDelBusy(false); }
          }}>삭제</Btn></>}>
          <p style={{ color: 'var(--ink-2)' }}>이 콘텐츠와 포함된 월·테마·배치가 삭제됩니다. (에피소드 카드 자체는 라이브러리에 남습니다.)</p>
        </Modal>
      )}
    </div>
  );
}

/* 공용 배치 피커 — 콘텐츠→월→테마 연쇄 select. value = themeId|null, onChange(themeId|null).
   getPlacementTargets() 트리: [{ projectId, projectName, months:[{monthId,label,themes:[{themeId,name}]}], themesNoMonth:[{themeId,name}] }]
   value(themeId)로부터 현재 project/month를 역추적해 select를 프리셋한다. */
function PlacementPicker({ value, onChange, compact, targets: targetsProp }) {
  // targets prop이 있으면(매니저 그리드에서 1회 fetch 후 주입) 내부 fetch를 건너뛴다.
  // 없으면(모달 단일 인스턴스) 기존대로 자체 fetch.
  const self = useAsync(() => (targetsProp ? Promise.resolve(targetsProp) : window.api.getPlacementTargets()), [targetsProp]);
  const data = targetsProp || self.data;
  const targets = data || [];
  // themeId → { projectId, monthId } 역인덱스 (value 프리셋 + 변경시 정합성 검증용)
  const themeIndex = useME(() => {
    const idx = {};
    targets.forEach((p) => {
      (p.months || []).forEach((m) => (m.themes || []).forEach((t) => { idx[t.themeId] = { projectId: p.projectId, monthId: m.monthId }; }));
      (p.themesNoMonth || []).forEach((t) => { idx[t.themeId] = { projectId: p.projectId, monthId: null }; });
    });
    return idx;
  }, [data]);

  const [proj, setProj] = useSE('');
  const [month, setMonth] = useSE('');   // '' = (월 없음/전체); themesNoMonth는 월 미선택일 때 노출

  // value(themeId) 또는 targets 로드 시 select를 역추적해 동기화.
  useEE(() => {
    if (value && themeIndex[value]) {
      setProj(themeIndex[value].projectId);
      setMonth(themeIndex[value].monthId || '');
    } else if (!value) {
      setProj(''); setMonth('');
    }
  }, [value, data]);

  const curProject = useME(() => targets.find((p) => p.projectId === proj) || null, [targets, proj]);
  const monthsOf = curProject ? (curProject.months || []) : [];
  // 테마 옵션: 월 선택 시 그 월의 테마, 월 미선택 시 프로젝트의 무월(themesNoMonth) 테마.
  const themesOf = useME(() => {
    if (!curProject) return [];
    if (month) { const m = monthsOf.find((mm) => mm.monthId === month); return m ? (m.themes || []) : []; }
    return curProject.themesNoMonth || [];
  }, [curProject, month]);

  // 콘텐츠/월 변경은 "탐색"일 뿐 커밋하지 않는다(value 유지). 실제 배치는 테마 선택에서만
  // 커밋된다. 단 "미배치"(빈 콘텐츠) 선택은 즉시 null 커밋(테마→미배치 경로).
  // 이렇게 해야 이미 배치된 카드를 다른 콘텐츠/월로 옮길 때 드롭다운이 미배치로 튀지 않는다.
  const onProj = (v) => { setProj(v); setMonth(''); if (v === '') onChange(null); };
  const onMonth = (v) => { setMonth(v); };
  const onTheme = (v) => onChange(v || null);

  const cellW = compact ? { flex: '1 1 0', minWidth: 0 } : { width: '100%' };
  const wrap = compact
    ? { display: 'flex', gap: 6, flexWrap: 'wrap' }
    : { display: 'grid', gridTemplateColumns: '1fr', gap: 6 };
  return (
    <div style={wrap}>
      <select className="input" value={proj} onChange={(e) => onProj(e.target.value)} style={cellW} title="콘텐츠">
        <option value="">미배치</option>
        {targets.map((p) => <option key={p.projectId} value={p.projectId}>{p.projectName}</option>)}
      </select>
      <select className="input" value={month} onChange={(e) => onMonth(e.target.value)} disabled={!curProject || monthsOf.length === 0} style={cellW} title="월">
        <option value="">{monthsOf.length ? '월 선택(무월 테마)' : '월 없음'}</option>
        {monthsOf.map((m) => <option key={m.monthId} value={m.monthId}>{m.label}</option>)}
      </select>
      <select className="input" value={value || ''} onChange={(e) => onTheme(e.target.value)} disabled={!curProject || themesOf.length === 0} style={cellW} title="테마">
        <option value="">{curProject ? (themesOf.length ? '테마 선택' : '테마 없음') : '콘텐츠 먼저 선택'}</option>
        {themesOf.map((t) => <option key={t.themeId} value={t.themeId}>{t.name}</option>)}
      </select>
    </div>
  );
}

/* Where a library card is placed (단일 배치) — shown on each manager card.
   placement = {themeId, themeName, projectId, projectName, monthId, monthLabel} | null */
function PlacementInfo({ placement }) {
  // faint hairline above; compact "등록됨" label; 콘텐츠/테마 on separate label-rows
  const hdr = { fontSize: 10, fontWeight: 800, letterSpacing: '.04em', textTransform: 'uppercase' };
  return (
    <div className="ep-usage" style={{ marginTop: 8, paddingTop: 7, borderTop: '1px solid var(--line, #e7e9ee)' }}>
      {!placement
        ? <div style={{ ...hdr, color: 'var(--lg-red, #C8102E)' }}>미등록</div>
        : (
          <>
            <div style={{ ...hdr, color: 'var(--cnx-blue, #1a6ec7)', marginBottom: 4 }}>등록됨</div>
            <div className="ep-meta" style={{ marginTop: 0, gap: 2 }}>
              <div className="ep-meta-row"><span className="ep-meta-label">콘텐츠</span><span className="ep-meta-val">{placement.projectName}</span></div>
              <div className="ep-meta-row"><span className="ep-meta-label">테마</span><span className="ep-meta-val">{placement.monthLabel ? `${placement.monthLabel} ` : ''}{placement.themeName}</span></div>
            </div>
          </>
        )}
    </div>
  );
}

/* ============================================================
   EPISODE CARD MANAGER  (② 에피소드 카드 관리 — global card pool)
   ============================================================ */
function EpisodeCardManager({ user, toast }) {
  const { loading, error, data, reload } = useAsync(() => window.api.getEpisodes(), []);
  // 배치 대상(콘텐츠→월→테마) 트리는 카드마다 동일하므로 매니저에서 1회만 fetch해
  // 각 인라인 PlacementPicker에 주입한다 (카드 N개 → fetch N회 방지).
  const targetsQ = useAsync(() => window.api.getPlacementTargets(), []);
  const [editEp, setEditEp] = useSE(null);   // { episode: ep|null }
  const [confirm, setConfirm] = useSE(null);  // { episode }
  const [importRef, setImportRef] = useSE(null);

  // list controls: text search · product filter · sort
  const [q, setQ] = useSE('');
  const [product, setProduct] = useSE('');          // '' = 전체 제품
  const [sort, setSort] = useSE('default');         // 'default' | 'title' | 'usage'
  // 등록 위치 필터 (연쇄): 콘텐츠(projectId | '' 전체 | '__none__' 미등록) → 월(monthId) → 테마(themeId)
  const [fProject, setFProject] = useSE('');
  const [fMonth, setFMonth] = useSE('');
  const [fTheme, setFTheme] = useSE('');
  // 다중 선택 (일괄 삭제용) — Set<episodeId>
  const [selected, setSelected] = useSE(() => new Set());
  const [bulkConfirm, setBulkConfirm] = useSE(false);

  const allCards = data || [];
  const productOptions = useME(() => cardProductOptions(allCards), [allCards]);
  const usedN = useME(() => allCards.filter((c) => placeCount(c) > 0).length, [allCards]);

  // distinct 콘텐츠/월/테마 옵션 (모든 카드의 단일 placement에서). 월·테마는 상위 선택으로 좁힌다.
  const placementOpts = useME(() => {
    const projects = new Map(); const months = new Map(); const themes = new Map();
    allCards.forEach((c) => {
      const p = c.placement;
      if (!p) return;
      if (p.projectId) projects.set(p.projectId, p.projectName || p.projectId);
      if (p.monthId) months.set(p.monthId, { id: p.monthId, label: p.monthLabel || '월 미지정', projectId: p.projectId });
      if (p.themeId) themes.set(p.themeId, { id: p.themeId, name: p.themeName || p.themeId, projectId: p.projectId, monthId: p.monthId });
    });
    return {
      projects: Array.from(projects, ([id, name]) => ({ id, name })).sort((a, b) => koCompare(a.name, b.name)),
      months: Array.from(months.values()),
      themes: Array.from(themes.values()),
    };
  }, [allCards]);
  const monthOpts = useME(() => placementOpts.months.filter((m) => !fProject || m.projectId === fProject), [placementOpts, fProject]);
  const themeOpts = useME(() => placementOpts.themes.filter((t) => (!fProject || t.projectId === fProject) && (!fMonth || t.monthId === fMonth)), [placementOpts, fProject, fMonth]);

  const cards = useME(() => {
    let out = allCards.filter((c) => matchCard(c, { q, product }) && matchPlacement(c, { project: fProject, month: fMonth, theme: fTheme }));
    if (sort === 'title') out = [...out].sort((a, b) => koCompare(a.title, b.title));
    else if (sort === 'usage') out = [...out].sort((a, b) => placeCount(b) - placeCount(a));
    return out;
  }, [allCards, q, product, sort, fProject, fMonth, fTheme]);

  const filtered = !!(q.trim() || product || fProject || fMonth || fTheme);
  const resetFilters = () => { setQ(''); setProduct(''); setFProject(''); setFMonth(''); setFTheme(''); };
  const onProject = (v) => { setFProject(v); setFMonth(''); setFTheme(''); };
  const onMonth = (v) => { setFMonth(v); setFTheme(''); };

  // reload 후 사라진 옵션을 가리키는 필터 값 정리. (disabled select에 stale 값이 남아
  // 빈 목록으로 막히는 것 방지 — '__none__'=미등록은 데이터와 무관하게 항상 유효.)
  useEE(() => {
    if (fProject && fProject !== PROJECT_NONE && !placementOpts.projects.some((p) => p.id === fProject)) { setFProject(''); setFMonth(''); setFTheme(''); return; }
    if (fMonth && !monthOpts.some((m) => m.id === fMonth)) { setFMonth(''); setFTheme(''); return; }
    if (fTheme && !themeOpts.some((t) => t.id === fTheme)) setFTheme('');
  }, [placementOpts, monthOpts, themeOpts]);

  // selection: 전체 선택 = 현재 필터된 카드 전체. data reload 시 현존 id로 prune.
  useEE(() => {
    setSelected((prev) => {
      const live = new Set(allCards.map((c) => c.id));
      const next = new Set(); prev.forEach((id) => live.has(id) && next.add(id));
      return next.size === prev.size ? prev : next;
    });
  }, [data]);
  const visibleIds = useME(() => cards.map((c) => c.id), [cards]);
  const allSelected = visibleIds.length > 0 && visibleIds.every((id) => selected.has(id));
  const toggleOne = (id) => setSelected((prev) => { const n = new Set(prev); n.has(id) ? n.delete(id) : n.add(id); return n; });
  const toggleAll = () => setSelected((prev) => {
    const n = new Set(prev);
    if (allSelected) visibleIds.forEach((id) => n.delete(id));
    else visibleIds.forEach((id) => n.add(id));
    return n;
  });
  // 일괄 동작은 "현재 보이는 + 선택된" 카드만 대상 (필터로 가려진 선택은 건드리지 않음 —
  // allSelected/toggleAll과 동일 범위, 안 보이는 카드를 실수로 삭제하지 않게).
  const selectedCards = useME(() => cards.filter((c) => selected.has(c.id)), [cards, selected]);
  const selCount = selectedCards.length;
  const selRegistered = useME(() => selectedCards.filter((c) => placeCount(c) > 0).length, [selectedCards]);
  const bulkDelete = async () => {
    const ids = selectedCards.map((c) => c.id); setBulkConfirm(false);
    const results = await Promise.allSettled(ids.map((id) => window.api.deleteEpisode(id)));
    const failed = results.filter((r) => r.status === 'rejected').length;
    setSelected(new Set()); reload();
    toast(failed ? `${ids.length - failed}개 삭제됨, ${failed}개 실패` : `${ids.length}개 카드 삭제됨`);
  };

  const saveEpisode = async (body) => {
    await window.api.updateEpisode(body.id, { title: body.title, description: body.description, tension: body.tension, products: body.products, voc: body.voc, rtb: body.rtb, personas: body.personas });
    if (body.placeChanged) await window.api.setPlacement(body.id, body.placeThemeId);
    setEditEp(null); toast('에피소드가 수정되었습니다'); reload();
  };
  const createCard = async (body) => {
    const created = await window.api.createEpisode(body);
    if (body.placeChanged && created && created.id) await window.api.setPlacement(created.id, body.placeThemeId);
    setEditEp(null); toast('카드가 추가되었습니다'); reload();
  };
  const delEpisode = async () => { const e = confirm.episode; setConfirm(null); await window.api.deleteEpisode(e.id); toast('에피소드 삭제됨'); reload(); };
  const handleImport = async (e) => {
    const file = e.target.files && e.target.files[0]; if (!file) return; e.target.value = '';
    try { const r = await window.api.importEpisodes(file); toast(`${r.imported}개 생성` + (r.skipped && r.skipped.length ? `, ${r.skipped.length}개 스킵` : '')); reload(); }
    catch (ex) { toast('오류: ' + ex.message); }
  };
  // 카드 인라인 배치 변경. 미등록→테마/테마→미배치는 즉시; 다른 테마로 이동이면 confirm.
  const inlinePlace = async (card, themeId) => {
    const prev = card.placement ? card.placement.themeId : null;
    if (themeId === prev) return;
    if (isMove(prev, themeId) && !confirmMove()) return;
    try { await window.api.setPlacement(card.id, themeId); toast(themeId ? '배치되었습니다' : '미배치로 변경됨'); reload(); }
    catch (ex) { toast('오류: ' + ex.message); }
  };

  return (
    <div>
      <div className="flex center between wrap-flex" style={{ gap: 10, marginBottom: 12 }}>
        <span className="muted" style={{ fontSize: 12.5 }}>
          {filtered ? `${cards.length} / ${allCards.length}개 카드` : `${allCards.length}개 카드`} · 글로벌 라이브러리 · 등록됨 {usedN}개
        </span>
        <div className="flex center" style={{ gap: 6 }}>
          <Btn size="sm" variant="soft" icon={<Icon.plus />} onClick={() => setEditEp({ episode: null })}>카드 추가</Btn>
          <Btn size="sm" variant="ghost" onClick={() => window.api.exportEpisodeTemplate().catch((ex) => toast('오류: ' + ex.message))}>양식 다운로드</Btn>
          <Btn size="sm" variant="ghost" icon={<Icon.plus />} onClick={() => importRef && importRef.click()}>엑셀 업로드</Btn>
          <Btn size="sm" variant="ghost" onClick={() => window.api.exportEpisodes().catch((ex) => toast('오류: ' + ex.message))}>전체 추출</Btn>
          <input type="file" accept=".xlsx" style={{ display: 'none' }} ref={(el) => setImportRef(el)} onChange={handleImport} />
        </div>
      </div>

      {/* row1: 검색 · row2: 제품 · 콘텐츠 · 월 · 테마 · 정렬 (균등폭) */}
      {!loading && !error && allCards.length > 0 && (
        <CardFilterBar q={q} setQ={setQ} product={product} setProduct={setProduct} productOptions={productOptions} showUsage={false} showProduct={false} mb={14}>
          <select className="input" value={fProject} onChange={(e) => onProject(e.target.value)} style={FILTER_CELL} title="등록 위치(콘텐츠)로 필터">
            <option value="">전체 콘텐츠</option>
            <option value={PROJECT_NONE}>미등록</option>
            {placementOpts.projects.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
          </select>
          <select className="input" value={fMonth} onChange={(e) => onMonth(e.target.value)} disabled={monthOpts.length === 0} style={FILTER_CELL} title="등록된 월로 필터">
            <option value="">전체 월</option>
            {monthOpts.map((m) => <option key={m.id} value={m.id}>{m.label}</option>)}
          </select>
          <select className="input" value={fTheme} onChange={(e) => setFTheme(e.target.value)} disabled={themeOpts.length === 0} style={FILTER_CELL} title="등록된 테마로 필터">
            <option value="">전체 테마</option>
            {themeOpts.map((t) => <option key={t.id} value={t.id}>{t.name}</option>)}
          </select>
          <select className="input" value={product} onChange={(e) => setProduct(e.target.value)} style={FILTER_CELL} title="제품으로 필터">
            <option value="">전체 제품</option>
            {productOptions.map((p) => <option key={p} value={p}>{p}</option>)}
          </select>
          <select className="input" value={sort} onChange={(e) => setSort(e.target.value)} style={FILTER_CELL}>
            <option value="default">기본 정렬</option>
            <option value="title">제목순</option>
            <option value="usage">사용 많은순</option>
          </select>
        </CardFilterBar>
      )}

      {loading && <div className="ep-grid">{[0,1,2].map((i) => <Skel key={i} h={120} r={12} />)}</div>}
      {error && <ErrorState onRetry={reload} msg={error} />}
      {!loading && !error && allCards.length === 0 && (
        <EmptyState icon={<Icon.layers />} title="카드가 없습니다" desc="카드를 추가하거나 엑셀로 업로드하세요." action={<Btn variant="primary" icon={<Icon.plus />} onClick={() => setEditEp({ episode: null })}>카드 추가</Btn>} />
      )}
      {!loading && !error && allCards.length > 0 && cards.length === 0 && (
        <CardFilterEmpty onReset={resetFilters} />
      )}
      {!loading && !error && cards.length > 0 && (
        <div className="flex center between wrap-flex" style={{ gap: 8, marginBottom: 10 }}>
          <div className="flex center" style={{ gap: 8 }}>
            <Btn size="sm" variant={allSelected ? 'soft' : 'ghost'} icon={<Icon.check />} onClick={toggleAll}>{allSelected ? '전체 해제' : '전체 선택'}</Btn>
            {selCount > 0 && <span className="muted" style={{ fontSize: 12.5 }}>{selCount}개 선택</span>}
          </div>
          <Btn size="sm" variant="ghost" disabled={selCount === 0} icon={<Icon.trash />} onClick={() => setBulkConfirm(true)}>삭제{selCount > 0 ? ` (${selCount})` : ''}</Btn>
        </div>
      )}
      {!loading && !error && cards.length > 0 && (
        <div className="ep-grid">
          {cards.map((ec) => (
            <div key={ec.id} className="ep" style={{ position: 'relative', ...(selected.has(ec.id) ? { outline: '2px solid var(--lg-red, #C8102E)', outlineOffset: -2 } : {}) }}>
              <input type="checkbox" checked={selected.has(ec.id)} onChange={() => toggleOne(ec.id)} title="선택" style={{ position: 'absolute', top: 10, right: 10, width: 16, height: 16, cursor: 'pointer', zIndex: 1 }} />
              <div className="ep-ttl" style={{ paddingRight: 26 }}>{ec.title}</div>
              {ec.description && <div className="ep-desc">{ec.description}</div>}
              <div className="ep-tags">{(ec.products || []).map((p, j) => <span className="tag" key={j}>{p}</span>)}</div>
              {ec.tension && <div className="ep-ten"><b>핵심 텐션:</b> {ec.tension}</div>}
              {(ec.voc || ec.rtb) && (
                <div className="ep-meta">
                  {ec.voc && <div className="ep-meta-row"><span className="ep-meta-label">VOC</span><span className="ep-meta-val">{ec.voc}</span></div>}
                  {ec.rtb && <div className="ep-meta-row"><span className="ep-meta-label">RTB</span><span className="ep-meta-val">{ec.rtb}</span></div>}
                </div>
              )}
              <PlacementInfo placement={ec.placement} />
              <div style={{ marginTop: 6 }}>
                <PlacementPicker compact targets={targetsQ.data || []} value={ec.placement ? ec.placement.themeId : null} onChange={(themeId) => inlinePlace(ec, themeId)} />
              </div>
              <div className="ep-foot" style={{ marginTop: 8, display: 'flex', gap: 6 }}>
                <Btn size="sm" variant="ghost" icon={<Icon.edit />} onClick={() => setEditEp({ episode: ec })}>편집</Btn>
                <Btn size="sm" variant="ghost" icon={<Icon.trash />} onClick={() => setConfirm({ episode: ec })}>삭제</Btn>
              </div>
            </div>
          ))}
        </div>
      )}

      {editEp && <EpisodeEditModal key={editEp.episode?.id || 'new'} data={{ themeId: null, episode: editEp.episode }} onClose={() => setEditEp(null)} onSave={(body) => (body.id ? saveEpisode(body) : createCard(body))} />}
      {confirm && (
        <Modal title="에피소드 삭제" sub={confirm.episode.title} onClose={() => setConfirm(null)}
          footer={<><Btn onClick={() => setConfirm(null)}>취소</Btn><Btn variant="primary" icon={<Icon.trash />} onClick={delEpisode}>삭제</Btn></>}>
          <p style={{ color: 'var(--ink-2)' }}>이 에피소드가 삭제됩니다.</p>
        </Modal>
      )}
      {bulkConfirm && (
        <Modal title="선택한 카드 삭제" sub={`${selCount}개 선택됨`} onClose={() => setBulkConfirm(false)}
          footer={<><Btn onClick={() => setBulkConfirm(false)}>취소</Btn><Btn variant="primary" icon={<Icon.trash />} onClick={bulkDelete}>삭제</Btn></>}>
          <p style={{ color: 'var(--ink-2)' }}>선택한 {selCount}개 카드가 라이브러리에서 완전히 삭제됩니다.{selRegistered > 0 ? ` 그중 ${selRegistered}개는 등록된 콘텐츠에서도 함께 제거됩니다.` : ''}</p>
        </Modal>
      )}
    </div>
  );
}

/* ============================================================
   EPISODE ADMIN  (CNX / ADMIN only — authoring: create, edit,
   delete themes & episodes, Excel import, pool placement)
   ============================================================ */
function EpisodeAdmin({ user, toast, navigate }) {
  const [view, setView] = useSE('contents'); // 'contents' | 'cards'
  const [detailId, setDetailId] = useSE(null); // null = grid, id = detail

  return (
    <div className="page-wrap">
      <div className="page-head">
        <div className="page-title">에피소드 관리</div>
        <div className="page-desc">콘텐츠의 월·테마 관리와 라이브러리 카드 배치, 글로벌 에피소드 카드 생성·수정·삭제·엑셀 업로드 — CNX/ADMIN 전용.</div>
      </div>

      <div className="seg" style={{ marginBottom: 18 }}>
        <button className={view === 'contents' ? 'on red' : ''} onClick={() => { setView('contents'); setDetailId(null); }}>① 콘텐츠 관리</button>
        <button className={view === 'cards' ? 'on red' : ''} onClick={() => setView('cards')}>② 에피소드 카드 관리</button>
      </div>

      {view === 'contents' && (detailId
        ? (
          <div>
            <button onClick={() => setDetailId(null)} style={{ background: 'none', border: 'none', color: 'var(--accent, #16181d)', cursor: 'pointer', fontSize: 13, fontWeight: 600, marginBottom: 12, padding: 0 }}>← 콘텐츠 목록</button>
            <ContentDetail key={detailId} projectId={detailId} user={user} toast={toast} />
          </div>
        )
        : <ContentGrid onOpen={(id) => setDetailId(id)} toast={toast} />
      )}

      {view === 'cards' && <EpisodeCardManager user={user} toast={toast} />}
    </div>
  );
}

// Circled number derived from an episode's position within its theme (①②③…).
// Replaces the old hand-entered `code` so numbering always tracks order.
function epNum(i) { return i < 20 ? String.fromCharCode(0x2460 + i) : `${i + 1}.`; }

function flatEpisodes(themes) { const m = {}; (themes || []).forEach((t) => t.episodes.forEach((e, i) => { m[e.id] = { ...e, code: epNum(i), themeName: t.name }; })); return m; }

/* ---------------- Month tab bar (sub-nav inside a tab) ---------------- */
function MonthTabBar({ project, month, navigate, tab, onSelect }) {
  return (
    <div className="flex center between wrap-flex" style={{ marginBottom: 18, gap: 12 }}>
      <div className="seg">
        {project.months.map((m) => (
          <button key={m.month} className={`${m.month === month ? 'on red' : ''}`}
            onClick={() => onSelect ? onSelect(m.month) : navigate({ name: 'project', projectId: project.id, tab, month: m.month })}>
            {m.label}
            {m.isSubmitted && <Icon.checkCircle style={{ width: 14, height: 14, color: 'var(--pub-green)' }} />}
          </button>
        ))}
      </div>
    </div>
  );
}

/* personas → compact chip row (only non-empty); shared across card displays */
function PersonaChips({ ep }) {
  const list = epPersonaOptions(ep);
  if (list.length === 0) return null;
  return (
    <div className="ep-personas" style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginTop: 6 }}>
      {list.map((p, i) => (
        <span key={i} className="tag" style={{ fontSize: 10.5, background: 'var(--line, #f1f2f4)', color: 'var(--ink-2, #5a6068)' }}>
          <Icon.user style={{ width: 10, height: 10, verticalAlign: '-1px', marginRight: 3 }} />{p}
        </span>
      ))}
    </div>
  );
}

/* ---------------- Episode card ---------------- */
function EpisodeCard({ ep, selected, personaLabel, isStaff, onToggle, onOpen, onEdit, onPause, onDelete }) {
  const paused = ep.status === 'paused';
  return (
    <div className={`ep ${selected ? 'sel' : ''} ${paused ? 'paused-ep' : ''}`} onClick={onOpen}>
      {!paused && (
        <button className="ep-check" onClick={(e) => { e.stopPropagation(); onToggle(); }} aria-label="선택">
          <Icon.check />
        </button>
      )}
      {paused && <span className="ep-check" style={{ borderStyle: 'dashed' }} />}
      {paused && <div className="ep-wk">일시중지</div>}
      <div className="ep-ttl">{ep.title}</div>
      {(ep.products || []).length > 0 && <div className="ep-tags">{(ep.products || []).map((p, i) => <span className="tag" key={i}>{p}</span>)}</div>}
      <EpDescBlock text={ep.description} />
      <div className="ep-foot">
        {personaLabel
          ? <span className="ep-persona-chip"><Icon.user style={{ width: 14, height: 14 }} /><span className="pl" title={personaLabel}>{personaLabel}</span></span>
          : (selected
            ? <span className="ep-persona-chip none"><Icon.user style={{ width: 14, height: 14 }} />페르소나 미지정</span>
            : <span className="ep-persona-chip none" style={{ fontSize: 11.5 }}>선택 안 됨</span>)}
        {isStaff
          ? <Menu trigger={<button className="icon-btn" style={{ width: 26, height: 26, marginLeft: 'auto' }} onClick={(e) => e.stopPropagation()}><Icon.dots /></button>}>
              <button onClick={onEdit}><Icon.edit />수정</button>
              <button onClick={onPause}>{paused ? <><Icon.play />활성화</> : <><Icon.pause />일시중지</>}</button>
              <div className="menu-div" />
              <button className="danger" onClick={onDelete}><Icon.trash />삭제</button>
            </Menu>
          : <span className="ep-detail-link">상세 <Icon.chevR style={{ width: 13, height: 13 }} /></span>}
      </div>
    </div>
  );
}

/* ---------------- Channel feedback (reference design, in modal) ---------------- */
const FEED_CHANNELS = [['INSTAGRAM','Instagram'],['LINKEDIN','LinkedIn'],['NEWSROOM','Newsroom'],['OTHER','기타']];
const ELEM_LABEL = { VISUAL:'비주얼', COPY:'카피', CAPTION:'캡션', THUMBNAIL:'썸네일', HASHTAG:'해시태그', VIDEO:'영상', OTHER:'기타' };
const SEV = { CRITICAL:{t:'Critical',c:'#C8102E',bg:'#fdecef'}, HIGH:{t:'High',c:'#c98a12',bg:'#fbf1e0'}, MEDIUM:{t:'Medium',c:'#b08900',bg:'#f9f4e3'}, NOTE:{t:'Note',c:'#6b7280',bg:'#f1f2f4'} };
const ROLE_BADGE = { LGE:{c:'#C8102E',bg:'#fdecef'}, CNX:{c:'#1a6ec7',bg:'#e8f1fb'}, ADMIN:{c:'#7c3aed',bg:'#f1ebfc'} };
const chLabel = (k) => (FEED_CHANNELS.find(([c]) => c === k) || [k, k])[1];

function ChannelLinkBar({ episodeId, channel, externalLink, canEdit, onSaved }) {
  const [editing, setEditing] = useSE(false);
  const [val, setVal] = useSE(externalLink || '');
  const [busy, setBusy] = useSE(false);
  const save = () => {
    setBusy(true);
    window.api.setChannelLink(episodeId, channel, { externalLink: val.trim() || undefined })
      .then(() => { setBusy(false); setEditing(false); onSaved && onSaved(); })
      .catch((e) => { setBusy(false); alert('링크 저장 실패: ' + (e.message || e)); });
  };
  if (editing) {
    return (
      <span className="flex" style={{ gap: 6, alignItems: 'center', flexWrap: 'wrap' }}>
        <span style={{ fontSize: 12 }}>📎</span>
        <input value={val} onChange={(e) => setVal(e.target.value)} placeholder="https://… (PPTX/드라이브 등)" style={{ fontSize: 12, width: 280, padding: '3px 6px' }} autoFocus />
        <button className="btn btn-primary btn-sm" disabled={busy} onClick={save}>{busy ? '저장 중…' : '저장'}</button>
        <button className="btn btn-soft btn-sm" disabled={busy} onClick={() => { setVal(externalLink || ''); setEditing(false); }}>취소</button>
      </span>
    );
  }
  return (
    <span className="muted" style={{ fontSize: 12 }}>
      📎 {externalLink ? <a href={externalLink} target="_blank" rel="noreferrer">외부 초안 링크 ↗</a> : '외부 초안 링크 없음'}
      {canEdit && <a onClick={() => setEditing(true)} style={{ cursor: 'pointer', marginLeft: 8, color: '#1a6ec7' }}>{externalLink ? '수정' : '＋ 링크 등록'}</a>}
    </span>
  );
}

function ChannelFeedbackModal({ episode, user, onClose }) {
  const [data, setData] = useSE(null);
  const [tab, setTab] = useSE('INSTAGRAM');
  const [filt, setFilt] = useSE('ALL');
  const [sevF, setSevF] = useSE('');
  const [composeOpen, setComposeOpen] = useSE(false);
  const reload = () => window.api.getEpisodeFeedback(episode.id).then(setData).catch(() => setData({ channels: [], openTotal: 0 }));
  useEE(() => { reload(); }, [episode.id]);
  const isCnx = user.role === 'CNX' || user.role === 'ADMIN';
  const byChannel = (ch) => ((data && data.channels) || []).find((c) => c.channel === ch) || { channel: ch, openCount: 0, feedbacks: [], externalLink: null };
  const cur = byChannel(tab);
  let fbs = cur.feedbacks;
  if (filt !== 'ALL') fbs = fbs.filter((f) => f.status === filt);
  if (sevF) fbs = fbs.filter((f) => f.severity === sevF);
  return (
    <Modal wide onClose={onClose} title={episode.title} sub={`에피소드 피드백 · ${episode.themeName || ''}`}>
      <div className="flex between center" style={{ flexWrap: 'wrap', gap: 8, marginBottom: 12 }}>
        <span className="muted" style={{ fontSize: 12 }}>● {isCnx ? 'CNX — 응답·댓글 및 해결·미해결로 변경 처리 가능' : 'LGE — 피드백 작성·응답 가능'}</span>
        <span className="flex" style={{ gap: 8, alignItems: 'center' }}>
          {data && <span className="pill pill-not">● 미해결 {data.openTotal}</span>}
          <span className="pill">{user.role}</span>
        </span>
      </div>
      <div className="flex" style={{ gap: 18, borderBottom: '1px solid #e7e9ee', marginBottom: 12, flexWrap: 'wrap' }}>
        {FEED_CHANNELS.map(([k, lbl]) => {
          const c = byChannel(k);
          return (
            <a key={k} onClick={() => { setTab(k); setComposeOpen(false); }} style={{ cursor: 'pointer', padding: '6px 0', fontWeight: tab === k ? 700 : 500, color: tab === k ? '#16181d' : '#6b7280', borderBottom: tab === k ? '2px solid #16181d' : '2px solid transparent' }}>
              {lbl}{c.openCount > 0 && <span style={{ marginLeft: 6, color: '#c98a12', fontWeight: 700 }}>{c.openCount}</span>}
            </a>
          );
        })}
      </div>
      {!data ? <div className="muted" style={{ padding: 16 }}>불러오는 중…</div> : (
        <div>
          <div className="flex between center" style={{ flexWrap: 'wrap', gap: 8, marginBottom: 10 }}>
            <ChannelLinkBar key={tab} episodeId={episode.id} channel={tab} externalLink={cur.externalLink} canEdit={isCnx} onSaved={reload} />
            <span className="flex" style={{ gap: 6, alignItems: 'center', flexWrap: 'wrap' }}>
              {[['ALL', '전체'], ['OPEN', '미해결'], ['RESOLVED', '해결']].map(([k, l]) => (
                <button key={k} className={`pill ${filt === k ? 'pill-active' : ''}`} onClick={() => setFilt(k)}>{l}</button>
              ))}
              <select value={sevF} onChange={(e) => setSevF(e.target.value)}><option value="">심각도 전체</option>{Object.keys(SEV).map((k) => <option key={k} value={k}>{SEV[k].t}</option>)}</select>
              <button className="btn btn-primary btn-sm" onClick={() => setComposeOpen((v) => !v)}>＋ 피드백 작성</button>
            </span>
          </div>
          {composeOpen && <FeedbackCompose episodeId={episode.id} channel={tab} onDone={() => { setComposeOpen(false); reload(); }} />}
          {fbs.length === 0
            ? <div className="muted" style={{ fontSize: 13, padding: '16px 8px' }}>이 채널에 아직 피드백이 없습니다.</div>
            : fbs.map((f) => <FeedbackCard key={f.id} f={f} ch={chLabel(tab)} user={user} onChange={reload} />)}
        </div>
      )}
    </Modal>
  );
}

function FeedbackCompose({ episodeId, channel, onDone }) {
  const [el, setEl] = useSE('CAPTION');
  const [lang, setLang] = useSE('COMMON');
  const [locator, setLocator] = useSE('');
  const [curExpr, setCurExpr] = useSE('');
  const [sev, setSev] = useSE('');
  const [body, setBody] = useSE('');
  const [busy, setBusy] = useSE(false);
  const submit = async () => {
    if (!body.trim() || busy) return;
    setBusy(true);
    try {
      await window.api.createFeedback(episodeId, { channel, elementType: el, lang, locator: locator || undefined, currentExpression: curExpr || undefined, severity: sev || undefined, body: body.trim() });
      onDone();
    } finally { setBusy(false); }
  };
  return (
    <div className="card" style={{ padding: 12, marginBottom: 10 }}>
      <div className="flex" style={{ gap: 6, marginBottom: 6, flexWrap: 'wrap' }}>
        <select value={el} onChange={(e) => setEl(e.target.value)}>{Object.keys(ELEM_LABEL).map((k) => <option key={k} value={k}>{ELEM_LABEL[k]}</option>)}</select>
        <select value={lang} onChange={(e) => setLang(e.target.value)}><option value="COMMON">공통</option><option value="KOR">KOR</option><option value="ENG">ENG</option></select>
        <select value={sev} onChange={(e) => setSev(e.target.value)}><option value="">심각도 없음</option>{Object.keys(SEV).map((k) => <option key={k} value={k}>{SEV[k].t}</option>)}</select>
        <input placeholder="위치 (예: 캐러셀 3p)" value={locator} onChange={(e) => setLocator(e.target.value)} style={{ width: 130 }} />
      </div>
      <input placeholder="현재 표현 (선택 · 지적 대상 인용)" value={curExpr} onChange={(e) => setCurExpr(e.target.value)} style={{ width: '100%', marginBottom: 6 }} />
      <textarea placeholder="피드백 내용을 작성하세요" value={body} onChange={(e) => setBody(e.target.value)} rows={3} style={{ width: '100%' }} />
      <div className="flex" style={{ gap: 6, marginTop: 6 }}>
        <button className="btn btn-primary btn-sm" onClick={submit} disabled={busy}>작성</button>
        <button className="btn btn-ghost btn-sm" onClick={onDone}>취소</button>
      </div>
    </div>
  );
}

function FeedbackCard({ f, ch, user, onChange }) {
  const sv = f.severity ? SEV[f.severity] : null;
  const tgt = [ch, ELEM_LABEL[f.elementType] || f.elementLabel, f.lang !== 'COMMON' ? f.lang : null, f.locator].filter(Boolean).join(' · ');
  return (
    <div className="card" style={{ padding: 12, marginBottom: 10 }}>
      <div className="flex between center" style={{ marginBottom: 6, flexWrap: 'wrap', gap: 6 }}>
        <span className="flex" style={{ gap: 8, alignItems: 'center' }}>
          {sv && <span style={{ background: sv.bg, color: sv.c, fontWeight: 700, fontSize: 11, padding: '2px 8px', borderRadius: 6 }}>{sv.t}</span>}
          <span className="muted" style={{ fontSize: 12 }}>● {tgt}</span>
        </span>
        <span className={`pill ${f.status === 'RESOLVED' ? 'pill-done' : 'pill-not'}`}>● {f.status === 'RESOLVED' ? '해결' : '미해결'}</span>
      </div>
      {f.currentExpression && <div className="muted" style={{ fontSize: 12, borderLeft: '2px solid #e7e9ee', paddingLeft: 8, marginBottom: 6 }}>현재 표현 <i>{f.currentExpression}</i></div>}
      <div style={{ fontSize: 13.5, marginBottom: 6, lineHeight: 1.5 }}>{f.body}</div>
      <div className="muted" style={{ fontSize: 11.5, marginBottom: 4 }}><b style={{ color: '#16181d' }}>{f.author?.name}</b> ({f.author?.role}{f.authorTeam ? ` · ${f.authorTeam}` : ''}) · {String(f.createdAt).slice(0, 10)}</div>
      {(f.comments || []).map((c) => {
        const rb = ROLE_BADGE[c.author?.role] || ROLE_BADGE.LGE;
        return (
          <div key={c.id} style={{ fontSize: 12.5, marginTop: 6, paddingLeft: 10, borderLeft: '2px solid #e7e9ee' }}>
            <div className="muted" style={{ fontSize: 11, marginBottom: 2 }}><span style={{ background: rb.bg, color: rb.c, fontWeight: 700, padding: '1px 6px', borderRadius: 5, marginRight: 6 }}>{c.author?.role}</span><b style={{ color: '#16181d' }}>{c.author?.name}</b> · {String(c.createdAt).slice(0, 10)}</div>
            <div>{c.body}</div>
          </div>
        );
      })}
      <FeedbackActions f={f} user={user} onChange={onChange} />
    </div>
  );
}

function FeedbackActions({ f, user, onChange }) {
  const isCnx = user.role === 'CNX' || user.role === 'ADMIN';
  const resolved = f.status === 'RESOLVED';
  const [open, setOpen] = useSE(false);
  const [reply, setReply] = useSE('');
  const send = async () => { if (!reply.trim()) return; await window.api.commentFeedback(f.id, reply.trim()); setReply(''); setOpen(false); onChange(); };
  const toggle = async () => { await window.api.setFeedbackStatus(f.id, resolved ? 'OPEN' : 'RESOLVED'); onChange(); };
  return (
    <div style={{ marginTop: 8, borderTop: '1px dashed #e7e9ee', paddingTop: 8 }}>
      <div className="flex between center" style={{ flexWrap: 'wrap', gap: 6 }}>
        <span className="flex" style={{ gap: 8, alignItems: 'center' }}>
          <button className="btn btn-ghost btn-sm" onClick={() => setOpen((v) => !v)}>💬 응답</button>
          {resolved
            ? <span style={{ color: '#2a9d5c', fontWeight: 700, fontSize: 12 }}>✓ 해결 완료</span>
            : (isCnx && <button className="btn btn-soft btn-sm" onClick={toggle}>✓ 해결</button>)}
        </span>
        {isCnx
          ? (resolved && <button className="btn btn-ghost btn-sm" onClick={toggle}>↩ 미해결로 변경</button>)
          : <span className="muted" style={{ fontSize: 11 }}>CNX 전용</span>}
      </div>
      {open && (
        <div className="flex" style={{ gap: 6, marginTop: 6 }}>
          <input placeholder="응답 또는 처리 내역을 남기세요" value={reply} onChange={(e) => setReply(e.target.value)} style={{ flex: 1 }} />
          <button className="btn btn-primary btn-sm" onClick={send}>등록</button>
        </div>
      )}
    </div>
  );
}

/* ---------------- Episode detail drawer (PERSONA SELECTOR) ---------------- */
function EpisodeDetailDrawer({ episode, project, user, selectedPersonaLabel, isSelected, draftPersonaLabel, onClose, onToggleSelect, onAssignPersona, onEdit, navigate }) {
  const isStaff = user.role === 'ADMIN' || user.role === 'CNX';
  const personaList = epPersonas(episode);              // [{title,description,buildup,solution}]
  const [expanded, setExpanded] = useSE(null);          // index of expanded persona (펼침 ≠ 선택)
  const [refChip, setRefChip] = useSE(null);            // product/feature chip whose references are open (레퍼런스 모달)
  const [showFb, setShowFb] = useSE(false);             // 채널별 피드백 모달 열림

  // Picking a persona never selects the episode — selection goes through the
  // card / "이 에피소드 선택" button (which enforces the month cap). For a
  // not-yet-selected episode the choice is kept as a session draft and shown
  // (blue) on the card; the highlight reads from the selection or that draft.
  const activePersona = isSelected ? selectedPersonaLabel : draftPersonaLabel;

  return (
    <Drawer onClose={onClose}
      head={
        <div>
          <div className="flex between center">
            <span className="det-wk">{episode.themeName}</span>
            <button className="icon-btn" onClick={onClose}><Icon.x /></button>
          </div>
          <div className="det-title">{episode.title}</div>
          <div className="det-tags">{episode.products.map((p, i) => (
            <span className="tag" key={i} onClick={() => setRefChip(p)} style={{ cursor: 'pointer' }} title="레퍼런스 보기">{p} ›</span>
          ))}</div>
        </div>
      }
      footer={
        <div className="flex between center gap12">
          <span className="muted" style={{ fontSize: 12 }}>
            {isSelected ? (selectedPersonaLabel ? '선택됨 · 페르소나 지정 완료' : '선택됨 · 페르소나 미지정') : (draftPersonaLabel ? '선택 안 됨 · 페르소나 표시만' : '선택되지 않음')}
          </span>
          {episode.status === 'paused'
            ? <span className="pill pill-paused"><span className="dot" />일시중지된 에피소드</span>
            : (
              <div className="flex center gap8">
                {isSelected
                  ? <Btn variant="ghost" icon={<Icon.x />} onClick={onToggleSelect}>선택 해제</Btn>
                  : <Btn variant="ghost" icon={<Icon.check />} onClick={onToggleSelect}>이 에피소드 선택</Btn>}
                <Btn variant="primary" icon={<Icon.check />} onClick={onClose}>확인</Btn>
              </div>
            )}
        </div>
      }>
      {episode.description && (
        <div className="det-section">
          <div className="dsh">설명</div>
          <div style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.6 }}>{episode.description}</div>
        </div>
      )}
      <div className="det-section">
        <div className="dsh">핵심 텐션</div>
        <div className="det-tension">”{episode.tension}”</div>
      </div>
      <div className="det-section">
        <div className="dsh">콘텐츠 상세</div>
        <div className="det-field"><span className="dfl">VOC</span><span className="dfv">{episode.voc}</span></div>
        <div className="det-field"><span className="dfl">RTB</span><span className="dfv">{episode.rtb}</span></div>
      </div>

      {/* PERSONA SELECTOR — choose ONE; click chevron to EXPAND 4 fields (expand ≠ select) */}
      <div className="det-section">
        <div className="flex between center" style={{ marginBottom: 9 }}>
          <div className="dsh" style={{ margin: 0 }}>페르소나 {isSelected && !selectedPersonaLabel && <span className="qs under" style={{ fontSize: 10 }}>· 지정 필요</span>}</div>
        </div>
        <div className="persona-list">
          {personaList.map((p, i) => {
            const open = expanded === i;
            const hasDetail = p.description || p.buildup || p.solution;
            return (
              <div key={i} className={`persona-acc ${activePersona === p.title ? 'sel' : ''} ${open ? 'open' : ''}`}>
                <div className="persona-acc-head">
                  <button type="button" className="persona-pick" onClick={() => onAssignPersona(p.title)} aria-label="이 페르소나 선택">
                    <span className="radio" />
                    <span className="pname">{p.title}</span>
                  </button>
                  {hasDetail && (
                    <button type="button" className="persona-toggle" onClick={() => setExpanded(open ? null : i)} aria-label="상세 펼치기">
                      <Icon.chevD style={{ width: 16, height: 16, transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .15s' }} />
                    </button>
                  )}
                </div>
                {open && (
                  <div className="persona-acc-body">
                    {p.description && <div className="persona-field"><span className="pfl">설명</span><span className="pfv">{p.description}</span></div>}
                    {p.buildup && <div className="persona-field"><span className="pfl">빌드업</span><span className="pfv">{p.buildup}</span></div>}
                    {p.solution && <div className="persona-field"><span className="pfl">LG AI 해결책</span><span className="pfv">{p.solution}</span></div>}
                  </div>
                )}
              </div>
            );
          })}
          {personaList.length === 0 && <div className="muted" style={{ fontSize: 12.5 }}>이 에피소드에 등록된 페르소나가 없습니다.</div>}
        </div>
        {!isStaff && personaList.length > 0 && <p className="fhint">에피소드를 선택한 뒤 타깃 페르소나를 1개 지정하세요. 행을 펼치면 설명·빌드업·LG AI 해결책을 볼 수 있습니다.</p>}
      </div>

      {isStaff && onEdit && (
        <div className="det-section">
          <Btn variant="ghost" icon={<Icon.edit />} onClick={onEdit}>에피소드 내용 편집</Btn>
        </div>
      )}
      <div className="det-section">
        <div className="dsh">채널별 피드백</div>
        <button className="btn btn-soft" onClick={() => setShowFb(true)} style={{ width: '100%', justifyContent: 'center' }}>💬 채널별 피드백 열기</button>
      </div>
      {refChip && <FeatureRefModal chip={refChip} onClose={() => setRefChip(null)} navigate={navigate} />}
      {showFb && <ChannelFeedbackModal episode={episode} user={user} onClose={() => setShowFb(false)} />}
    </Drawer>
  );
}

/* Shows the matched body excerpt under an article link, with the matched phrase
   highlighted — so it's clear *why* the article came up (the chip name and the
   matched wording often differ, e.g. "ThinQ Energy Monitor" → "energy monitoring"). */
function RefSnippet({ snippet, matchedTerm }) {
  if (!snippet) return null;
  let parts = [snippet];
  if (matchedTerm) {
    const idx = snippet.toLowerCase().indexOf(matchedTerm.toLowerCase());
    if (idx >= 0) parts = [
      snippet.slice(0, idx),
      <mark key="m" style={{ background: '#FCE9D6', padding: '0 1px', borderRadius: 2 }}>{snippet.slice(idx, idx + matchedTerm.length)}</mark>,
      snippet.slice(idx + matchedTerm.length),
    ];
  }
  return <div className="muted" style={{ fontSize: 11.5, marginTop: 2, lineHeight: 1.45 }}>{parts}</div>;
}

/* Feature reference popup — click a product/feature chip to see the curated note,
   related PDP products and supporting LG Newsroom articles for that feature. */
function FeatureRefModal({ chip, onClose, navigate }) {
  const [st, setSt] = useSE({ loading: true, error: null, data: null });
  useEE(() => {
    let alive = true;
    window.api.featureSearch(chip, 50)
      .then((data) => { if (alive) setSt({ loading: false, error: null, data }); })
      .catch((e) => { if (alive) setSt({ loading: false, error: e.message || '불러오기 실패', data: null }); });
    return () => { alive = false; };
  }, [chip]);

  const d = st.data;
  const products = (d && d.products) || [];
  const articles = (d && d.articles) || [];
  const matched = products.length + articles.length > 0;
  const N = 12;
  const thS = { textAlign: 'left', padding: '6px 8px', borderBottom: '1px solid var(--line)', fontSize: 11, color: 'var(--ink-3)', fontWeight: 650 };
  const tdS = { padding: '6px 8px', borderBottom: '1px solid var(--line)', verticalAlign: 'top' };

  return (
    <Modal wide title={`레퍼런스 — ${chip}`} onClose={onClose}
      footer={<Btn variant="primary" onClick={onClose}>닫기</Btn>}>
      <div className="muted" style={{ fontSize: 12, marginBottom: 14, lineHeight: 1.5 }}>이 콘텐츠 기능과 연관된 LG 제품·근거 기사입니다. 콘텐츠 제작 시 출처로 활용하세요.</div>
      {st.loading && <div style={{ padding: 4 }}><Skel h={16} /><Skel h={16} style={{ marginTop: 8 }} /><Skel h={16} style={{ marginTop: 8 }} /></div>}
      {st.error && <div style={{ fontSize: 13, color: 'var(--danger, #c0392b)' }}>{st.error}</div>}
      {d && !matched && <div className="muted" style={{ fontSize: 13 }}>이 항목과 연결된 레퍼런스가 없습니다.</div>}

      {products.length > 0 && (
        <div className="det-section">
          <div className="dsh">연관 제품 ({products.length})</div>
          <div className="muted" style={{ fontSize: 11.5, marginBottom: 6 }}>입력어와 관련된 실제 LG 제품입니다. 행을 누르면 제품 페이지로 이동합니다.</div>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12.5 }}>
            <thead><tr><th style={thS}>모델명</th><th style={thS}>이름</th></tr></thead>
            <tbody>
              {products.slice(0, N).map((p) => (
                <tr key={p.productId} onClick={() => p.url && window.open(p.url, '_blank', 'noopener')}
                  style={{ cursor: 'pointer' }} title={p.url || ''}>
                  <td style={{ ...tdS, whiteSpace: 'nowrap', fontWeight: 600, color: 'var(--brand, #C8102E)' }}>{p.model}</td>
                  <td style={tdS}>{(p.title || '').replace(/\s*\|\s*LG\b.*$/i, '')}</td>
                </tr>
              ))}
            </tbody>
          </table>
          {products.length > N && navigate && (
            <div style={{ marginTop: 8 }}>
              <a style={{ fontSize: 12.5, fontWeight: 700, cursor: 'pointer', color: 'var(--accent, #C8102E)' }}
                onClick={() => navigate({ name: 'refs', chip, kind: 'pdp', label: chip })}>더보기 — 전체 {products.length}개 →</a>
            </div>
          )}
        </div>
      )}

      {articles.length > 0 && (
        <div className="det-section">
          <div className="dsh">근거 기사 · LG 뉴스룸 ({articles.length})</div>
          <div className="muted" style={{ fontSize: 11.5, marginBottom: 6 }}>입력어와 관련된 LG 뉴스룸 기사입니다. 누르면 기사로 이동합니다.</div>
          {articles.slice(0, 10).map((a) => (
            <div key={a.pagePath} style={{ fontSize: 13, marginBottom: 7 }}>
              <a href={'https://www.lg.com' + a.pagePath.replace('/content/lge/en', '')} target="_blank" rel="noreferrer">{a.title}</a>
              {a.postedDate && <span className="muted" style={{ fontSize: 11, marginLeft: 6 }}>{a.postedDate}</span>}
              <RefSnippet snippet={a.snippet} matchedTerm={a.matchedTerm} />
            </div>
          ))}
          {articles.length > 10 && navigate && (
            <div style={{ marginTop: 8 }}>
              <a style={{ fontSize: 12.5, fontWeight: 700, cursor: 'pointer', color: 'var(--accent, #C8102E)' }}
                onClick={() => navigate({ name: 'refs', chip, kind: 'newsroom', label: chip })}>더보기 — 전체 {articles.length}개 →</a>
            </div>
          )}
        </div>
      )}
    </Modal>
  );
}

/* Full-list page for a feature's references — reached from the modal's "더보기".
   kind='pdp' → all related products, kind='newsroom' → all source articles. */
function RefListScreen({ chip, kind, label, navigate }) {
  const [st, setSt] = useSE({ loading: true, error: null, data: null });
  useEE(() => {
    let alive = true;
    window.api.featureSearch(chip, 50)
      .then((data) => { if (alive) setSt({ loading: false, error: null, data }); })
      .catch((e) => { if (alive) setSt({ loading: false, error: e.message || '불러오기 실패', data: null }); });
    return () => { alive = false; };
  }, [chip]);

  const d = st.data;
  const isPdp = kind === 'pdp';
  const items = d ? (isPdp ? (d.products || []) : (d.articles || [])) : [];
  const thS = { textAlign: 'left', padding: '7px 8px', borderBottom: '1px solid var(--line)', fontSize: 11.5, color: 'var(--ink-3)', fontWeight: 650 };
  const tdS = { padding: '7px 8px', borderBottom: '1px solid var(--line)', verticalAlign: 'top' };

  return (
    <div className="page-wrap">
      <div className="flex center gap12" style={{ marginBottom: 6 }}>
        <Btn variant="ghost" icon={<Icon.x />} onClick={() => navigate({ name: 'project', tab: 'episodes' })}>돌아가기</Btn>
        <h2 style={{ fontSize: 18, fontWeight: 750, margin: 0 }}>{isPdp ? '연관 제품' : '근거 기사 · LG 뉴스룸'} 전체{items.length ? ` (${items.length})` : ''}</h2>
      </div>
      <div className="muted" style={{ fontSize: 12.5, marginBottom: 16 }}>매칭 키워드: {label || chip}{isPdp ? ' · 행을 누르면 제품 페이지로 이동합니다.' : ' · 최신순이며, 누르면 기사로 이동합니다.'}</div>

      {st.loading && <CardSkel />}
      {st.error && <div style={{ fontSize: 13, color: 'var(--danger, #c0392b)' }}>{st.error}</div>}
      {d && items.length === 0 && <div className="muted" style={{ fontSize: 13 }}>연결된 레퍼런스가 없습니다.</div>}

      {d && items.length > 0 && isPdp && (
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
          <thead><tr><th style={thS}>모델명</th><th style={thS}>이름</th></tr></thead>
          <tbody>
            {items.map((p) => (
              <tr key={p.productId} onClick={() => p.url && window.open(p.url, '_blank', 'noopener')} style={{ cursor: 'pointer' }} title={p.url || ''}>
                <td style={{ ...tdS, whiteSpace: 'nowrap', fontWeight: 600, color: 'var(--brand, #C8102E)' }}>{p.model}</td>
                <td style={tdS}>{(p.title || '').replace(/\s*\|\s*LG\b.*$/i, '')}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}

      {d && items.length > 0 && !isPdp && (
        <div>
          {items.map((a) => (
            <div key={a.pagePath} style={{ fontSize: 13.5, marginBottom: 11 }}>
              <a href={'https://www.lg.com' + a.pagePath.replace('/content/lge/en', '')} target="_blank" rel="noreferrer">{a.title}</a>
              {a.postedDate && <span className="muted" style={{ fontSize: 11.5, marginLeft: 8 }}>{a.postedDate}</span>}
              <RefSnippet snippet={a.snippet} matchedTerm={a.matchedTerm} />
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function PersonaQuickAdd({ onClose, onSave }) {
  const [name, setName] = useSE(''); const [segment, setSegment] = useSE(''); const [description, setDescription] = useSE('');
  const [busy, setBusy] = useSE(false);
  return (
    <Modal title="페르소나 추가" onClose={onClose}
      footer={<><Btn onClick={onClose}>취소</Btn><Btn variant="blue" disabled={!name.trim() || busy} onClick={async () => { setBusy(true); await onSave({ name: name.trim(), segment, description }); }}>추가</Btn></>}>
      <div className="frow"><label className="flabel">이름</label><input className="input" value={name} onChange={(e) => setName(e.target.value)} placeholder="예: 효율러 민지" /></div>
      <div className="frow"><label className="flabel">세그먼트</label><input className="input" value={segment} onChange={(e) => setSegment(e.target.value)} placeholder="예: 1인 가구 · 직장인" /></div>
      <div className="frow"><label className="flabel">설명</label><textarea className="textarea" value={description} onChange={(e) => setDescription(e.target.value)} placeholder="페르소나 특성·니즈" /></div>
    </Modal>
  );
}

/* ---------------- Submit modal ---------------- */
function SubmitModal({ sel, episodes, toast, submitting, reSubmit, onAssign, onClose, onConfirm }) {
  const [note, setNote] = useSE('');
  const missing = sel.filter((s) => !s.personaLabel).length;
  // Episodes that COULD have a persona (options exist) but none is chosen.
  // Episodes with no registered personas can't be assigned, so they don't block.
  const needsPersona = sel.some((s) => !s.personaLabel && epPersonaOptions(episodes[s.episodeId] || {}).length > 0);
  const tryConfirm = () => {
    if (needsPersona) { toast('페르소나를 지정해주세요'); return; }
    onConfirm(note);
  };
  return (
    <Modal wide title="에피소드 제출" sub={reSubmit ? '재제출입니다. 이전 제출 이력은 보존됩니다.' : `선택한 ${sel.length}개 에피소드를 제출합니다.`} onClose={onClose}
      footer={
        <>
          <Btn onClick={onClose}>취소</Btn>
          <Btn variant="primary" icon={submitting ? <Icon.clock className="spin" /> : <Icon.send />} disabled={submitting} onClick={tryConfirm}>
            {submitting ? '제출 중…' : reSubmit ? '재제출' : '제출 확정'}
          </Btn>
        </>
      }>
      {missing > 0 && (
        <div className="tw-item lge" style={{ marginBottom: 16, display: 'flex', gap: 9, alignItems: 'center' }}>
          <Icon.alert style={{ width: 18, height: 18, color: 'var(--lg-red)', flexShrink: 0 }} />
          <span style={{ fontSize: 12.5 }}>페르소나가 지정되지 않은 에피소드 <b>{missing}개</b>가 있습니다. 아래에서 지정할 수 있습니다.</span>
        </div>
      )}
      <div>
        {sel.map((s, i) => {
          const ep = episodes[s.episodeId];
          if (!ep) return null;
          const opts = epPersonaOptions(ep);
          return (
            <div className="submit-item" key={s.episodeId}>
              <span className="si-num">{i + 1}</span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="si-t">{ep.title}</div>
                <div className="muted" style={{ fontSize: 11.5, marginTop: 2 }}>{ep.themeName}</div>
                <div className="si-p" style={{ marginTop: 6, display: 'flex', flexWrap: 'wrap', gap: 6, alignItems: 'center' }}>
                  <Icon.user style={{ width: 13, height: 13, flexShrink: 0 }} />
                  {opts.length === 0
                    ? <span className="muted" style={{ fontSize: 12 }}>등록된 페르소나 없음</span>
                    : opts.map((label, j) => {
                        const on = s.personaLabel === label;
                        return (
                          <button type="button" key={j} title={label}
                            className={`prod-chip ${on ? 'on' : ''}`}
                            onClick={() => onAssign(s.episodeId, on ? null : label)}>
                            {label}
                          </button>
                        );
                      })}
                </div>
              </div>
            </div>
          );
        })}
      </div>
      <div className="frow" style={{ marginTop: 18, marginBottom: 0 }}>
        <label className="flabel">메모 (선택)</label>
        <textarea className="textarea" value={note} onChange={(e) => setNote(e.target.value)} placeholder="제출에 대한 코멘트를 남길 수 있습니다." style={{ minHeight: 60 }} />
      </div>
    </Modal>
  );
}

/* Selectable products — the Product column of the RTB sheet
   (reference/LG Product_RTB_260522_공유.xlsx, 3rd sheet). Edit here to change the list. */
const PRODUCTS = [
  'Washing Machine', 'Dryer', 'Styler', 'Robot Vacuum', 'Refrigerator',
  'Dishwasher', 'Oven', 'Air Conditioner', 'Air purifier', 'AI TV (webOS)', 'ThinQ AI',
];

/* ---------------- CNX: Episode edit ---------------- */
function EpisodeEditModal({ data, onClose, onSave }) {
  const ep = data.episode;
  // 현재 배치(단일). data.placement 우선, 없으면 ep.placement.
  const curPlacement = data.placement !== undefined ? data.placement : (ep && ep.placement) || null;
  const [placeTheme, setPlaceTheme] = useSE(curPlacement ? curPlacement.themeId : null);
  // lazy initializer: 폼 상태(페르소나 3슬롯 패딩 포함)는 마운트 시 1회만 계산
  const [f, setF] = useSE(() => {
    const base = ep ? epPersonas(ep) : [];
    return {
      id: ep?.id, title: ep?.title || '', code: ep?.code || '', description: ep?.description || '',
      products: ep?.products || [], tension: ep?.tension || '', voc: ep?.voc || '', rtb: ep?.rtb || '',
      personas: [0, 1, 2].map((i) => base[i] || { title: '', description: '', buildup: '', solution: '' }),
    };
  });
  const set = (k) => (e) => setF((p) => ({ ...p, [k]: e.target.value }));
  const setPersona = (i, k) => (e) => setF((p) => ({ ...p, personas: p.personas.map((pp, idx) => idx === i ? { ...pp, [k]: e.target.value } : pp) }));
  const [busy, setBusy] = useSE(false);
  const [custom, setCustom] = useSE('');
  const [preview, setPreview] = useSE(null);   // { products, articles } for the typed custom chip
  useEE(() => {
    const q = custom.trim();
    if (!q) { setPreview(null); return; }
    let alive = true;
    const h = setTimeout(() => {
      window.api.featureSearch(q)
        .then((d) => { if (alive) setPreview({ p: (d.products || []).length, a: (d.articles || []).length, top: (d.products || []).slice(0, 2) }); })
        .catch(() => { if (alive) setPreview(null); });
    }, 300);
    return () => { alive = false; clearTimeout(h); };
  }, [custom]);
  const addCustom = () => {
    const v = custom.trim();
    if (!v) return;
    setF((s) => (s.products.includes(v) ? s : { ...s, products: [...s.products, v] }));
    setCustom('');
  };
  // 저장: 배치 이동(기존 배치 있고 다른 테마로)이면 confirm 후, placement 변경 의도를 body에
  // 실어 부모 onSave로 넘긴다 (부모가 카드 저장 → setPlacement → reload 순서 보장).
  const submit = async () => {
    const prevThemeId = curPlacement ? curPlacement.themeId : null;
    const placeChanged = placeTheme !== prevThemeId;
    if (isMove(prevThemeId, placeTheme) && !confirmMove()) return;
    setBusy(true);
    try {
      await onSave({ ...f, placeChanged, placeThemeId: placeTheme });
    } finally {
      setBusy(false);
    }
  };
  return (
    <Modal wide title={ep ? '에피소드 수정' : '에피소드 추가'} onClose={onClose}
      footer={<><Btn onClick={onClose}>취소</Btn><Btn variant="primary" disabled={!f.title.trim() || busy} icon={<Icon.check />} onClick={submit}>{ep ? '저장' : '추가'}</Btn></>}>
      <div className="frow"><label className="flabel">제목</label><input className="input" value={f.title} onChange={set('title')} /></div>
      <div className="frow"><label className="flabel">설명</label><textarea className="input" rows={2} value={f.description} onChange={set('description')} placeholder="에피소드 요약 설명" /></div>
      <div className="frow">
        <label className="flabel">제품 태그</label>
        <div className="prod-pick">
          {[...PRODUCTS, ...f.products.filter((p) => !PRODUCTS.includes(p))].map((p) => {
            const on = f.products.includes(p);
            return (
              <button type="button" key={p} className={`prod-chip ${on ? 'on' : ''}`}
                onClick={() => setF((s) => ({ ...s, products: on ? s.products.filter((x) => x !== p) : [...s.products, p] }))}>
                {p}
              </button>
            );
          })}
        </div>
        <div className="prod-add">
          <input className="input" value={custom} onChange={(e) => setCustom(e.target.value)}
            placeholder="직접 입력 (목록에 없는 제품)"
            onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addCustom(); } }} />
          <Btn size="sm" variant="soft" icon={<Icon.plus />} disabled={!custom.trim()} onClick={addCustom}>추가</Btn>
        </div>
        {preview && (
          <div className="muted" style={{ fontSize: 11.5, marginTop: 4 }}>
            🔎 매칭 — 제품 {preview.p} · 기사 {preview.a}
            {preview.top.length > 0 && <span> · 예: {preview.top.map((x) => x.model).join(', ')}</span>}
          </div>
        )}
      </div>
      <div className="frow"><label className="flabel">핵심 텐션</label><input className="input" value={f.tension} onChange={set('tension')} /></div>
      <div className="frow"><label className="flabel">VOC</label><textarea className="textarea" value={f.voc} onChange={set('voc')} /></div>
      <div className="frow"><label className="flabel">RTB</label><input className="input" value={f.rtb} onChange={set('rtb')} /></div>
      {f.personas.map((pp, i) => (
        <div key={i} className="persona-form-block">
          <div className="persona-form-head">페르소나 {i + 1}</div>
          <div className="frow"><label className="flabel">제목</label><input className="input" value={pp.title} onChange={setPersona(i, 'title')} placeholder="예: 알레르기 있는 아이 키우는 엄마" /></div>
          <div className="frow"><label className="flabel">설명</label><textarea className="input" rows={2} value={pp.description} onChange={setPersona(i, 'description')} placeholder="이 페르소나는 누구인가" /></div>
          <div className="frow"><label className="flabel">빌드업</label><textarea className="input" rows={2} value={pp.buildup} onChange={setPersona(i, 'buildup')} placeholder="이 페르소나의 맥락·긴장 전개" /></div>
          <div className="frow" style={{ marginBottom: 0 }}><label className="flabel">LG AI 해결책</label><textarea className="input" rows={2} value={pp.solution} onChange={setPersona(i, 'solution')} placeholder="LG AI가 어떻게 해결하는가" /></div>
        </div>
      ))}
      <div className="persona-form-block">
        <div className="persona-form-head">배치 (선택)</div>
        <div className="frow" style={{ marginBottom: 0 }}>
          <label className="flabel">콘텐츠 · 월 · 테마</label>
          <PlacementPicker value={placeTheme} onChange={setPlaceTheme} />
          <div className="fhint">카드를 1개 테마에 배치합니다. 비워두면 미배치로 저장됩니다.</div>
        </div>
      </div>
    </Modal>
  );
}

/* ---------------- CNX: Theme edit (monthId-based) ---------------- */
function ThemeEditModal({ theme, defaultMonthId, months, onClose, onSave }) {
  const [name, setName] = useSE(theme?.name || '');
  const [subtitle, setSubtitle] = useSE(theme?.subtitle || '');
  const [monthId, setMonthId] = useSE(theme?.monthId || defaultMonthId || '');
  const [busy, setBusy] = useSE(false);
  return (
    <Modal title={theme ? '테마 수정' : '테마 추가'} onClose={onClose}
      footer={<><Btn onClick={onClose}>취소</Btn><Btn variant="primary" disabled={!name.trim() || busy} icon={<Icon.check />} onClick={async () => { setBusy(true); await onSave({ id: theme?.id, name: name.trim(), subtitle, monthId: monthId || null }); }}>{theme ? '저장' : '추가'}</Btn></>}>
      <div className="frow"><label className="flabel">테마명</label><input className="input" value={name} onChange={(e) => setName(e.target.value)} placeholder="예: 에코라이프" /></div>
      <div className="frow"><label className="flabel">부제</label><input className="input" value={subtitle} onChange={(e) => setSubtitle(e.target.value)} placeholder="테마 설명" /></div>
      {months && months.length > 0 && (
        <div className="frow" style={{ marginBottom: 0 }}>
          <label className="flabel">월</label>
          <select className="select-sm" style={{ width: '100%', padding: '7px 12px' }} value={monthId} onChange={(e) => setMonthId(e.target.value)}>
            <option value="">월 선택…</option>
            {months.map((m) => <option key={m.id} value={m.id}>{m.label}</option>)}
          </select>
        </div>
      )}
    </Modal>
  );
}

/* ---------------- CNX: Month create/edit (1~12 click picker) ---------------- */
function MonthEditModal({ month, months, onClose, onSave }) {
  // Derive the currently-edited month number from its label/sortOrder (e.g. "6월" → 6).
  const numFromMonth = (m) => {
    if (!m) return null;
    const mm = /(\d+)/.exec(m.label || '');
    return mm ? Number(mm[1]) : (m.sortOrder || null);
  };
  const [picked, setPicked] = useSE(numFromMonth(month));
  const [maxSel, setMaxSel] = useSE(month?.maxSelections != null ? String(month.maxSelections) : '0');
  const [busy, setBusy] = useSE(false);
  // months already created (exclude the one being edited) → disabled in picker.
  const usedNums = new Set((months || [])
    .filter((m) => !month || m.id !== month.id)
    .map((m) => numFromMonth(m))
    .filter((n) => n != null));
  return (
    <Modal title={month ? '월 수정' : '월 추가'} onClose={onClose}
      footer={<><Btn onClick={onClose}>취소</Btn><Btn variant="primary" disabled={!picked || busy} icon={<Icon.check />} onClick={async () => { setBusy(true); await onSave({ id: month?.id, label: `${picked}월`, maxSelections: Number(maxSel) || 0, sortOrder: picked }); }}>{month ? '저장' : '추가'}</Btn></>}>
      <div className="frow">
        <label className="flabel">월 선택</label>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 6 }}>
          {Array.from({ length: 12 }, (_, i) => i + 1).map((n) => {
            const used = usedNums.has(n);
            const on = picked === n;
            return (
              <button type="button" key={n} disabled={used}
                onClick={() => setPicked(n)}
                title={used ? '이미 추가된 월입니다' : ''}
                style={{
                  padding: '8px 0', borderRadius: 8, fontWeight: 700, fontSize: 13,
                  cursor: used ? 'not-allowed' : 'pointer',
                  border: on ? '2px solid var(--accent, #16181d)' : '1px solid var(--line, #e2e4e8)',
                  background: used ? 'var(--line, #f1f2f4)' : on ? 'var(--accent-50, #f1f2f4)' : 'var(--surface, #fff)',
                  color: used ? 'var(--ink-3, #b0b6bd)' : on ? 'var(--accent, #16181d)' : 'var(--ink-1, #2a2f36)',
                  opacity: used ? 0.6 : 1,
                }}>
                {n}월
              </button>
            );
          })}
        </div>
        <div className="fhint">이미 추가된 월은 선택할 수 없습니다.</div>
      </div>
      <div className="frow" style={{ marginBottom: 0 }}>
        <label className="flabel">최대 선택 수 (n)</label>
        <input className="input" type="number" min="0" value={maxSel} onChange={(e) => setMaxSel(e.target.value)} placeholder="0 = 제한 없음" />
        <div className="fhint">0이면 선택 제한 없음. LGE가 이 달에 선택할 수 있는 최대 에피소드 수.</div>
      </div>
    </Modal>
  );
}

/* ---------------- CNX: 콘텐츠(Project) 수정 ---------------- */
function ContentEditModal({ project, onClose, onSave }) {
  const [name, setName] = useSE(project.name || '');
  const [description, setDescription] = useSE(project.description || '');
  const [periodStart, setPeriodStart] = useSE((project.periodStart || '').slice(0, 10));
  const [periodEnd, setPeriodEnd] = useSE((project.periodEnd || '').slice(0, 10));
  const [visible, setVisible] = useSE(project.status === 'active');
  const [busy, setBusy] = useSE(false);
  return (
    <Modal title="콘텐츠 수정" onClose={onClose}
      footer={<><Btn onClick={onClose}>취소</Btn><Btn variant="primary" disabled={!name.trim() || !periodStart || busy} icon={<Icon.check />}
        onClick={async () => { setBusy(true); try { await onSave({ name: name.trim(), description, periodStart, periodEnd, visible }); } finally { setBusy(false); } }}>저장</Btn></>}>
      <div className="frow"><label className="flabel">콘텐츠명</label><input className="input" value={name} onChange={(e) => setName(e.target.value)} /></div>
      <div className="frow"><label className="flabel">설명 (선택)</label><input className="input" value={description} onChange={(e) => setDescription(e.target.value)} /></div>
      <div className="frow"><label className="flabel">시작일</label><input className="input" type="date" value={periodStart} onChange={(e) => setPeriodStart(e.target.value)} /></div>
      <div className="frow"><label className="flabel">종료일 (선택)</label><input className="input" type="date" value={periodEnd} onChange={(e) => setPeriodEnd(e.target.value)} /></div>
      <div className="frow" style={{ marginBottom: 0, display: 'flex', alignItems: 'center', gap: 10 }}>
        <label className="flabel" style={{ margin: 0 }}>운영가이드 표기</label>
        <button type="button" onClick={() => setVisible((v) => !v)} style={{ cursor: 'pointer', padding: '5px 12px', borderRadius: 20, border: '1px solid var(--line)', fontWeight: 700, fontSize: 12.5, background: visible ? 'var(--lg-red-50, #fdecea)' : 'var(--surface, #fff)', color: visible ? 'var(--lg-red, #c0392b)' : 'var(--ink-3, #8a9098)' }}>{visible ? 'ON · 노출중' : 'OFF · 숨김'}</button>
        <span className="muted" style={{ fontSize: 11.5 }}>ON이면 LGE 운영가이드에 노출됩니다</span>
      </div>
    </Modal>
  );
}

/* ---------------- CNX: 콘텐츠(Project) 추가 ---------------- */
function ProjectCreateModal({ onClose, onSave }) {
  const [name, setName] = useSE('');
  const [description, setDescription] = useSE('');
  const [periodStart, setPeriodStart] = useSE('');
  const [periodEnd, setPeriodEnd] = useSE('');
  const [busy, setBusy] = useSE(false);
  return (
    <Modal title="콘텐츠 추가" onClose={onClose}
      footer={<><Btn onClick={onClose}>취소</Btn><Btn variant="primary" disabled={!name.trim() || busy} icon={<Icon.check />} onClick={async () => { setBusy(true); await onSave({ name: name.trim(), description, periodStart: periodStart || undefined, periodEnd: periodEnd || undefined }); }}>추가</Btn></>}>
      <div className="frow"><label className="flabel">프로젝트명</label><input className="input" value={name} onChange={(e) => setName(e.target.value)} placeholder="예: LG AI 365 · 2026 하반기" /></div>
      <div className="frow"><label className="flabel">설명 (선택)</label><input className="input" value={description} onChange={(e) => setDescription(e.target.value)} placeholder="간단한 설명" /></div>
      <div className="frow"><label className="flabel">기간 시작</label><input className="input" type="date" value={periodStart} onChange={(e) => setPeriodStart(e.target.value)} /></div>
      <div className="frow" style={{ marginBottom: 0 }}><label className="flabel">기간 종료 (선택)</label><input className="input" type="date" value={periodEnd} onChange={(e) => setPeriodEnd(e.target.value)} /></div>
    </Modal>
  );
}

/* ============================================================
   SUBMIT HISTORY (tab)
   ============================================================ */
function SubmitHistory({ project, user, navigate }) {
  // Items are now self-describing (enriched by backend): no client-side episode resolution.
  const { loading, error, data, reload } = useAsync(
    () => window.api.getSubmissions(project.id).then((subs) => ({ subs })),
    [project.id]
  );

  const [detail, setDetail] = useSE(null);   // clicked submission

  return (
    <div className="page-wrap">
      <div style={{ marginBottom: 14 }}>
        <Btn size="sm" variant="ghost" icon={<Icon.chevL />} onClick={() => navigate({ name: 'project', projectId: project.id, tab: 'episodes' })}>에피소드 선택으로</Btn>
      </div>
      <div className="page-head"><div className="page-title" style={{ fontSize: 19 }}>제출 히스토리</div>
        <div className="page-desc">누가 · 언제 · 어떤 테마의 어떤 에피소드를 제출했는지 시간순으로 보여줍니다. 재제출 시 이전 이력은 보존됩니다.</div>
      </div>

      {loading && <div className="card" style={{ padding: 24 }}>{[0, 1].map((i) => <div key={i} style={{ marginBottom: 16 }}><Skel w="30%" /><Skel w="60%" h={12} style={{ marginTop: 8 }} /></div>)}</div>}
      {error && <ErrorState onRetry={reload} msg={error} />}
      {!loading && !error && data.subs.length === 0 && (
        <EmptyState icon={<Icon.clock />} title="제출 이력이 없습니다" desc="에피소드 탭에서 선택을 완료하고 제출하면 여기에 기록됩니다."
          action={<Btn variant="primary" onClick={() => navigate({ name: 'project', projectId: project.id, tab: 'episodes' })}>에피소드 선택하기</Btn>} />
      )}
      {!loading && !error && data.subs.length > 0 && (
        <div className="log-list">
          {data.subs.map((s, i) => {
            const first = s.items[0] || {};
            const firstTitle = first.episodeTitle || (first.episodeId ? '(삭제된 에피소드)' : '');
            return (
              <button className="log-row" key={s.id} onClick={() => setDetail(s)}>
                <Avatar name={s.actor} color={s.role === 'CNX' ? '#1a6ec7' : '#C8102E'} size={36} />
                <div className="lr-id">
                  <div className="lr-who">
                    <span className="who">{s.actor}</span><RoleBadge role={s.role} />
                    {i === 0 && <span className="pill pill-active" style={{ fontSize: 10 }}><span className="dot" />최신</span>}
                  </div>
                  <div className="log-when">{fmtDateTime(s.at)}</div>
                  {firstTitle && <div className="lr-preview">{firstTitle}{s.items.length > 1 ? ` 외 ${s.items.length - 1}건` : ''}</div>}
                </div>
                <span className="sub-count">에피소드 {s.items.length}개</span>
                <Icon.chevR className="lr-chev" style={{ width: 18, height: 18 }} />
              </button>
            );
          })}
        </div>
      )}

      {detail && (() => {
        const s = detail;
        const personaN = s.items.filter((it) => it.personaName).length;
        return (
          <Drawer onClose={() => setDetail(null)}
            head={
              <div>
                <div className="flex between center">
                  <span className="det-wk">제출 상세</span>
                  <button className="icon-btn" onClick={() => setDetail(null)}><Icon.x /></button>
                </div>
                <div className="log-dh-who" style={{ marginTop: 10 }}>
                  <Avatar name={s.actor} color={s.role === 'CNX' ? '#1a6ec7' : '#C8102E'} size={36} />
                  <div><span className="who">{s.actor}</span> <RoleBadge role={s.role} /></div>
                </div>
                <div className="log-dh-when">{fmtDateTime(s.at)}</div>
              </div>
            }
            footer={
              <span className="muted" style={{ fontSize: 12.5 }}>총 에피소드 {s.items.length}개 · 페르소나 지정 {personaN}개</span>
            }>
            {s.note && (
              <div className="log-note">
                <div className="ln-label">소비자 메시지</div>
                <div className="ln-quote">“{s.note}”</div>
              </div>
            )}
            <div className="log-content-title"><Icon.layers style={{ width: 16, height: 16 }} />{project.name}</div>
            {groupByMonthTheme(s.items).map(([key, rows]) => (
              <div className="log-group" key={key}>
                <div className="log-group-head"><Icon.layers style={{ width: 13, height: 13 }} />{key}</div>
                {rows.map((it, ri) => <EpisodeDetailBlock key={(it.episodeId || '') + ri} it={it} />)}
              </div>
            ))}
          </Drawer>
        );
      })()}
    </div>
  );
}

// Group enriched submission items by `${monthLabel} · ${themeName}` preserving order.
function groupByMonthTheme(items) {
  const groups = []; const idx = {};
  (items || []).forEach((it) => {
    const key = `${it.monthLabel || '월 미지정'} · ${it.themeName || '기타'}`;
    if (idx[key] === undefined) { idx[key] = groups.length; groups.push([key, []]); }
    groups[idx[key]][1].push(it);
  });
  return groups;
}

// One episode rendered as a clear block: bold title + blue persona chip + compact detail.
// Shared visual contract with the EpisodeLog drawer in screens-admin.jsx.
function EpisodeDetailBlock({ it }) {
  const title = it.episodeTitle || '(삭제된 에피소드)';
  const products = Array.isArray(it.products) ? it.products : (it.products ? [it.products] : []);
  const hasDetail = it.tension || products.length || it.voc || it.rtb;
  return (
    <div className="log-ep-block">
      <div className="log-ep-head">
        <Icon.checkCircle style={{ width: 15, height: 15, color: 'var(--pub-green)', flexShrink: 0 }} />
        <span className="lel-t">{title}</span>
        {it.personaName
          ? <span className="log-ep-chip"><Icon.user style={{ width: 11, height: 11 }} />{it.personaName}</span>
          : <span className="log-ep-chip none">페르소나 미지정</span>}
      </div>
      {hasDetail && (
        <div className="ep-meta log-ep-meta">
          {it.tension && <div className="ep-meta-row"><span className="ep-meta-label">핵심텐션</span><span className="ep-meta-val">{it.tension}</span></div>}
          {products.length > 0 && (
            <div className="ep-meta-row"><span className="ep-meta-label">제품</span>
              <span className="ep-meta-val ep-tags">{products.map((p, j) => <span className="tag" key={j}>{p}</span>)}</span>
            </div>
          )}
          {it.voc && <div className="ep-meta-row"><span className="ep-meta-label">VOC</span><span className="ep-meta-val">{it.voc}</span></div>}
          {it.rtb && <div className="ep-meta-row"><span className="ep-meta-label">RTB</span><span className="ep-meta-val">{it.rtb}</span></div>}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { EpisodeBrowse, EpisodeAdmin, SubmitHistory, MonthTabBar, EpisodeDetailBlock, groupByMonthTheme, RefListScreen });