// ScanStep2Target — what to scan: scan type + repo URL and/or live URL.

function ScanStep2Target({ data, update, onNext, onBack, stepLabel }) {
  const { React } = window;
  const { useState } = React;

  const [errors, setErrors] = useState({});

  const PRICING = window.ScanPricing || {};

  function handleNext() {
    const errs = window.ManagedScanSchema.validateStep2(data);
    setErrors(errs);
    if (Object.keys(errs).length === 0) onNext();
  }

  const needsRepo =
    data.scanType === 'sast' || data.scanType === 'both' || data.scanType === 'skill';
  const needsLive = data.scanType === 'dast' || data.scanType === 'both';
  const isSkill = data.scanType === 'skill';

  return (
    <div className="form-step">
      <div className="form-step-heading">{stepLabel}</div>

      <div className="form-group">
        <label className="form-label">scan type</label>
        <div className="consent-group">
          {['sast', 'dast', 'both', 'skill'].map(t => (
            <div key={t}
              className={`consent-opt${data.scanType === t ? ' is-checked' : ''}`}
              onClick={() => update({ scanType: t })}>
              <div className="consent-box">
                {data.scanType === t && (
                  <svg width="10" height="8" viewBox="0 0 10 8" fill="none">
                    <path d="M1 4l3 3 5-6" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                )}
              </div>
              <div className="consent-text">
                <strong>{(PRICING[t] || {}).label || t}</strong>
                {' — $'}{(PRICING[t] || {}).price || '—'}
                <br />
                <span style={{ color: 'var(--muted)' }}>{(PRICING[t] || {}).blurb || ''}</span>
              </div>
            </div>
          ))}
        </div>
        {errors.scanType && <div className="form-error">{errors.scanType}</div>}
      </div>

      {needsRepo && (
        <React.Fragment>
          <div className="form-group">
            <label className="form-label">
              {isSkill ? 'skill / MCP repository URL (public, https)' : 'repository URL (public, https)'}
            </label>
            <input className="form-field" type="url"
              placeholder={isSkill ? 'https://github.com/your-org/your-skill' : 'https://github.com/your-org/your-app'}
              value={data.repoUrl || ''} onChange={e => update({ repoUrl: e.target.value })} />
            {errors.repoUrl && <div className="form-error">{errors.repoUrl}</div>}
            <div style={{ fontSize: '12px', color: 'var(--muted)', marginTop: '6px' }}>
              {isSkill
                ? 'point us at the repo containing the SKILL.md / scripts / MCP config. we scan the default branch; private repos coming soon.'
                : 'we scan the default branch. private repositories and branch selection are coming soon — for now the repo must be publicly clonable.'}
            </div>
          </div>
        </React.Fragment>
      )}

      {needsLive && (
        <div className="form-group">
          <label className="form-label">live application URL</label>
          <input className="form-field" type="url" placeholder="https://app.your-company.com"
            value={data.liveUrl || ''} onChange={e => update({ liveUrl: e.target.value })} />
          {errors.liveUrl && <div className="form-error">{errors.liveUrl}</div>}
          <div style={{ fontSize: '12px', color: 'var(--muted)', marginTop: '6px' }}>
            after payment you'll verify you control this domain (DNS TXT record or a
            .well-known file) — the scan starts automatically once verified.
            use a staging environment if you'd rather not test production.
          </div>
        </div>
      )}

      <div className="form-group">
        <label className="form-label">anything we should know? (optional)</label>
        <textarea className="form-field" rows="3"
          placeholder="test credentials, areas to focus on, endpoints to avoid…"
          value={data.additionalNotes || ''} onChange={e => update({ additionalNotes: e.target.value })} />
      </div>

      <div className="form-actions">
        <button className="btn-back" onClick={onBack}>← back</button>
        <button className="btn-next" onClick={handleNext}>next <span>→</span></button>
      </div>
    </div>
  );
}

window.ScanStep2Target = ScanStep2Target;