/* global React */
// Skillzip Prototype v2 — Path A Screens + Entry
// Changes vs v1:
//   • Copy: S1, A1, A13, B1
//   • STEPS_A: ['Upload','Validate & Scan','Preview','Publish'] (was 6)
//   • A2: Merged "Validate & Scan" (was Validate + Shield separate)
//   • A9: Merged "Preview" (was Draft + Preview separate); A8 removed
//   • A5 removed (absorbed into A2)
//   • All stepper step={N} values updated to 4-step index
const { useState, useEffect } = React;
const {
  Icon, ScreenHeader, FootBar, BtnPrimary, BtnGhost, BtnMuted, BtnAccent, BtnPublish,
  Badge, FileRow, CodeBlock, CheckItem, Segment, Tabs,
} = window;

const STEPS_A = ['Upload', 'Validate & Scan', 'Preview', 'Publish'];

// ══════════════════════════════════════════════════════════════
// S1 — Entry  [COPY UPDATED]
// ══════════════════════════════════════════════════════════════
function ScreenS1({ nav }) {
  return (
    <>
      <div className="screen-wrap screen-enter">
        <ScreenHeader
          tag="SELL A SKILL"
          title="Sell a skill — pick your starting point"
          sub="Pick the path that matches where you're starting from. You can switch paths at any time."
        />

        <div className="grid-2" style={{ gap: 20, marginBottom: 20 }}>
          <div className="path-card" onClick={() => nav('A1')}>
            <div className="path-card-top path-card-top-a">
              <Icon name="upload-cloud" size={52} color="rgba(14,165,233,0.3)" />
            </div>
            <div className="path-card-body">
              <div className="path-tag a">Path A · Has files</div>
              <h3 className="path-card-title">I have a SKILL.md file</h3>
              <p className="path-card-desc">Upload your file. We handle the rest.</p>
              <ul className="path-card-list">
                <li>Auto-detects metadata &amp; missing docs</li>
                <li>Runs Skillzip Shield risk scan</li>
                <li>One-click publish via Web, API, or MCP</li>
              </ul>
              <div className="path-cta a">
                <span>Continue</span>
                <Icon name="arrow-right" size={15} color="var(--color-accent-blue)" />
              </div>
            </div>
          </div>

          <div className="path-card" onClick={() => nav('B1')}>
            <div className="path-card-top path-card-top-b">
              <Icon name="sparkles" size={52} color="rgba(139,92,246,0.3)" />
            </div>
            <div className="path-card-body">
              <div className="path-tag b">Path B · From scratch</div>
              <h3 className="path-card-title">Starting from scratch</h3>
              <p className="path-card-desc">Answer a few questions. Claude writes the files.</p>
              <ul className="path-card-list">
                <li>No coding or Markdown knowledge needed</li>
                <li>Claude writes SKILL.md, README, HOW_TO_USE</li>
                <li>Comes back here when files are ready</li>
              </ul>
              <div className="path-cta b">
                <span>Continue</span>
                <Icon name="arrow-right" size={15} color="var(--color-accent-violet)" />
              </div>
            </div>
          </div>
        </div>
        {error && <div className="form-error" style={{ marginTop: 14 }}>{error}</div>}
      </div>
    </>
  );
}

