/* screen-brand-list-pages.jsx — Campaigns list + Reports list + Influencer detail */
/* global React, AppSidebar, AppTopbar, useRouter, useT, Counter, Sparkline, BarChart, LineChart, Donut, Avatar, Pill, MatchCircle, Icon, useInView */

const MOCK_CAMPAIGNS = [
  { id: 'C-1182', name: 'Vitamin C Skin Glow', status: 'live', day: 14, total: 28, reach: 4.8, er: 6.2, spend: 32, budget: 45, kols: 3, color: 'var(--cyan)' },
  { id: 'C-1180', name: 'SPF Glow Summer Tour', status: 'live', day: 7, total: 21, reach: 2.1, er: 5.4, spend: 18, budget: 28, kols: 4, color: 'var(--mint-deep)' },
  { id: 'C-1179', name: 'Tet Fashion Cleanup', status: 'review', day: 0, total: 14, reach: 0, er: 0, spend: 4, budget: 20, kols: 6, color: 'var(--indigo)' },
  { id: 'C-1176', name: 'Coffee Drop · Highland', status: 'completed', day: 21, total: 21, reach: 3.6, er: 4.8, spend: 18, budget: 18, kols: 5, color: 'var(--coral)' },
  { id: 'C-1172', name: 'Q1 Smart Kettle', status: 'completed', day: 28, total: 28, reach: 1.4, er: 3.8, spend: 8, budget: 10, kols: 3, color: 'var(--lavender-deep)' },
];

function statusPill(s, t) {
  const map = {
    live:      { variant: 'mint', icon: <span style={{ width: 6, height: 6, borderRadius: 999, background: 'currentColor', display: 'inline-block', animation: 'pulse 1.5s infinite' }} /> },
    review:    { variant: 'yellow' },
    completed: { variant: 'cyan' },
    draft:     { variant: 'lav' },
  };
  const cfg = map[s] || map.draft;
  return <Pill variant={cfg.variant} icon={cfg.icon}>{t(`status.${s}`)}</Pill>;
}

