// ScanStep4Review — read-only summary of all inputs before submission.

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

  const CP = window.CloudProviders;

  function cloudAccountId() {
    if (data.cloudProvider === 'aws') return data.aws_vpc_id || '—';
    if (data.cloudProvider === 'azure') return data.azure_subscription_id || '—';
    if (data.cloudProvider === 'gcp') return data.gcp_project_id || '—';
    return '—';
  }

  function cloudRegion() {
    if (data.cloudProvider === 'aws') return data.aws_region || '—';
    if (data.cloudProvider === 'azure') return data.azure_location || '—';
    if (data.cloudProvider === 'gcp') return `${data.gcp_region || '—'} / ${data.gcp_zone || '—'}`;
    return '—';
  }

  function cloudInstance() {
    if (data.cloudProvider === 'aws') return data.aws_instance_type || '—';
    if (data.cloudProvider === 'azure') return data.azure_vm_size || '—';
    if (data.cloudProvider === 'gcp') return data.gcp_machine_type || '—';
    return '—';
  }

  const SCOPE_LABELS = {
    network_only: 'network scan',
    network_and_vuln: 'network + vulnerability assessment',
    web_app_sast: 'web application + SAST',
    full_pentest: 'full autonomous pentest',
  };

  const WINDOW_LABELS = {
    anytime: 'anytime',
    business_hours: 'business hours only',
    off_hours: 'off-hours only',
    scheduled: data.scanWindowDetail || 'scheduled',
  };

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

      <p style={{ fontSize: '13px', color: 'var(--muted)', marginBottom: '24px', lineHeight: '1.5' }}>
        review your configuration before proceeding to authorization.
      </p>

      <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 className="summary-row"><span className="summary-key">role</span><span className="summary-val">{data.role || '—'}</span></div>
          <div className="summary-row"><span className="summary-key">size</span><span className="summary-val">{data.companySize || '—'}</span></div>
          <div className="summary-row"><span className="summary-key">industry</span><span className="summary-val">{data.industry || '—'}</span></div>
        </div>
      </div>

      <div className="review-section">
        <div className="review-section-header">
          <span className="review-section-title">cloud configuration</span>
          <span className="review-edit-link" onClick={() => goToStep(2)}>edit</span>
        </div>
        <div className="success-summary">
          <div className="summary-row"><span className="summary-key">provider</span><span className="summary-val">{(CP[data.cloudProvider] || {}).label || '—'}</span></div>
          <div className="summary-row"><span className="summary-key">account</span><span className="summary-val">{cloudAccountId()}</span></div>
          <div className="summary-row"><span className="summary-key">region</span><span className="summary-val">{cloudRegion()}</span></div>
          <div className="summary-row"><span className="summary-key">instance</span><span className="summary-val">{cloudInstance()}</span></div>
        </div>
      </div>

      <div className="review-section">
        <div className="review-section-header">
          <span className="review-section-title">scan targets</span>
          <span className="review-edit-link" onClick={() => goToStep(3)}>edit</span>
        </div>
        <div className="success-summary">
          <div className="summary-row"><span className="summary-key">target CIDRs</span><span className="summary-val">{(data.targetCidrs || []).join(', ') || '—'}</span></div>
          <div className="summary-row"><span className="summary-key">environment</span><span className="summary-val">{data.scanEnvironment || '—'}</span></div>
          <div className="summary-row"><span className="summary-key">scope</span><span className="summary-val">{SCOPE_LABELS[data.scanScope] || '—'}</span></div>
          <div className="summary-row"><span className="summary-key">window</span><span className="summary-val">{WINDOW_LABELS[data.scanWindow] || '—'}</span></div>
          {data.additionalNotes && (
            <div className="summary-row"><span className="summary-key">notes</span><span className="summary-val">{data.additionalNotes}</span></div>
          )}
        </div>
      </div>

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

window.ScanStep4Review = ScanStep4Review;