// ══════════════════════════════════════════════════════════════
// A1 — Upload Files  [COPY UPDATED]
// ══════════════════════════════════════════════════════════════
function ScreenA1({ nav }) {
  const [files, setFiles] = useState([]);
  const [title, setTitle] = useState('');
  const [tagline, setTagline] = useState('');
  const [category, setCategory] = useState('Sales');
  const [tags, setTags] = useState('');
  const [price, setPrice] = useState('19');
  const [model, setModel] = useState('One-time');
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState('');

  function onFilesSelected(e) {
    const selected = Array.from(e.target.files || []);
    setFiles(selected);
    setError('');
    if (!title && selected[0]) {
      const detected = selected[0].name.replace(/\.(md|zip)$/i, '').replace(/[-_]+/g, ' ');
      setTitle(detected.replace(/\b\w/g, c => c.toUpperCase()));
    }
    window.skillzipTrack && window.skillzipTrack('upload_started', {
      component_id: 'screen_a1_file_input',
      file_count: selected.length,
    });
  }

  async function readUploadFile(file) {
    const looksText = /\.md$/i.test(file.name) || /^text\//.test(file.type || '');
    const content = looksText ? await file.text().catch(() => '') : '';
    return {
      name: file.name,
      size: file.size,
      type: file.type || (file.name.toLowerCase().endsWith('.zip') ? 'application/zip' : 'text/markdown'),
      content,
    };
  }

  async function saveAndValidate() {
    if (files.length === 0) {
      setError('Please select SKILL.md, markdown files, a folder, or a ZIP first.');
      return;
    }
    setSaving(true);
    setError('');
    window.skillzipTrack && window.skillzipTrack('validation_started', {
      component_id: 'screen_a1_continue',
      file_count: files.length,
    });

    try {
      const payloadFiles = await Promise.all(files.map(readUploadFile));
      const res = await fetch('/api/skill-drafts', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          title: title || 'Untitled Skill',
          anonymous_id: window.getSkillzipAnonymousId ? window.getSkillzipAnonymousId() : null,
          files: payloadFiles,
          listing: { tagline, category, tags, price, model },
        }),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) throw new Error(data.error || 'Could not save this skill draft.');

      localStorage.setItem('skillzip_last_draft_id', data.id);
      localStorage.setItem('skillzip_last_validation_result', JSON.stringify(data.validation_result || {}));
      localStorage.setItem('skillzip_last_shield_result', JSON.stringify(data.shield_result || {}));
      localStorage.setItem('skillzip_last_package_files', JSON.stringify(data.package_files || []));
      localStorage.setItem('skillzip_last_title', data.title || title || 'Untitled Skill');

      window.skillzipTrack && window.skillzipTrack('upload_completed', {
        component_id: 'screen_a1_upload',
        skill_id: data.id,
        file_count: payloadFiles.length,
      });
      window.skillzipTrack && window.skillzipTrack(
        data.validation_result && data.validation_result.can_publish ? 'validation_passed' : 'validation_failed',
        { skill_id: data.id, missing_required: data.validation_result && data.validation_result.missing_required }
      );
      window.skillzipTrack && window.skillzipTrack(
        data.shield_result && data.shield_result.status === 'fail' ? 'shield_scan_failed' : 'shield_scan_passed',
        { skill_id: data.id, shield_status: data.shield_result && data.shield_result.status }
      );
      window.skillzipTrack && window.skillzipTrack('draft_created', { skill_id: data.id });
      nav('A2');
    } catch (err) {
      const message = err && err.message ? err.message : 'Could not save this skill draft.';
      setError(message);
      window.skillzipTrack && window.skillzipTrack('validation_failed', {
        component_id: 'screen_a1_continue',
        error: message,
      });
    } finally {
      setSaving(false);
    }
  }

  return (
    <>
      <div className="screen-wrap screen-enter">
        <ScreenHeader
          tag="PATH A · STEP 1"
          title="Upload your skill files"
          sub="Drop a SKILL.md, folder, or ZIP — we'll handle the rest."
          steps={STEPS_A} step={0}
        />

        <label className="dropzone" style={{ marginBottom: 16, cursor: 'pointer' }}>
          <input
            type="file"
            multiple
            webkitdirectory="true"
            onChange={onFilesSelected}
            style={{ display: 'none' }}
          />
          <div className="dz-icon">
            <Icon name="upload-cloud" size={24} color="var(--color-text-secondary)" />
          </div>
          <div className="dz-title">{files.length ? `${files.length} file${files.length === 1 ? '' : 's'} selected` : 'Drop folder or ZIP here'}</div>
          <div className="dz-sub">or <span className="dz-link">browse files</span> — accepts <code>.md</code>, <code>.zip</code>, folder</div>
        </label>

        {files.length > 0 && (
          <div className="card no-hover" style={{ marginBottom: 16, padding: 12 }}>
            <div className="filelist">
              {files.slice(0, 6).map(file => (
                <FileRow key={file.name + file.size} name={file.name} meta={`${Math.max(1, Math.round(file.size / 1024))} KB`} status={/skill\.md$/i.test(file.name) ? 'required' : 'optional'} />
              ))}
              {files.length > 6 && <div className="hint">+ {files.length - 6} more files selected</div>}
            </div>
          </div>
        )}

        <div className="card no-hover">
          <div className="card-title" style={{ marginBottom: 14 }}>
            Listing details <Badge variant="opt">auto-detected from your files</Badge>
          </div>
          <div className="grid-2" style={{ gap: 12, marginBottom: 12 }}>
            <div className="field">
              <label>Title</label>
              <input className="input" value={title} onChange={e => setTitle(e.target.value)} placeholder="e.g. Cold Email Architect" />
              <span className="hint">Auto-detected from SKILL.md frontmatter if present.</span>
            </div>
            <div className="field">
              <label>Tagline</label>
              <input className="input" value={tagline} onChange={e => setTagline(e.target.value)} placeholder="e.g. Deliverable B2B cold outreach in 4 tones." />
            </div>
            <div className="field">
              <label>Category</label>
              <select className="select" value={category} onChange={e => setCategory(e.target.value)}>
                <option>Sales</option><option>Marketing</option><option>Cold Outreach</option>
                <option>Ad Copy</option><option>Growth</option>
              </select>
            </div>
            <div className="field">
              <label>Tags</label>
              <input className="input" value={tags} onChange={e => setTags(e.target.value)} placeholder="b2b, sales, email" />
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '100px 150px', gap: 12 }}>
            <div className="field">
              <label>Price ($)</label>
              <input className="input" value={price} onChange={e => setPrice(e.target.value)} placeholder="19" />
            </div>
            <div className="field">
              <label>Model</label>
              <select className="select" value={model} onChange={e => setModel(e.target.value)}>
                <option>One-time</option><option>Subscription</option><option>Free</option>
              </select>
            </div>
          </div>
        </div>
      </div>

      <FootBar
        left={<BtnGhost icon="x" onClick={() => nav('S1')}>Cancel</BtnGhost>}
        meta="Required: SKILL.md"
        right={<BtnPrimary onClick={saveAndValidate} icon="arrow-right">{saving ? 'Saving...' : 'Save draft & validate'}</BtnPrimary>}
      />
    </>
  );
}

