/* screen-creator-pages-b.jsx — Creator Campaigns list+detail + Earnings + Profile + Settings */
/* global React, AppSidebar, AppTopbar, useRouter, useT, Counter, Sparkline, LineChart, Donut, BarChart, Avatar, Pill, MatchCircle, Icon, useInView, CreatorExtraActionsHost, useCreatorActions */

// ── Creator Campaigns (list + detail in one) ──────────────────────
const CR_CAMPAIGNS = [
  { id: 'C-1182', brand: 'Coolmate', title: 'Vitamin C Skin Glow', status: 'live', day: 14, total: 28, earning: 1800, color: 'var(--cyan)', deliverables: 3, completed: 2 },
  { id: 'C-1180', brand: 'DermaPlus', title: 'SPF Glow Tour', status: 'live', day: 7, total: 21, earning: 1400, color: 'var(--mint-deep)', deliverables: 2, completed: 1 },
  { id: 'C-1176', brand: 'Highland', title: 'Coffee morning drop', status: 'completed', day: 21, total: 21, earning: 1200, color: 'var(--coral)', deliverables: 2, completed: 2 },
  { id: 'C-1170', brand: 'ClearSkin', title: 'Q1 acne reset', status: 'completed', day: 28, total: 28, earning: 2200, color: 'var(--lavender-deep)', deliverables: 3, completed: 3 },
];

function ScreenCreatorCampaigns() {
  const { t } = useT();
  const { go } = useRouter();
  return (
    <div className="app-shell" data-portal="creator">
      <AppSidebar portal="creator" active="creator-campaigns" />
      <main className="main">
        <AppTopbar showNewBrief={false} user="L" />
        <h1 className="page-title">{t('creator.campaigns.title')}</h1>
        <div className="page-subtitle">2 live · {CR_CAMPAIGNS.filter(c => c.status === 'completed').length} completed this quarter · review pending offers in <a onClick={() => go('creator-applications')} style={{ color: 'var(--cyan-dark)', cursor: 'pointer', fontWeight: 700 }}>My applications</a></div>

        {/* Awarded — accepted applications that haven't kicked off yet */}
        <div className="card-elevated mt-6" style={{ padding: 18, background: 'linear-gradient(90deg, rgba(31,214,180,0.08), rgba(0,156,255,0.04))', border: '1px solid rgba(31,214,180,0.25)' }}>
          <div className="row items-center gap-14">
            <div style={{
              width: 48, height: 48, borderRadius: 12, flexShrink: 0,
              background: 'var(--pink-hot)', color: 'white',
              display: 'grid', placeItems: 'center',
              fontFamily: 'Space Grotesk', fontWeight: 800, fontSize: 20
            }}>Y</div>
            <div className="flex-1">
              <div className="row items-center gap-8 mb-1">
                <Pill variant="mint" icon={Icon.check}>Awarded</Pill>
                <span className="muted" style={{ fontSize: 11 }}>Accepted 2 days ago · contract pending your signature</span>
              </div>
              <div className="font-display bold" style={{ fontSize: 18, letterSpacing: '-0.015em' }}>Tet 2026 fashion drop · YODY</div>
              <div className="muted" style={{ fontSize: 12 }}>$2,200 · 3 deliverables · 21-day program</div>
            </div>
            <button className="btn btn-primary btn-sm" onClick={() => go('creator-campaign-kickoff')}>
              Sign &amp; start {Icon.arrow}
            </button>
          </div>
        </div>

        {/* KPIs */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginTop: 24 }}>
          {[
            { l: 'Active campaigns', v: 2, c: 'var(--mint-deep)' },
            { l: 'Pending deliverables', v: 3, c: 'var(--yellow-deep)' },
            { l: 'Earned this Q', v: 4720, pre: '$', c: 'var(--cyan)' },
            { l: 'Avg. cycle time', v: 18, suf: ' days', c: 'var(--indigo)' }
          ].map((k, i) => (
            <div key={i} className="card-elevated" style={{ padding: 18 }}>
              <div className="cap-label">{k.l}</div>
              <div className="font-display bold tabular" style={{ fontSize: 30, color: k.c, marginTop: 6 }}>
                <Counter to={k.v} prefix={k.pre || ''} suffix={k.suf || ''} duration={1500} />
              </div>
            </div>
          ))}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(360px, 1fr))', gap: 14, marginTop: 18 }}>
          {CR_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('creator-campaign-detail')}>
              <div style={{ height: 6, background: c.color }} />
              <div style={{ padding: 18 }}>
                <div className="row items-center justify-between mb-2">
                  <div>
                    <div className="bold" style={{ fontSize: 13 }}>{c.brand}</div>
                    <div className="font-display bold" style={{ fontSize: 18, letterSpacing: '-0.015em', marginTop: 2 }}>{c.title}</div>
                  </div>
                  <Pill variant={c.status === 'live' ? 'mint' : 'cyan'}>{t(`status.${c.status}`)}</Pill>
                </div>
                <div className="muted mb-3" style={{ fontSize: 12 }}>{c.id} · Day {c.day} / {c.total}</div>

                {/* Deliverables progress */}
                <div className="row items-center gap-4 mb-2">
                  <div className="cap-label">Deliverables</div>
                  <span className="bold tabular" style={{ fontSize: 11, marginLeft: 'auto' }}>{c.completed} / {c.deliverables}</span>
                </div>
                <div className="row gap-4">
                  {Array.from({ length: c.deliverables }).map((_, j) => (
                    <div key={j} style={{
                      flex: 1, height: 6, borderRadius: 3,
                      background: j < c.completed ? c.color : 'var(--bg-soft)',
                      transformOrigin: 'left', transform: 'scaleX(0)',
                      animation: `grow-w .8s ${0.3 + i * 0.08 + j * 0.1}s cubic-bezier(.4,0,.2,1) both`
                    }} />
                  ))}
                </div>

                <div className="row items-end justify-between mt-4" style={{ paddingTop: 14, borderTop: '1px solid var(--line)' }}>
                  <div>
                    <div className="cap-label" style={{ fontSize: 9 }}>Your earnings</div>
                    <div className="font-display bold tabular" style={{ fontSize: 22 }}>${c.earning}</div>
                  </div>
                  <span className="row items-center gap-4 muted" style={{ fontSize: 12, fontWeight: 600 }}>
                    Details {Icon.arrow}
                  </span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </main>
    </div>
  );
}

