// Social Insight — BOD/investor-grade report renderer.
// Dipakai di overlay fullscreen ketika user klik "Export Laporan PDF" di
// dashboard TikTok atau Instagram. User cetak via browser Print → Save as PDF.

// Inject print stylesheet sekali saja (idempotent — id-checked).
(function injectReportStyles() {
  if (document.getElementById('social-report-styles')) return;
  const css = `
.report-overlay {
  position: fixed; inset: 0; background: #f1f1ee; overflow-y: auto; z-index: 9999;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
}
.report-controls {
  position: sticky; top: 0; z-index: 10; padding: 12px 18px; background: rgba(245,245,242,0.95);
  backdrop-filter: blur(8px); border-bottom: 1px solid #d8d6d0; display: flex; gap: 10px; align-items: center;
}
.report-controls button { font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 8px; cursor: pointer; border: 1px solid #c4c2bc; background: white; color: #2a2a28; }
.report-controls button.primary { background: #1e3a5f; color: white; border-color: #1e3a5f; }
.report-controls button:hover { opacity: 0.92; }

.report-page {
  background: white; max-width: 800px; margin: 16px auto; padding: 64px 70px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  color: #1a1a1a; line-height: 1.6; font-size: 13.5px;
  min-height: 1050px; box-sizing: border-box; position: relative;
}
.report-page p { margin: 0 0 14px; }
.report-page p:last-child { margin-bottom: 0; }
.report-page .display-serif { font-family: Georgia, 'Times New Roman', 'Iowan Old Style', serif; }

/* Page header strip */
.rp-header {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 10px; border-bottom: 1px solid #e6e4dd; margin-bottom: 28px;
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #8a8775;
}
.rp-section-num { font-weight: 700; color: #1e3a5f; }

/* Section eyebrow */
.rp-eyebrow { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: #c8a96a; font-weight: 700; margin-bottom: 10px; }
.rp-title { font-size: 28px; font-weight: 700; color: #1a2a3f; margin: 0 0 8px; letter-spacing: -0.012em; line-height: 1.15; }
.rp-title.serif { font-family: Georgia, 'Times New Roman', serif; }
.rp-subtitle { font-size: 14px; color: #555; margin-bottom: 30px; font-weight: 400; }

.rp-headline {
  font-family: Georgia, 'Times New Roman', serif; font-size: 22px; line-height: 1.4;
  color: #1a2a3f; font-weight: 500; font-style: italic;
  padding: 18px 22px; border-left: 3px solid #c8a96a; background: #faf9f4;
  margin: 0 0 26px; border-radius: 0 4px 4px 0;
}

.rp-body p { font-size: 13.5px; line-height: 1.72; color: #2a2a28; text-align: justify; }
.rp-body p:first-letter { /* drop cap optional */ }

/* Stat grid */
.rp-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 24px 0; }
.rp-stat-card {
  border: 1px solid #e6e4dd; border-radius: 8px; padding: 14px 16px; background: white;
  display: flex; flex-direction: column; gap: 4px;
}
.rp-stat-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #8a8775; font-weight: 700; }
.rp-stat-value { font-size: 24px; font-weight: 700; color: #1a2a3f; font-variant-numeric: tabular-nums; line-height: 1.1; }
.rp-stat-insight { font-size: 11.5px; color: #5a5a55; line-height: 1.4; }

/* Verdict badge */
.rp-verdict-card {
  display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center;
  border: 1px solid #e6e4dd; border-radius: 12px; padding: 22px 26px;
  background: linear-gradient(180deg, #fafaf6 0%, white 100%);
  margin: 16px 0 22px;
}
.rp-score-circle {
  width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; position: relative;
  color: white; font-weight: 700; font-family: Georgia, serif;
}
.rp-score-circle .num { font-size: 38px; line-height: 1; }
.rp-score-circle .out { font-size: 11px; opacity: 0.7; margin-top: 2px; }
.rp-rating-strong { background: #2563eb; }
.rp-rating-excellent { background: #16a34a; }
.rp-rating-solid { background: #f59e0b; }
.rp-rating-developing { background: #ea580c; }
.rp-rating-weak { background: #dc2626; }

.rp-verdict-text { display: flex; flex-direction: column; gap: 4px; }
.rp-verdict-rating { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #8a8775; font-weight: 700; }
.rp-verdict-headline { font-family: Georgia, serif; font-size: 17px; font-weight: 600; color: #1a2a3f; line-height: 1.35; }

/* Generic callout */
.rp-callout {
  border-left: 3px solid #c8a96a; background: #faf9f4; padding: 14px 18px;
  font-size: 12.5px; color: #4a4a45; line-height: 1.6; margin: 18px 0; border-radius: 0 4px 4px 0;
}
.rp-callout .label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #c8a96a; font-weight: 700; margin-bottom: 5px; }

/* Table */
.rp-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 12px; }
.rp-table th { text-align: left; padding: 8px 10px; background: #faf9f4; color: #1a2a3f; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; border-bottom: 1.5px solid #d8d6d0; }
.rp-table td { padding: 9px 10px; border-bottom: 1px solid #ececea; color: #2a2a28; vertical-align: top; }
.rp-table td.num { font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; color: #1a2a3f; }
.rp-table tbody tr:last-child td { border-bottom: none; }

/* Recommendation card */
.rp-rec-list { display: flex; flex-direction: column; gap: 10px; }
.rp-rec {
  border: 1px solid #e6e4dd; border-radius: 8px; padding: 13px 16px;
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
}
.rp-rec .pri {
  font-size: 10px; font-weight: 800; padding: 3px 7px; border-radius: 4px; color: white;
  letter-spacing: 0.04em; font-variant-numeric: tabular-nums;
}
.rp-rec .pri.P0 { background: #dc2626; }
.rp-rec .pri.P1 { background: #f59e0b; }
.rp-rec .pri.P2 { background: #6b7280; }
.rp-rec .area { font-size: 11px; color: #8a8775; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; margin-bottom: 3px; }
.rp-rec .action { font-size: 13.5px; font-weight: 600; color: #1a2a3f; margin-bottom: 6px; line-height: 1.4; }
.rp-rec .meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 11.5px; color: #5a5a55; }
.rp-rec .meta div { line-height: 1.4; }
.rp-rec .meta b { color: #1a2a3f; font-weight: 700; }

/* Roadmap */
.rp-roadmap { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin: 18px 0; }
.rp-roadmap-col { border: 1px solid #e6e4dd; border-radius: 8px; padding: 14px; background: white; }
.rp-roadmap-col .when { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #c8a96a; font-weight: 700; margin-bottom: 8px; }
.rp-roadmap-col ul { margin: 0; padding-left: 16px; }
.rp-roadmap-col li { font-size: 11.5px; color: #2a2a28; margin-bottom: 6px; line-height: 1.45; }

/* Drivers / risks */
.rp-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0; }
.rp-twocol-card { border: 1px solid #e6e4dd; border-radius: 8px; padding: 14px 16px; }
.rp-twocol-card .head { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; margin-bottom: 8px; }
.rp-twocol-card.driver .head { color: #16a34a; }
.rp-twocol-card.risk .head { color: #dc2626; }
.rp-twocol-card ul { margin: 0; padding-left: 16px; }
.rp-twocol-card li { font-size: 11.5px; color: #2a2a28; margin-bottom: 5px; line-height: 1.45; }

/* Bench verdict badge */
.rp-bench {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.rp-bench.outperforming { background: #dcfce7; color: #166534; }
.rp-bench.on-par { background: #fef3c7; color: #92400e; }
.rp-bench.underperforming { background: #fee2e2; color: #991b1b; }

/* Hashtag chips */
.rp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 16px; }
.rp-tag { font-size: 11.5px; padding: 4px 10px; border-radius: 999px; background: #f4f1e8; color: #5d4e2a; font-weight: 600; }

/* Sentiment */
.rp-sentiment-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.rp-sentiment-pill { font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 999px; letter-spacing: 0.06em; text-transform: uppercase; }
.rp-sentiment-positive { background: #dcfce7; color: #166534; }
.rp-sentiment-negative { background: #fee2e2; color: #991b1b; }
.rp-sentiment-neutral { background: #f3f4f6; color: #374151; }
.rp-sentiment-mixed { background: #fef3c7; color: #92400e; }

/* Cover page */
.rp-cover { text-align: left; padding-top: 80px; }
.rp-cover .brand-mark { font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: #c8a96a; font-weight: 700; margin-bottom: 28px; }
.rp-cover h1 { font-family: Georgia, 'Times New Roman', serif; font-size: 48px; line-height: 1.08; color: #1a2a3f; margin: 0 0 12px; font-weight: 600; letter-spacing: -0.012em; }
.rp-cover .lede { font-size: 16px; color: #4a4a45; line-height: 1.55; margin-bottom: 56px; max-width: 540px; }
.rp-cover .divider { width: 60px; height: 3px; background: #c8a96a; margin: 56px 0 32px; }
.rp-cover .meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; margin-top: 28px; }
.rp-cover .meta-item .lbl { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: #8a8775; font-weight: 700; margin-bottom: 4px; }
.rp-cover .meta-item .val { font-size: 16px; color: #1a2a3f; font-weight: 600; }
.rp-cover .footer-note { position: absolute; bottom: 56px; left: 70px; right: 70px; padding-top: 16px; border-top: 1px solid #e6e4dd; font-size: 10.5px; color: #8a8775; line-height: 1.6; }

/* Print rules — report rendered via ReactDOM.createPortal sebagai direct child body */
@media print {
  html, body { background: white !important; margin: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body > *:not(.report-print-shell) { display: none !important; }
  .report-print-shell { display: block !important; position: static !important; background: white !important; overflow: visible !important; }
  .report-controls { display: none !important; }
  .report-overlay { position: static !important; background: white !important; overflow: visible !important; }
  .report-page {
    box-shadow: none !important; margin: 0 !important; max-width: 100% !important;
    padding: 0 !important; min-height: 0 !important;
    page-break-after: always; break-after: page;
  }
  .report-page:last-child { page-break-after: auto; break-after: auto; }
  .rp-rec, .rp-stat-card, .rp-roadmap-col, .rp-twocol-card { break-inside: avoid; page-break-inside: avoid; }
  @page { size: A4; margin: 18mm 16mm; }
}
`;
  const style = document.createElement('style');
  style.id = 'social-report-styles';
  style.textContent = css;
  document.head.appendChild(style);
})();