// ══════════════════════════════════════════════════════════════
// A2 — Validate & Scan  [NEW — merged: was Validate + Shield]
// ══════════════════════════════════════════════════════════════
function ScreenA2({ nav }) {
  const [scanState, setScanState] = useState('warning');
  const [sourceName, setSourceName] = useState('uploaded skill package');
  const [filesData, setFilesData] = useState(null);

  useEffect(() => {
    try {
      const validation = JSON.parse(localStorage.getItem('skillzip_last_validation_result') || '{}');
      const shield = JSON.parse(localStorage.getItem('skillzip_last_shield_result') || '{}');
      const packageFiles = JSON.parse(localStorage.getItem('skillzip_last_package_files') || '[]');
      const title = localStorage.getItem('skillzip_last_title') || 'uploaded skill package';
      if (Array.isArray(packageFiles) && packageFiles.length) {
        setFilesData(packageFiles.map(file => ({
          name: file.name,
          meta: `${Math.max(1, Math.round((file.size || 0) / 1024))} KB`,
          status: 'valid',
        })));
      }
      setSourceName(title);
      setScanState(shield.status === 'fail' ? 'fail' : validation.can_publish ? 'pass' : 'warning');
    } catch (e) {}
  }, []);

  const FILES_DATA = [
    { name: 'SKILL.md',      meta: '2.4 KB', status: 'valid'    },
    { name: 'README.md',     meta: '1.1 KB', status: 'valid'    },
    { name: 'HOW_TO_USE.md', meta: '—',      status: 'missing'  },
    { name: 'examples.md',   meta: '—',      status: 'optional' },
  ];

  function VerdictBanner() {
    if (scanState === 'pass') return (
      <div className="verdict pass" style={{ marginBottom: 14 }}>
        <div className="verdict-ico"><Icon name="shield-check" size={18} color="#fff" /></div>
        <div className="verdict-body">
          <div className="verdict-title">No issues found. Continue when ready.</div>
          <div className="verdict-sub">All files valid · Shield: PASS</div>
        </div>
        <div className="verdict-score">
          <div className="verdict-num">12</div>
          <div className="verdict-score-label">Risk score · lower is safer</div>
        </div>
      </div>
    );
    if (scanState === 'warning') return (
      <div className="verdict warn" style={{ marginBottom: 14 }}>
        <div className="verdict-ico"><Icon name="alert-triangle" size={18} color="#fff" /></div>
        <div className="verdict-body">
          <div className="verdict-title">No blockers. 2 non-critical notes below.</div>
          <div className="verdict-sub">1 file missing · Shield: PASS WITH WARNING · safe to publish</div>
        </div>
        <div className="verdict-score">
          <div className="verdict-num">72</div>
          <div className="verdict-score-label">Risk score · lower is safer</div>
        </div>
      </div>
    );
    return (
      <div className="verdict fail" style={{ marginBottom: 14 }}>
        <div className="verdict-ico"><Icon name="x-circle" size={18} color="#fff" /></div>
        <div className="verdict-body">
          <div className="verdict-title">Issues found in your files. Fix before continuing.</div>
          <div className="verdict-sub">SKILL.md · line 27 · credentials request · publish blocked</div>
        </div>
        <div className="verdict-score">
          <div className="verdict-num">91</div>
          <div className="verdict-score-label">Risk score · blocked</div>
        </div>
      </div>
    );
  }

  function FilesPanel() {
    return (
      <div className="card no-hover">
        <div className="card-title" style={{ marginBottom: 4 }}>Detected files</div>
        <div className="card-sub" style={{ marginBottom: 14 }}>From: <code>{sourceName}</code></div>
        <div className="filelist">
          {(filesData || FILES_DATA).map(f => (
            <FileRow key={f.name} name={f.name} meta={f.meta} status={f.status} />
          ))}
        </div>
      </div>
    );
  }

  function ScanPanel() {
    return (
      <div className="card no-hover">
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
          <div className="card-title" style={{ marginBottom: 0 }}>Shield scan</div>
          {scanState === 'pass'    && <Badge variant="ok">PASS</Badge>}
          {scanState === 'warning' && <Badge variant="warn">WARNING</Badge>}
          {scanState === 'error'   && <Badge variant="bad">FAIL</Badge>}
        </div>
        {scanState === 'pass' && (
          <div style={{ padding: '20px 0', textAlign: 'center', color: 'var(--color-text-tertiary)', fontSize: 13 }}>
            <div style={{ marginBottom: 8, display: 'flex', justifyContent: 'center' }}>
              <Icon name="shield-check" size={28} color="var(--color-border-default)" />
            </div>
            No issues found
          </div>
        )}
        {scanState === 'warning' && (
          <>
            <div className="card-sub" style={{ marginBottom: 10 }}>2 non-critical suggestions. Safe to publish.</div>
            <div className="issue">
              <div className="issue-pin warn"></div>
              <div>
                <div className="issue-title">Missing usage disclaimer</div>
                <div className="issue-desc">Buyers should be told this skill is for outreach, not legal advice.</div>
                <div className="issue-meta">SKILL.md · line 14 · severity: medium</div>
              </div>
            </div>
            <div className="issue">
              <div className="issue-pin warn"></div>
              <div>
                <div className="issue-title">Vague output spec</div>
                <div className="issue-desc">"Make it punchy" — define word count + tone explicitly.</div>
                <div className="issue-meta">SKILL.md · line 41 · severity: low</div>
              </div>
            </div>
          </>
        )}
        {scanState === 'error' && (
          <div className="issue">
            <div className="issue-pin bad"></div>
            <div>
              <div className="issue-title">Requests credentials from end user</div>
              <div className="issue-desc">Skill asks buyer to paste an API key. Skills must be self-contained — they cannot request credentials.</div>
              <div className="issue-meta">SKILL.md · line 27 · severity: critical</div>
            </div>
          </div>
        )}
      </div>
    );
  }

  return (
    <>
      <div className="screen-wrap screen-enter">
        <ScreenHeader
          tag="PATH A · VALIDATE & SCAN"
          title="Files & safety review"
          sub="Here's what we found before you publish."
          steps={STEPS_A} step={1}
        />

        {/* Demo state toggle */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14, fontSize: 12 }}>
          <span style={{ color: 'var(--color-text-tertiary)', whiteSpace: 'nowrap' }}>Demo state:</span>
          <Segment options={['pass', 'warning', 'error']} value={scanState} onChange={setScanState} />
        </div>

        <VerdictBanner />

        <div className="grid-2" style={{ marginBottom: 16 }}>
          <FilesPanel />
          <ScanPanel />
        </div>
      </div>

      <FootBar
        left={<BtnGhost icon="arrow-left" onClick={() => nav('A1')}>Replace upload</BtnGhost>}
        meta={
          scanState === 'pass'    ? 'All files valid · Shield: PASS' :
          scanState === 'warning' ? '1 missing file · 2 non-critical notes' :
                                   '1 critical error · publish blocked'
        }
        right={
          <div className="row" style={{ gap: 8 }}>
            {scanState === 'error'
              ? <BtnPrimary onClick={() => nav('A7')} icon="upload">Fix &amp; re-upload</BtnPrimary>
              : <BtnPrimary onClick={() => nav('A9')} icon="arrow-right">Continue</BtnPrimary>
            }
          </div>
        }
      />
    </>
  );
}