// ── Campaigns list ──────────────────────────────────────────────────
function ScreenBrandCampaigns() {
  const { t } = useT();
  const { go } = useRouter();
  return (
    <div className="app-shell">
      <AppSidebar portal="brand" active="brand-campaigns" />
      <main className="main">
        <AppTopbar />

        <div className="row items-end justify-between mb-6">
          <div>
            <span className="pill pill-cyan">{MOCK_CAMPAIGNS.length} {t('brand.campaigns.title').toLowerCase()}</span>
            <h1 className="page-title" style={{ marginTop: 8 }}>{t('brand.campaigns.title')}</h1>
            <div className="page-subtitle">{t('brand.campaigns.subtitle')}</div>
          </div>
          <div className="row gap-8">
            <button className="btn btn-ghost btn-sm">{Icon.filter} {t('common.filter')}</button>
            <button className="btn btn-primary btn-sm" onClick={() => go('brand-campaign-new')}>{Icon.plus} New campaign</button>
          </div>
        </div>

        {/* KPI summary row */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
          {[
            { l: 'Active campaigns', v: 2, c: 'var(--mint-deep)' },
            { l: 'Total reach', v: 8.4, suf: 'M', c: 'var(--cyan)' },
            { l: 'Spend this month', v: 72, pre: '$', suf: 'K', c: 'var(--indigo)' },
            { l: 'Avg. ER', v: 5.4, suf: '%', dec: 1, c: 'var(--pink-hot)' }
          ].map((k, i) => <SummaryKpi key={i} {...k} index={i} />)}
        </div>

        {/* Campaign cards grid */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(360px, 1fr))', gap: 14, marginTop: 18 }}>
          {MOCK_CAMPAIGNS.map((c, i) => (
            <div key={c.id} className="card-elevated" style={{ padding: 0, overflow: 'hidden', cursor: 'pointer',
              animation: `cardIn .5s ${i * 80}ms backwards cubic-bezier(.4,0,.2,1)` }}
              onClick={() => go('brand-campaign-detail')}>
              <div style={{ height: 6, background: c.color }} />
              <div style={{ padding: 18 }}>
                <div className="row items-center justify-between mb-2">
                  <div className="font-display bold" style={{ fontSize: 17, letterSpacing: '-0.015em' }}>{c.name}</div>
                  {statusPill(c.status, t)}
                </div>
                <div className="muted" style={{ fontSize: 12 }}>{c.id} · Day {c.day} / {c.total}</div>

                {/* Progress */}
                <div style={{ height: 4, background: 'var(--bg-soft)', borderRadius: 999, marginTop: 12, overflow: 'hidden' }}>
                  <div style={{
                    height: '100%', width: (c.day / c.total * 100) + '%',
                    background: c.color, borderRadius: 999,
                    transformOrigin: 'left', animation: `grow-w 1.1s ${0.3 + i * 0.08}s cubic-bezier(.4,0,.2,1) both`, transform: 'scaleX(0)'
                  }} />
                </div>

                {/* KPIs */}
                <div className="row gap-16 mt-4">
                  <div className="flex-1">
                    <div className="cap-label" style={{ fontSize: 9 }}>{t('common.reach')}</div>
                    <div className="font-display bold tabular" style={{ fontSize: 22 }}>{c.reach}M</div>
                  </div>
                  <div className="flex-1">
                    <div className="cap-label" style={{ fontSize: 9 }}>ER</div>
                    <div className="font-display bold tabular" style={{ fontSize: 22 }}>{c.er}%</div>
                  </div>
                  <div className="flex-1">
                    <div className="cap-label" style={{ fontSize: 9 }}>Spend</div>
                    <div className="font-display bold tabular" style={{ fontSize: 22 }}>${c.spend}K</div>
                  </div>
                  <div className="flex-1">
                    <div className="cap-label" style={{ fontSize: 9 }}>KOLs</div>
                    <div className="font-display bold tabular" style={{ fontSize: 22 }}>{c.kols}</div>
                  </div>
                </div>

                {/* Avatar stack */}
                <div className="row items-center justify-between mt-4" style={{ paddingTop: 12, borderTop: '1px solid var(--line)' }}>
                  <div className="avatar-stack">
                    {['LC', 'MV', 'HG', 'PA'].slice(0, c.kols).map((n, j) => (
                      <div key={j} className="av" style={{ background: ['linear-gradient(135deg,#009CFF,#1C1CC9)', 'linear-gradient(135deg,#FF6FA3,#1C1CC9)', 'linear-gradient(135deg,#1FD6B4,#009CFF)', 'linear-gradient(135deg,#FEE960,#FF7A59)'][j] }}>{n}</div>
                    ))}
                  </div>
                  <span className="row items-center gap-4 muted" style={{ fontSize: 12, fontWeight: 600 }}>
                    View details {Icon.arrow}
                  </span>
                </div>
              </div>
            </div>
          ))}
        </div>
        <style>{`@keyframes cardIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }`}</style>
      </main>
    </div>
  );
}

function SummaryKpi({ l, v, pre = '', suf = '', dec = 0, c, index }) {
  const [ref, inView] = useInView();
  return (
    <div ref={ref} className="card-elevated" style={{
      padding: 18,
      opacity: inView ? 1 : 0,
      transform: inView ? 'translateY(0)' : 'translateY(20px)',
      transition: `opacity .8s ${index * 80}ms, transform .8s ${index * 80}ms`
    }}>
      <div className="cap-label">{l}</div>
      <div className="font-display tabular" style={{ fontSize: 32, fontWeight: 700, letterSpacing: '-0.03em', marginTop: 6, color: c }}>
        {inView && <Counter to={v} prefix={pre} suffix={suf} decimals={dec} duration={1500} />}
      </div>
    </div>
  );
}

// ── Reports list ────────────────────────────────────────────────────
const MOCK_REPORTS = [
  { id: 'R-1182', campaign: 'Vitamin C Skin Glow', status: 'live', reach: 4.8, er: 6.2, vsPlan: 38, generated: '2m ago', highlight: 'Beat plan by 38% — re-book Linh Châu for Q3.' },
  { id: 'R-1180', campaign: 'SPF Glow Summer Tour', status: 'live', reach: 2.1, er: 5.4, vsPlan: 12, generated: '14m ago', highlight: 'On track, slight under-performance on YouTube.' },
  { id: 'R-1176', campaign: 'Coffee Drop · Highland', status: 'completed', reach: 3.6, er: 4.8, vsPlan: 18, generated: '4d ago', highlight: 'Strong morning slot. Saturate Mai Vy audience.' },
  { id: 'R-1172', campaign: 'Q1 Smart Kettle', status: 'completed', reach: 1.4, er: 3.8, vsPlan: -8, generated: '1w ago', highlight: 'Under-performed; gift-context misalignment.' },
  { id: 'R-1168', campaign: 'New Year Cleanup', status: 'completed', reach: 5.2, er: 7.4, vsPlan: 42, generated: '3w ago', highlight: 'Top performer of Q1. Repeat playbook.' },
];

function ScreenBrandReports() {
  const { t } = useT();
  const { go } = useRouter();
  return (
    <div className="app-shell">
      <AppSidebar portal="brand" active="brand-reports" />
      <main className="main">
        <AppTopbar />
        <div className="row items-end justify-between mb-6">
          <div>
            <span className="pill pill-cyan">{MOCK_REPORTS.length} {t('brand.reports.title').toLowerCase()}</span>
            <h1 className="page-title" style={{ marginTop: 8 }}>{t('brand.reports.title')}</h1>
            <div className="page-subtitle">{t('brand.reports.subtitle')}</div>
          </div>
          <div className="row gap-8">
            <button className="btn btn-ghost btn-sm">{Icon.external} {t('topbar.export')} all</button>
            <button className="btn btn-primary btn-sm">{Icon.spark} Compare</button>
          </div>
        </div>

        {/* Featured report (latest) */}
        <div className="card-elevated mb-6" style={{
          padding: 24,
          background: 'linear-gradient(135deg, #002B50 0%, #1C1CC9 100%)',
          color: 'white', position: 'relative', overflow: 'hidden'
        }}>
          <div style={{
            position: 'absolute', top: -60, right: -60,
            width: 220, height: 220, borderRadius: '50%',
            background: 'radial-gradient(circle, rgba(121,254,231,0.45), transparent 60%)',
            filter: 'blur(20px)'
          }} />
          <div className="row items-start gap-16" style={{ position: 'relative', zIndex: 1 }}>
            <div className="orb" />
            <div className="flex-1">
              <Pill variant="dark"><span style={{ color: 'var(--mint)' }}>●</span> Newest · 2m ago</Pill>
              <div className="font-display" style={{ fontSize: 26, fontWeight: 700, marginTop: 12, lineHeight: 1.2, letterSpacing: '-0.02em' }}>
                Vitamin C launch beat plan by <span style={{ color: 'var(--mint)' }}><Counter to={38} />%</span>.
                <br />Re-book <span style={{ color: 'var(--mint)' }}>Linh Châu</span> for Q3.
              </div>
              <button className="btn btn-yellow btn-sm mt-4" onClick={() => go('brand-campaign-detail')}>Open full report {Icon.arrow}</button>
            </div>
          </div>
        </div>

        {/* List */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {MOCK_REPORTS.map((r, i) => (
            <div key={r.id} className="card-elevated" style={{ padding: 18, cursor: 'pointer',
              animation: `slideIn .5s ${i * 80}ms backwards cubic-bezier(.4,0,.2,1)` }}
              onClick={() => go('brand-campaign-detail')}>
              <div className="row items-center gap-16">
                <div style={{
                  width: 42, height: 42, borderRadius: 12,
                  background: ['var(--cyan)', 'var(--mint-deep)', 'var(--coral)', 'var(--indigo)', 'var(--pink-hot)'][i % 5],
                  color: 'white', display: 'grid', placeItems: 'center',
                  fontFamily: 'Space Grotesk', fontWeight: 800, fontSize: 12
                }}>{r.id.slice(-3)}</div>
                <div className="flex-1">
                  <div className="row items-center gap-8">
                    <div className="bold" style={{ fontSize: 14 }}>{r.campaign}</div>
                    {statusPill(r.status, t)}
                  </div>
                  <div className="muted" style={{ fontSize: 12, marginTop: 2 }}>{r.highlight}</div>
                </div>
                <div className="row gap-16" style={{ paddingRight: 16 }}>
                  <div className="text-right">
                    <div className="cap-label" style={{ fontSize: 9 }}>Reach</div>
                    <div className="font-display bold tabular" style={{ fontSize: 16 }}>{r.reach}M</div>
                  </div>
                  <div className="text-right">
                    <div className="cap-label" style={{ fontSize: 9 }}>ER</div>
                    <div className="font-display bold tabular" style={{ fontSize: 16 }}>{r.er}%</div>
                  </div>
                  <div className="text-right" style={{ minWidth: 70 }}>
                    <div className="cap-label" style={{ fontSize: 9 }}>vs plan</div>
                    <Pill variant={r.vsPlan >= 0 ? 'mint' : 'pink'} icon={r.vsPlan >= 0 ? Icon.trend : Icon.trendDown}>
                      {r.vsPlan > 0 ? '+' : ''}{r.vsPlan}%
                    </Pill>
                  </div>
                </div>
                <div className="muted" style={{ fontSize: 11, minWidth: 80, textAlign: 'right' }}>{r.generated}</div>
                {Icon.arrow}
              </div>
            </div>
          ))}
        </div>
        <style>{`@keyframes slideIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }`}</style>
      </main>
    </div>
  );
}

// ── Influencer profile ──────────────────────────────────────────────
function ScreenBrandInfluencerDetail() {
  const { t } = useT();
  const { go } = useRouter();
  return (
    <div className="app-shell">
      <AppSidebar portal="brand" active="brand-discovery" />
      <main className="main">
        <AppTopbar />

        <div className="row items-center gap-6 muted mb-4" style={{ fontSize: 12 }}>
          <a onClick={() => go('brand-discovery')} style={{ cursor: 'pointer' }}>{t('nav.discovery')}</a>
          <span>·</span>
          <span className="bold" style={{ color: 'var(--ink)' }}>Linh Châu</span>
        </div>

        {/* Hero strip */}
        <div className="card-elevated" style={{
          padding: 28,
          background: 'linear-gradient(135deg, #EAC2FB 0%, #FFC3D6 60%, #79FEE7 100%)',
          color: 'var(--ink)',
          position: 'relative', overflow: 'hidden'
        }}>
          <div style={{
            position: 'absolute', top: -60, right: -60,
            width: 260, height: 260, borderRadius: '50%',
            background: 'rgba(255,255,255,0.4)', filter: 'blur(40px)'
          }} />
          <div className="row items-center gap-24" style={{ position: 'relative', zIndex: 1 }}>
            <div style={{ position: 'relative' }}>
              <Avatar name="Linh Châu" size={120} />
              <div style={{ position: 'absolute', bottom: 0, right: 0 }}>{Icon.verified}</div>
            </div>
            <div className="flex-1">
              <div className="row items-center gap-8 mb-2">
                <h1 className="font-display" style={{ fontSize: 44, fontWeight: 700, margin: 0, letterSpacing: '-0.025em' }}>Linh Châu</h1>
                <Pill variant="dark"><span style={{ color: 'var(--mint)' }}>●</span> Active</Pill>
              </div>
              <div style={{ fontSize: 15, fontWeight: 600 }}>@linhchau · Skincare · Beauty · Ho Chi Minh</div>
              <div className="row gap-6 mt-3">
                <Pill variant="lav">Micro · 482K</Pill>
                <Pill variant="mint">6.2% ER</Pill>
                <Pill variant="yellow">Top 8% her tier</Pill>
                <Pill variant="pink">Vegan-friendly</Pill>
              </div>
              <div className="row gap-6 mt-3">
                <div style={{ width: 32, height: 32, background: '#002B50', color: 'white', borderRadius: 8, display: 'grid', placeItems: 'center' }}>{Icon.tiktok}</div>
                <div style={{ width: 32, height: 32, background: '#FF6FA3', color: 'white', borderRadius: 8, display: 'grid', placeItems: 'center' }}>{Icon.instagram}</div>
                <div style={{ width: 32, height: 32, background: '#FF4444', color: 'white', borderRadius: 8, display: 'grid', placeItems: 'center' }}>{Icon.youtube}</div>
              </div>
            </div>
            <div className="text-center">
              <MatchCircle score={94} size={120} label="Match" />
              <div className="row gap-8 mt-3">
                <button className="btn btn-ghost btn-sm">{Icon.external} View public</button>
                <button className="btn btn-primary btn-sm">{Icon.plus} Add to campaign</button>
              </div>
            </div>
          </div>
        </div>

        {/* Tabs */}
        <div className="row gap-4 mt-6" style={{ borderBottom: '1px solid var(--line)' }}>
          {[
            { l: 'Overview', id: 'overview', active: true },
            { l: t('brand.influencerDetail.audience'), id: 'audience' },
            { l: t('brand.influencerDetail.content'), id: 'content' },
            { l: t('brand.influencerDetail.stats'), id: 'stats' },
            { l: t('brand.influencerDetail.rateCard'), id: 'rate' },
          ].map((tab, i) => (
            <button key={tab.id} style={{
              background: 'transparent', border: 0,
              padding: '12px 14px', fontSize: 13, fontWeight: 700, fontFamily: 'inherit',
              color: tab.active ? 'var(--ink)' : 'var(--ink-soft)',
              borderBottom: '2px solid ' + (tab.active ? 'var(--ink)' : 'transparent'),
              marginBottom: -1, cursor: 'pointer'
            }}>{tab.l}</button>
          ))}
        </div>

        {/* KPI row */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginTop: 18 }}>
          {[
            { l: 'Followers', v: 482, suf: 'K', c: 'var(--cyan)' },
            { l: 'Avg. ER', v: 6.2, suf: '%', dec: 1, c: 'var(--mint-deep)' },
            { l: 'Posts / month', v: 14, c: 'var(--indigo)' },
            { l: 'Avg. CPM', v: 6.12, pre: '$', dec: 2, c: 'var(--coral)' },
          ].map((k, i) => <SummaryKpi key={i} {...k} index={i} />)}
        </div>

        {/* Two columns */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 14, marginTop: 18 }}>
          {/* Growth chart */}
          <div className="card-elevated">
            <div className="title-md mb-2">Follower growth · 6 months</div>
            <div className="muted mb-3" style={{ fontSize: 12 }}>Steady 8% MoM · accelerating in last 8 weeks</div>
            <LineChart
              series={[
                { name: 'Followers (K)', color: '#009CFF', data: [310, 340, 365, 395, 422, 450, 482] },
              ]}
              xLabels={['Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May']}
              height={220}
            />
          </div>

          {/* Audience snapshot */}
          <div className="card-elevated">
            <div className="title-md mb-3">{t('brand.influencerDetail.audience')}</div>
            <div className="row items-center gap-12">
              <Donut
                data={[
                  { label: 'F', value: 78, color: '#FF6FA3' },
                  { label: 'M', value: 20, color: '#009CFF' },
                  { label: 'Other', value: 2, color: '#FEE960' },
                ]}
                size={140}
                thickness={18}
                centerLabel="Female"
                centerValue="78%"
              />
              <div className="flex-1">
                <div className="cap-label mb-2">Age</div>
                <BarChart
                  data={[
                    { label: '13–17', value: 12, color: 'var(--lavender)' },
                    { label: '18–24', value: 48, color: 'var(--pink-hot)' },
                    { label: '25–34', value: 28, color: 'var(--cyan)' },
                    { label: '35+', value: 12, color: 'var(--mint-deep)' },
                  ]}
                  height={80}
                  labelFmt={(v) => v + '%'}
                />
              </div>
            </div>
          </div>
        </div>

        {/* Recent content */}
        <div className="card-elevated mt-6">
          <div className="row items-center justify-between mb-3">
            <div>
              <div className="title-md">{t('brand.influencerDetail.content')}</div>
              <div className="muted" style={{ fontSize: 12 }}>Last 6 posts · sorted by reach</div>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 8 }}>
            {[
              { r: '1.2M', er: '7.4%', c1: '#79FEE7', c2: '#009CFF' },
              { r: '820K', er: '6.8%', c1: '#FFC3D6', c2: '#FF6FA3' },
              { r: '480K', er: '5.4%', c1: '#EAC2FB', c2: '#1C1CC9' },
              { r: '380K', er: '7.0%', c1: '#FEE960', c2: '#FF7A59' },
              { r: '320K', er: '6.4%', c1: '#79FEE7', c2: '#1FD6B4' },
              { r: '280K', er: '5.8%', c1: '#FFC3D6', c2: '#EAC2FB' },
            ].map((p, i) => (
              <div key={i} style={{
                position: 'relative', aspectRatio: '9/14', borderRadius: 10, overflow: 'hidden',
                background: `linear-gradient(135deg, ${p.c1}, ${p.c2})`,
                animation: `cardIn .5s ${i * 60}ms backwards cubic-bezier(.4,0,.2,1)` }}>
                <div style={{
                  position: 'absolute', top: '50%', left: '50%',
                  transform: 'translate(-50%, -50%)',
                  width: 32, height: 32, borderRadius: 999,
                  background: 'rgba(255,255,255,0.25)', backdropFilter: 'blur(8px)',
                  display: 'grid', placeItems: 'center', color: 'white', fontSize: 11
                }}>▶</div>
                <div style={{
                  position: 'absolute', bottom: 0, left: 0, right: 0,
                  padding: '16px 8px 8px',
                  background: 'linear-gradient(transparent, rgba(0,0,0,0.5))', color: 'white'
                }}>
                  <div className="font-display bold tabular" style={{ fontSize: 13 }}>{p.r}</div>
                  <div className="bold" style={{ fontSize: 9 }}>{p.er} ER</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Rate card */}
        <div className="card-elevated mt-6">
          <div className="title-md mb-3">{t('brand.influencerDetail.rateCard')}</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
            {[
              ['TikTok 30s video', 1.8, 'var(--cyan)'],
              ['IG reel · 15s', 1.4, 'var(--pink-hot)'],
              ['IG static · single', 0.6, 'var(--lavender-deep)'],
              ['YouTube short', 1.2, 'var(--coral)'],
            ].map(([l, p, c], i) => (
              <div key={i} style={{ padding: 14, background: 'var(--bg-soft)', borderRadius: 12 }}>
                <div style={{ width: 8, height: 8, borderRadius: 999, background: c, marginBottom: 6 }} />
                <div className="cap-label" style={{ fontSize: 9 }}>{l}</div>
                <div className="font-display bold tabular mt-1" style={{ fontSize: 22 }}>${p}K</div>
              </div>
            ))}
          </div>
          <div className="muted mt-3" style={{ fontSize: 12 }}>Rates negotiated case-by-case · self-reported. <a style={{ color: 'var(--cyan-dark)', fontWeight: 700 }}>Request custom quote</a></div>
        </div>
      </main>
    </div>
  );
}

Object.assign(window, { ScreenBrandCampaigns, ScreenBrandReports, ScreenBrandInfluencerDetail });