/* screen-creator-campaign-flow.jsx — Full "My Campaign" lifecycle for the Creator portal
   ─────────────────────────────────────────────────────────────────────────────────
   Six screens, each linked from the previous, forming the end-to-end flow:
     1. Kickoff      — accept brief + sign quick agreement when newly awarded
     2. Upload       — draft a deliverable (file + caption + disclosures)
     3. Review       — submitted, waiting for brand feedback
     4. Revision     — brand requested changes, re-upload
     5. Publish      — approved, schedule the post to a platform
     6. Wrap         — campaign closed: final perf, claim payout, rate the brand

   Every screen shares a top "flow stepper" so the user can scrub the whole flow.
*/
/* global React, AppSidebar, AppTopbar, useRouter, useT, Avatar, Pill, Icon, Counter, Sparkline, LineChart, CampaignActionsHost, useCampaignActions */

// ── Shared flow stepper ────────────────────────────────────────────
const FLOW_STEPS = [
  { id: 'creator-campaign-kickoff',  short: 'Kickoff',  num: 1 },
  { id: 'creator-campaign-upload',   short: 'Upload',   num: 2 },
  { id: 'creator-campaign-review',   short: 'Review',   num: 3 },
  { id: 'creator-campaign-revision', short: 'Revision', num: 4 },
  { id: 'creator-campaign-publish',  short: 'Publish',  num: 5 },
  { id: 'creator-campaign-wrap',     short: 'Wrap-up',  num: 6 },
];

function FlowStepper({ current }) {
  const { go } = useRouter();
  const currentIdx = FLOW_STEPS.findIndex(s => s.id === current);
  return (
    <div className="card-elevated" style={{ padding: '14px 18px', marginBottom: 18 }}>
      <div className="row items-center justify-between mb-2">
        <div className="cap-label">Campaign flow · Vitamin C Skin Glow</div>
        <a onClick={() => go('creator-campaign-detail')} className="muted" style={{ fontSize: 11, cursor: 'pointer' }}>← Back to campaign</a>
      </div>
      <div className="row items-center gap-4" style={{ flexWrap: 'wrap' }}>
        {FLOW_STEPS.map((s, i) => {
          const done = i < currentIdx;
          const active = i === currentIdx;
          return (
            <React.Fragment key={s.id}>
              <button
                onClick={() => go(s.id)}
                className="row items-center gap-6"
                style={{
                  padding: '7px 12px 7px 7px', borderRadius: 999, border: 0, cursor: 'pointer', fontFamily: 'inherit',
                  background: active ? 'var(--ink)' : done ? 'rgba(31,214,180,0.18)' : 'var(--bg-soft)',
                  color: active ? 'white' : done ? '#0a8a72' : 'var(--ink-soft)',
                  fontWeight: 700, fontSize: 12
                }}>
                <span style={{
                  width: 22, height: 22, borderRadius: 999, display: 'grid', placeItems: 'center', fontWeight: 800, fontSize: 11,
                  background: active ? 'rgba(255,255,255,0.18)' : done ? 'var(--mint-deep)' : 'white',
                  color: active ? 'white' : done ? 'white' : 'var(--ink-soft)'
                }}>{done ? '✓' : s.num}</span>
                {s.short}
              </button>
              {i < FLOW_STEPS.length - 1 && (
                <div style={{ width: 14, height: 2, background: done ? 'var(--mint-deep)' : 'var(--line)', borderRadius: 1 }} />
              )}
            </React.Fragment>
          );
        })}
      </div>
    </div>
  );
}