// ══════════════════════════════════════════════════════════════
// A7 — Fix Required  [STEPPER + NAV UPDATED]
// ══════════════════════════════════════════════════════════════
function ScreenA7({ nav }) {
  return (
    <>
      <div className="screen-wrap screen-enter">
        <ScreenHeader
          tag="PATH A · VALIDATE & SCAN — ACTION REQUIRED"
          title="Fix blocking issues before publishing"
          sub="Publish is blocked until critical issues are resolved. Use the prompt below to fix in Claude, or edit manually."
          steps={STEPS_A} step={1}
        />

        <div className="verdict fail">
          <div className="verdict-ico">
            <Icon name="x-circle" size={18} color="#fff" />
          </div>
          <div className="verdict-body">
            <div className="verdict-title">FAIL — 1 critical issue</div>
            <div className="verdict-sub">Skill requests credentials from buyers, which is not allowed on Skillzip.</div>
          </div>
          <div className="verdict-score">
            <div className="verdict-num">91</div>
            <div className="verdict-score-label">Risk score · blocked</div>
          </div>
        </div>

        <div className="card no-hover" style={{ marginBottom: 16 }}>
          <div className="card-title" style={{ marginBottom: 10 }}>Blocking issue</div>
          <div className="issue" style={{ paddingTop: 0 }}>
            <div className="issue-pin bad"></div>
            <div>
              <div className="issue-title">Requests credentials from end user</div>
              <div className="issue-desc">Skill asks buyer to paste an API key. Skills must be self-contained — they cannot request credentials.</div>
              <div className="issue-meta">SKILL.md · line 27 · severity: critical · affected: SKILL.md</div>
            </div>
          </div>
        </div>

        <div className="card no-hover">
          <div className="card-title" style={{ marginBottom: 4 }}>Copy this prompt into Claude to fix</div>
          <div className="card-sub" style={{ marginBottom: 14 }}>Paste your SKILL.md alongside this prompt and Claude will return a fixed version.</div>
          <CodeBlock>{`Rewrite my SKILL.md so it never asks the buyer for API
keys, passwords, or credentials. Keep behavior intact.
Remove lines 25–30 and replace with a parameterized
placeholder that uses Claude's tool-use instead.`}</CodeBlock>
          <div className="row" style={{ marginTop: 14, gap: 8 }}>
            <BtnMuted size="sm" icon="copy">Copy prompt</BtnMuted>
            <BtnMuted size="sm" icon="edit-3">Edit in web editor</BtnMuted>
          </div>
        </div>
      </div>

      <FootBar
        left={<BtnGhost icon="arrow-left" onClick={() => nav('A2')}>Back to scan</BtnGhost>}
        meta="Publish disabled · 1 critical issue"
        right={
          <div className="row" style={{ gap: 8 }}>
            <BtnMuted onClick={() => {}}>Save draft with issues</BtnMuted>
            <BtnPrimary onClick={() => nav('A1')} icon="upload">Upload fixed files</BtnPrimary>
          </div>
        }
      />
    </>
  );
}