// Format helpers
function rpFmtNum(n) {
  if (n == null) return '—';
  if (n >= 1e6) return (n / 1e6).toFixed(1).replace(/\.0$/, '') + 'M';
  if (n >= 1e3) return (n / 1e3).toFixed(1).replace(/\.0$/, '') + 'K';
  return Number(n).toLocaleString('id-ID');
}
function rpFmtPct(n) { return (n == null ? '—' : Number(n).toFixed(2) + '%'); }
function rpFmtDate(d) {
  const dt = d instanceof Date ? d : new Date(d);
  const months = ['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];
  return `${dt.getDate()} ${months[dt.getMonth()]} ${dt.getFullYear()}`;
}
function rpPeriodLabel(range) {
  if (range === '7d') return '7 hari terakhir';
  if (range === '30d') return '30 hari terakhir';
  if (range === '90d') return '90 hari terakhir';
  return 'Seluruh periode pengamatan';
}

// Section header (reused per page)
function RpHeader({ brand, platform, periodLabel, sectionNum, sectionLabel }) {
  return (
    <div className="rp-header">
      <span><span className="rp-section-num">{sectionNum}</span> · {sectionLabel}</span>
      <span>{brand} · {platform} · {periodLabel}</span>
    </div>
  );
}

// ─── Main report view ────────────────────────────────────────────────
function SocialReportView({ data, onClose }) {
  // data: { platform, brand, dateRange, searchType, dashboard, narrative, generatedAt, userName }
  const { platform, brand, dateRange, dashboard, narrative, generatedAt, userName } = data;
  const platformLabel = platform === 'tiktok' ? 'TikTok' : 'Instagram';
  const platformEmoji = platform === 'tiktok' ? '🎵' : '📷';
  const periodLabel = rpPeriodLabel(dateRange);
  const stats = dashboard.stats || {};
  const topCreators = dashboard.topCreators || [];
  const topHashtags = dashboard.topHashtags || [];
  const audienceTiers = dashboard.audienceTiers || { nano: 0, micro: 0, mid: 0, macro: 0, mega: 0, total: 0 };
  const topContent = dashboard.topVideosByViews || [];
  const weeklyTimeline = dashboard.weeklyTimeline || [];
  const commentStats = dashboard.commentStats || null;
  const commentAi = dashboard.commentAi || null;
  const topComments = dashboard.topComments || [];

  const ratingClass = (rating) => ({
    'Excellent': 'rp-rating-excellent',
    'Strong': 'rp-rating-strong',
    'Solid': 'rp-rating-solid',
    'Developing': 'rp-rating-developing',
    'Weak': 'rp-rating-weak',
  })[rating] || 'rp-rating-solid';

  const sentimentClass = (s) => ({
    positive: 'rp-sentiment-positive',
    negative: 'rp-sentiment-negative',
    neutral: 'rp-sentiment-neutral',
    mixed: 'rp-sentiment-mixed',
  })[s] || 'rp-sentiment-neutral';

  const v = narrative.verdict || {};
  const exec = narrative.executive || {};
  const perf = narrative.performance || {};
  const aud = narrative.audience || {};
  const cont = narrative.content || {};
  const sent = narrative.sentiment;
  const strat = narrative.strategy || {};

  const erBenchLabel = platform === 'tiktok'
    ? 'Benchmark engagement rate TikTok pasar Indonesia: <3% rendah · 3-6% sehat · >6% excellent'
    : 'Benchmark engagement rate Instagram pasar Indonesia: <1% rendah · 1-3% sehat · >3% excellent';

  const reportTree = (
    <div className="report-print-shell">
      <div className="report-overlay">
        <div className="report-controls">
          <button className="primary" onClick={() => window.print()}>🖨 Print PDF</button>
          <button onClick={onClose}>× Tutup</button>
          <span style={{ marginLeft: 'auto', fontSize: 11.5, color: '#5a5a55' }}>
            Tip: pilih <b>"Save as PDF"</b> di dialog print untuk download.
          </span>
        </div>

        {/* ───────── COVER ───────── */}
        <div className="report-page">
          <div className="rp-cover">
            <div className="brand-mark">Rinta · Brand Intelligence</div>
            <h1>Brand Performance Report</h1>
            <p className="lede">
              Analisa efektivitas social media terhadap pertumbuhan brand, ekuitas top-of-mind, dan potensi konversi penjualan — disusun berdasarkan data {platformLabel} pasar Indonesia.
            </p>
            <div className="divider" />
            <div className="meta-grid">
              <div className="meta-item"><div className="lbl">Brand</div><div className="val">{brand}</div></div>
              <div className="meta-item"><div className="lbl">Platform</div><div className="val">{platformEmoji} {platformLabel}</div></div>
              <div className="meta-item"><div className="lbl">Periode Analisa</div><div className="val">{periodLabel}</div></div>
              <div className="meta-item"><div className="lbl">Disusun</div><div className="val">{rpFmtDate(generatedAt || new Date())}</div></div>
            </div>
            <div className="footer-note">
              Laporan ini disusun untuk konsumsi internal pemilik brand, dewan komisaris, dan investor. Berisi observasi data, interpretasi analitis, dan rekomendasi strategis berbasis data scrape publik dari platform {platformLabel}. {userName ? `Disusun oleh ${userName}.` : ''}
            </div>
          </div>
        </div>

        {/* ───────── 01 · EXECUTIVE SUMMARY ───────── */}
        <div className="report-page">
          <RpHeader brand={brand} platform={platformLabel} periodLabel={periodLabel} sectionNum="01" sectionLabel="Executive Summary" />
          <div className="rp-eyebrow">Ringkasan Eksekutif</div>
          <h2 className="rp-title serif">State of Brand di {platformLabel}</h2>
          <div className="rp-subtitle">Highlight performa & posisi strategis pada periode pengamatan.</div>

          {exec.headline && (
            <div className="rp-headline">"{exec.headline}"</div>
          )}

          <div className="rp-body">
            {String(exec.overview || '').split(/\n\n+/).map((para, i) => (
              <p key={i}>{para.trim()}</p>
            ))}
          </div>

          {Array.isArray(exec.keyMetrics) && exec.keyMetrics.length > 0 && (
            <div className="rp-stat-grid">
              {exec.keyMetrics.slice(0, 4).map((m, i) => (
                <div key={i} className="rp-stat-card">
                  <span className="rp-stat-label">{m.label}</span>
                  <span className="rp-stat-value">{m.value}</span>
                  <span className="rp-stat-insight">{m.insight}</span>
                </div>
              ))}
            </div>
          )}

          {v.headline && (
            <div className="rp-verdict-card" style={{ marginTop: 26 }}>
              <div className={`rp-score-circle ${ratingClass(v.rating)}`}>
                <div className="num">{v.score ?? '—'}</div>
                <div className="out">/ 10</div>
              </div>
              <div className="rp-verdict-text">
                <span className="rp-verdict-rating">Effectiveness Verdict · {v.rating}</span>
                <span className="rp-verdict-headline">{v.headline}</span>
              </div>
            </div>
          )}
        </div>

        {/* ───────── 02 · PERFORMANCE ───────── */}
        <div className="report-page">
          <RpHeader brand={brand} platform={platformLabel} periodLabel={periodLabel} sectionNum="02" sectionLabel="Performance Snapshot" />
          <div className="rp-eyebrow">Performa</div>
          <h2 className="rp-title serif">Trajectory & Benchmark</h2>
          <div className="rp-subtitle">
            <span className={`rp-bench ${perf.benchmarkVerdict || 'on-par'}`}>{(perf.benchmarkVerdict || 'on-par').replace('-', ' ')}</span>
            <span style={{ marginLeft: 12 }}>vs industri</span>
          </div>

          <div className="rp-stat-grid">
            <div className="rp-stat-card">
              <span className="rp-stat-label">Total Reach</span>
              <span className="rp-stat-value">{rpFmtNum(stats.totalViews)}</span>
              <span className="rp-stat-insight">Cumulative impressions across konten.</span>
            </div>
            <div className="rp-stat-card">
              <span className="rp-stat-label">Engagement Rate</span>
              <span className="rp-stat-value">{rpFmtPct(stats.avgEngagementRate)}</span>
              <span className="rp-stat-insight">Avg per konten tertimbang reach.</span>
            </div>
            <div className="rp-stat-card">
              <span className="rp-stat-label">Total Likes</span>
              <span className="rp-stat-value">{rpFmtNum(stats.totalLikes)}</span>
              <span className="rp-stat-insight">Sinyal apresiasi audience.</span>
            </div>
            <div className="rp-stat-card">
              <span className="rp-stat-label">Total Komentar</span>
              <span className="rp-stat-value">{rpFmtNum(stats.totalComments)}</span>
              <span className="rp-stat-insight">Sinyal keterlibatan aktif.</span>
            </div>
          </div>

          <div className="rp-body">
            {String(perf.narrative || '').split(/\n\n+/).map((para, i) => (
              <p key={i}>{para.trim()}</p>
            ))}
          </div>

          <div className="rp-callout">
            <div className="label">Benchmark Context</div>
            {perf.benchmarkContext || erBenchLabel}
          </div>

          {weeklyTimeline.length > 0 && (
            <div style={{ marginTop: 18 }}>
              <div className="rp-eyebrow">Weekly Trajectory</div>
              <table className="rp-table">
                <thead>
                  <tr>
                    <th>Minggu</th>
                    <th className="num" style={{ textAlign: 'right' }}>Konten</th>
                    <th className="num" style={{ textAlign: 'right' }}>Reach</th>
                    <th className="num" style={{ textAlign: 'right' }}>Likes</th>
                    <th className="num" style={{ textAlign: 'right' }}>Komentar</th>
                    <th className="num" style={{ textAlign: 'right' }}>Δ Reach</th>
                  </tr>
                </thead>
                <tbody>
                  {weeklyTimeline.slice(-8).map((w, i) => (
                    <tr key={i}>
                      <td>{w.weekLabel}</td>
                      <td className="num">{w.videoCount ?? w.postCount}</td>
                      <td className="num">{rpFmtNum(w.views)}</td>
                      <td className="num">{rpFmtNum(w.likes)}</td>
                      <td className="num">{rpFmtNum(w.comments)}</td>
                      <td className="num" style={{ color: w.viewsGrowthPct == null ? '#8a8775' : (w.viewsGrowthPct > 0 ? '#16a34a' : '#dc2626') }}>
                        {w.viewsGrowthPct == null ? '—' : (w.viewsGrowthPct > 0 ? '+' : '') + w.viewsGrowthPct + '%'}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>

        {/* ───────── 03 · AUDIENCE & INFLUENCE ───────── */}
        <div className="report-page">
          <RpHeader brand={brand} platform={platformLabel} periodLabel={periodLabel} sectionNum="03" sectionLabel="Audience & Influence" />
          <div className="rp-eyebrow">Audience</div>
          <h2 className="rp-title serif">Profil Influence & KOL Ecosystem</h2>
          <div className="rp-subtitle">Distribusi creator yang menarik brand & kualitas reach yang dihasilkan.</div>

          <div className="rp-body">
            {String(aud.narrative || '').split(/\n\n+/).map((para, i) => (
              <p key={i}>{para.trim()}</p>
            ))}
          </div>

          {/* Tier breakdown */}
          {audienceTiers.total > 0 && (
            <div style={{ margin: '18px 0' }}>
              <div className="rp-eyebrow">Creator Tier Distribution</div>
              <table className="rp-table">
                <thead>
                  <tr>
                    <th>Tier</th>
                    <th>Definisi</th>
                    <th className="num" style={{ textAlign: 'right' }}>Creator</th>
                    <th className="num" style={{ textAlign: 'right' }}>Share</th>
                  </tr>
                </thead>
                <tbody>
                  {[
                    { k: 'nano', label: 'Nano', def: '< 10K follower — autentik & organik' },
                    { k: 'micro', label: 'Micro', def: '10K-100K — sweet spot ROI tinggi' },
                    { k: 'mid', label: 'Mid', def: '100K-500K — mass awareness' },
                    { k: 'macro', label: 'Macro', def: '500K-1M — premium reach' },
                    { k: 'mega', label: 'Mega', def: '> 1M — campaign besar' },
                  ].map((t) => {
                    const n = audienceTiers[t.k] || 0;
                    const pct = audienceTiers.total > 0 ? Math.round((n / audienceTiers.total) * 100) : 0;
                    return (
                      <tr key={t.k}>
                        <td><b>{t.label}</b></td>
                        <td style={{ color: '#5a5a55' }}>{t.def}</td>
                        <td className="num">{n}</td>
                        <td className="num">{pct}%</td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          )}

          {aud.tierStrategy && (
            <div className="rp-callout">
              <div className="label">Tier Strategy</div>
              {aud.tierStrategy}
            </div>
          )}

          {topCreators.length > 0 && (
            <div style={{ marginTop: 18 }}>
              <div className="rp-eyebrow">Top Creators (KOL Candidates)</div>
              <table className="rp-table">
                <thead>
                  <tr>
                    <th>Creator</th>
                    <th className="num" style={{ textAlign: 'right' }}>Follower</th>
                    <th className="num" style={{ textAlign: 'right' }}>Posts</th>
                    <th className="num" style={{ textAlign: 'right' }}>Reach</th>
                    <th className="num" style={{ textAlign: 'right' }}>ER</th>
                  </tr>
                </thead>
                <tbody>
                  {topCreators.slice(0, 7).map((c, i) => (
                    <tr key={i}>
                      <td><b>@{c.author}</b>{c.verified && <span style={{ color: '#1d4ed8', marginLeft: 4 }}>✓</span>}</td>
                      <td className="num">{rpFmtNum(c.fans)}</td>
                      <td className="num">{c.posts}</td>
                      <td className="num">{rpFmtNum(c.totalViews)}</td>
                      <td className="num">{rpFmtPct(c.avgEngagementRate)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>

        {/* ───────── 04 · CONTENT & THEME ───────── */}
        <div className="report-page">
          <RpHeader brand={brand} platform={platformLabel} periodLabel={periodLabel} sectionNum="04" sectionLabel="Content & Theme" />
          <div className="rp-eyebrow">Content Effectiveness</div>
          <h2 className="rp-title serif">Tema & Format yang Resonate</h2>
          <div className="rp-subtitle">Apa yang mendorong engagement & top-of-mind perception.</div>

          <div className="rp-body">
            {String(cont.narrative || '').split(/\n\n+/).map((para, i) => (
              <p key={i}>{para.trim()}</p>
            ))}
          </div>

          {Array.isArray(cont.winningFormats) && cont.winningFormats.length > 0 && (
            <div style={{ margin: '18px 0' }}>
              <div className="rp-eyebrow">Winning Formats</div>
              <div className="rp-tags">
                {cont.winningFormats.map((f, i) => <span key={i} className="rp-tag">{f}</span>)}
              </div>
            </div>
          )}

          {topHashtags.length > 0 && (
            <div style={{ marginTop: 14 }}>
              <div className="rp-eyebrow">Top Hashtags / Themes</div>
              <table className="rp-table">
                <thead>
                  <tr>
                    <th>Hashtag</th>
                    <th className="num" style={{ textAlign: 'right' }}>Frekuensi</th>
                    <th className="num" style={{ textAlign: 'right' }}>Cumulative Reach</th>
                  </tr>
                </thead>
                <tbody>
                  {topHashtags.slice(0, 8).map((h, i) => (
                    <tr key={i}>
                      <td>#{h.tag}</td>
                      <td className="num">{h.freq}×</td>
                      <td className="num">{rpFmtNum(h.totalViews ?? h.totalReach ?? 0)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}

          {topContent.length > 0 && (
            <div style={{ marginTop: 18 }}>
              <div className="rp-eyebrow">Top Performing Content</div>
              <table className="rp-table">
                <thead>
                  <tr>
                    <th style={{ width: '55%' }}>Konten</th>
                    <th>Creator</th>
                    <th className="num" style={{ textAlign: 'right' }}>Reach</th>
                  </tr>
                </thead>
                <tbody>
                  {topContent.slice(0, 5).map((c, i) => (
                    <tr key={i}>
                      <td style={{ color: '#2a2a28' }}>{(c.caption || '').slice(0, 110)}{(c.caption || '').length > 110 ? '…' : ''}</td>
                      <td>@{c.author}</td>
                      <td className="num">{rpFmtNum(c.views)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>

        {/* ───────── 05 · CUSTOMER VOICE (conditional) ───────── */}
        {sent && commentStats && commentStats.totalScraped > 0 && (
          <div className="report-page">
            <RpHeader brand={brand} platform={platformLabel} periodLabel={periodLabel} sectionNum="05" sectionLabel="Customer Voice" />
            <div className="rp-eyebrow">Sentiment</div>
            <h2 className="rp-title serif">Suara Konsumen & Brand Health</h2>
            <div className="rp-subtitle">
              Analisa {rpFmtNum(commentStats.totalScraped)} komentar dari {commentStats.videosWithComments || 0} konten · Coverage {commentStats.coverage || 0}%.
            </div>

            <div className="rp-sentiment-row">
              <span className="rp-eyebrow" style={{ margin: 0 }}>Overall Sentiment</span>
              {commentAi && (
                <span className={`rp-sentiment-pill ${sentimentClass(commentAi.overallSentiment)}`}>
                  {commentAi.overallSentiment || 'mixed'}
                </span>
              )}
            </div>

            <div className="rp-body">
              {String(sent.narrative || '').split(/\n\n+/).map((para, i) => (
                <p key={i}>{para.trim()}</p>
              ))}
            </div>

            {commentAi && commentAi.complaints && commentAi.complaints.length > 0 && (
              <div style={{ marginTop: 18 }}>
                <div className="rp-eyebrow">Keluhan Utama</div>
                <table className="rp-table">
                  <thead>
                    <tr>
                      <th>Tema</th>
                      <th>Action Recommended</th>
                      <th className="num" style={{ textAlign: 'right' }}>Frek</th>
                    </tr>
                  </thead>
                  <tbody>
                    {commentAi.complaints.slice(0, 5).map((c, i) => (
                      <tr key={i}>
                        <td><b>{c.theme}</b></td>
                        <td style={{ color: '#5a5a55' }}>{c.action || '—'}</td>
                        <td className="num">{c.frequency || '—'}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}

            {Array.isArray(sent.riskAreas) && sent.riskAreas.length > 0 && (
              <div className="rp-callout" style={{ borderLeftColor: '#dc2626', background: '#fef2f2' }}>
                <div className="label" style={{ color: '#dc2626' }}>Reputational Risk Areas</div>
                <ul style={{ margin: '6px 0 0', paddingLeft: 18 }}>
                  {sent.riskAreas.map((r, i) => <li key={i} style={{ marginBottom: 4 }}>{r}</li>)}
                </ul>
              </div>
            )}
          </div>
        )}

        {/* ───────── 06 · STRATEGY & RECOMMENDATIONS ───────── */}
        <div className="report-page">
          <RpHeader brand={brand} platform={platformLabel} periodLabel={periodLabel} sectionNum={sent && commentStats?.totalScraped > 0 ? '06' : '05'} sectionLabel="Strategy & Roadmap" />
          <div className="rp-eyebrow">Strategi</div>
          <h2 className="rp-title serif">Forward Outlook & Action Plan</h2>
          <div className="rp-subtitle">Apa yang harus dieksekusi untuk meningkatkan ROI social media terhadap brand growth.</div>

          <div className="rp-body">
            {String(strat.narrative || '').split(/\n\n+/).map((para, i) => (
              <p key={i}>{para.trim()}</p>
            ))}
          </div>

          {Array.isArray(strat.recommendations) && strat.recommendations.length > 0 && (
            <div style={{ marginTop: 20 }}>
              <div className="rp-eyebrow">Prioritized Recommendations</div>
              <div className="rp-rec-list">
                {strat.recommendations.map((r, i) => (
                  <div key={i} className="rp-rec">
                    <span className={`pri ${r.priority || 'P1'}`}>{r.priority || 'P1'}</span>
                    <div>
                      <div className="area">{r.area}</div>
                      <div className="action">{r.action}</div>
                      <div className="meta">
                        <div><b>Rationale:</b> {r.rationale}</div>
                        <div><b>Impact:</b> {r.expectedImpact}</div>
                        <div style={{ gridColumn: '1 / -1' }}><b>Timeframe:</b> {r.timeframe}</div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {strat.roadmap && (
            <div style={{ marginTop: 20 }}>
              <div className="rp-eyebrow">Strategic Roadmap</div>
              <div className="rp-roadmap">
                <div className="rp-roadmap-col">
                  <div className="when">0-30 Hari</div>
                  <ul>{(strat.roadmap.next30Days || []).map((x, i) => <li key={i}>{x}</li>)}</ul>
                </div>
                <div className="rp-roadmap-col">
                  <div className="when">1-3 Bulan</div>
                  <ul>{(strat.roadmap.next90Days || []).map((x, i) => <li key={i}>{x}</li>)}</ul>
                </div>
                <div className="rp-roadmap-col">
                  <div className="when">3-12 Bulan</div>
                  <ul>{(strat.roadmap.nextYear || []).map((x, i) => <li key={i}>{x}</li>)}</ul>
                </div>
              </div>
            </div>
          )}
        </div>

        {/* ───────── 07 · VERDICT ───────── */}
        <div className="report-page">
          <RpHeader brand={brand} platform={platformLabel} periodLabel={periodLabel} sectionNum={sent && commentStats?.totalScraped > 0 ? '07' : '06'} sectionLabel="Effectiveness Verdict" />
          <div className="rp-eyebrow">Verdict</div>
          <h2 className="rp-title serif">Final Assessment & Next Review</h2>
          <div className="rp-subtitle">Posisi brand {brand} di {platformLabel} pada {periodLabel.toLowerCase()}.</div>

          <div className="rp-verdict-card">
            <div className={`rp-score-circle ${ratingClass(v.rating)}`}>
              <div className="num">{v.score ?? '—'}</div>
              <div className="out">/ 10</div>
            </div>
            <div className="rp-verdict-text">
              <span className="rp-verdict-rating">{v.rating || '—'}</span>
              <span className="rp-verdict-headline">{v.headline || '—'}</span>
            </div>
          </div>

          <div className="rp-twocol">
            <div className="rp-twocol-card driver">
              <div className="head">Key Drivers</div>
              <ul>{(v.keyDrivers || []).map((d, i) => <li key={i}>{d}</li>)}</ul>
            </div>
            <div className="rp-twocol-card risk">
              <div className="head">Key Risks</div>
              <ul>{(v.keyRisks || []).map((r, i) => <li key={i}>{r}</li>)}</ul>
            </div>
          </div>

          <div className="rp-callout" style={{ marginTop: 16 }}>
            <div className="label">Next Review</div>
            Direkomendasikan untuk refresh data dan review ulang dalam <b>{v.nextReviewIn || '30 hari'}</b>. Cadence ini memungkinkan tim brand memantau dampak eksekusi rekomendasi terhadap KPI yang sudah ditetapkan.
          </div>

          <div style={{ marginTop: 40, paddingTop: 18, borderTop: '1px solid #e6e4dd', fontSize: 10.5, color: '#8a8775', lineHeight: 1.6 }}>
            <b>Metodologi.</b> Data dikumpulkan dari scraping publik konten {platformLabel} yang menyebut atau ditandai dengan brand <b>{brand}</b> dalam {periodLabel.toLowerCase()}. Sampel: {stats.videoCount || stats.postCount || dashboard.filteredCount || '—'} konten, {commentStats?.totalScraped ? `${commentStats.totalScraped} komentar dianalisa` : 'komentar belum di-scrape'}. Analisa & rekomendasi berbasis pattern data, benchmark industri, dan kerangka analyst brand-intelligence. Laporan ini bersifat advisory — keputusan akhir tetap di tangan pemilik brand atau pemangku keputusan. Disusun oleh Rinta · {rpFmtDate(generatedAt || new Date())}.
          </div>
        </div>
      </div>
    </div>
  );
  return window.ReactDOM && window.ReactDOM.createPortal
    ? window.ReactDOM.createPortal(reportTree, document.body)
    : reportTree;
}

window.SocialReportView = SocialReportView;