// Shared layout shell so screens stay consistent
function FlowShell({ step, title, kicker, headerExtra, children }) {
  return (
    <div className="app-shell" data-portal="creator">
      <AppSidebar portal="creator" active="creator-campaigns" />
      <main className="main">
        <AppTopbar showNewBrief={false} user="L" />
        <FlowStepper current={step} />
        <div className="row items-end justify-between mb-6">
          <div>
            <div className="cap-label" style={{ color: 'var(--cyan-dark)' }}>{kicker}</div>
            <h1 className="page-title" style={{ margin: '4px 0 0' }}>{title}</h1>
          </div>
          {headerExtra}
        </div>
        {children}
      </main>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────
// 1. KICKOFF — accepted into campaign, sign quick agreement
// ─────────────────────────────────────────────────────────────────────
function ScreenCreatorCampaignKickoff() {
  const { go } = useRouter();
  const actions = useCampaignActions();
  const [agreed, setAgreed] = React.useState(false);
  const [signature, setSignature] = React.useState('');

  return (
    <FlowShell step="creator-campaign-kickoff" kicker="Step 1 of 6 · You're in 🎉"
      title="Kickoff: Vitamin C Skin Glow"
      headerExtra={<Pill variant="mint">Awarded · just now</Pill>}>

      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 14 }}>
        <div>
          {/* Brand intro */}
          <div className="card-elevated" style={{
            padding: 28, background: 'linear-gradient(135deg, #79FEE7 0%, #009CFF 100%)',
            color: 'var(--ink)', position: 'relative', overflow: 'hidden'
          }}>
            <div style={{ position: 'absolute', top: -40, right: -40, width: 200, height: 200, borderRadius: '50%', background: 'rgba(255,255,255,0.3)', filter: 'blur(20px)' }} />
            <div className="row items-center gap-16" style={{ position: 'relative', zIndex: 1 }}>
              <Avatar name="Coolmate" size={64} />
              <div>
                <div className="cap-label">From Coolmate · Trang Lê</div>
                <h2 className="font-display" style={{ fontSize: 28, fontWeight: 700, margin: '2px 0', letterSpacing: '-0.02em' }}>Welcome to the team, Linh!</h2>
                <div style={{ fontSize: 13, fontWeight: 600, opacity: 0.85 }}>Sign below to start the 28-day program · earn up to $1,800</div>
              </div>
            </div>
          </div>

          {/* Key dates */}
          <div className="card-elevated mt-6">
            <div className="title-md mb-3">Key dates</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
              {[
                ['Kickoff',          'May 15', 'var(--cyan)'],
                ['Concept due',      'May 18', 'var(--mint-deep)'],
                ['First video',     'May 22', 'var(--pink-hot)'],
                ['Final wrap',     'Jun 11', 'var(--lavender-deep)'],
              ].map(([l, d, c], i) => (
                <div key={i} style={{ padding: 14, background: 'var(--bg-soft)', borderRadius: 12, borderTop: '3px solid ' + c }}>
                  <div className="cap-label" style={{ fontSize: 9 }}>{l}</div>
                  <div className="font-display bold tabular" style={{ fontSize: 20, marginTop: 4 }}>{d}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Agreement */}
          <div className="card-elevated mt-6">
            <div className="row items-center justify-between mb-3">
              <div className="title-md">Quick agreement</div>
              <button className="btn btn-ghost btn-sm" onClick={() => actions.openBriefPdf()}>{Icon.external} Download PDF</button>
            </div>
            <div style={{ padding: 16, background: 'var(--bg-soft)', borderRadius: 12, fontSize: 13, lineHeight: 1.6, maxHeight: 180, overflow: 'auto' }}>
              <p style={{ margin: '0 0 10px' }}><b>1. Scope.</b> Three deliverables across TikTok + Instagram, posted between May 22 and Jun 09, 2026.</p>
              <p style={{ margin: '0 0 10px' }}><b>2. Disclosure.</b> All posts must use #ad and tag @coolmate.vn.</p>
              <p style={{ margin: '0 0 10px' }}><b>3. Usage rights.</b> Coolmate may whitelist your posts for 30 days post-publish; organic only.</p>
              <p style={{ margin: '0 0 10px' }}><b>4. Payment.</b> Deliverable-tied, released within 7 business days of approval. Final wrap pays 30% on Jun 11.</p>
              <p style={{ margin: 0 }}><b>5. Exclusivity.</b> No competing skincare brand collabs through Jul 11, 2026.</p>
            </div>

            <label className="row items-start gap-8 mt-4" style={{ cursor: 'pointer' }}>
              <input type="checkbox" checked={agreed} onChange={e => setAgreed(e.target.checked)} style={{ marginTop: 3 }} />
              <span style={{ fontSize: 13 }}>I've read the agreement and consent to the terms above. I understand payment is released per deliverable, and I have IP authority to publish my content.</span>
            </label>

            <div className="row items-center gap-12 mt-4">
              <div className="flex-1">
                <label className="label">Sign your full name</label>
                <input className="input" placeholder="Type your full legal name"
                  value={signature} onChange={e => setSignature(e.target.value)} />
              </div>
              <div style={{ flex: 1 }}>
                <label className="label">Date</label>
                <input className="input" defaultValue="May 16, 2026" readOnly style={{ background: 'var(--bg-soft)' }} />
              </div>
            </div>

            <div className="row justify-end gap-8 mt-6">
              <button className="btn btn-ghost btn-sm" onClick={() => go('creator-applications')}>Save for later</button>
              <button className="btn btn-primary btn-sm"
                disabled={!agreed || !signature}
                style={{ opacity: agreed && signature ? 1 : 0.4, cursor: agreed && signature ? 'pointer' : 'not-allowed' }}
                onClick={() => { actions.toast('Agreement signed · campaign is live'); go('creator-campaign-upload'); }}>
                Sign &amp; start campaign {Icon.arrow}
              </button>
            </div>
          </div>
        </div>

        {/* Side */}
        <div>
          <div className="card-elevated">
            <div className="title-md mb-3">What you'll earn</div>
            <div className="font-display bold tabular" style={{ fontSize: 44, letterSpacing: '-0.025em', color: 'var(--cyan-dark)', lineHeight: 1 }}>
              $<Counter to={1800} duration={1800} />
            </div>
            <div className="muted" style={{ fontSize: 12, marginTop: 4 }}>Up to · across 3 deliverables</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 14 }}>
              {[
                ['Concept &amp; script', 540],
                ['TikTok 30s · D2', 720],
                ['Follow-up reel · D3', 540],
              ].map(([l, v], i) => (
                <div key={i} className="row items-center justify-between" style={{ padding: '10px 12px', background: 'var(--bg-soft)', borderRadius: 10 }}>
                  <span className="bold" style={{ fontSize: 13 }} dangerouslySetInnerHTML={{ __html: l }} />
                  <span className="font-display bold tabular" style={{ fontSize: 16 }}>${v}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="card-elevated mt-6">
            <div className="title-md mb-3">Your brand contact</div>
            <div className="row items-center gap-12">
              <Avatar name="Trang Lê" size={48} />
              <div className="flex-1">
                <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" onClick={() => actions.openMessage()}>Message</button>
            </div>
            <div className="cap-label mt-4 mb-2">Tips from Trang</div>
            <ul style={{ fontSize: 12.5, lineHeight: 1.6, paddingLeft: 18, margin: 0, color: 'var(--ink-soft)' }}>
              <li>Lead with the science — our audience likes ingredient nerdery.</li>
              <li>Use natural light if possible. No filters on glow shots.</li>
              <li>Reply to comments in the first 2h after posting; we'll boost top engagers.</li>
            </ul>
          </div>

          <div className="card-elevated mt-6" style={{ padding: 16, background: 'rgba(254,233,96,0.18)', border: '1px solid rgba(242,196,17,0.3)' }}>
            <div className="row items-center gap-8 mb-2">
              <span style={{ fontSize: 18 }}>📦</span>
              <div className="bold" style={{ fontSize: 13 }}>Product kit on the way</div>
            </div>
            <div style={{ fontSize: 12, lineHeight: 1.5 }}>Vitamin C serum, SPF50 sunscreen, and 3 sample minis. Arriving <b>May 19</b> via GHN.</div>
            <a className="row items-center gap-4 mt-2 bold" style={{ fontSize: 11.5, color: 'var(--cyan-dark)', cursor: 'pointer' }} onClick={() => actions.openShipment()}>Track shipment {Icon.arrow}</a>
          </div>
        </div>
      </div>
    </FlowShell>
  );
}

// ─────────────────────────────────────────────────────────────────────
// 2. UPLOAD — submit deliverable draft
// ─────────────────────────────────────────────────────────────────────
function ScreenCreatorCampaignUpload() {
  const { go } = useRouter();
  const actions = useCampaignActions();
  const [uploaded, setUploaded] = React.useState(false);
  const [caption, setCaption] = React.useState('POV: when ur niacinamide finally hits ✨\n\nFull routine in comments. Wearing the new @coolmate.vn Vit-C — review hits next week 🍊\n\n#ad #skincare #vitaminc');
  const [hasAd] = React.useState(true);
  const [hasTag] = React.useState(true);
  const [schedule, setSchedule] = React.useState('May 22, 2026 · 7:00 PM');

  const captionChecks = [
    { l: '#ad disclosure present', ok: caption.includes('#ad') },
    { l: '@coolmate.vn tag present', ok: caption.toLowerCase().includes('@coolmate') },
    { l: 'Caption ≥ 40 characters', ok: caption.length >= 40 },
    { l: 'No competitor brand mentions', ok: !/(neutrogena|cerave|garnier)/i.test(caption) },
  ];
  const allPass = captionChecks.every(c => c.ok) && uploaded;

  return (
    <FlowShell step="creator-campaign-upload" kicker="Step 2 of 6 · D2 · First video"
      title="Upload your draft"
      headerExtra={<div className="row items-center gap-8"><Pill variant="cyan">Draft</Pill><span className="muted" style={{ fontSize: 12 }}>Due May 22 · 6 days left</span></div>}>

      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 14 }}>
        <div>
          {/* Drop zone */}
          <div className="card-elevated" style={{ padding: 0, overflow: 'hidden' }}>
            <div style={{ padding: 20, borderBottom: '1px solid var(--line)' }}>
              <div className="title-md">Video file</div>
              <div className="muted" style={{ fontSize: 12 }}>MP4 or MOV · max 500MB · vertical 9:16 preferred</div>
            </div>
            {!uploaded ? (
              <div onClick={() => setUploaded(true)}
                style={{
                  margin: 20, padding: '48px 24px', textAlign: 'center', cursor: 'pointer',
                  border: '2px dashed var(--line)', borderRadius: 16, background: 'var(--bg-soft)',
                  transition: 'border-color .2s, background .2s'
                }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--cyan)'; e.currentTarget.style.background = 'rgba(0,156,255,0.04)'; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--line)'; e.currentTarget.style.background = 'var(--bg-soft)'; }}>
                <div style={{ fontSize: 44, marginBottom: 8 }}>⬆️</div>
                <div className="font-display bold" style={{ fontSize: 18, letterSpacing: '-0.015em' }}>Drop your video here</div>
                <div className="muted mt-2" style={{ fontSize: 12 }}>or <span style={{ color: 'var(--cyan-dark)', textDecoration: 'underline' }}>browse files</span></div>
              </div>
            ) : (
              <div style={{ padding: 20 }}>
                <div className="row items-center gap-14">
                  <div style={{
                    width: 100, height: 140, borderRadius: 10, flexShrink: 0,
                    background: 'linear-gradient(135deg, #79FEE7, #009CFF)',
                    position: 'relative', overflow: 'hidden'
                  }}>
                    <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', color: 'white', fontSize: 28 }}>▶</div>
                    <div style={{ position: 'absolute', bottom: 6, left: 6, right: 6, fontSize: 9, fontWeight: 700, color: 'white', textShadow: '0 1px 4px rgba(0,0,0,0.4)' }}>0:28 · 9:16</div>
                  </div>
                  <div className="flex-1">
                    <div className="bold" style={{ fontSize: 14 }}>vitC-glow-takeone.mp4</div>
                    <div className="muted" style={{ fontSize: 12 }}>184 MB · 30s · 1080×1920</div>
                    <div className="row items-center gap-6 mt-2">
                      <Pill variant="mint" icon={Icon.check}>Quality check passed</Pill>
                      <Pill variant="cyan">Auto-captioned</Pill>
                    </div>
                  </div>
                  <button className="btn btn-ghost btn-sm" onClick={() => setUploaded(false)}>Replace</button>
                </div>
                <div className="row gap-4 mt-4">
                  {[12, 24, 18, 30, 22, 28, 35, 42, 38, 30, 25, 20, 28, 32, 26, 22, 30, 28, 18, 12].map((h, i) => (
                    <div key={i} style={{ flex: 1, height: h + 8, borderRadius: 2, background: i < 15 ? 'var(--cyan)' : 'var(--line)', alignSelf: 'flex-end' }} />
                  ))}
                </div>
              </div>
            )}
          </div>

          {/* Caption */}
          <div className="card-elevated mt-6">
            <div className="row items-center justify-between mb-3">
              <div>
                <div className="title-md">Caption</div>
                <div className="muted" style={{ fontSize: 12 }}>Brand requires #ad disclosure and tag @coolmate.vn</div>
              </div>
              <div className="row items-center gap-6">
                <Pill variant={Icon.tiktok ? 'ink' : 'ink'} icon={Icon.tiktok}>TikTok</Pill>
                <Pill variant="ink" icon={Icon.instagram}>IG Reels</Pill>
              </div>
            </div>
            <textarea
              value={caption}
              onChange={e => setCaption(e.target.value)}
              className="input"
              rows="6"
              style={{ resize: 'vertical', fontFamily: 'inherit', lineHeight: 1.5 }} />
            <div className="row items-center justify-between mt-2">
              <div className="muted tabular" style={{ fontSize: 11 }}>{caption.length} / 280 characters</div>
              <button className="btn btn-ghost btn-sm" onClick={() => actions.openAISuggest((s) => setCaption(s))}>{Icon.spark} AI suggest</button>
            </div>

            {/* Live compliance checks */}
            <div className="mt-4" style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {captionChecks.map((c, i) => (
                <div key={i} className="row items-center gap-8" style={{ fontSize: 12.5 }}>
                  <span style={{
                    width: 18, height: 18, borderRadius: 999, display: 'grid', placeItems: 'center',
                    background: c.ok ? 'var(--mint-deep)' : 'var(--line)',
                    color: c.ok ? 'white' : 'var(--ink-soft)', fontWeight: 800, fontSize: 11
                  }}>{c.ok ? '✓' : '!'}</span>
                  <span style={{ color: c.ok ? 'var(--ink)' : 'var(--ink-soft)' }} dangerouslySetInnerHTML={{ __html: c.l }} />
                </div>
              ))}
            </div>
          </div>

          {/* Schedule */}
          <div className="card-elevated mt-6">
            <div className="title-md mb-3">When should this go live?</div>
            <div className="row gap-8" style={{ flexWrap: 'wrap' }}>
              {['May 22 · 7:00 PM', 'May 22 · 9:00 PM', 'May 23 · 12:30 PM', 'Pick another time'].map((t, i) => (
                <button key={t}
                  onClick={() => setSchedule('May 22, 2026 · ' + (i === 0 ? '7:00 PM' : i === 1 ? '9:00 PM' : i === 2 ? '12:30 PM' : '7:00 PM'))}
                  style={{
                    padding: '10px 14px', borderRadius: 12, fontFamily: 'inherit', fontWeight: 700, fontSize: 13, cursor: 'pointer',
                    border: '2px solid ' + (schedule.includes(t.split(' · ')[1] || '7:00') ? 'var(--cyan)' : 'transparent'),
                    background: schedule.includes(t.split(' · ')[1] || '7:00') ? 'rgba(0,156,255,0.06)' : 'var(--bg-soft)',
                    color: 'var(--ink)'
                  }}>
                  {t}
                  {i === 0 && <span className="muted" style={{ display: 'block', fontSize: 10, fontWeight: 600 }}>Peak ER · +18%</span>}
                </button>
              ))}
            </div>
          </div>

          <div className="row justify-end gap-8 mt-6">
            <button className="btn btn-ghost btn-sm" onClick={() => { actions.toast('Draft saved — you can resume any time'); go('creator-campaign-detail'); }}>Save draft</button>
            <button className="btn btn-primary btn-sm"
              disabled={!allPass}
              style={{ opacity: allPass ? 1 : 0.4, cursor: allPass ? 'pointer' : 'not-allowed' }}
              onClick={() => go('creator-campaign-review')}>
              Submit for brand review {Icon.arrow}
            </button>
          </div>
        </div>

        {/* Side — brief snapshot */}
        <div>
          <div className="card-elevated" style={{ position: 'sticky', top: 80 }}>
            <div className="cap-label mb-2">Brief snapshot</div>
            <div className="font-display bold mb-3" style={{ fontSize: 18, letterSpacing: '-0.015em' }}>Vitamin C Skin Glow · D2</div>

            <div className="cap-label mb-2" style={{ fontSize: 9 }}>Must include</div>
            <div className="row gap-6 mb-4" style={{ flexWrap: 'wrap' }}>
              <Pill variant="cyan">Before/after</Pill>
              <Pill variant="cyan">Ingredient call-out</Pill>
              <Pill variant="cyan">#ad tag</Pill>
              <Pill variant="cyan">Honest tone</Pill>
            </div>

            <div className="cap-label mb-2" style={{ fontSize: 9 }}>Avoid</div>
            <div className="row gap-6 mb-4" style={{ flexWrap: 'wrap' }}>
              <Pill variant="pink">Heavy filters</Pill>
              <Pill variant="pink">Medical claims</Pill>
              <Pill variant="pink">Competitor names</Pill>
            </div>

            <div className="cap-label mb-2" style={{ fontSize: 9 }}>Pays on approval</div>
            <div className="font-display bold tabular" style={{ fontSize: 28, color: 'var(--cyan-dark)' }}>$720</div>
            <div className="muted" style={{ fontSize: 11 }}>Released within 7 business days</div>

            <div style={{ borderTop: '1px solid var(--line)', margin: '16px -20px 0', padding: '14px 20px 0' }}>
              <a className="row items-center gap-6 bold" style={{ fontSize: 12, color: 'var(--cyan-dark)', cursor: 'pointer' }} onClick={() => actions.openBriefPdf()}>{Icon.external} Full brief PDF</a>
            </div>
          </div>
        </div>
      </div>
    </FlowShell>
  );
}