// ══════════════════════════════════════════════════════════════
// A9 — Preview  [NEW — merged: was Draft (A8) + Preview (A9)]
// ══════════════════════════════════════════════════════════════
function ScreenA9({ nav }) {
  const [editExpanded, setEditExpanded] = useState(true);

  function BuyerPreviewCard() {
    return (
      <div className="card no-hover" style={{ padding: 0, overflow: 'hidden' }}>
        <div style={{ height: 90, background: 'linear-gradient(140deg,#EFF6FF,#DBEAFE)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name="mail" size={36} color="rgba(59,130,246,0.3)" />
        </div>
        <div style={{ padding: '16px 20px' }}>
          <div style={{ display: 'flex', gap: 6, marginBottom: 8, flexWrap: 'wrap' }}>
            <span className="chip">Cold Outreach</span>
            <span className="chip">b2b</span>
            <span className="chip">sales</span>
          </div>
          <h2 style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em', marginBottom: 6 }}>Cold Email Architect</h2>
          <p style={{ fontSize: 13, color: 'var(--color-text-secondary)', lineHeight: 1.55, marginBottom: 14 }}>Writes deliverable B2B cold outreach in 4 tones. Comes with first prompt, examples, and guardrails.</p>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
            <button className="btn btn-accent btn-sm">Get for $19</button>
            <button className="btn btn-ghost btn-sm">Try demo</button>
            <span style={{ fontSize: 12, color: 'var(--color-text-tertiary)' }}>432 buyers · ★ 4.8</span>
          </div>
        </div>
      </div>
    );
  }



  return (
    <>
      <div className="screen-wrap screen-enter">
        <ScreenHeader
          tag="PATH A · PREVIEW"
          title="Preview your listing"
          sub="This is what buyers see. Edit details on the right before publishing."
          steps={STEPS_A} step={2}
        />

        {/* ── Draft auto-saved status bar (replaces standalone A8 screen) ── */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14,
          padding: '8px 14px',
          background: '#F0FDF4', border: '1px solid #BBF7D0',
          borderRadius: 'var(--radius-md)', fontSize: 12.5,
        }}>
          <Icon name="check-circle" size={14} color="#22C55E" />
          <span style={{ color: '#15803D', fontWeight: 500 }}>Draft auto-saved</span>
          <span style={{ color: 'var(--color-text-tertiary)' }}>·</span>
          <span style={{ color: 'var(--color-text-secondary)' }}>Shield: PASS WITH WARNING</span>
          <span style={{ color: 'var(--color-text-tertiary)' }}>·</span>
          <span style={{ color: 'var(--color-text-secondary)' }}>Ready to publish</span>
        </div>

        <div className="preview-strip" style={{ marginBottom: 12 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <Icon name="eye" size={14} color="#1E40AF" />
            <span>Preview as buyer</span>
          </div>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, opacity: 0.7 }}>/s/cold-email-architect</span>
        </div>

        <div className="col" style={{ gap: 12 }}>
          <BuyerPreviewCard />

          {/* Expandable listing details */}
          <div className="card no-hover" style={{ padding: 0, overflow: 'hidden' }}>
            <div
              style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                padding: '11px 16px', cursor: 'pointer', userSelect: 'none',
                background: editExpanded ? 'var(--color-bg-sidebar)' : 'white',
              }}
              onClick={() => setEditExpanded(!editExpanded)}
            >
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <Icon name="sliders" size={14} color="var(--color-text-secondary)" />
                <span style={{ fontWeight: 500, fontSize: 13.5 }}>Listing details</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ fontSize: 12, color: 'var(--color-text-tertiary)' }}>
                  {editExpanded ? 'Collapse' : 'Edit'}
                </span>
                <Icon name={editExpanded ? 'chevron-up' : 'chevron-down'} size={15} color="var(--color-text-tertiary)" />
              </div>
            </div>
            {editExpanded && (
              <div style={{ padding: '14px 16px 16px', borderTop: '1px solid var(--color-border-subtle)' }}>
                <div className="grid-2" style={{ gap: 12, marginBottom: 12 }}>
                  <div className="field"><label>Title</label><input className="input" defaultValue="Cold Email Architect" /></div>
                  <div className="field"><label>Tagline</label><input className="input" defaultValue="Deliverable B2B cold outreach in 4 tones." /></div>
                  <div className="field"><label>Category</label><select className="select"><option>Cold Outreach</option></select></div>
                  <div className="field"><label>Tags</label><input className="input" defaultValue="b2b, sales, email" /></div>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '100px 150px', gap: 12 }}>
                  <div className="field"><label>Price ($)</label><input className="input" defaultValue="19" /></div>
                  <div className="field"><label>Model</label><select className="select"><option>One-time</option><option>Subscription</option><option>Free</option></select></div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>

      <FootBar
        left={<BtnGhost icon="arrow-left" onClick={() => nav('A2')}>Back</BtnGhost>}
        meta="Draft auto-saved · Shield: PASS WITH WARNING · Ready to publish"
        right={
          <BtnPrimary onClick={() => nav('A13')} icon="arrow-right">Continue</BtnPrimary>
        }
      />
    </>
  );
}

