// SpinResult — shown after a new app is auto-deployed via /api/spin-vertical.
// Hands the user a live URL + FB Ads URL + assets + ad copy.

const SpinResult = ({ result, onRoute }) => {
  const { CopyableUrl, StatusPill } = window;
  const app = result.app;
  const live = result.liveUrl || (app.domain && `https://${app.domain}`);
  const ads = result.adsUrl;

  return (
    <div className="page step-anim">
      <div className="page-head">
        <div style={{
          width: 56, height: 56, borderRadius: 13,
          background: 'linear-gradient(135deg, #00d084 0%, #00a667 100%)',
          display: 'grid', placeItems: 'center', fontSize: 28,
          boxShadow: '0 6px 18px -6px rgba(0,208,132,0.5)',
        }}>{app.icon || '🚀'}</div>
        <div>
          <h1>✓ {app.name} deployed</h1>
          <div className="desc">
            Auto-generated, auto-deployed. Final step: paste a Meta Pixel ID, click Turn ON.
          </div>
        </div>
        <div className="right">
          <button className="btn primary" onClick={() => onRoute({ page: 'app', appId: app.id })}>
            <window.IconSettings size={13} />Open app
          </button>
        </div>
      </div>

      <div className="panel">
        <div className="panel-head"><h2>🌐 Live URLs</h2></div>
        {live ? (
          <>
            <div className="field">
              <label>Live URL <span style={{ color: 'var(--accent)' }}>(open this on phone to test PWA)</span></label>
              <CopyableUrl value={live} accent />
            </div>
            {ads && (
              <div className="field" style={{ marginBottom: 0 }}>
                <label>FB Ads URL <span className="opt">(paste in FB campaign as Website URL)</span></label>
                <CopyableUrl value={ads} />
              </div>
            )}
          </>
        ) : (
          <div className="note error">No live URL — deployment skipped or failed. Check errors below.</div>
        )}
      </div>

      {result.errors && result.errors.length > 0 && (
        <div className="panel" style={{ borderColor: 'rgba(255,195,107,0.3)' }}>
          <div className="panel-head"><h2 style={{ color: 'var(--warn)' }}>⚠ Errors during spin-up</h2></div>
          <ul style={{ paddingLeft: 20, fontSize: 13, color: 'var(--muted)' }}>
            {result.errors.map((e, i) => <li key={i}>{e}</li>)}
          </ul>
        </div>
      )}

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
        <div className="panel">
          <div className="panel-head"><h2>📋 Pipeline log</h2></div>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, lineHeight: 1.7 }}>
            {(result.log || []).map((l, i) => (
              <div key={i} style={{ display: 'flex', gap: 10 }}>
                <span style={{ color: 'var(--muted-2)' }}>{new Date(l.t).toISOString().slice(11,19)}</span>
                <span>{l.msg}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="panel">
          <div className="panel-head"><h2>✅ Next steps</h2></div>
          <ol style={{ paddingLeft: 20, lineHeight: 1.8, fontSize: 13 }}>
            <li>Open the live URL on your phone, verify pre-lander renders</li>
            <li>Paste your Meta Pixel ID in the app's tracking settings</li>
            <li>Flip the Live toggle when ready (routing goes hot in ≤60s)</li>
            <li>Build your FB Ads creative, paste the Ads URL above as the destination</li>
          </ol>
        </div>
      </div>

      <div className="panel">
        <div className="panel-head"><h2>🎰 Generated locales + ad copy</h2></div>
        <div style={{ fontSize: 12.5, color: 'var(--muted)' }}>
          AI-generated locale copy and ad variants are stored in KV under
          {' '}<code>locale:{app.id}:&lt;code&gt;</code> and <code>adcopy:{app.id}:&lt;code&gt;</code>.
          Pre-lander fetches them automatically. View them via the app's Edit page (locale tab).
        </div>
      </div>
    </div>
  );
};

window.SpinResult = SpinResult;