// ── Creator Campaign Detail (deliverables + payment timeline) ──
function ScreenCreatorCampaignDetail() {
  const { t } = useT();
  const { go } = useRouter();
  return (
    <div className="app-shell" data-portal="creator">
      <AppSidebar portal="creator" active="creator-campaigns" />
      <main className="main">
        <AppTopbar showNewBrief={false} user="L" />

        <div className="row items-center gap-6 muted mb-4" style={{ fontSize: 12 }}>
          <a onClick={() => go('creator-campaigns')} style={{ cursor: 'pointer' }}>{t('creator.campaigns.title')}</a>
          <span>·</span>
          <span className="bold" style={{ color: 'var(--ink)' }}>Vitamin C Skin Glow · Coolmate</span>
        </div>

        {/* Quick-jump into the lifecycle flow */}
        <div className="card-elevated mb-4" style={{ padding: '14px 18px' }}>
          <div className="row items-center justify-between mb-2">
            <div className="cap-label">Campaign flow · Vitamin C Skin Glow</div>
            <span className="muted" style={{ fontSize: 11 }}>Click a step to jump in</span>
          </div>
          <div className="row items-center gap-4" style={{ flexWrap: 'wrap' }}>
            {[
              ['Kickoff',  'creator-campaign-kickoff'],
              ['Upload',   'creator-campaign-upload'],
              ['Review',   'creator-campaign-review'],
              ['Revision', 'creator-campaign-revision'],
              ['Publish',  'creator-campaign-publish'],
              ['Wrap-up',  'creator-campaign-wrap'],
            ].map(([l, r], i, arr) => (
              <React.Fragment key={r}>
                <button onClick={() => go(r)} className="row items-center gap-6" style={{
                  padding: '7px 12px 7px 7px', borderRadius: 999, border: 0, cursor: 'pointer', fontFamily: 'inherit',
                  background: 'var(--bg-soft)', color: 'var(--ink-soft)', fontWeight: 700, fontSize: 12,
                  transition: 'background .2s, color .2s'
                }}
                  onMouseEnter={e => { e.currentTarget.style.background = 'var(--ink)'; e.currentTarget.style.color = 'white'; }}
                  onMouseLeave={e => { e.currentTarget.style.background = 'var(--bg-soft)'; e.currentTarget.style.color = 'var(--ink-soft)'; }}>
                  <span style={{
                    width: 22, height: 22, borderRadius: 999, display: 'grid', placeItems: 'center', fontWeight: 800, fontSize: 11,
                    background: 'white', color: 'var(--ink-soft)'
                  }}>{i + 1}</span>
                  {l}
                </button>
                {i < arr.length - 1 && (
                  <div style={{ width: 14, height: 2, background: 'var(--line)', borderRadius: 1 }} />
                )}
              </React.Fragment>
            ))}
          </div>
        </div>

        <div className="row items-end justify-between mb-6">
          <div>
            <div className="row items-center gap-12 mb-2">
              <h1 className="page-title" style={{ margin: 0 }}>Vitamin C Skin Glow</h1>
              <Pill variant="mint" icon={<span style={{ width: 6, height: 6, borderRadius: 999, background: 'currentColor', display: 'inline-block', animation: 'pulse 1.5s infinite' }} />}>LIVE</Pill>
            </div>
            <div className="page-subtitle">Coolmate · Day 14 / 28 · 2 of 3 deliverables done</div>
          </div>
          <div className="row gap-8">
            <button className="btn btn-ghost btn-sm">{Icon.external} Brief PDF</button>
            <button className="btn btn-primary btn-sm" onClick={() => go('creator-campaign-upload')}>Submit next deliverable</button>
          </div>
        </div>

        {/* Deliverables timeline */}
        <div className="card-elevated">
          <div className="title-md mb-3">Deliverables &amp; payment</div>
          <div style={{ position: 'relative' }}>
            <div style={{ position: 'absolute', left: 24, top: 4, bottom: 4, width: 2, background: 'var(--bg-soft)' }} />
            {[
              { d: 'D1 · Concept &amp; script', when: 'May 15', state: 'done', pay: 540, post: null },
              { d: 'D2 · First video (TikTok 30s)', when: 'May 22', state: 'done', pay: 720, post: { reach: '1.2M', er: '7.4%' } },
              { d: 'D3 · Follow-up reel', when: 'Jun 04', state: 'in_progress', pay: 540, due: 'Due in 6 days' },
              { d: 'Final payment', when: 'Jun 11', state: 'pending', pay: 0, info: 'Releases after final deliverable approved' },
            ].map((s, i) => (
              <div key={i} className="row items-start gap-16" style={{ position: 'relative', padding: '14px 0' }}>
                <div style={{
                  width: 50, height: 50, borderRadius: 999, flexShrink: 0,
                  background: s.state === 'done' ? 'var(--mint)' : s.state === 'in_progress' ? 'var(--ink)' : 'var(--bg-soft)',
                  color: s.state === 'done' ? 'var(--ink)' : s.state === 'in_progress' ? 'white' : 'var(--ink-soft)',
                  display: 'grid', placeItems: 'center', fontWeight: 800, fontSize: 14,
                  border: '4px solid var(--bg-canvas)', position: 'relative', zIndex: 1
                }}>
                  {s.state === 'done' ? Icon.check : i + 1}
                </div>
                <div className="flex-1" style={{ paddingTop: 4 }}>
                  <div className="row items-center gap-6 mb-1">
                    <div className="font-display bold" style={{ fontSize: 16, letterSpacing: '-0.015em' }} dangerouslySetInnerHTML={{ __html: s.d }} />
                    <Pill variant={s.state === 'done' ? 'mint' : s.state === 'in_progress' ? 'cyan' : 'lav'}>
                      {s.state === 'done' ? 'Completed' : s.state === 'in_progress' ? 'In progress' : 'Pending'}
                    </Pill>
                  </div>
                  <div className="muted" style={{ fontSize: 12 }}>{s.when}{s.due ? ' · ' + s.due : ''}{s.info ? ' · ' + s.info : ''}</div>
                  {s.post && (
                    <div className="row gap-12 mt-2" style={{ padding: 12, background: 'var(--bg-soft)', borderRadius: 10 }}>
                      <div className="row items-center gap-6">
                        <div style={{ color: 'var(--ink-soft)' }}>{Icon.tiktok}</div>
                        <span className="cap-label" style={{ fontSize: 9 }}>Reach</span>
                        <span className="bold tabular" style={{ fontSize: 12 }}>{s.post.reach}</span>
                      </div>
                      <div className="row items-center gap-6">
                        <span className="cap-label" style={{ fontSize: 9 }}>ER</span>
                        <span className="bold tabular" style={{ fontSize: 12 }}>{s.post.er}</span>
                      </div>
                      <a style={{ marginLeft: 'auto', color: 'var(--cyan-dark)', fontSize: 11, fontWeight: 700, cursor: 'pointer' }}>View post {Icon.external}</a>
                    </div>
                  )}
                  {s.state === 'in_progress' && (
                    <button className="btn btn-primary btn-sm mt-3" onClick={() => go('creator-campaign-upload')}>Upload deliverable</button>
                  )}
                </div>
                {s.pay > 0 && (
                  <div className="text-right">
                    <div className="cap-label" style={{ fontSize: 9 }}>{s.state === 'done' ? 'Paid' : 'Will pay'}</div>
                    <div className="font-display bold tabular" style={{ fontSize: 20 }}>${s.pay}</div>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>

        {/* Side panels */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginTop: 18 }}>
          <div className="card-elevated">
            <div className="title-md mb-3">Brand contact</div>
            <div className="row items-center gap-12 mb-3">
              <Avatar name="Trang Lê" size={42} />
              <div>
                <div className="bold">Trang Lê</div>
                <div className="muted" style={{ fontSize: 11 }}>Head of Brand · Coolmate</div>
              </div>
              <button className="btn btn-ghost btn-sm" style={{ marginLeft: 'auto' }}>Message</button>
            </div>
            <div className="cap-label mb-2">Recent comments</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                ['Trang', 'Loved the V2 cut! Approving today.', '2h ago'],
                ['You', 'Sent the rough — let me know about the voiceover.', 'Yesterday'],
                ['Trang', 'Please add disclosure tag in caption.', '3d ago'],
              ].map(([who, txt, when], i) => (
                <div key={i} style={{ padding: 10, background: 'var(--bg-soft)', borderRadius: 10 }}>
                  <div className="row items-center justify-between mb-1">
                    <span className="bold" style={{ fontSize: 12 }}>{who}</span>
                    <span className="muted" style={{ fontSize: 10 }}>{when}</span>
                  </div>
                  <div style={{ fontSize: 12, lineHeight: 1.4 }}>{txt}</div>
                </div>
              ))}
            </div>
          </div>

          <div className="card-elevated">
            <div className="title-md mb-3">Performance so far</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, marginBottom: 12 }}>
              {[['Reach', '1.2M', 'var(--cyan)'], ['ER', '7.4%', 'var(--mint-deep)'], ['vs base', '+19%', 'var(--pink-hot)']].map(([l, v, c], i) => (
                <div key={i} style={{ padding: 12, background: 'var(--bg-soft)', borderRadius: 10 }}>
                  <div className="cap-label" style={{ fontSize: 9 }}>{l}</div>
                  <div className="font-display bold tabular" style={{ fontSize: 18, color: c, marginTop: 2 }}>{v}</div>
                </div>
              ))}
            </div>
            <Sparkline data={[100, 240, 380, 540, 720, 900, 1100, 1200]} color="var(--cyan)" fillId="ccDetSpark" height={72} />
          </div>
        </div>
      </main>
    </div>
  );
}

