/* BrandAnalytics — 오가닉 + 광고 통합 메타 대시보드.
   네이버 브랜드 애널리틱스가 못 하는 "오가닉(스토어센터) ↔ 광고(GFA/SA)" 통합 조망.
   섹션을 분리하되(오가닉/광고) 둘의 불가분 관계(선순환·통합 퍼널·시장 경쟁)를 한 화면에.
   measuredProfile(tier-A 실측 적재 브랜드)일 때만 풀 대시보드. props: { profile }
*/
const { useState: useBAState } = React;

function BrandAnalytics({ profile }) {
  const p = profile;
  if (!p) return null;
  const won = n => '₩' + Math.round(n).toLocaleString();
  const eok = n => (n / 100000000).toFixed(1) + '억';
  const fmtN = n => n >= 10000 ? (n / 10000).toFixed(n >= 100000 ? 0 : 1) + '만' : (n || 0).toLocaleString();
  const ec = p.economics || {};
  const sf = p.shoppingFunnel;
  const cs = p.channelSplit;

  return (
    <div className="ba">
      <div className="ba-top">
        <div>
          <div className="ba-eyebrow">브랜드 애널리틱스 · 오가닉 + 광고 메타</div>
          <h3 className="ba-title">{p.meta.brand} <span className="ba-tier">tier-A 실측</span></h3>
          <div className="ba-period">{p.meta.period} · {p.meta.sourceLabel}</div>
        </div>
      </div>

      {/* KPI 종합 */}
      <div className="ba-kpis">
        <div className="ba-kpi"><span>GMV</span><b>{ec.gmv ? eok(ec.gmv) : '—'}</b></div>
        <div className="ba-kpi"><span>AOV</span><b>{ec.aov ? won(ec.aov) : '—'}</b></div>
        <div className="ba-kpi"><span>전환율(상세→결제)</span><b>{ec.viewToPayCvrPct != null ? ec.viewToPayCvrPct + '%' : '—'}</b></div>
        <div className="ba-kpi"><span>환불율</span><b>{ec.refundRatePct != null ? ec.refundRatePct + '%' : '—'}</b></div>
        <div className="ba-kpi ba-kpi-ad"><span>blended ROAS</span><b>{p.adAccount ? p.adAccount.blendedRoas : '—'}</b></div>
        <div className="ba-kpi"><span>모바일</span><b>{p.device ? p.device.mobile + '%' : '—'}</b></div>
      </div>

      {/* 오가닉 ↔ 광고 분리 + 선순환 */}
      {cs && (
        <div className="ba-split">
          <div className="ba-split-head">
            <span className="ba-mini">채널 매출 기여 — 오가닉 / 광고 분리 (불가분 · 선순환)</span>
          </div>
          <div className="ba-split-bar">
            <div className="ba-seg ba-org" style={{ width: cs.organic.total + '%' }}><span>오가닉 {cs.organic.total}%</span></div>
            <div className="ba-seg ba-ad" style={{ width: cs.ad.total + '%' }}><span>광고 {cs.ad.total}%</span></div>
          </div>
          <div className="ba-split-cols">
            <div className="ba-col ba-col-org">
              <div className="ba-col-h"><span className="ba-dot ba-d-org" />오가닉 (스토어센터)</div>
              {Object.entries(cs.organic.parts).map(([k, v]) => (
                <div key={k} className="ba-prow"><span>{k}</span><em>{v}%</em></div>
              ))}
            </div>
            <div className="ba-flow">
              <div className="ba-flow-arrow">⟲</div>
              <div className="ba-flow-txt">광고가 브랜드 발견을 키워<br/>오가닉 검색·전환을 견인</div>
            </div>
            <div className="ba-col ba-col-ad">
              <div className="ba-col-h"><span className="ba-dot ba-d-ad" />광고 (GFA · SA)</div>
              {Object.entries(cs.ad.parts).map(([k, v]) => (
                <div key={k} className="ba-prow"><span>{k}</span><em>{v}%</em></div>
              ))}
            </div>
          </div>
          <div className="ba-split-note">{cs.note}</div>
        </div>
      )}

      {/* 통합 퍼널 + 시장 경쟁 벤치마크 */}
      {sf && (
        <div className="ba-funnel">
          <div className="ba-funnel-head">
            <span className="ba-mini">쇼핑 브랜드 퍼널 — 발견→관심→구매 (vs 카테고리 경쟁 평균)</span>
            <span className="ba-funnel-period">{sf.period}</span>
          </div>
          {['브랜드 발견', '브랜드 관심', '구매 시도', '구매'].map(stage => {
            const v = sf.stages[stage] || 0;
            const cv = (sf.competitor && sf.competitor[stage]) || 0;
            const max = sf.stages['브랜드 발견'] || 1;
            const cmax = (sf.competitor && sf.competitor['브랜드 발견']) || 1;
            const win = v >= cv;
            return (
              <div key={stage} className="ba-fstage">
                <div className="ba-fstage-l">{stage}</div>
                <div className="ba-fbars">
                  <div className="ba-fbar-row">
                    <div className="ba-fbar ba-fbar-me" style={{ width: Math.max(3, v / max * 100) + '%' }}>{fmtN(v)}</div>
                  </div>
                  <div className="ba-fbar-row">
                    <div className="ba-fbar ba-fbar-cp" style={{ width: Math.max(3, cv / cmax * 100) + '%' }}>{fmtN(cv)}</div>
                  </div>
                </div>
                <div className={'ba-fdelta ' + (win ? 'win' : 'lose')}>{win ? '▲' : '▼'} {cv ? Math.round((v - cv) / cv * 100) : 0}%</div>
              </div>
            );
          })}
          <div className="ba-flegend">
            <span><i className="ba-li-me" /> {p.meta.brand}</span>
            <span><i className="ba-li-cp" /> 카테고리 경쟁 평균</span>
            <span className="ba-fconv">발견→구매 {sf.discoverToBuyPct}%</span>
          </div>
        </div>
      )}

      {/* 구매자 실측 + 베스트셀러 (오가닉 수요의 정체) */}
      <div className="ba-bottom">
        <div className="ba-buyers">
          <span className="ba-mini">핵심 구매자 (성×연령 결합 실측)</span>
          <div className="ba-cells">
            {(window.BrandProfiles && window.BrandProfiles.topCells(p, 5) || []).map((c, i) => (
              <div key={i} className="ba-cell"><span>{c.label}</span><em>{c.pct}%</em></div>
            ))}
          </div>
          <div className="ba-meta2">
            <span>남 {p.gender['남성']}% / 여 {p.gender['여성']}%</span>
            {p.hourly && <span>피크 {p.hourly.indexOf(Math.max(...p.hourly))}시</span>}
          </div>
        </div>
        {p.topProducts && (
          <div className="ba-products">
            <span className="ba-mini">베스트셀러 (매출 비중)</span>
            {p.topProducts.slice(0, 5).map((pr, i) => (
              <div key={i} className="ba-prod">
                <div className="ba-prod-bar" style={{ width: (pr.revShare / p.topProducts[0].revShare * 100) + '%' }} />
                <span className="ba-prod-n">{pr.name}</span>
                <em>{pr.revShare}%</em>
              </div>
            ))}
          </div>
        )}
      </div>

      <div className="ba-foot">
        <b>오가닉(스토어센터) + 광고(GFA·SA) 통합 메타</b> — 네이버 브랜드 애널리틱스가 분리해 보여주는 스토어·광고·시장을 한 화면에 묶고, 둘의 선순환을 정량화. 모든 수치 tier-A 실측.
      </div>

      <style>{`
        .ba { display: flex; flex-direction: column; gap: 12px; }
        .ba-mini { font-family: var(--font-mono); font-size: 10px; color: var(--text-mute); letter-spacing: .02em; }
        .ba-top { padding: 2px 0; }
        .ba-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--signal); }
        .ba-title { margin: 4px 0 2px; font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; }
        .ba-tier { font-size: 10px; font-weight: 600; font-family: var(--font-mono); color: var(--plant); border: 1px solid var(--plant); padding: 2px 7px; border-radius: 3px; margin-left: 6px; vertical-align: middle; }
        .ba-period { font-size: 11px; color: var(--text-mute); }

        .ba-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--border); }
        @media (max-width: 720px) { .ba-kpis { grid-template-columns: repeat(3, 1fr); } }
        .ba-kpi { background: var(--ink-050, oklch(0.11 0.015 240)); padding: 10px 8px; display: flex; flex-direction: column; gap: 3px; }
        .ba-kpi span { font-size: 9.5px; color: var(--text-mute); }
        .ba-kpi b { font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--text); }
        .ba-kpi-ad b { color: var(--signal); }

        .ba-split { border: 1px solid var(--border); padding: 12px; background: oklch(0.10 0.02 240 / 0.5); }
        .ba-split-bar { display: flex; height: 30px; margin: 8px 0 12px; border-radius: 5px; overflow: hidden; }
        .ba-seg { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--ink-000); }
        .ba-org { background: var(--plant); } .ba-ad { background: var(--signal); }
        .ba-split-cols { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
        @media (max-width: 680px) { .ba-split-cols { grid-template-columns: 1fr; } .ba-flow { order: 3; } }
        .ba-col-h { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 7px; }
        .ba-dot { width: 9px; height: 9px; border-radius: 2px; } .ba-d-org { background: var(--plant); } .ba-d-ad { background: var(--signal); }
        .ba-prow { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--text-dim); padding: 3px 0; line-height: 1.35; }
        .ba-prow span { flex: 1; min-width: 0; }
        .ba-prow em { font-style: normal; font-family: var(--font-mono); color: var(--text); flex-shrink: 0; }
        .ba-flow { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 4px; }
        .ba-flow-arrow { font-size: 26px; color: var(--cyan); }
        .ba-flow-txt { font-size: 9px; color: var(--text-mute); text-align: center; line-height: 1.4; }
        .ba-split-note { font-size: 10.5px; color: var(--text-mute); margin-top: 10px; line-height: 1.5; border-top: 1px solid var(--border); padding-top: 8px; }

        .ba-funnel { border: 1px solid var(--border); padding: 12px; background: oklch(0.10 0.02 240 / 0.5); }
        .ba-funnel-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
        .ba-funnel-period { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-mute); }
        .ba-fstage { display: grid; grid-template-columns: 64px 1fr 52px; gap: 8px; align-items: center; margin-bottom: 7px; }
        .ba-fstage-l { font-size: 11px; color: var(--text-dim); }
        .ba-fbars { display: flex; flex-direction: column; gap: 2px; }
        .ba-fbar { height: 15px; border-radius: 2px; font-family: var(--font-mono); font-size: 9px; color: var(--ink-000); display: flex; align-items: center; padding-left: 5px; min-width: 24px; }
        .ba-fbar-me { background: var(--cyan); }
        .ba-fbar-cp { background: oklch(0.5 0.03 280); color: var(--text); }
        .ba-fdelta { font-family: var(--font-mono); font-size: 10px; text-align: right; }
        .ba-fdelta.win { color: var(--plant); } .ba-fdelta.lose { color: var(--alert); }
        .ba-flegend { display: flex; gap: 14px; margin-top: 8px; font-size: 10px; color: var(--text-mute); align-items: center; }
        .ba-flegend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
        .ba-li-me { background: var(--cyan); } .ba-li-cp { background: oklch(0.5 0.03 280); }
        .ba-fconv { margin-left: auto; color: var(--cyan); font-family: var(--font-mono); }

        .ba-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        @media (max-width: 680px) { .ba-bottom { grid-template-columns: 1fr; } }
        .ba-buyers, .ba-products { border: 1px solid var(--border); padding: 11px 12px; background: oklch(0.10 0.02 240 / 0.5); }
        .ba-cells { display: flex; flex-direction: column; gap: 4px; margin: 7px 0; }
        .ba-cell { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-dim); }
        .ba-cell em { font-style: normal; font-family: var(--font-mono); color: var(--text); }
        .ba-meta2 { display: flex; gap: 12px; font-size: 10px; color: var(--text-mute); font-family: var(--font-mono); border-top: 1px solid var(--border); padding-top: 6px; }
        .ba-prod { position: relative; padding: 5px 8px; margin-top: 4px; font-size: 10.5px; display: flex; align-items: center; gap: 6px; overflow: hidden; border-radius: 3px; }
        .ba-prod-bar { position: absolute; inset: 0; background: var(--signal-soft, oklch(0.80 0.15 72 / 0.14)); z-index: 0; }
        .ba-prod-n { position: relative; z-index: 1; flex: 1; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .ba-prod em { position: relative; z-index: 1; font-style: normal; font-family: var(--font-mono); color: var(--text); }

        .ba-foot { font-size: 11px; color: var(--text-mute); line-height: 1.55; border-top: 1px solid var(--border); padding-top: 10px; }
        .ba-foot b { color: var(--text-dim); }
      `}</style>
    </div>
  );
}

Object.assign(window, { BrandAnalytics });