// ─────────────────────────────────────────────────────────────────────
// 3. REVIEW — submitted, awaiting brand review
// ─────────────────────────────────────────────────────────────────────
function ScreenCreatorCampaignReview() {
  const { go } = useRouter();
  const actions = useCampaignActions();
  return (
    <FlowShell step="creator-campaign-review" kicker="Step 3 of 6 · Submitted at 4:42 PM today"
      title="Awaiting brand review"
      headerExtra={<Pill variant="yellow" icon={<span style={{ width: 6, height: 6, borderRadius: 999, background: 'currentColor', animation: 'pulse 1.5s infinite' }} />}>In review</Pill>}>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 14 }}>
        {/* Submission summary */}
        <div className="card-elevated">
          <div className="cap-label mb-2">Just sent</div>
          <div className="row items-center gap-14">
            <div style={{
              width: 90, height: 130, borderRadius: 10, flexShrink: 0,
              background: 'linear-gradient(135deg, #79FEE7, #009CFF)',
              display: 'grid', placeItems: 'center', color: 'white', fontSize: 28
            }}>▶</div>
            <div>
              <div className="bold" style={{ fontSize: 14 }}>vitC-glow-takeone.mp4</div>
              <div className="muted" style={{ fontSize: 12 }}>184 MB · 30s · TikTok + IG Reels</div>
              <div className="row gap-6 mt-2">
                <Pill variant="mint" icon={Icon.check}>Compliance OK</Pill>
              </div>
              <div className="muted mt-2" style={{ fontSize: 11 }}>Scheduled May 22 · 7:00 PM</div>
            </div>
          </div>

          <div className="cap-label mt-6 mb-2">Your caption</div>
          <div style={{ padding: 12, background: 'var(--bg-soft)', borderRadius: 10, fontSize: 12.5, lineHeight: 1.5, whiteSpace: 'pre-wrap' }}>
            POV: when ur niacinamide finally hits ✨{'\n\n'}Full routine in comments. Wearing the new @coolmate.vn Vit-C — review hits next week 🍊{'\n\n'}#ad #skincare #vitaminc
          </div>
        </div>

        {/* Status timeline */}
        <div className="card-elevated">
          <div className="title-md mb-3">What happens next</div>
          <div style={{ position: 'relative' }}>
            <div style={{ position: 'absolute', left: 19, top: 6, bottom: 6, width: 2, background: 'var(--bg-soft)' }} />
            {[
              { l: 'You submitted draft', s: '4:42 PM today', state: 'done' },
              { l: 'Trang from Coolmate reviewing', s: 'Expected within 24h · usually 4h', state: 'active' },
              { l: 'You\'ll get a response — approval or revision', s: 'You\'ll be notified', state: 'pending' },
              { l: 'Schedule publish to TikTok &amp; IG', s: 'After approval', state: 'pending' },
            ].map((s, i) => (
              <div key={i} className="row items-start gap-14" style={{ padding: '10px 0', position: 'relative' }}>
                <div style={{
                  width: 40, height: 40, borderRadius: 999, flexShrink: 0, zIndex: 1,
                  background: s.state === 'done' ? 'var(--mint)' : s.state === 'active' ? 'var(--yellow)' : 'var(--bg-soft)',
                  border: '3px solid var(--bg-canvas)',
                  display: 'grid', placeItems: 'center', fontWeight: 800, fontSize: 12,
                  color: s.state === 'done' ? 'var(--ink)' : 'var(--ink)'
                }}>
                  {s.state === 'done' ? Icon.check : s.state === 'active' ? <span style={{ width: 10, height: 10, borderRadius: 999, background: 'currentColor', animation: 'pulse 1.5s infinite' }} /> : i + 1}
                </div>
                <div className="flex-1" style={{ paddingTop: 4 }}>
                  <div className="bold" style={{ fontSize: 13.5 }} dangerouslySetInnerHTML={{ __html: s.l }} />
                  <div className="muted" style={{ fontSize: 11.5 }}>{s.s}</div>
                </div>
              </div>
            ))}
          </div>

          <div className="row items-center gap-12 mt-6" style={{ padding: 14, background: 'rgba(0,156,255,0.06)', borderRadius: 12 }}>
            <Avatar name="Trang Lê" size={36} />
            <div className="flex-1">
              <div className="bold" style={{ fontSize: 12 }}>Trang typically responds within 4h</div>
              <div className="muted" style={{ fontSize: 11 }}>You can ping her if it's urgent</div>
            </div>
            <button className="btn btn-ghost btn-sm" onClick={() => actions.openMessage('Hey Trang — quick check on the D2 draft, anything stand out?')}>Message</button>
          </div>
        </div>
      </div>

      {/* Demo nav */}
      <div className="card-elevated mt-6" style={{ padding: 16, background: 'rgba(254,233,96,0.12)' }}>
        <div className="row items-center justify-between">
          <div>
            <div className="cap-label" style={{ fontSize: 9 }}>Prototype shortcut</div>
            <div className="bold" style={{ fontSize: 13 }}>Simulate brand response</div>
          </div>
          <div className="row gap-8">
            <button className="btn btn-ghost btn-sm" onClick={() => go('creator-campaign-revision')}>↩ Revision requested</button>
            <button className="btn btn-primary btn-sm" onClick={() => go('creator-campaign-publish')}>✓ Approved · schedule publish</button>
          </div>
        </div>
      </div>
    </FlowShell>
  );
}