// ── Earnings ──────────────────────────────────────────────────────
function EarningsBody() {
  const { t } = useT();
  const actions = useCreatorActions();
  const [statusFilter, setStatusFilter] = React.useState('all');

  const PAYOUTS = [
    ['May 12', 'Coolmate', 'Vitamin C Skin Glow · D2', 720, 36, 684, 'paid'],
    ['May 10', 'DermaPlus', 'SPF Glow Tour · D1', 540, 27, 513, 'paid'],
    ['May 06', 'Affiliate · Shopee', 'Click commission', 280, 14, 266, 'paid'],
    ['May 01', 'Coolmate', 'Vitamin C Skin Glow · D1', 540, 27, 513, 'paid'],
    ['Apr 28', 'Highland', 'Coffee morning drop · Final', 1200, 60, 1140, 'paid'],
    ['May 14', 'Coolmate', 'Vitamin C Skin Glow · D3', 540, 27, 513, 'pending'],
  ];
  const filtered = PAYOUTS.filter(p => statusFilter === 'all' || p[6] === statusFilter);
  return (
    <div className="app-shell" data-portal="creator">
      <AppSidebar portal="creator" active="creator-earnings" />
      <main className="main">
        <AppTopbar showNewBrief={false} user="L" />
        <h1 className="page-title">{t('creator.earnings.title')}</h1>
        <div className="page-subtitle">{t('creator.earnings.subtitle')}</div>

        {/* Hero strip */}
        <div className="card-elevated mt-6" style={{
          padding: 32, background: 'linear-gradient(135deg, #002B50, #1C1CC9)',
          color: 'white', position: 'relative', overflow: 'hidden'
        }}>
          <div style={{
            position: 'absolute', top: -50, right: -50,
            width: 240, height: 240, borderRadius: '50%',
            background: 'radial-gradient(circle, rgba(121,254,231,0.5), transparent 60%)',
            filter: 'blur(20px)'
          }} />
          <div className="row items-center gap-32" style={{ position: 'relative', zIndex: 1 }}>
            <div>
              <div className="cap-label" style={{ color: 'rgba(255,255,255,0.6)' }}>Total · all-time</div>
              <div className="font-display tabular" style={{ fontSize: 72, fontWeight: 700, letterSpacing: '-0.04em', lineHeight: 1, marginTop: 6 }}>
                $<Counter to={28420} duration={2200} />
              </div>
              <div className="row items-center gap-12 mt-3">
                <Pill variant="dark" icon={Icon.trend}>+62% YoY</Pill>
                <span style={{ fontSize: 12, opacity: 0.7 }}>since joining May 2024</span>
              </div>
            </div>
            <div style={{ height: 80, width: 1, background: 'rgba(255,255,255,0.2)' }} />
            <div className="row gap-24">
              {[
                ['This month', 2840, 'var(--mint)'],
                ['Pending payout', 1080, 'var(--yellow)'],
                ['Q2 to date', 4720, 'var(--pink-hot)'],
              ].map(([l, v, c], i) => (
                <div key={i}>
                  <div className="cap-label" style={{ color: 'rgba(255,255,255,0.6)' }}>{l}</div>
                  <div className="font-display tabular" style={{ fontSize: 28, fontWeight: 700, marginTop: 4, color: c }}>
                    $<Counter to={v} duration={1800} />
                  </div>
                </div>
              ))}
            </div>
            <div style={{ marginLeft: 'auto', textAlign: 'right' }}>
              <div className="cap-label" style={{ color: 'rgba(255,255,255,0.6)' }}>Available to withdraw</div>
              <div className="font-display tabular" style={{ fontSize: 36, fontWeight: 700, color: 'var(--mint)', marginTop: 4, lineHeight: 1 }}>$1,080</div>
              <button className="btn btn-sm mt-3" onClick={() => actions.openWithdraw()} style={{
                background: 'white', color: 'var(--ink)', boxShadow: '0 12px 30px rgba(121,254,231,0.4)', fontWeight: 700
              }}>{Icon.dollar} Withdraw now</button>
            </div>
          </div>
        </div>

        {/* Earnings chart */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 14, marginTop: 18 }}>
          <div className="card-elevated">
            <div className="row items-center justify-between mb-3">
              <div>
                <div className="title-md">Earnings trajectory</div>
                <div className="muted" style={{ fontSize: 12 }}>Last 6 months · monthly</div>
              </div>
              <div className="row gap-12">
                <div className="row items-center gap-6"><span style={{ width: 10, height: 10, borderRadius: 999, background: 'var(--cyan)' }} /><span style={{ fontSize: 12 }}>Campaigns</span></div>
                <div className="row items-center gap-6"><span style={{ width: 10, height: 10, borderRadius: 999, background: 'var(--pink-hot)' }} /><span style={{ fontSize: 12 }}>Affiliate</span></div>
              </div>
            </div>
            <LineChart
              series={[
                { name: 'Campaigns', color: '#009CFF', data: [1200, 1600, 1800, 2100, 2400, 2840] },
                { name: 'Affiliate', color: '#FF6FA3', data: [200, 280, 360, 420, 540, 620] },
              ]}
              xLabels={['Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May']}
              height={220}
            />
          </div>

          <div className="card-elevated">
            <div className="title-md mb-3">Income mix · YTD</div>
            <div className="row items-center gap-16">
              <Donut
                data={[
                  { label: 'Brand campaigns', value: 78, color: '#009CFF' },
                  { label: 'Affiliate', value: 14, color: '#FF6FA3' },
                  { label: 'Sponsored event', value: 8, color: '#FEE960' },
                ]}
                size={150}
                thickness={20}
                centerLabel="Total Q2"
                centerValue="$4.7K"
              />
              <div className="flex-1" style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {[
                  ['Brand campaigns', '#009CFF', 78, 3680],
                  ['Affiliate', '#FF6FA3', 14, 660],
                  ['Events', '#FEE960', 8, 380],
                ].map(([l, c, p, v], i) => (
                  <div key={i} className="row items-center gap-12">
                    <span style={{ width: 12, height: 12, borderRadius: 4, background: c }} />
                    <div className="flex-1">
                      <div className="bold" style={{ fontSize: 12 }}>{l}</div>
                      <div className="muted tabular" style={{ fontSize: 11 }}>{p}% · ${v}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* Payouts table */}
        <div className="card-elevated mt-6" style={{ padding: 0, overflow: 'hidden' }}>
          <div className="row items-center justify-between" style={{ padding: 20, borderBottom: '1px solid var(--line)' }}>
            <div>
              <div className="title-md">Recent payouts</div>
              <div className="muted" style={{ fontSize: 12 }}>17 payouts this quarter · 1 pending · click a row for details</div>
            </div>
            <div className="row gap-8 items-center">
              <div className="row gap-4" style={{ padding: 3, background: 'var(--bg-soft)', borderRadius: 999 }}>
                {[['all', 'All'], ['paid', 'Paid'], ['pending', 'Pending']].map(([k, l]) => (
                  <button key={k} onClick={() => setStatusFilter(k)} style={{
                    padding: '6px 14px', borderRadius: 999, border: 0, cursor: 'pointer', fontFamily: 'inherit',
                    background: statusFilter === k ? 'white' : 'transparent',
                    color: statusFilter === k ? 'var(--ink)' : 'var(--ink-soft)',
                    fontWeight: 700, fontSize: 12,
                    boxShadow: statusFilter === k ? '0 1px 3px rgba(0,43,80,0.1)' : 'none'
                  }}>{l}</button>
                ))}
              </div>
              <button className="btn btn-ghost btn-sm" onClick={() => actions.openStatements()}>{Icon.external} Download statements</button>
            </div>
          </div>
          <table className="tbl">
            <thead>
              <tr>
                <th>Date</th>
                <th>Source</th>
                <th>Campaign</th>
                <th className="text-right">Gross</th>
                <th className="text-right">Fee</th>
                <th className="text-right">Net</th>
                <th>Status</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {filtered.map((p, i) => {
                const [d, s, c, g, f, n, st] = p;
                return (
                  <tr key={i} style={{ cursor: 'pointer' }} onClick={() => actions.openPayoutDetail(p)}
                    onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-soft)'}
                    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                    <td className="muted" style={{ fontSize: 12 }}>{d}</td>
                    <td><div className="bold" style={{ fontSize: 13 }}>{s}</div></td>
                    <td className="muted" style={{ fontSize: 12 }}>{c}</td>
                    <td className="text-right tabular">${g}</td>
                    <td className="text-right tabular muted">-${f}</td>
                    <td className="text-right">
                      <div className="font-display bold tabular" style={{ fontSize: 14 }}>${n}</div>
                    </td>
                    <td><Pill variant={st === 'paid' ? 'mint' : 'yellow'}>{st}</Pill></td>
                    <td className="text-right" style={{ color: 'var(--ink-soft)' }}>{Icon.arrow}</td>
                  </tr>
                );
              })}
              {filtered.length === 0 && (
                <tr><td colSpan={8} className="text-center muted" style={{ padding: 40, fontSize: 13 }}>No payouts with status “{statusFilter}”</td></tr>
              )}
            </tbody>
          </table>
        </div>
      </main>
    </div>
  );
}