// ══════════════════════════════════════════════════════════════
// A13 — Publish  [COPY UPDATED + STEPPER UPDATED: step 3]
// ══════════════════════════════════════════════════════════════
function ScreenA13({ nav }) {
  const [visibility, setVisibility] = useState('Public');
  const [method,     setMethod]     = useState('Web');
  const [publishing, setPublishing] = useState(false);
  const [publishError, setPublishError] = useState('');

  async function publishSkill() {
    const draftId = localStorage.getItem('skillzip_last_draft_id');
    if (!draftId) {
      setPublishError('Upload and validate a skill package before publishing.');
      return;
    }
    setPublishing(true);
    setPublishError('');
    window.skillzipTrack && window.skillzipTrack('publish_clicked', {
      skill_id: draftId,
      visibility,
      method,
    });
    try {
      const res = await fetch(`/api/skill-drafts/${draftId}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ status: 'published' }),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) throw new Error(data.error || 'Could not publish this skill.');
      localStorage.setItem('skillzip_last_published_id', draftId);
      window.skillzipTrack && window.skillzipTrack('publish_succeeded', { skill_id: draftId });
      nav('A14');
    } catch (err) {
      const message = err && err.message ? err.message : 'Could not publish this skill.';
      setPublishError(message);
      window.skillzipTrack && window.skillzipTrack('publish_failed', { skill_id: draftId, error: message });
    } finally {
      setPublishing(false);
    }
  }
  return (
    <>
      <div className="screen-wrap screen-enter">
        <ScreenHeader
          tag="PATH A · STEP 4"
          title="Publish your skill"
          sub="Review your settings and go live."
          steps={STEPS_A} step={3}
        />

        <div className="grid-2" style={{ marginBottom: 16 }}>
          <div className="card no-hover">
            <div className="card-title" style={{ marginBottom: 14 }}>Pre-publish checklist</div>
            <div className="checklist">
              <CheckItem done={true}>All required files present</CheckItem>
              <CheckItem done={true}>Shield scan: PASS WITH WARNING</CheckItem>
              <CheckItem done={true}>Pricing set · $19 one-time</CheckItem>
              <CheckItem done={true}>README + HOW_TO_USE reviewed</CheckItem>
              <CheckItem done={true}>Demo prompt set</CheckItem>
            </div>
          </div>

          <div className="card no-hover">
            <div className="card-title" style={{ marginBottom: 14 }}>Publish settings</div>
            <div className="col" style={{ gap: 14 }}>
              <div className="field">
                <label>Visibility</label>
                <Segment options={['Public', 'Unlisted', 'Draft']} value={visibility} onChange={setVisibility} />
              </div>
              <div className="field">
                <label>Publish method</label>
                <Segment options={['Web', 'API', 'MCP']} value={method} onChange={setMethod} />
                <span className="hint">MCP pushes to a connected Claude Desktop / Claude Code workspace.</span>
              </div>
              <div className="field">
                <label>License</label>
                <select className="select">
                  <option>Skillzip Standard License</option>
                  <option>Commercial</option>
                  <option>Non-commercial</option>
                </select>
              </div>
            </div>
          </div>
        </div>

        <div className="helper-banner" style={{ borderColor: '#BFDBFE', background: '#EFF6FF' }}>
          <div>
            <div className="helper-title">Public URL preview</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12.5, color: 'var(--color-text-secondary)', marginTop: 3 }}>skillzip.com/s/cold-email-architect</div>
          </div>
          <div className="row" style={{ gap: 8 }}>
            <BtnMuted size="sm" icon="copy">Copy link</BtnMuted>
            <BtnMuted size="sm">Open after publish</BtnMuted>
          </div>
        </div>
        {publishError && <div className="form-error" style={{ marginTop: 14 }}>{publishError}</div>}
      </div>

      <FootBar
        left={<BtnGhost icon="arrow-left" onClick={() => nav('A9')}>Back</BtnGhost>}
        meta="Public · indexed within ~2 minutes"
        right={
          <div className="row" style={{ gap: 8 }}>
            <BtnMuted>Save draft</BtnMuted>
            <BtnPublish onClick={publishSkill} icon="check">{publishing ? 'Publishing...' : 'Go live now'}</BtnPublish>
          </div>
        }
      />
    </>
  );
}

// ══════════════════════════════════════════════════════════════
// A14 — Publish success
// ══════════════════════════════════════════════════════════════
function ScreenA14({ nav }) {
  return (
    <>
      <div className="screen-wrap screen-enter" style={{ maxWidth: 680 }}>

        {/* ── Success hero ── */}
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', padding: '52px 0 44px' }}>
          <div style={{
            width: 68, height: 68, borderRadius: '50%',
            background: '#F0FDF4', border: '1.5px solid #BBF7D0',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            marginBottom: 22, boxShadow: '0 4px 16px rgba(34,197,94,0.12)',
          }}>
            <Icon name="check" size={30} color="#16A34A" />
          </div>
          <div style={{
            display: 'inline-block', fontSize: 10.5, fontWeight: 600,
            letterSpacing: '0.08em', textTransform: 'uppercase',
            color: '#16A34A', background: '#F0FDF4',
            border: '1px solid #BBF7D0', padding: '3px 12px',
            borderRadius: 'var(--radius-full)', marginBottom: 18,
          }}>Published</div>
          <h1 style={{ fontSize: 30, fontWeight: 600, color: 'var(--color-text-primary)', letterSpacing: '-0.02em', lineHeight: 1.2, marginBottom: 10 }}>Your skill is live</h1>
          <p style={{ fontSize: 14, color: 'var(--color-text-secondary)', lineHeight: 1.6, maxWidth: 380 }}>
            Cold Email Architect is indexed and visible to buyers on Skillzip.
          </p>
        </div>

        {/* ── Public URL ── */}
        <div className="card no-hover" style={{ marginBottom: 14 }}>
          <div className="card-title" style={{ marginBottom: 12 }}>Public listing</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{
              flex: 1, fontFamily: 'var(--font-mono)', fontSize: 13,
              color: 'var(--color-text-secondary)', background: 'var(--color-bg-sidebar)',
              padding: '9px 12px', borderRadius: 'var(--radius-md)',
              border: '1px solid var(--color-border-subtle)',
              overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
            }}>skillzip.com/s/cold-email-architect</div>
            <BtnMuted size="sm" icon="copy">Copy</BtnMuted>
            <BtnMuted size="sm" icon="external-link">Open</BtnMuted>
          </div>
        </div>

        {/* ── What's next ── */}
        <div className="card tinted no-hover flat">
          <div className="card-title" style={{ marginBottom: 10 }}>What happens next</div>
          <ul style={{ paddingLeft: 16, fontSize: 13, color: 'var(--color-text-secondary)', lineHeight: 1.8 }}>
            <li>Your skill appears in search results within ~2 minutes.</li>
            <li>Buyers can preview, purchase, and use it immediately.</li>
            <li>You'll get an email confirmation and first-sale notification.</li>
          </ul>
        </div>

      </div>

      <FootBar
        left={<BtnGhost icon="arrow-left" onClick={() => nav('A13')}>Back to publish</BtnGhost>}
        meta="Indexed within ~2 minutes"
        right={
          <BtnPrimary icon="home" onClick={() => nav('S1')}>Open homepage</BtnPrimary>
        }
      />
    </>
  );
}

// Register all Path A screens
window.SCREENS = Object.assign(window.SCREENS || {}, {
  S1: ScreenS1, A1: ScreenA1, A2: ScreenA2,
  A7: ScreenA7, A9: ScreenA9,
  A13: ScreenA13, A14: ScreenA14,
});