// ─────────────────────────────────────────────────────────────────────
// 4. REVISION — brand requested changes
// ─────────────────────────────────────────────────────────────────────
// Issues are keyed by the timestamp so the left list and right player stay in sync
const REVISION_ISSUES = [
  { ts: '0:04', sec: 4,  pos: '18%', title: 'Add disclosure overlay text', body: 'Show "#ad" as on-screen text in the first 3 seconds — not just in caption. TikTok policy requires this.', sev: 'required' },
  { ts: '0:12', sec: 12, pos: '48%', title: 'Soften skin smoothing',       body: 'Looks slightly filtered in the close-up. Can you re-grade with the natural-light preset we shared?', sev: 'required' },
  { ts: '0:24', sec: 24, pos: '78%', title: 'Re-record voiceover line',    body: '"Clears acne in 3 days" reads as a medical claim. Please reword to "supports clearer skin" or similar.', sev: 'required' },
];

function ScreenCreatorCampaignRevision() {
  const { go } = useRouter();
  const [resolved, setResolved]   = React.useState([false, false, false]);
  const [selected, setSelected]   = React.useState(0);  // which timestamp is being viewed
  const [playing, setPlaying]     = React.useState(false);
  const [progress, setProgress]   = React.useState(13); // 0–100, position along the timeline
  const [v2Uploaded, setV2]       = React.useState(false);
  const [v2Uploading, setUploading] = React.useState(false);
  const [note, setNote]           = React.useState('');
  const [draft, setDraft]         = React.useState('');
  const [messages, setMessages]   = React.useState([
    { who: 'Trang', txt: '3 small things — see annotations 👆', when: '3h ago', c: '#FF6FA3' },
    { who: 'You',   txt: 'Got it — on it now. The medical-claim line totally my bad.', when: '2h ago', c: '#009CFF' },
    { who: 'Trang', txt: 'No worries! Easy fix 😊', when: '2h ago', c: '#FF6FA3' },
  ]);

  const allResolved = resolved.every(Boolean);
  const toggle = i => setResolved(r => r.map((v, j) => j === i ? !v : v));

  // Jump player to a timestamp (and select that issue)
  const jumpTo = (idx) => {
    setSelected(idx);
    setProgress((REVISION_ISSUES[idx].sec / 30) * 100);
    setPlaying(false);
  };

  // Fake playback: advance progress when 'playing'
  React.useEffect(() => {
    if (!playing) return;
    const id = setInterval(() => {
      setProgress(p => {
        const next = p + 100 / 30 / 4; // 30s clip @ 4 ticks/sec
        if (next >= 100) { setPlaying(false); return 100; }
        return next;
      });
    }, 250);
    return () => clearInterval(id);
  }, [playing]);

  // Fake upload progress
  const startUpload = () => {
    if (v2Uploading || v2Uploaded) return;
    setUploading(true);
    setTimeout(() => { setUploading(false); setV2(true); }, 1400);
  };

  const sendReply = () => {
    const txt = draft.trim();
    if (!txt) return;
    setMessages(m => [...m, { who: 'You', txt, when: 'now', c: '#009CFF' }]);
    setDraft('');
    // Trang auto-replies after a beat
    setTimeout(() => {
      setMessages(m => [...m, { who: 'Trang', txt: 'Thanks Linh! Tagging this thread — ping me when v2 is up.', when: 'now', c: '#FF6FA3' }]);
    }, 1100);
  };

  const currentSec = (progress / 100) * 30;
  const fmt = s => `0:${String(Math.floor(s)).padStart(2, '0')}`;

  return (
    <FlowShell step="creator-campaign-revision" kicker="Step 4 of 6 · Trang Lê asked for 3 tweaks"
      title="Revision requested"
      headerExtra={<Pill variant="pink">Action needed</Pill>}>

      <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 14 }}>
        <div>
          {/* Inline note from brand */}
          <div className="card-elevated" style={{
            padding: 20, background: 'linear-gradient(135deg, rgba(255,111,163,0.08), rgba(201,163,232,0.08))',
            border: '1px solid rgba(255,111,163,0.2)'
          }}>
            <div className="row items-start gap-12">
              <Avatar name="Trang Lê" size={44} />
              <div className="flex-1">
                <div className="row items-center gap-8 mb-2">
                  <div className="bold" style={{ fontSize: 14 }}>Trang Lê · Coolmate</div>
                  <span className="muted" style={{ fontSize: 11 }}>3h ago · in review</span>
                </div>
                <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.6 }}>
                  Love the energy here Linh! Just three small things before we ship 👇 Mostly compliance.
                  Otherwise this is honestly one of the best concept cuts we've seen this quarter — the
                  before/after pacing is chef's kiss.
                </p>
              </div>
            </div>
          </div>

          {/* Change list — annotated */}
          <div className="card-elevated mt-6">
            <div className="row items-center justify-between mb-3">
              <div>
                <div className="title-md">Requested changes</div>
                <div className="muted" style={{ fontSize: 12 }}>Tick each as you address it — re-submit when all are done</div>
              </div>
              <Pill variant={allResolved ? 'mint' : 'pink'}>{resolved.filter(Boolean).length} / 3 fixed</Pill>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {REVISION_ISSUES.map((c, i) => {
                const isSelected = selected === i;
                return (
                  <div key={i} className="row items-start gap-12" onClick={() => jumpTo(i)} style={{
                    padding: 14, borderRadius: 12, cursor: 'pointer',
                    background: resolved[i] ? 'rgba(31,214,180,0.08)' : isSelected ? 'rgba(255,111,163,0.08)' : 'var(--bg-soft)',
                    border: '1px solid ' + (resolved[i] ? 'rgba(31,214,180,0.3)' : isSelected ? 'var(--pink-hot)' : 'transparent'),
                    transition: 'all .2s'
                  }}>
                    <button onClick={(e) => { e.stopPropagation(); toggle(i); }} style={{
                      width: 24, height: 24, borderRadius: 6, border: 0, cursor: 'pointer',
                      background: resolved[i] ? 'var(--mint-deep)' : 'white',
                      color: 'white', display: 'grid', placeItems: 'center', fontWeight: 800
                    }}>{resolved[i] && Icon.check}</button>
                    <div className="flex-1">
                      <div className="row items-center gap-6 mb-1">
                        <span className="font-display bold tabular" style={{ fontSize: 12, color: 'var(--cyan-dark)' }}>@ {c.ts}</span>
                        <span className="bold" style={{ fontSize: 13.5, textDecoration: resolved[i] ? 'line-through' : 'none', color: resolved[i] ? 'var(--ink-soft)' : 'var(--ink)' }}>{c.title}</span>
                        <Pill variant="pink">{c.sev}</Pill>
                        {isSelected && !resolved[i] && <Pill variant="cyan">Viewing</Pill>}
                      </div>
                      <div style={{ fontSize: 12.5, lineHeight: 1.5, color: 'var(--ink-soft)' }}>{c.body}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Re-upload */}
          <div className="card-elevated mt-6">
            <div className="title-md mb-3">Upload v2</div>
            {!v2Uploaded ? (
              <div onClick={startUpload}
                style={{
                  padding: '32px 24px', textAlign: 'center', cursor: v2Uploading ? 'wait' : 'pointer',
                  border: '2px dashed ' + (v2Uploading ? 'var(--cyan)' : 'var(--line)'),
                  borderRadius: 12, background: v2Uploading ? 'rgba(0,156,255,0.04)' : 'var(--bg-soft)',
                  transition: 'border-color .2s, background .2s'
                }}
                onMouseEnter={e => { if (!v2Uploading) { e.currentTarget.style.borderColor = 'var(--cyan)'; e.currentTarget.style.background = 'rgba(0,156,255,0.04)'; } }}
                onMouseLeave={e => { if (!v2Uploading) { e.currentTarget.style.borderColor = 'var(--line)'; e.currentTarget.style.background = 'var(--bg-soft)'; } }}>
                <div style={{ fontSize: 28, marginBottom: 4 }}>{v2Uploading ? '⬆️' : '📼'}</div>
                <div className="bold" style={{ fontSize: 14 }}>{v2Uploading ? 'Uploading vitC-glow-v2.mp4…' : 'Drop revised video here'}</div>
                <div className="muted" style={{ fontSize: 11.5 }}>{v2Uploading ? 'Hang tight…' : 'Click or drag · replaces vitC-glow-takeone.mp4'}</div>
                {v2Uploading && (
                  <div style={{ height: 4, background: 'var(--line)', borderRadius: 2, marginTop: 14, overflow: 'hidden' }}>
                    <div style={{ height: '100%', width: '60%', background: 'var(--cyan)', animation: 'grow-w 1.4s ease-out forwards' }} />
                  </div>
                )}
              </div>
            ) : (
              <div className="row items-center gap-14" style={{ padding: 12, background: 'rgba(31,214,180,0.08)', borderRadius: 12, border: '1px solid rgba(31,214,180,0.3)' }}>
                <div style={{
                  width: 70, height: 100, borderRadius: 8, flexShrink: 0,
                  background: 'linear-gradient(135deg, #1FD6B4, #009CFF)',
                  display: 'grid', placeItems: 'center', color: 'white', fontSize: 22
                }}>▶</div>
                <div className="flex-1">
                  <div className="bold" style={{ fontSize: 13.5 }}>vitC-glow-v2.mp4</div>
                  <div className="muted" style={{ fontSize: 11.5 }}>192 MB · 30s · 1080×1920</div>
                  <div className="row gap-6 mt-2">
                    <Pill variant="mint" icon={Icon.check}>Upload complete</Pill>
                  </div>
                </div>
                <button className="btn btn-ghost btn-sm" onClick={() => setV2(false)}>Replace</button>
              </div>
            )}
            <label className="label mt-4">Optional note to Trang</label>
            <textarea className="input" rows="2"
              value={note} onChange={e => setNote(e.target.value)}
              placeholder="e.g. fixed all three — added on-screen #ad and softened the close-up grade"
              style={{ resize: 'vertical', fontFamily: 'inherit' }} />

            <div className="row items-center justify-between mt-4">
              <div className="muted" style={{ fontSize: 11.5 }}>
                {!allResolved && <>⚠️ Check all 3 issues first</>}
                {allResolved && !v2Uploaded && <>⚠️ Upload the revised video</>}
                {allResolved && v2Uploaded && <span style={{ color: 'var(--mint-deep)', fontWeight: 700 }}>✓ Ready to re-submit</span>}
              </div>
              <div className="row gap-8">
                <button className="btn btn-ghost btn-sm">Save draft</button>
                <button className="btn btn-primary btn-sm"
                  disabled={!allResolved || !v2Uploaded}
                  style={{ opacity: (allResolved && v2Uploaded) ? 1 : 0.4, cursor: (allResolved && v2Uploaded) ? 'pointer' : 'not-allowed' }}
                  onClick={() => go('creator-campaign-review')}>
                  Re-submit for review {Icon.arrow}
                </button>
              </div>
            </div>
          </div>
        </div>

        {/* Side: mini video player + thread */}
        <div>
          <div className="card-elevated">
            <div className="row items-center justify-between mb-3">
              <div className="title-md">v1 · click a tag to scrub</div>
              <span className="muted tabular" style={{ fontSize: 11 }}>{fmt(currentSec)} / 0:30</span>
            </div>
            <div style={{ position: 'relative', aspectRatio: '9/14', borderRadius: 10, overflow: 'hidden', background: 'linear-gradient(135deg, #79FEE7, #009CFF)' }}>
              <button onClick={() => setPlaying(p => !p)} style={{
                position: 'absolute', inset: 0, border: 0, cursor: 'pointer',
                background: 'transparent', display: 'grid', placeItems: 'center',
                color: 'white', fontSize: 48
              }}>{playing ? '❙❙' : '▶'}</button>

              {/* Issue overlay panel that updates as user scrubs */}
              <div style={{
                position: 'absolute', left: 12, right: 12, bottom: 12,
                padding: '10px 12px', borderRadius: 10,
                background: 'rgba(0, 43, 80, 0.78)', backdropFilter: 'blur(8px)',
                color: 'white', fontSize: 11, lineHeight: 1.4
              }}>
                <div className="row items-center gap-6 mb-1">
                  <span style={{ background: 'var(--pink-hot)', padding: '2px 6px', borderRadius: 4, fontWeight: 800, fontSize: 10 }}>@ {REVISION_ISSUES[selected].ts}</span>
                  <span className="bold" style={{ fontSize: 11.5 }}>{REVISION_ISSUES[selected].title}</span>
                </div>
                <div style={{ opacity: 0.85 }}>{REVISION_ISSUES[selected].body}</div>
              </div>

              {/* Clickable timestamp tags pinned on right edge */}
              {REVISION_ISSUES.map((m, i) => (
                <button key={i}
                  onClick={(e) => { e.stopPropagation(); jumpTo(i); }}
                  style={{
                    position: 'absolute', top: m.pos, right: 8,
                    background: selected === i ? 'var(--ink)' : 'var(--pink-hot)',
                    color: 'white', fontWeight: 800, fontSize: 11, fontFamily: 'inherit',
                    padding: '5px 9px', borderRadius: 6, border: 0, cursor: 'pointer',
                    boxShadow: '0 4px 12px rgba(0,0,0,0.25)',
                    transform: selected === i ? 'scale(1.1)' : 'scale(1)',
                    transition: 'transform .15s, background .2s'
                  }}>{m.ts}{resolved[i] ? ' ✓' : ''}</button>
              ))}
            </div>

            {/* Scrubber */}
            <div style={{ position: 'relative', height: 18, marginTop: 12, cursor: 'pointer' }}
              onClick={(e) => {
                const r = e.currentTarget.getBoundingClientRect();
                const p = Math.max(0, Math.min(100, ((e.clientX - r.left) / r.width) * 100));
                setProgress(p); setPlaying(false);
              }}>
              <div style={{ position: 'absolute', left: 0, right: 0, top: 8, height: 4, background: 'var(--bg-soft)', borderRadius: 2 }} />
              <div style={{ position: 'absolute', left: 0, top: 8, height: 4, width: progress + '%', background: 'var(--cyan)', borderRadius: 2 }} />
              {REVISION_ISSUES.map((m, i) => (
                <div key={i} style={{
                  position: 'absolute', left: ((m.sec / 30) * 100) + '%', top: 4,
                  width: 12, height: 12, borderRadius: 3, transform: 'translateX(-50%)',
                  background: resolved[i] ? 'var(--mint-deep)' : 'var(--pink-hot)',
                  border: '2px solid white', cursor: 'pointer'
                }} onClick={(e) => { e.stopPropagation(); jumpTo(i); }} />
              ))}
              <div style={{
                position: 'absolute', left: progress + '%', top: 0, width: 14, height: 18, transform: 'translateX(-50%)',
                background: 'var(--ink)', borderRadius: 3, boxShadow: '0 2px 6px rgba(0,43,80,0.3)'
              }} />
            </div>

            <button onClick={() => setPlaying(p => !p)} className="btn btn-ghost btn-sm mt-3" style={{ width: '100%' }}>
              {playing ? '❙❙ Pause' : '▶ Play through annotations'}
            </button>
          </div>

          <div className="card-elevated mt-6">
            <div className="title-md mb-3">Conversation</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, maxHeight: 280, overflowY: 'auto' }}>
              {messages.map((m, i) => (
                <div key={i} className="row items-start gap-8" style={{
                  flexDirection: m.who === 'You' ? 'row-reverse' : 'row',
                  animation: i >= 3 ? 'cardIn .3s ease-out' : 'none'
                }}>
                  <div style={{
                    width: 28, height: 28, borderRadius: 999, flexShrink: 0,
                    background: m.c, color: 'white', display: 'grid', placeItems: 'center',
                    fontWeight: 800, fontSize: 11
                  }}>{m.who === 'You' ? 'Y' : 'T'}</div>
                  <div style={{
                    padding: '8px 12px', borderRadius: 12, maxWidth: '80%',
                    background: m.who === 'You' ? 'var(--ink)' : 'var(--bg-soft)',
                    color: m.who === 'You' ? 'white' : 'var(--ink)'
                  }}>
                    <div style={{ fontSize: 12.5, lineHeight: 1.4 }}>{m.txt}</div>
                    <div style={{ fontSize: 10, opacity: 0.6, marginTop: 2 }}>{m.when}</div>
                  </div>
                </div>
              ))}
            </div>
            <div className="row items-center gap-8 mt-3" style={{ padding: '8px 12px', background: 'var(--bg-soft)', borderRadius: 999 }}>
              <input placeholder="Reply to Trang..."
                value={draft}
                onChange={e => setDraft(e.target.value)}
                onKeyDown={e => { if (e.key === 'Enter') sendReply(); }}
                style={{ flex: 1, border: 0, background: 'transparent', fontSize: 12.5, outline: 'none', fontFamily: 'inherit' }} />
              <button onClick={sendReply} disabled={!draft.trim()}
                style={{ background: 'transparent', border: 0, color: draft.trim() ? 'var(--cyan-dark)' : 'var(--ink-soft)', cursor: draft.trim() ? 'pointer' : 'not-allowed' }}>{Icon.arrow}</button>
            </div>
          </div>
        </div>
      </div>
    </FlowShell>
  );
}