function ScreenCreatorEarnings() {
  return <CreatorExtraActionsHost><EarningsBody /></CreatorExtraActionsHost>;
}

// ── Creator Profile / Media Kit Editor ──────────────────────────
function ProfileBody() {
  const { t } = useT();
  const actions = useCreatorActions();
  const [editing, setEditing] = React.useState(false);
  return (
    <div className="app-shell" data-portal="creator">
      <AppSidebar portal="creator" active="creator-profile" />
      <main className="main">
        <AppTopbar showNewBrief={false} user="L" />

        <div className="row items-end justify-between mb-6">
          <div>
            <h1 className="page-title">{t('creator.profile.title')}</h1>
            <div className="page-subtitle">{t('creator.profile.subtitle')}</div>
          </div>
          <div className="row gap-8">
            <button className="btn btn-ghost btn-sm" onClick={() => actions.openPublicMediaKit()}>{Icon.external} View public</button>
            <button className="btn btn-ghost btn-sm" onClick={() => actions.openShareKit()}>🔗 Share kit</button>
            <button className="btn btn-primary btn-sm" onClick={() => { setEditing(e => !e); if (editing) actions.toast('Profile changes saved', 'success'); }}>{editing ? 'Save changes' : 'Edit profile'}</button>
          </div>
        </div>

        {/* Hero */}
        <div className="card-elevated" style={{
          padding: 28,
          background: 'linear-gradient(135deg, #79FEE7 0%, #EAC2FB 50%, #FFC3D6 100%)',
          color: 'var(--ink)', position: 'relative', overflow: 'hidden'
        }}>
          <div style={{
            position: 'absolute', top: -60, right: -60,
            width: 220, height: 220, borderRadius: '50%',
            background: 'rgba(255,255,255,0.4)', filter: 'blur(20px)'
          }} />
          <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>
              {editing && <button style={{
                position: 'absolute', inset: 0, borderRadius: 999,
                background: 'rgba(0,43,80,0.5)', color: 'white',
                border: 0, fontWeight: 700, fontSize: 12, cursor: 'pointer'
              }}>Change</button>}
            </div>
            <div className="flex-1">
              {editing
                ? <input className="input" defaultValue="Linh Châu" style={{ fontSize: 32, fontWeight: 700, fontFamily: 'Space Grotesk', maxWidth: 320 }} />
                : <h2 className="font-display" style={{ fontSize: 44, fontWeight: 700, margin: 0, letterSpacing: '-0.025em' }}>Linh Châu</h2>}
              <div style={{ fontSize: 15, fontWeight: 600, marginTop: 4 }}>@linhchau · Skincare · Beauty</div>
              <div className="row gap-6 mt-3">
                <Pill variant="dark">HCM</Pill>
                <Pill variant="dark">482K followers</Pill>
                <Pill variant="dark">6.2% ER</Pill>
                <Pill variant="dark">Vegan-aligned</Pill>
              </div>
            </div>
          </div>
        </div>

        {/* Bio */}
        <div className="card-elevated mt-6">
          <div className="cap-label mb-2">Bio</div>
          {editing
            ? <textarea className="input" rows="3" defaultValue="Skincare-obsessed creator from HCM. I make honest before/after content and break down ingredient science for Gen-Z. Currently into vitamin C, niacinamide and SPF nerdery." style={{ resize: 'vertical', fontFamily: 'inherit' }} />
            : <p style={{ fontSize: 15, lineHeight: 1.6, margin: 0, color: 'var(--ink)' }}>Skincare-obsessed creator from HCM. I make honest before/after content and break down ingredient science for Gen-Z. Currently into vitamin C, niacinamide and SPF nerdery.</p>}
        </div>

        {/* Stats + Rate card grid */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 14, marginTop: 18 }}>
          {/* Audience proofs */}
          <div className="card-elevated">
            <div className="row items-center justify-between mb-3">
              <div>
                <div className="title-md">Audience science</div>
                <div className="muted" style={{ fontSize: 12 }}>Verified by 3 platforms · refreshed 2h ago</div>
              </div>
              <Pill variant="mint" icon={<>{Icon.verified}</>}>Verified</Pill>
            </div>

            <div className="row items-center gap-16">
              <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 skew</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 className="cap-label mt-6 mb-2">Top cities</div>
            <div className="row gap-8" style={{ flexWrap: 'wrap' }}>
              {[
                ['🇻🇳 HCM', 62], ['🇻🇳 HN', 22], ['🇻🇳 DN', 8], ['🇸🇬 SG', 5], ['🇲🇾 KL', 3]
              ].map(([l, v], i) => (
                <div key={i} style={{ padding: '6px 12px', background: 'var(--bg-soft)', borderRadius: 999, fontSize: 12, fontWeight: 600 }}>
                  {l} <span className="tabular" style={{ color: 'var(--cyan-dark)' }}>{v}%</span>
                </div>
              ))}
            </div>
          </div>

          {/* Rate card editor */}
          <div className="card-elevated">
            <div className="row items-center justify-between mb-3">
              <div className="title-md">Rate card</div>
              {editing && <button className="btn btn-ghost btn-sm" onClick={() => actions.toast('Tap a rate to edit — inline editor opens')}>{Icon.plus} Add</button>}
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                ['TikTok video · 30s', 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} className="row items-center gap-12" style={{ padding: '10px 14px', background: 'var(--bg-soft)', borderRadius: 10 }}>
                  <span style={{ width: 8, height: 8, borderRadius: 999, background: c }} />
                  <span className="bold" style={{ fontSize: 13, flex: 1 }}>{l}</span>
                  {editing
                    ? <div className="row items-center gap-4"><span className="muted">$</span><input className="input" defaultValue={p * 1000} style={{ width: 80, padding: '4px 8px', fontSize: 12 }} /></div>
                    : <span className="font-display bold tabular" style={{ fontSize: 18 }}>${p}K</span>}
                </div>
              ))}
            </div>

            <div className="cap-label mt-6 mb-2">Open to formats</div>
            <div className="row gap-6" style={{ flexWrap: 'wrap' }}>
              {['Affiliate', 'Whitelisting', 'Long-term', 'Events', 'Exclusivity OK'].map((t, i) => (
                <Pill key={t} variant={i < 4 ? 'mint' : 'ink'}>{t}</Pill>
              ))}
            </div>
          </div>
        </div>

        {/* Best work gallery */}
        <div className="card-elevated mt-6">
          <div className="row items-center justify-between mb-3">
            <div>
              <div className="title-md">Best work</div>
              <div className="muted" style={{ fontSize: 12 }}>Pinned content for brands · drag to re-order</div>
            </div>
            {editing && <button className="btn btn-ghost btn-sm" onClick={() => actions.openAddPost()}>{Icon.plus} Add post</button>}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 8 }}>
            {[
              { r: '1.2M', er: '7.4%', c: ['#79FEE7', '#009CFF'], cat: 'Vit C' },
              { r: '820K', er: '6.8%', c: ['#FFC3D6', '#FF6FA3'], cat: 'SPF' },
              { r: '480K', er: '5.4%', c: ['#EAC2FB', '#1C1CC9'], cat: 'Niacin' },
              { r: '380K', er: '7.0%', c: ['#FEE960', '#FF7A59'], cat: 'AHA' },
              { r: '320K', er: '6.4%', c: ['#79FEE7', '#1FD6B4'], cat: 'Routine' },
              { r: '280K', er: '5.8%', c: ['#FFC3D6', '#EAC2FB'], cat: 'Acne' },
            ].map((p, i) => (
              <div key={i} style={{
                position: 'relative', aspectRatio: '9/14', borderRadius: 10, overflow: 'hidden',
                background: `linear-gradient(135deg, ${p.c[0]}, ${p.c[1]})`,
                animation: `cardIn .5s ${i * 50}ms backwards cubic-bezier(.4,0,.2,1)` }}>
                <div style={{ position: 'absolute', top: 6, left: 6, fontSize: 9, fontWeight: 800, color: 'rgba(0,43,80,0.6)', background: 'rgba(255,255,255,0.7)', padding: '2px 6px', borderRadius: 4 }}>{p.cat}</div>
                <div style={{
                  position: 'absolute', bottom: 0, left: 0, right: 0,
                  padding: '12px 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>
      </main>
    </div>
  );
}

function ScreenCreatorProfile() {
  return <CreatorExtraActionsHost><ProfileBody /></CreatorExtraActionsHost>;
}

// ── Creator Settings ───────────────────────────────────────────
function ScreenCreatorSettings() {
  const { t } = useT();
  const [tab, setTab] = React.useState('account');
  const tabs = [
    { id: 'account', l: 'Account' },
    { id: 'payment', l: 'Payment' },
    { id: 'notifications', l: 'Notifications' },
    { id: 'privacy', l: 'Privacy' },
    { id: 'platforms', l: 'Connected platforms' },
  ];
  return (
    <div className="app-shell" data-portal="creator">
      <AppSidebar portal="creator" active="creator-settings" />
      <main className="main">
        <AppTopbar showNewBrief={false} user="L" />
        <h1 className="page-title">{t('creator.settings.title')}</h1>
        <div className="page-subtitle">Account, payment and privacy.</div>

        <div className="row gap-4 mt-6" style={{ borderBottom: '1px solid var(--line)' }}>
          {tabs.map(tt => (
            <button key={tt.id} onClick={() => setTab(tt.id)} style={{
              background: 'transparent', border: 0, padding: '12px 14px', fontSize: 13, fontWeight: 700, fontFamily: 'inherit',
              color: tab === tt.id ? 'var(--ink)' : 'var(--ink-soft)',
              borderBottom: '2px solid ' + (tab === tt.id ? 'var(--ink)' : 'transparent'),
              marginBottom: -1, cursor: 'pointer'
            }}>{tt.l}</button>
          ))}
        </div>

        <div className="mt-6" style={{ maxWidth: 720 }}>
          {tab === 'account' && (
            <div className="card-elevated">
              <div className="title-md mb-3">Profile basics</div>
              <label className="label">Full name</label><input className="input" defaultValue="Linh Châu" />
              <label className="label mt-4" style={{ marginTop: 18 }}>Handle</label><input className="input" defaultValue="@linhchau" />
              <label className="label mt-4" style={{ marginTop: 18 }}>Email</label><input className="input" defaultValue="linh@gmail.com" />
              <label className="label mt-4" style={{ marginTop: 18 }}>Phone</label><input className="input" defaultValue="+84 90 123 4567" />
              <label className="label mt-4" style={{ marginTop: 18 }}>Time zone</label>
              <select className="input"><option>(GMT+7) Indochina Time · HCM</option></select>
              <div className="row justify-end mt-6"><button className="btn btn-primary btn-sm">Save changes</button></div>
            </div>
          )}
          {tab === 'payment' && (
            <div className="card-elevated">
              <div className="title-md mb-3">Where do you want to get paid?</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {[
                  { l: 'Vietcombank ··· 8421', n: 'Primary', sel: true, icon: '🏦' },
                  { l: 'PayPal · linh@gmail.com', n: 'Backup', sel: false, icon: '💳' },
                  { l: 'Wise USD account', n: 'For USD payouts', sel: false, icon: '💵' },
                ].map((m, i) => (
                  <div key={i} className="row items-center gap-12" style={{
                    padding: 14, borderRadius: 12,
                    background: m.sel ? 'rgba(0,156,255,0.06)' : 'var(--bg-soft)',
                    border: '2px solid ' + (m.sel ? 'var(--cyan)' : 'transparent')
                  }}>
                    <div style={{ fontSize: 26 }}>{m.icon}</div>
                    <div className="flex-1">
                      <div className="bold">{m.l}</div>
                      <div className="muted" style={{ fontSize: 11 }}>{m.n}</div>
                    </div>
                    {m.sel && <Pill variant="mint">Primary</Pill>}
                    <button className="btn-sm" style={{ background: 'transparent', border: 0, color: 'var(--ink-soft)', cursor: 'pointer' }}>···</button>
                  </div>
                ))}
              </div>
              <button className="btn btn-ghost btn-sm mt-4">{Icon.plus} Add payment method</button>
            </div>
          )}
          {tab === 'notifications' && (
            <div className="card-elevated">
              <div className="title-md mb-3">Notifications</div>
              {[
                ['New matched brief', true],
                ['Brand replied to my application', true],
                ['Campaign deadline reminder', true],
                ['Payment received', true],
                ['Weekly digest', false],
                ['Product news &amp; tips', false],
              ].map(([l, on], i) => (
                <div key={i} className="row items-center justify-between" style={{ padding: '12px 0', borderTop: i ? '1px solid var(--line)' : 'none' }}>
                  <span className="bold" style={{ fontSize: 13 }} dangerouslySetInnerHTML={{ __html: l }} />
                  <ToggleBlock on={on} />
                </div>
              ))}
            </div>
          )}
          {tab === 'privacy' && (
            <div className="card-elevated">
              <div className="title-md mb-3">Privacy &amp; visibility</div>
              {[
                ['Public media kit (visible to brands)', true],
                ['Show audience demographics publicly', false],
                ['Show rate card publicly', false],
                ['Hide from brands in these categories', false],
                ['Enable AI matching to my profile', true],
              ].map(([l, on], i) => (
                <div key={i} className="row items-center justify-between" style={{ padding: '12px 0', borderTop: i ? '1px solid var(--line)' : 'none' }}>
                  <span className="bold" style={{ fontSize: 13 }}>{l}</span>
                  <ToggleBlock on={on} />
                </div>
              ))}
            </div>
          )}
          {tab === 'platforms' && (
            <div className="card-elevated">
              <div className="title-md mb-3">Connected platforms</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {[
                  { l: 'TikTok', s: 'connected', c: '#002B50', icon: Icon.tiktok, h: '@linhchau', fol: '482K' },
                  { l: 'Instagram', s: 'connected', c: '#FF6FA3', icon: Icon.instagram, h: '@linhchau', fol: '184K' },
                  { l: 'YouTube', s: 'connected', c: '#FF4444', icon: Icon.youtube, h: 'Linh Chau Skincare', fol: '32K' },
                  { l: 'Shopee Live', s: 'connect', c: '#FEE960', icon: Icon.bag, h: '—', fol: '—' },
                ].map((p, i) => (
                  <div key={i} className="row items-center gap-12" style={{ padding: 14, background: 'var(--bg-soft)', borderRadius: 12 }}>
                    <div style={{ width: 36, height: 36, borderRadius: 9, background: p.c, color: 'white', display: 'grid', placeItems: 'center' }}>{p.icon}</div>
                    <div className="flex-1">
                      <div className="bold">{p.l}</div>
                      <div className="muted" style={{ fontSize: 11 }}>{p.h} · {p.fol}</div>
                    </div>
                    <Pill variant={p.s === 'connected' ? 'mint' : 'cyan'}>{p.s}</Pill>
                    <button className="btn-sm" style={{ background: 'transparent', border: 0, color: 'var(--cyan-dark)', fontWeight: 700, fontSize: 12, cursor: 'pointer' }}>
                      {p.s === 'connected' ? 'Refresh' : 'Connect'} {Icon.arrow}
                    </button>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      </main>
    </div>
  );
}

function ToggleBlock({ on: initial = false }) {
  const [on, setOn] = React.useState(initial);
  return (
    <button onClick={() => setOn(o => !o)} style={{
      width: 44, height: 24, borderRadius: 999,
      background: on ? 'var(--mint-deep)' : 'var(--line)',
      border: 0, cursor: 'pointer', position: 'relative',
      transition: 'background .2s'
    }}>
      <div style={{
        position: 'absolute', top: 2, left: on ? 22 : 2,
        width: 20, height: 20, borderRadius: 999,
        background: 'white', boxShadow: '0 2px 6px rgba(0,43,80,0.2)',
        transition: 'left .2s'
      }} />
    </button>
  );
}

Object.assign(window, { ScreenCreatorCampaigns, ScreenCreatorCampaignDetail, ScreenCreatorEarnings, ScreenCreatorProfile, ScreenCreatorSettings });