// ScanStep4Review — summary of the order + authorization click-wrap.
// (Review and consent are one step in the web-app scan flow; payment follows.)

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

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

  const PRICING = window.ScanPricing || {};
  const plan = PRICING[data.scanType] || {};

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

  const Checkmark = () => (
    <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>
  );

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

      <div className="review-section">
        <div className="review-section-header">
          <span className="review-section-title">identity</span>
          <span className="review-edit-link" onClick={() => goToStep(1)}>edit</span>
        </div>
        <div className="success-summary">
          <div className="summary-row"><span className="summary-key">name</span><span className="summary-val">{data.fullName || '—'}</span></div>
          <div className="summary-row"><span className="summary-key">email</span><span className="summary-val">{data.workEmail || '—'}</span></div>
          <div className="summary-row"><span className="summary-key">company</span><span className="summary-val">{data.company || '—'}</span></div>
        </div>
      </div>

      <div className="review-section">
        <div className="review-section-header">
          <span className="review-section-title">scan</span>
          <span className="review-edit-link" onClick={() => goToStep(2)}>edit</span>
        </div>
        <div className="success-summary">
          <div className="summary-row"><span className="summary-key">type</span><span className="summary-val">{plan.label || data.scanType || '—'}</span></div>
          {data.repoUrl && (
            <div className="summary-row"><span className="summary-key">repository</span><span className="summary-val">{data.repoUrl}{data.repoBranch ? ` (${data.repoBranch})` : ''}</span></div>
          )}
          {data.liveUrl && (
            <div className="summary-row"><span className="summary-key">live URL</span><span className="summary-val">{data.liveUrl}</span></div>
          )}
          {data.additionalNotes && (
            <div className="summary-row"><span className="summary-key">notes</span><span className="summary-val">{data.additionalNotes}</span></div>
          )}
          <div className="summary-row"><span className="summary-key">price</span><span className="summary-val">${plan.price || '—'} (one-time)</span></div>
        </div>
      </div>

      <p style={{ fontSize: '13px', color: 'var(--muted)', margin: '24px 0 12px', lineHeight: '1.5' }}>
        authorization — required before payment:
      </p>

      <div className="form-group">
        <div className="consent-group">
          <div className={`consent-opt${data.authorizationConfirmed ? ' is-checked' : ''}`}
            onClick={() => update({ authorizationConfirmed: !data.authorizationConfirmed })}>
            <div className="consent-box">{data.authorizationConfirmed && <Checkmark />}</div>
            <div className="consent-text">
              I confirm I am authorized to commission security testing of the repository and/or
              application above, and Sekura is permitted to perform static analysis and
              non-destructive dynamic testing against them.
            </div>
          </div>
          {errors.authorizationConfirmed && (
            <div className="form-error" style={{ marginLeft: '30px' }}>{errors.authorizationConfirmed}</div>
          )}

          <div className={`consent-opt${data.termsAccepted ? ' is-checked' : ''}`}
            onClick={() => update({ termsAccepted: !data.termsAccepted })}>
            <div className="consent-box">{data.termsAccepted && <Checkmark />}</div>
            <div className="consent-text">
              I agree to Sekura's{' '}
              <a href="#terms" target="_blank" rel="noopener noreferrer" onClick={e => e.stopPropagation()}>scan terms</a>{' '}
              and{' '}
              <a href="#privacy" target="_blank" rel="noopener noreferrer" onClick={e => e.stopPropagation()}>privacy policy</a>.
            </div>
          </div>
          {errors.termsAccepted && (
            <div className="form-error" style={{ marginLeft: '30px' }}>{errors.termsAccepted}</div>
          )}

          <div className={`consent-opt${data.dataProcessingAccepted ? ' is-checked' : ''}`}
            onClick={() => update({ dataProcessingAccepted: !data.dataProcessingAccepted })}>
            <div className="consent-box">{data.dataProcessingAccepted && <Checkmark />}</div>
            <div className="consent-text">
              I understand scan results and submitted code/URLs will be processed by Sekura's
              automated scanning infrastructure to produce my report.
            </div>
          </div>
          {errors.dataProcessingAccepted && (
            <div className="form-error" style={{ marginLeft: '30px' }}>{errors.dataProcessingAccepted}</div>
          )}
        </div>
      </div>

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

window.ScanStep4Review = ScanStep4Review;