/* screen-campaign-wizard-v2.jsx — Unified 4-step Campaign wizard.
   Replaces ScreenBrandCampaignNew. Uses AppSidebar + AppTopbar. */
/* global React, CFStepper, Icon, AppSidebar, AppTopbar, useRouter, useT */

const { useState: useWv2State } = React;
const CFW_STEPS = ['Metadata', 'Requirements', 'Deliverables & budget', 'Review'];

function ScreenBrandCampaignNew() {
  const { go } = useRouter();
  const [step, setStep] = useWv2State(0);
  const [data, setData] = useWv2State({
    name: 'Vitamin C Skin Glow · Q2 Launch',
    brand: 'Aurora Beauty',
    type: 'paid + affiliate',
    objective: 'awareness',
    description: 'Skincare launch targeting 18–24F in HCM. Vitamin C ampoule + serum bundle. Focus: clean-beauty, dermatological claim, vegan.',
    platforms: ['tiktok', 'instagram'],
    categories: ['skincare', 'beauty'],
    levels: ['micro', 'nano'],
    geo: ['HCM'],
    audienceAge: '18–24',
    audienceGender: 'F (skew)',
    deliverables: [
      { platform: 'TikTok',    type: 'short video · 30–60s', qty: 1 },
      { platform: 'Instagram', type: 'reel · 30s + 3 stories', qty: 1 },
      { platform: 'TikTok',    type: 'unboxing live · 20m',  qty: 1 },
    ],
    budget: 15000,
    budgetPerCreator: 2500,
    start: '2026-05-20', end: '2026-06-17',
    usageRights: 'Paid social · 30 days · brand handles only',
    affiliate: true, affiliateRate: 12,
  });

  const next = () => step < 3 ? setStep(step + 1) : go('brand-campaigns');
  const prev = () => step > 0 ? setStep(step - 1) : go('brand-campaigns');

  return (
    <div className="app-shell">
      <AppSidebar portal="brand" active="brand-campaigns" />
      <main className="main" style={{ paddingBottom: 100 }}>
        <AppTopbar showNewCampaign={false} />

        {/* Crumbs */}
        <div className="row items-center gap-6 muted mb-3" style={{ fontSize: 12 }}>
          <a onClick={() => go('brand-campaigns')} style={{ cursor: 'pointer' }}>Campaigns</a>
          <span>·</span>
          <span className="bold" style={{ color: 'var(--ink)' }}>New campaign</span>
        </div>

        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
          <div>
            <h1 className="page-title">New campaign</h1>
            <div className="page-subtitle">
              Brief content lives <b style={{ color: 'var(--ink)' }}>inside</b> the campaign — one wizard, one source of truth.
            </div>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button className="btn btn-ghost btn-sm">Save draft</button>
            <button className="btn btn-ghost btn-sm" onClick={() => go('brand-campaigns')}>Discard</button>
          </div>
        </div>

        <CFStepper steps={CFW_STEPS} current={step} />

        <div className="cf-wizard">
          <div className="cf-wcard">
            {step === 0 && <StepMetadata data={data} setData={setData} />}
            {step === 1 && <StepRequirements data={data} setData={setData} />}
            {step === 2 && <StepDeliverables data={data} setData={setData} />}
            {step === 3 && <StepReview data={data} />}
          </div>
          <WizPreview data={data} step={step} />
        </div>

        <div className="cf-footer">
          <button className="btn btn-ghost btn-sm" onClick={prev}>{step === 0 ? 'Cancel' : '← Back'}</button>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <span className="autosave"><span className="pulse"></span>Auto-saved 8s ago</span>
            <span className="progress">Step <b style={{ color: 'var(--ink)' }}>{step + 1}</b> of {CFW_STEPS.length}</span>
          </div>
          <button className="btn btn-primary btn-sm" onClick={next}>
            {step === 3 ? <>Publish &amp; open recruiting {Icon.spark}</> : <>Next {Icon.arrow}</>}
          </button>
        </div>
      </main>
    </div>
  );
}