// ─────────────────────────────────────────────────────────────────────
// 5. PUBLISH — approved, schedule the post going live
// ─────────────────────────────────────────────────────────────────────
function ScreenCreatorCampaignPublish() {
  const { go } = useRouter();
  const actions = useCampaignActions();
  const [platforms, setPlatforms] = React.useState({ tiktok: true, instagram: true, youtube: false });
  const [autoPost, setAutoPost] = React.useState(true);
  const [slot, setSlot] = React.useState('Friday May 22 · 7:00 PM ICT');
  const toggle = k => setPlatforms(p => ({ ...p, [k]: !p[k] }));

  return (
    <FlowShell step="creator-campaign-publish" kicker="Step 5 of 6 · Approved · ready to ship"
      title="Schedule publish"
      headerExtra={<Pill variant="mint" icon={Icon.check}>Approved</Pill>}>

      {/* Approval banner */}
      <div className="card-elevated" style={{
        padding: 24, background: 'linear-gradient(135deg, #1FD6B4 0%, #009CFF 100%)',
        color: 'white', position: 'relative', overflow: 'hidden', marginBottom: 18
      }}>
        <div style={{ position: 'absolute', top: -40, right: -40, width: 220, height: 220, borderRadius: '50%', background: 'rgba(255,255,255,0.2)', filter: 'blur(20px)' }} />
        <div className="row items-center gap-16" style={{ position: 'relative', zIndex: 1 }}>
          <div style={{ fontSize: 48 }}>🎬</div>
          <div className="flex-1">
            <div className="cap-label" style={{ color: 'rgba(255,255,255,0.7)' }}>Approved by Trang Lê · 6 min ago</div>
            <h2 className="font-display" style={{ fontSize: 26, fontWeight: 700, margin: '2px 0', letterSpacing: '-0.02em' }}>v2 is good to go.</h2>
            <div style={{ fontSize: 13, fontWeight: 600, opacity: 0.9 }}>Pick where and when — payment of $720 releases once first post is live.</div>
          </div>
          <div className="text-right">
            <div className="cap-label" style={{ color: 'rgba(255,255,255,0.7)' }}>Payment pending</div>
            <div className="font-display bold tabular" style={{ fontSize: 32, lineHeight: 1 }}>$720</div>
          </div>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 14 }}>
        <div>
          {/* Platform select */}
          <div className="card-elevated">
            <div className="title-md mb-3">Publish to</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                { k: 'tiktok', l: 'TikTok', h: '@linhchau · 482K followers', icon: Icon.tiktok, c: '#002B50', notes: 'Recommended · primary audience' },
                { k: 'instagram', l: 'Instagram Reels', h: '@linhchau · 184K followers', icon: Icon.instagram, c: '#FF6FA3', notes: 'Mirrors caption · 24h after TikTok recommended' },
                { k: 'youtube', l: 'YouTube Shorts', h: 'Linh Chau Skincare · 32K subs', icon: Icon.youtube, c: '#FF4444', notes: 'Not in brief but allowed' },
              ].map(p => (
                <label key={p.k} className="row items-center gap-14" style={{
                  padding: 14, borderRadius: 12, cursor: 'pointer',
                  background: platforms[p.k] ? 'rgba(0,156,255,0.06)' : 'var(--bg-soft)',
                  border: '2px solid ' + (platforms[p.k] ? 'var(--cyan)' : 'transparent')
                }}>
                  <input type="checkbox" checked={platforms[p.k]} onChange={() => toggle(p.k)} style={{ width: 18, height: 18 }} />
                  <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}</div>
                  </div>
                  <div className="text-right">
                    <Pill variant={platforms[p.k] ? 'cyan' : 'ink'}>{platforms[p.k] ? 'Will post' : 'Skip'}</Pill>
                    <div className="muted mt-1" style={{ fontSize: 10 }}>{p.notes}</div>
                  </div>
                </label>
              ))}
            </div>
          </div>

          {/* Schedule */}
          <div className="card-elevated mt-6">
            <div className="row items-center justify-between mb-3">
              <div>
                <div className="title-md">Posting time</div>
                <div className="muted" style={{ fontSize: 12 }}>Based on when your audience is most active</div>
              </div>
              <Pill variant="mint" icon={Icon.spark}>AI-optimized</Pill>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 6, marginBottom: 14 }}>
              {['M', 'T', 'W', 'T', 'F', 'S', 'S'].map((d, i) => (
                <div key={i} style={{ textAlign: 'center' }}>
                  <div className="cap-label" style={{ fontSize: 9 }}>{d}</div>
                  <div style={{
                    height: [12, 28, 22, 36, 48, 32, 26][i], background: i === 4 ? 'var(--cyan)' : 'var(--bg-soft)',
                    borderRadius: 4, marginTop: 4
                  }} />
                </div>
              ))}
            </div>

            <div className="row items-center gap-12" style={{ padding: 16, background: 'rgba(0,156,255,0.06)', borderRadius: 12, border: '1px solid rgba(0,156,255,0.2)' }}>
              <div style={{ fontSize: 28 }}>🕖</div>
              <div className="flex-1">
                <div className="bold">{slot}</div>
                <div className="muted" style={{ fontSize: 11 }}>Peak engagement window · projected +18% reach vs avg</div>
              </div>
              <button className="btn btn-ghost btn-sm" onClick={() => actions.openTimePicker((t) => setSlot(t))}>Change</button>
            </div>

            <label className="row items-center gap-8 mt-4" style={{ cursor: 'pointer' }}>
              <input type="checkbox" checked={autoPost} onChange={e => setAutoPost(e.target.checked)} />
              <span style={{ fontSize: 13 }}>Auto-publish via Prime · we'll post on your behalf using your connected accounts.</span>
            </label>
          </div>

          <div className="row justify-end gap-8 mt-6">
            <button className="btn btn-ghost btn-sm" onClick={() => go('creator-campaign-detail')}>Save for later</button>
            <button className="btn btn-primary btn-sm" onClick={() => { actions.toast(`Scheduled for ${slot}`, 'success'); go('creator-campaign-wrap'); }}>
              Confirm &amp; schedule {Icon.arrow}
            </button>
          </div>
        </div>

        {/* Preview */}
        <div>
          <div className="card-elevated" style={{ position: 'sticky', top: 80 }}>
            <div className="cap-label mb-2">Preview</div>
            <div style={{
              aspectRatio: '9/16', borderRadius: 14, overflow: 'hidden', position: 'relative',
              background: 'linear-gradient(135deg, #79FEE7, #009CFF)',
              maxWidth: 260, margin: '0 auto'
            }}>
              <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', color: 'white', fontSize: 56 }}>▶</div>
              <div style={{ position: 'absolute', top: 12, left: 12, right: 12, color: 'white' }}>
                <div className="row items-center gap-8">
                  <div style={{ width: 28, height: 28, borderRadius: 999, background: 'white', color: 'var(--cyan-dark)', display: 'grid', placeItems: 'center', fontWeight: 800, fontSize: 12 }}>L</div>
                  <div>
                    <div style={{ fontSize: 12, fontWeight: 700 }}>@linhchau</div>
                    <div style={{ fontSize: 9, opacity: 0.8 }}>Sponsored · #ad</div>
                  </div>
                </div>
              </div>
              <div style={{ position: 'absolute', bottom: 12, left: 12, right: 12, color: 'white', fontSize: 11, lineHeight: 1.4, textShadow: '0 1px 4px rgba(0,0,0,0.4)' }}>
                POV: when ur niacinamide finally hits ✨<br />
                <span style={{ opacity: 0.85 }}>Full routine in comments...</span>
              </div>
            </div>
            <div className="muted text-center mt-3" style={{ fontSize: 11 }}>TikTok view · 9:16</div>
          </div>
        </div>
      </div>
    </FlowShell>
  );
}

