/* playbook-prompts.jsx — 집행 분석 프롬프트 생성기 (Supermetrics Playbook 패턴 이식)
 *
 *  플레이북 2원칙 반영:
 *   ① 2단계 분리법 — "데이터 pull → 분석/권고" 를 항상 분리(한 프롬프트에 몰지 않음).
 *   ② 고도의 명시성 — 기간·지표·포맷·임계값을 정확히 지정(추측 여지 제거).
 *
 *  페르소나 실데이터(브랜드·카테고리·KPI)를 주입해 *복붙 가능한* GFA/SA 집행 점검
 *  프롬프트 시퀀스를 자동 생성한다. 신뢰 아키텍처와 동일 철학: 데이터=결정론, 해석=LLM.
 */
(function () {
  var useState = React.useState;

  /* ★ WI-3 정본 세트 — 고정 스켈레톤에 페르소나 변수만 채워 생성(결정론적 템플릿).
   *  동일 페르소나 입력 → 동일 프롬프트 출력(LLM 작문 아님). 전 프롬프트 기준=구매완료 ROAS.
   *  내부 운영용(광고주 비공개) — 보고서 공유 금지어 규칙 미적용.
   *  매체별(파워링크/쇼핑/GFA/전체)로 pull 지표·분해축·피로도 신호를 분기.
   */
  var MEDIA_SPEC = {
    all:       { label: '전체(SA·GFA)', medium: '네이버 SA·GFA',          pull: '비용·노출·클릭·CTR·구매완료 전환수·구매완료 매출·구매완료 ROAS',                breakdown: '매체(파워링크/쇼핑상품형/쇼핑브랜드형/GFA)별', fatigue: '피로도 신호(빈도>3.5 & CTR 하락)' },
    powerlink: { label: '파워링크',     medium: '네이버 SA 파워링크',       pull: '비용·노출·클릭·CTR·평균클릭비용(CPC)·구매완료 전환수·구매완료 매출·구매완료 ROAS', breakdown: '키워드·매칭타입·광고그룹별',                  fatigue: '키워드 품질지수 하락·CPC 상승' },
    shopping:  { label: '쇼핑검색',     medium: '네이버 SA 쇼핑검색광고(쇼핑상품형·브랜드형)', pull: '비용·노출·클릭·CTR·구매완료 전환수·구매완료 매출·구매완료 ROAS',          breakdown: '상품·썸네일(소재)·가격경쟁별',               fatigue: '썸네일 CTR 하락·가격경쟁 열위' },
    gfa:       { label: 'GFA',          medium: '네이버 GFA',              pull: '비용·노출·클릭·CTR·직접/간접 전환수·구매완료 전환수·구매완료 매출·구매완료 ROAS', breakdown: '소재·타겟(관심사/구매의도/맞춤)·지면별',       fatigue: '소재 피로도(빈도>3.5 & CTR 하락)' },
  };
  function buildCanonicalSet(ctx) {
    var brand = ctx.brand || '브랜드';
    var name = ctx.persona || '페르소나';
    var leaves = (ctx.leaves || []).slice(0, 6);
    var catLine = leaves.length ? leaves.join(' · ') : '핵심 카테고리';
    var spec = MEDIA_SPEC[ctx.media] || MEDIA_SPEC.all;
    // {SKU/캠페인/타겟세그먼트} 슬롯을 페르소나 변수로 고정 치환
    var target = '[' + brand + '] ' + name + ' 페르소나(' + catLine + ') 캠페인·타겟세그먼트';
    return {
      target: target, media: ctx.media || 'all', mediaLabel: spec.label,
      prompts: [
        { tag: 'pull', text:
          target + '의 ' + spec.medium + ' 성과를 최근 7일과 직전 7일로 끌어와줘.\n'
          + '지표: ' + spec.pull + '. (분석은 다음 단계.)' },
        { tag: 'analyze', text:
          '끌어온 데이터로 ' + spec.breakdown + ' 직전주 대비 보고주간 효율 변화를 표로 비교해줘. 기준=구매완료 ROAS.\n'
          + spec.fatigue + '와 예산 페이싱(±15% 초과)을 함께 표시해줘.' },
        { tag: 'act', text:
          '위 분석 기준으로 권고를 줘: 중지/리프레시할 소재, 예산 이동 방향, 과성과 세그먼트.\n'
          + '각 권고에 근거 수치를 붙이고, 외부 공유 전 정본 대조가 필요한 항목은 ‘요확인’으로 표기해줘.' },
      ],
    };
  }
  buildCanonicalSet.MEDIA = ['all', 'powerlink', 'shopping', 'gfa'];
  buildCanonicalSet.MEDIA_SPEC = MEDIA_SPEC;

  function buildWorkflows(ctx) {
    var brand = ctx.brand || '브랜드';
    var leaves = (ctx.leaves || []).slice(0, 6);
    var catLine = leaves.length ? leaves.join(' · ') : '핵심 카테고리';
    var aov = ctx.aov ? ('₩' + ctx.aov.toLocaleString()) : '객단가';
    var name = ctx.persona || '페르소나';

    return [
      {
        id: 'wow', label: 'WoW 효율 점검', icon: '📉',
        goal: '클릭당 비용 상승·전환율 하락 같은 효율 저하 신호를 월 예산을 까먹기 전에 조기 포착.',
        prompts: [
          { tag: 'pull', text: '네이버 GFA·SA 에서 [' + name + '] 페르소나(' + catLine + ')로 집행 중인 캠페인의 최근 7일과 직전 7일 성과 데이터를 pull 해줘. 노출·클릭·CTR·CPC·전환·CVR·CPM·광고비를 일자별로.' },
          { tag: 'analyze', text: '이번 주 vs 지난주를 교차 비교한 표를 만들어줘. CTR·CVR 하락 또는 CPC·CPM 상승이 있는 광고그룹을 변화율(%)과 함께 표시하고, 통계적으로 유의한 변동만 강조해줘.' },
          { tag: 'act', text: '어떤 광고그룹을 멈추고, 남은 예산을 어디로 옮기고, 현재 과성과 중인 인구통계 세그먼트가 무엇인지 구체적으로 권고해줘. 수치는 위 데이터에서만 인용.' },
        ],
      },
      {
        id: 'fatigue', label: '소재 피로도', icon: '🔁',
        goal: '어느 소재가 타겟을 태우고 있는지 찾아 즉시 리프레시 대상 선별.',
        prompts: [
          { tag: 'pull', text: '최근 30일 GFA 소재별 성과를 pull 해줘 — 노출·빈도(frequency)·CTR·CPC, 소재명·소재포맷(이미지/동영상) 기준 분해.' },
          { tag: 'analyze', text: '빈도 3.5 초과이면서 최근 2주간 CTR이 하락한 소재를 표로 식별해줘. 하락폭(%)·현재 CPC·예상 낭비액을 같이.' },
          { tag: 'act', text: 'CPC 추가 상승을 막기 위해 즉시 교체해야 할 소재를 우선순위로 나열하고, 각 소재의 새 카피/앵글 방향을 ' + name + ' 페르소나 톤으로 제안해줘.' },
        ],
      },
      {
        id: 'creative', label: '크리에이티브 앵글', icon: '✦',
        goal: '가장 싼 전환을 만드는 소재 앵글을 찾아 승자 변형을 바로 작성.',
        prompts: [
          { tag: 'pull', text: '최근 14일 ' + brand + ' 캠페인 성과를 소재명·포맷별로 pull 해줘 (전환·CPA·CTR·동영상 vs 정적이미지).' },
          { tag: 'analyze', text: 'CPA 최저 기준 상위 3개 소재를 순위표로, 동영상 vs 정적이미지 성과를 비교하는 표를 만들어줘.' },
          { tag: 'act', text: '승자 소재의 성공한 감정 후크는 유지하되 CTA만 다르게 한 새 카피 3종을 ' + name + '(' + catLine + ') 타겟에 맞춰 써줘.' },
        ],
      },
      {
        id: 'pacing', label: '예산 페이싱·월말 예측', icon: '$',
        goal: '광고비가 계획대로 가는지 점검하고 월말 전환을 예측.',
        prompts: [
          { tag: 'pull', text: '이번 달 현재까지의 일별 광고비와 전환을 GFA·SA 채널별로 pull 해줘.' },
          { tag: 'analyze', text: '전 채널 일평균 run rate를 계산하고, 이 추세로 월말 총 광고비·총 전환을 예측한 표를 만들어줘. 객단가 ' + aov + ' 기준 예상 매출·ROAS도.' },
          { tag: 'act', text: '평소 월 예산 대비 15% 이상 초과/미달 페이싱 중인 채널을 표시하고, ' + name + ' 비중 조정안을 권고해줘.' },
        ],
      },
      {
        id: 'anomaly', label: '이상 탐지(고지출 이벤트)', icon: '🚨',
        goal: '대형 프로모션 중 비용 급증·트래킹 단절을 잡아 즉시 대응.',
        prompts: [
          { tag: 'pull', text: '최근 7일 ' + brand + ' 프로모션 캠페인의 일별 비용·노출·전환을 GFA·SA 별로 pull 해줘.' },
          { tag: 'analyze', text: '어제 전환당비용(CPP)이 직전 6일 평균의 3배를 넘었는지 분석하고, 넘었다면 원인 광고세트를 지목해줘(입찰 오류·링크 단절 후보 포함).' },
          { tag: 'act', text: '문제 광고세트를 검토·일시중지하도록 미디어바잉 팀에 보낼 긴급 알림 메시지 초안을 작성해줘 — 해당 광고세트·수치 포함.' },
        ],
      },
    ];
  }

  var TAGS = {
    pull: { label: '① pull · 데이터', color: '#5fcf94', bg: '#13301f' },
    analyze: { label: '② analyze · 분석', color: '#5fc7e0', bg: '#11303a' },
    act: { label: '③ act · 권고', color: '#b79ae0', bg: '#2a233a' },
  };

  function PlaybookPrompts(props) {
    var ctx = props.ctx || {};
    var [cmedia, setCmedia] = useState('all');
    var canonical = buildCanonicalSet(Object.assign({}, ctx, { media: cmedia }));
    var flows = buildWorkflows(ctx);
    var [open, setOpen] = useState(flows[0].id);
    var [copied, setCopied] = useState('');

    function copy(text, key) {
      (window.safeCopy ? window.safeCopy(text) : navigator.clipboard && navigator.clipboard.writeText(text));
      setCopied(key); setTimeout(function () { setCopied(''); }, 1400);
    }
    var active = flows.find(function (f) { return f.id === open; }) || flows[0];

    /* 정본 3프롬프트 카드 렌더러 (공통) */
    function promptCard(p, key) {
      var t = TAGS[p.tag];
      return React.createElement('div', { key: key, style: { border: '1px solid var(--border-strong)', borderRadius: 8, overflow: 'hidden' } },
        React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, padding: '6px 10px', background: 'var(--surface, #1a1d23)' } },
          React.createElement('span', { style: { fontSize: 10, fontFamily: 'var(--font-mono)', fontWeight: 700, color: t.color, background: t.bg, borderRadius: 4, padding: '2px 8px' } }, t.label),
          React.createElement('button', {
            onClick: function () { copy(p.text, key); },
            style: { fontSize: 11, padding: '3px 9px', borderRadius: 5, cursor: 'pointer', border: '1px solid var(--border-strong)', background: 'transparent', color: copied === key ? '#5fcf94' : 'var(--text-dim)' }
          }, copied === key ? '✓ 복사됨' : '복사')
        ),
        React.createElement('p', { style: { margin: 0, padding: '9px 11px', fontSize: 12, lineHeight: 1.55, color: 'var(--text)', whiteSpace: 'pre-wrap' } }, p.text)
      );
    }

    var canonAllText = canonical.prompts.map(function (p, i) {
      return '[' + (i + 1) + '/' + TAGS[p.tag].label.replace(/^[①②③]\s*/, '') + ']\n' + p.text;
    }).join('\n\n');

    return React.createElement('div', null,
      // ★ 정본 세트 (WI-3) — 항상 상단 노출
      React.createElement('div', { style: { border: '1px solid rgba(95,207,148,0.35)', borderRadius: 10, padding: '13px 14px', marginBottom: 16, background: 'rgba(95,207,148,0.05)' } },
        React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', marginBottom: 7 } },
          React.createElement('strong', { style: { fontFamily: 'var(--font-display, sans-serif)', fontSize: 13 } }, '정본 집행 점검 세트'),
          React.createElement('span', { style: { fontSize: 10, fontFamily: 'var(--font-mono)', fontWeight: 700, color: '#5fcf94', background: '#13301f', borderRadius: 4, padding: '2px 8px' } }, '기준 · 구매완료 ROAS'),
          React.createElement('span', { style: { fontSize: 10, fontFamily: 'var(--font-mono)', color: 'var(--text-mute)', border: '1px solid var(--border-strong)', borderRadius: 4, padding: '2px 8px' } }, '2단계법 · 내부 운영용'),
          React.createElement('button', {
            onClick: function () { copy(canonAllText, 'canon-all'); },
            style: { marginLeft: 'auto', fontSize: 11, padding: '3px 10px', borderRadius: 5, cursor: 'pointer', border: '1px solid var(--border-strong)', background: 'transparent', color: copied === 'canon-all' ? '#5fcf94' : 'var(--text-dim)' }
          }, copied === 'canon-all' ? '✓ 세트 복사됨' : '⧉ 세트 전체 복사')
        ),
        React.createElement('p', { style: { margin: '0 0 11px', fontSize: 11, lineHeight: 1.5, color: 'var(--text-mute)' } },
          '페르소나 변수만 채운 고정 스켈레톤 — 동일 페르소나면 항상 같은 프롬프트(재현성). pull → analyze → act 순서로 복붙.'),
        React.createElement('div', { style: { display: 'flex', gap: 5, flexWrap: 'wrap', marginBottom: 10 } },
          buildCanonicalSet.MEDIA.map(function (mk) {
            var on = cmedia === mk; var sp = buildCanonicalSet.MEDIA_SPEC[mk];
            return React.createElement('button', {
              key: mk, onClick: function () { setCmedia(mk); },
              style: { fontSize: 11, padding: '4px 10px', borderRadius: 6, cursor: 'pointer',
                border: '1px solid ' + (on ? '#5fcf94' : 'var(--border-strong)'),
                background: on ? 'rgba(95,207,148,0.14)' : 'transparent', color: on ? 'var(--text)' : 'var(--text-dim)' }
            }, sp.label);
          })
        ),
        React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 8 } },
          canonical.prompts.map(function (p, i) { return promptCard(p, 'canon-' + i); })
        ),
        React.createElement('p', { style: { margin: '10px 2px 0', fontSize: 10.5, color: 'var(--text-mute)', lineHeight: 1.5 } },
          '※ 수치는 연동 데이터에서 결정론적으로 집계 · LLM은 해석·권고만. ③act의 ‘요확인’은 외부 공유 전 정본(구매완료) 대조 스폿체크.')
      ),
      // ── 추가 플레이북 ──
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', marginBottom: 10 } },
        React.createElement('strong', { style: { fontFamily: 'var(--font-display, sans-serif)', fontSize: 12.5, color: 'var(--text-dim)' } }, '추가 플레이북'),
        React.createElement('span', { style: { fontSize: 11, color: 'var(--text-mute)', lineHeight: 1.5 } },
          'Supermetrics 패턴 — 상황별 점검(피로도·앜글·페이싱·이상탐지). 2단계 분리.')
      ),
      // workflow tabs
      React.createElement('div', { style: { display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 12 } },
        flows.map(function (f) {
          var on = f.id === open;
          return React.createElement('button', {
            key: f.id, onClick: function () { setOpen(f.id); },
            style: { padding: '6px 11px', borderRadius: 6, cursor: 'pointer', fontSize: 12,
              border: '1px solid ' + (on ? '#b79ae0' : 'var(--border-strong)'),
              background: on ? 'rgba(183,154,224,0.12)' : 'transparent', color: on ? 'var(--text)' : 'var(--text-dim)' }
          }, f.icon + ' ' + f.label);
        })
      ),
      // goal
      React.createElement('p', { style: { margin: '0 0 12px', fontSize: 12.5, lineHeight: 1.55, color: 'var(--text-dim)' } },
        React.createElement('strong', { style: { color: 'var(--text)' } }, '목표 — '), active.goal),
      // prompt sequence
      React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 8 } },
        active.prompts.map(function (p, i) { return promptCard(p, active.id + i); })
      ),
      React.createElement('p', { style: { margin: '10px 2px 0', fontSize: 10.5, color: 'var(--text-mute)', lineHeight: 1.5 } },
        '※ 프롬프트는 페르소나 카테고리·객단가가 박힌 템플릿입니다. LLM은 해석·문안만, 수치는 연동 데이터에서 결정론적으로 집계됩니다.')
    );
  }

  Object.assign(window, { PlaybookPrompts: PlaybookPrompts });
})();