// ─── Step 1 — Metadata ────────────────────────────────────────────
function StepMetadata({ data, setData }) {
  return (
    <div>
      <h3>Tell us about your campaign</h3>
      <div className="desc">The more specific, the better the creator matching gets later.</div>

      <div className="cf-field">
        <label>Campaign name</label>
        <input className="cf-input" value={data.name} onChange={e => setData({ ...data, name: e.target.value })} />
      </div>
      <div className="cf-row">
        <div className="cf-field">
          <label>Brand</label>
          <input className="cf-input" value={data.brand} onChange={e => setData({ ...data, brand: e.target.value })} />
        </div>
        <div className="cf-field">
          <label>Campaign type</label>
          <input className="cf-input" value={data.type} onChange={e => setData({ ...data, type: e.target.value })} />
          <div className="hint">paid · gifting · affiliate · hybrid</div>
        </div>
      </div>
      <div className="cf-field">
        <label>Primary objective</label>
        <div className="cf-pills">
          {['Awareness', 'Consideration', 'Conversion', 'Loyalty / rebook'].map((o, i) => (
            <span key={o}
              className={'cf-pill' + (data.objective === o.toLowerCase().split(' ')[0] ? ' on' : '')}
              onClick={() => setData({ ...data, objective: o.toLowerCase().split(' ')[0] })}>
              {data.objective === o.toLowerCase().split(' ')[0] && (
                <span className="check"><svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="m5 12 5 5L20 7"/></svg></span>
              )}
              {o}
            </span>
          ))}
        </div>
      </div>
      <div className="cf-field">
        <label>What are you launching?</label>
        <textarea className="cf-input cf-textarea" value={data.description} onChange={e => setData({ ...data, description: e.target.value })}></textarea>
        <div className="hint">AI uses this to write the creator-facing brief and the shortlist rationale.</div>
      </div>
    </div>
  );
}