// ─────────────────────────────────────────────────────────────────────
// 6. WRAP — campaign complete, final summary, claim payout, rate brand
// ─────────────────────────────────────────────────────────────────────
function ScreenCreatorCampaignWrap() {
  const { go } = useRouter();
  const actions = useCampaignActions();
  const [rating, setRating] = React.useState(0);
  const [hover, setHover] = React.useState(0);
  const [claimed, setClaimed] = React.useState(false);
  const [pickedTags, setPickedTags] = React.useState(['Clear brief', 'Fast feedback', 'On-time payment']);
  const [submitted, setSubmitted] = React.useState(false);
  const togglePill = (t) => setPickedTags(p => p.includes(t) ? p.filter(x => x !== t) : [...p, t]);

  return (
    <FlowShell step="creator-campaign-wrap" kicker="Step 6 of 6 · 28 days · 3 posts · 2.4M reach"
      title="Campaign wrapped — nice work."
      headerExtra={<Pill variant="mint" icon={Icon.trophy}>Top 12% of creators</Pill>}>

      {/* Hero — total earned */}
      <div className="card-elevated" style={{
        padding: 32, background: 'linear-gradient(135deg, #002B50 0%, #1C1CC9 60%, #6464E8 100%)',
        color: 'white', position: 'relative', overflow: 'hidden', marginBottom: 18
      }}>
        <div style={{ position: 'absolute', top: -60, right: -60, width: 280, height: 280, borderRadius: '50%', background: 'radial-gradient(circle, rgba(121,254,231,0.4), transparent 60%)', filter: 'blur(30px)' }} />
        <div style={{ position: 'absolute', bottom: -40, left: -40, width: 220, height: 220, borderRadius: '50%', background: 'radial-gradient(circle, rgba(255,111,163,0.3), transparent 60%)', filter: 'blur(30px)' }} />
        <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 earned this campaign</div>
            <div className="font-display tabular" style={{ fontSize: 96, fontWeight: 700, letterSpacing: '-0.04em', lineHeight: 1, marginTop: 4 }}>
              $<Counter to={1800} duration={2200} />
            </div>
            <div className="row items-center gap-12 mt-3">
              <Pill variant="dark" icon={Icon.trend}>+12% vs target</Pill>
              <Pill variant="dark">Coolmate · D1, D2, D3 paid</Pill>
            </div>
          </div>
          <div style={{ height: 100, width: 1, background: 'rgba(255,255,255,0.2)' }} />
          <div className="row gap-20">
            {[
              ['Reach', '2.4M', '+19% vs base'],
              ['Engagement rate', '7.4%', 'Top 5%'],
              ['New followers', '+8.2K', 'Plus halo'],
            ].map(([l, v, s], 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: 32, fontWeight: 700, marginTop: 4 }}>{v}</div>
                <div style={{ fontSize: 11, opacity: 0.7 }}>{s}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 14 }}>
        <div>
          {/* Reach trajectory */}
          <div className="card-elevated">
            <div className="row items-center justify-between mb-3">
              <div>
                <div className="title-md">Reach trajectory</div>
                <div className="muted" style={{ fontSize: 12 }}>All three posts · 28 days</div>
              </div>
              <div className="row gap-8">
                <div className="row items-center gap-6"><span style={{ width: 10, height: 10, borderRadius: 999, background: 'var(--cyan)' }} /><span style={{ fontSize: 11 }}>TikTok</span></div>
                <div className="row items-center gap-6"><span style={{ width: 10, height: 10, borderRadius: 999, background: 'var(--pink-hot)' }} /><span style={{ fontSize: 11 }}>IG Reels</span></div>
              </div>
            </div>
            <LineChart
              series={[
                { name: 'TikTok', color: '#009CFF', data: [0, 120, 380, 720, 1100, 1380, 1620, 1820] },
                { name: 'IG', color: '#FF6FA3', data: [0, 60, 180, 320, 460, 540, 580, 620] },
              ]}
              xLabels={['D1', 'D5', 'D9', 'D14', 'D17', 'D21', 'D25', 'D28']}
              height={200}
            />
          </div>

          {/* Deliverable recap */}
          <div className="card-elevated mt-6">
            <div className="title-md mb-3">Final scorecard</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { d: 'D1 · Concept &amp; script',  pay: 540, perf: null, c: 'var(--mint-deep)' },
                { d: 'D2 · TikTok 30s',             pay: 720, perf: { reach: '1.2M', er: '7.4%' }, c: 'var(--cyan)' },
                { d: 'D3 · Follow-up reel',         pay: 540, perf: { reach: '1.2M', er: '6.9%' }, c: 'var(--pink-hot)' },
              ].map((d, i) => (
                <div key={i} className="row items-center gap-14" style={{ padding: '12px 14px', background: 'var(--bg-soft)', borderRadius: 10 }}>
                  <span style={{ width: 6, height: 36, borderRadius: 3, background: d.c }} />
                  <div className="flex-1">
                    <div className="bold" style={{ fontSize: 13 }} dangerouslySetInnerHTML={{ __html: d.d }} />
                    {d.perf && <div className="muted tabular" style={{ fontSize: 11 }}>{d.perf.reach} reach · {d.perf.er} ER</div>}
                    {!d.perf && <div className="muted" style={{ fontSize: 11 }}>Internal deliverable · no public post</div>}
                  </div>
                  <Pill variant="mint" icon={Icon.check}>Paid</Pill>
                  <div className="font-display bold tabular" style={{ fontSize: 18, width: 70, textAlign: 'right' }}>${d.pay}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div>
          {/* Claim final payment */}
          <div className="card-elevated" style={{
            background: claimed ? 'rgba(31,214,180,0.06)' : 'linear-gradient(135deg, #FEE960 0%, #FF7A59 100%)',
            color: claimed ? 'var(--ink)' : 'white', position: 'relative', overflow: 'hidden'
          }}>
            {!claimed && <div style={{ position: 'absolute', top: -30, right: -30, width: 160, height: 160, borderRadius: '50%', background: 'rgba(255,255,255,0.25)', filter: 'blur(20px)' }} />}
            <div style={{ position: 'relative', zIndex: 1 }}>
              <div className="cap-label" style={{ color: claimed ? 'var(--ink-soft)' : 'rgba(0,43,80,0.6)' }}>
                {claimed ? 'Payout sent' : 'Final wrap bonus available'}
              </div>
              <div className="font-display tabular" style={{ fontSize: 44, fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1, marginTop: 4, color: claimed ? 'var(--mint-deep)' : 'var(--ink)' }}>
                ${claimed ? '540' : '540'}
              </div>
              <div style={{ fontSize: 12.5, marginTop: 6, color: claimed ? 'var(--ink-soft)' : 'rgba(0,43,80,0.8)' }}>
                {claimed ? 'On its way to Vietcombank ··· 8421 · arrives in 1-2 business days' : '30% bonus for hitting target reach. Releases now.'}
              </div>
              <button className="btn btn-primary btn-sm mt-4" style={{ width: '100%' }}
                disabled={claimed}
                onClick={() => { setClaimed(true); actions.toast('$540 sent to Vietcombank ••• 8421', 'success'); }}>
                {claimed ? <span className="row items-center gap-6 justify-center">{Icon.check} Claimed</span> : 'Claim $540 now'}
              </button>
            </div>
          </div>

          {/* Rate the brand */}
          <div className="card-elevated mt-6">
            {submitted ? (
              <div className="text-center" style={{ padding: '20px 12px' }}>
                <div style={{ fontSize: 44, marginBottom: 8 }}>🙏</div>
                <div className="title-md mb-2">Thanks for the feedback</div>
                <div className="muted" style={{ fontSize: 12.5, lineHeight: 1.5 }}>Coolmate received your {rating}-star rating. We'll prioritize similar campaigns in your matches.</div>
                <button className="btn btn-ghost btn-sm mt-4" onClick={() => setSubmitted(false)}>Edit rating</button>
              </div>
            ) : (
              <React.Fragment>
                <div className="title-md mb-2">Rate your experience with Coolmate</div>
                <div className="muted mb-3" style={{ fontSize: 12 }}>Helps other creators decide whether to apply. Only the overall score is public.</div>
                <div className="row gap-4 mb-4">
                  {[1, 2, 3, 4, 5].map(n => {
                    const active = n <= (hover || rating);
                    return (
                      <button key={n}
                        onClick={() => setRating(n)}
                        onMouseEnter={() => setHover(n)}
                        onMouseLeave={() => setHover(0)}
                        style={{
                          background: 'transparent', border: 0, padding: 0, cursor: 'pointer',
                          fontSize: 32, color: active ? '#F2C411' : 'var(--line)',
                          transition: 'transform .15s', transform: active ? 'scale(1.1)' : 'scale(1)'
                        }}>★</button>
                    );
                  })}
                </div>

                <div className="cap-label mb-2">What worked? (toggle to pick)</div>
                <div className="row gap-6 mb-4" style={{ flexWrap: 'wrap' }}>
                  {['Clear brief', 'Fast feedback', 'On-time payment', 'Creative freedom', 'Will work again'].map(c => {
                    const picked = pickedTags.includes(c);
                    return (
                      <button key={c} onClick={() => togglePill(c)} style={{
                        padding: '5px 12px', borderRadius: 999, border: 0, cursor: 'pointer', fontFamily: 'inherit',
                        background: picked ? 'rgba(31,214,180,0.18)' : 'var(--bg-soft)',
                        color: picked ? '#0a8a72' : 'var(--ink-soft)',
                        fontWeight: 700, fontSize: 11, letterSpacing: '0.01em', transition: 'all .15s'
                      }}>{picked ? '✓ ' : '+ '}{c}</button>
                    );
                  })}
                </div>

                <textarea className="input" rows="3" placeholder="Anything else? (private to Coolmate's team)" style={{ resize: 'vertical', fontFamily: 'inherit' }} />
                <button className="btn btn-primary btn-sm mt-3" style={{ width: '100%' }}
                  disabled={!rating}
                  onClick={() => { setSubmitted(true); actions.toast(`Rating submitted · ${rating} stars`, 'success'); }}>
                  {rating ? `Submit ${rating}-star rating` : 'Pick a star rating first'}
                </button>
              </React.Fragment>
            )}
          </div>
        </div>
      </div>

      {/* What's next */}
      <div className="card-elevated mt-6" style={{ padding: 24 }}>
        <div className="row items-center justify-between mb-4">
          <div>
            <div className="title-md">3 similar campaigns are open right now</div>
            <div className="muted" style={{ fontSize: 12 }}>Picked because you nailed Vit-C content with strong female 18–24 reach</div>
          </div>
          <button className="btn btn-ghost btn-sm" onClick={() => go('creator-discover')}>See all open briefs {Icon.arrow}</button>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
          {[
            { brand: 'DermaPlus',  title: 'Niacinamide deep-dive', match: 94, pay: '$1.2–1.8K', c: 'var(--mint-deep)' },
            { brand: 'GlowLab',    title: 'AHA exfoliant series',   match: 88, pay: '$900–1.4K', c: 'var(--cyan)' },
            { brand: 'Skinfolk',   title: 'SPF for Gen-Z launch',   match: 86, pay: '$2.0–2.6K', c: 'var(--pink-hot)' },
          ].map((c, i) => (
            <div key={i} style={{ padding: 16, background: 'var(--bg-soft)', borderRadius: 12, cursor: 'pointer' }}
              onClick={() => go('creator-discover')}>
              <div className="row items-center justify-between mb-2">
                <Pill variant="mint">{c.match}% match</Pill>
                <span style={{ fontSize: 11, fontWeight: 700, color: c.c }}>{c.pay}</span>
              </div>
              <div className="bold" style={{ fontSize: 12 }}>{c.brand}</div>
              <div className="font-display bold mt-1" style={{ fontSize: 16, letterSpacing: '-0.015em' }}>{c.title}</div>
              <a className="row items-center gap-4 mt-3" style={{ fontSize: 11.5, color: 'var(--cyan-dark)', fontWeight: 700 }}>View brief {Icon.arrow}</a>
            </div>
          ))}
        </div>
      </div>

      <div className="row justify-center mt-6">
        <button className="btn btn-ghost btn-sm" onClick={() => go('creator-campaigns')}>← Back to My campaigns</button>
      </div>
    </FlowShell>
  );
}

// ── Export everything ────────────────────────────────────────────────
// Wrap each flow screen in the actions host so useCampaignActions() resolves to a real provider
const withActions = (Inner) => function ActionsWrapped(props) {
  return <CampaignActionsHost><Inner {...props} /></CampaignActionsHost>;
};

Object.assign(window, {
  ScreenCreatorCampaignKickoff:  withActions(ScreenCreatorCampaignKickoff),
  ScreenCreatorCampaignUpload:   withActions(ScreenCreatorCampaignUpload),
  ScreenCreatorCampaignReview:   withActions(ScreenCreatorCampaignReview),
  ScreenCreatorCampaignRevision: withActions(ScreenCreatorCampaignRevision),
  ScreenCreatorCampaignPublish:  withActions(ScreenCreatorCampaignPublish),
  ScreenCreatorCampaignWrap:     withActions(ScreenCreatorCampaignWrap),
});