// ─── Step 2 — Requirements ────────────────────────────────────────
function StepRequirements({ data, setData }) {
  const togglePlatform = (p) => {
    const has = data.platforms.includes(p);
    setData({ ...data, platforms: has ? data.platforms.filter(x => x !== p) : [...data.platforms, p] });
  };
  const Pill = ({ children, on, onClick }) => (
    <span className={'cf-pill' + (on ? ' on' : '')} onClick={onClick}>
      {on && <span className="check"><svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"><path d="m5 12 5 5L20 7"/></svg></span>}
      {children}
    </span>
  );
  return (
    <div>
      <h3>Who do you want to reach?</h3>
      <div className="desc">Tightens the AI shortlist and lets creators self-qualify before applying.</div>

      <div className="cf-field">
        <label>Platforms</label>
        <div className="cf-pills">
          <Pill on={data.platforms.includes('tiktok')} onClick={() => togglePlatform('tiktok')}>{Icon.tiktok} TikTok</Pill>
          <Pill on={data.platforms.includes('instagram')} onClick={() => togglePlatform('instagram')}>{Icon.instagram} Instagram</Pill>
          <Pill on={data.platforms.includes('youtube')} onClick={() => togglePlatform('youtube')}>{Icon.youtube} YouTube</Pill>
          <Pill>Shopee Live</Pill>
        </div>
      </div>

      <div className="cf-field">
        <label>Creator categories</label>
        <div className="cf-pills">
          <Pill on>Skincare</Pill>
          <Pill on>Beauty</Pill>
          <Pill>Lifestyle</Pill>
          <Pill>Wellness</Pill>
          <Pill>Derm</Pill>
        </div>
      </div>

      <div className="cf-field">
        <label>Creator tier</label>
        <div className="cf-pills">
          <Pill>Nano · &lt;50K</Pill>
          <Pill on>Micro · 50K–500K</Pill>
          <Pill>Mid · 500K–1M</Pill>
          <Pill>Macro · 1M+</Pill>
        </div>
        <div className="hint">Default sort will rank by cost-per-engagement, not followers.</div>
      </div>

      <div className="cf-row-3">
        <div className="cf-field">
          <label>Geography</label>
          <input className="cf-input" value={data.geo[0]} onChange={e => setData({ ...data, geo: [e.target.value] })} />
        </div>
        <div className="cf-field">
          <label>Audience age</label>
          <input className="cf-input" value={data.audienceAge} onChange={e => setData({ ...data, audienceAge: e.target.value })} />
        </div>
        <div className="cf-field">
          <label>Audience gender</label>
          <input className="cf-input" value={data.audienceGender} onChange={e => setData({ ...data, audienceGender: e.target.value })} />
        </div>
      </div>

      <div className="cf-field">
        <label>Trust guards</label>
        <div className="cf-pills">
          <span className="cf-pill on" style={{ borderColor: 'var(--red)', background: 'rgba(255,68,68,0.06)', color: '#B12B2B' }}>
            <span className="check" style={{ background: 'var(--red)', color: 'white' }}>
              <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"><path d="m5 12 5 5L20 7"/></svg>
            </span>
            Bot ratio &lt; 10%
          </span>
          <Pill on>Provenance ≤ 14d</Pill>
          <Pill>Verified only</Pill>
        </div>
      </div>
    </div>
  );
}

// ─── Step 3 — Deliverables & budget ───────────────────────────────
function StepDeliverables({ data, setData }) {
  return (
    <div>
      <h3>Deliverables &amp; budget</h3>
      <div className="desc">Becomes the contract. Creators see the exact deliverable list before they apply.</div>

      <div className="cf-field">
        <label>Per-creator deliverables</label>
        {data.deliverables.map((d, i) => (
          <div className="cf-deliv" key={i}>
            <span className="pl">
              {d.platform === 'TikTok' ? Icon.tiktok : d.platform === 'Instagram' ? Icon.instagram : Icon.youtube}
              {d.platform}
            </span>
            <span className="ct">{d.type}</span>
            <span className="qty">× {d.qty}</span>
            <span className="del">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M6 6v14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6"/></svg>
            </span>
          </div>
        ))}
        <button style={{ background: 'transparent', border: '1.5px dashed var(--line-strong)', color: 'var(--ink-soft)', borderRadius: 10, padding: '8px 12px', fontWeight: 700, fontSize: 12, marginTop: 4, width: '100%', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
          {Icon.plus} Add deliverable
        </button>
      </div>

      <div className="cf-row">
        <div className="cf-field">
          <label>Total budget</label>
          <input className="cf-input" value={'$' + data.budget.toLocaleString()} readOnly />
        </div>
        <div className="cf-field">
          <label>Budget per creator</label>
          <input className="cf-input" value={'$' + data.budgetPerCreator.toLocaleString()} readOnly />
          <div className="hint">≈ <b style={{ color: 'var(--ink)' }}>{Math.floor(data.budget / data.budgetPerCreator)} creators</b> at this rate.</div>
        </div>
      </div>

      <div className="cf-row">
        <div className="cf-field">
          <label>Recruiting opens</label>
          <input className="cf-input" value={data.start} onChange={e => setData({ ...data, start: e.target.value })} />
        </div>
        <div className="cf-field">
          <label>Campaign ends</label>
          <input className="cf-input" value={data.end} onChange={e => setData({ ...data, end: e.target.value })} />
        </div>
      </div>

      <div className="cf-field">
        <label>Usage rights</label>
        <input className="cf-input" value={data.usageRights} onChange={e => setData({ ...data, usageRights: e.target.value })} />
        <div className="hint">Shown in creator-facing brief. Recommended for re-use in paid ads.</div>
      </div>

      <div className="cf-field">
        <label>Affiliate</label>
        <div className="cf-pills">
          <span className="cf-pill on">
            <span className="check"><svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"><path d="m5 12 5 5L20 7"/></svg></span>
            Enabled · {data.affiliateRate}% commission
          </span>
          <span className="cf-pill">Disabled</span>
        </div>
      </div>
    </div>
  );
}

// ─── Step 4 — Review ──────────────────────────────────────────────
function StepReview({ data }) {
  const Group = ({ title, children }) => (
    <div style={{ borderBottom: '1px solid var(--line)', padding: '12px 0' }}>
      <div style={{ fontSize: 9.5, fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ink-soft)', marginBottom: 6 }}>{title}</div>
      <div style={{ fontSize: 12.5, color: 'var(--ink)', lineHeight: 1.5 }}>{children}</div>
    </div>
  );
  return (
    <div>
      <h3>Ready to publish?</h3>
      <div className="desc">When you click Publish, the campaign moves to <b>recruiting</b> and becomes visible to qualified creators.</div>

      <Group title="Campaign">
        <div style={{ fontFamily: 'Space Grotesk', fontSize: 17, fontWeight: 700, letterSpacing: '-0.015em' }}>{data.name}</div>
        <div style={{ color: 'var(--ink-soft)' }}>{data.brand} · {data.type} · objective: {data.objective}</div>
      </Group>

      <Group title="Reach">
        <b>{data.platforms.join(', ')}</b> · {data.categories.join(' / ')} · tier <b>{data.levels.join(', ')}</b> · {data.geo[0]} · {data.audienceAge} {data.audienceGender}
      </Group>

      <Group title="Deliverables (per creator)">
        {data.deliverables.map((d, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ color: 'var(--ink-soft)' }}>{i + 1}.</span>
            <b>{d.platform}</b> · {d.type} <span style={{ color: 'var(--ink-soft)' }}>× {d.qty}</span>
          </div>
        ))}
      </Group>

      <Group title="Budget · timeline">
        <b style={{ fontFamily: 'Space Grotesk', fontSize: 16 }}>${data.budget.toLocaleString()}</b> total · ${data.budgetPerCreator.toLocaleString()} per creator
        <div style={{ color: 'var(--ink-soft)' }}>{data.start} → {data.end} · usage: {data.usageRights}</div>
      </Group>

      <Group title="Affiliate">
        <span style={{ color: '#0a8a72', fontWeight: 700 }}>● Enabled</span> · {data.affiliateRate}% commission
      </Group>

      <div style={{ marginTop: 14, padding: 12, background: 'rgba(31,214,180,0.10)', border: '1px solid rgba(31,214,180,0.3)', borderRadius: 12, fontSize: 12, color: 'var(--ink)', lineHeight: 1.5 }}>
        <b style={{ fontWeight: 800 }}>Heads-up:</b> publishing will surface this campaign in <b>Creator Discover</b> for matching profiles
        (HCM · 18–24F · micro skincare). AI shortlist will preload in 6s.
      </div>
    </div>
  );
}

// ─── Wizard preview rail ──────────────────────────────────────────
function WizPreview({ data, step }) {
  return (
    <div className="cf-preview">
      <div className="label">Creator-facing brief · preview</div>
      <h4>{data.name}</h4>
      <div className="field-grp">
        <div className="k">Brand</div>
        <div className="v">{data.brand}</div>
      </div>
      <div className="field-grp">
        <div className="k">Platforms</div>
        <div className="v">{data.platforms.join(', ')}</div>
      </div>
      <div className="field-grp">
        <div className="k">Categories</div>
        <div className="v">{data.categories.join(' · ')}</div>
      </div>
      <div className="field-grp">
        <div className="k">Audience</div>
        <div className="v">{data.geo[0]} · {data.audienceAge} {data.audienceGender}</div>
      </div>
      <div className="field-grp">
        <div className="k">Deliverables</div>
        <div className="v" style={{ fontSize: 11.5 }}>
          {data.deliverables.map((d, i) => (
            <div key={i}>{i + 1}. {d.platform} · {d.type}</div>
          ))}
        </div>
      </div>
      <div className="field-grp">
        <div className="k">Per-creator budget</div>
        <div className="v" style={{ fontFamily: 'Space Grotesk', fontSize: 16, fontWeight: 700, letterSpacing: '-0.015em' }}>
          ${data.budgetPerCreator.toLocaleString()}
        </div>
      </div>

      {step >= 2 && (
        <div className="ai-budget">
          <div className="h">{Icon.spark} AI estimate</div>
          <div className="v">≈ {Math.floor(data.budget / data.budgetPerCreator)} creators · 1.8M reach</div>
          <div className="ds">Based on similar campaigns, expect <b>$0.41 CPE</b> and <b>~108K engagements</b>.</div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { ScreenBrandCampaignNew });