// ScanStep3Target — scan targets, scope, and scheduling.

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

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

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

  function addCidr(val) {
    const v = val.trim();
    if (!v) return;
    const cur = data.targetCidrs || [];
    if (!cur.includes(v)) update({ targetCidrs: [...cur, v] });
    setCidrInput('');
  }

  function removeCidr(val) {
    update({ targetCidrs: (data.targetCidrs || []).filter(x => x !== val) });
  }

  const ENV_OPTIONS = [
    { value: 'production', label: 'production' },
    { value: 'staging', label: 'staging' },
    { value: 'pre_production', label: 'pre-production' },
    { value: 'mixed', label: 'mixed' },
  ];

  const SCOPE_OPTIONS = [
    { value: 'network_only', label: 'network scan', desc: 'discover hosts and services' },
    { value: 'network_and_vuln', label: 'network + vulnerability assessment', desc: 'discover and assess vulnerabilities' },
    { value: 'web_app_sast', label: 'web application + SAST', desc: 'application-layer testing with static analysis' },
    { value: 'full_pentest', label: 'full autonomous pentest', desc: 'exploitation included' },
  ];

  const WINDOW_OPTIONS = [
    { value: 'anytime', label: 'anytime' },
    { value: 'business_hours', label: 'business hours' },
    { value: 'off_hours', label: 'off-hours' },
    { value: 'scheduled', label: 'specific window' },
  ];

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

      <div className="form-group">
        <label className="form-label">target CIDRs <span className="form-label-optional">type and press Enter</span></label>
        <div className="tag-input-wrap">
          {(data.targetCidrs || []).map(c => (
            <span key={c} className="tag-chip">
              {c}
              <span className="tag-chip-remove" onClick={() => removeCidr(c)}>×</span>
            </span>
          ))}
          <input className="tag-field" type="text"
            placeholder="e.g. 10.0.1.0/24, 172.16.0.0/16"
            value={cidrInput}
            onChange={e => setCidrInput(e.target.value)}
            onKeyDown={e => {
              if (e.key === 'Enter' || e.key === ',') { e.preventDefault(); addCidr(cidrInput); }
              if (e.key === 'Backspace' && !cidrInput && data.targetCidrs && data.targetCidrs.length > 0) {
                removeCidr(data.targetCidrs[data.targetCidrs.length - 1]);
              }
            }}
            onBlur={() => addCidr(cidrInput)}
          />
        </div>
        {errors.targetCidrs && <div className="form-error">{errors.targetCidrs}</div>}
      </div>

      <div className="form-group">
        <label className="form-label">environment</label>
        <div className="radio-group is-pills">
          {ENV_OPTIONS.map(e => (
            <div key={e.value}
              className={`radio-opt${data.scanEnvironment === e.value ? ' is-active' : ''}`}
              onClick={() => update({ scanEnvironment: e.value })}>
              {e.label}
            </div>
          ))}
        </div>
        {errors.scanEnvironment && <div className="form-error">{errors.scanEnvironment}</div>}
      </div>

      <div className="form-group">
        <label className="form-label">scan scope</label>
        <div className="radio-group is-vertical">
          {SCOPE_OPTIONS.map(s => (
            <div key={s.value}
              className={`radio-opt${data.scanScope === s.value ? ' is-active' : ''}`}
              onClick={() => update({ scanScope: s.value })}>
              <strong>{s.label}</strong>
              <span style={{ fontSize: '12px', color: 'var(--muted)', marginLeft: '8px' }}>{s.desc}</span>
            </div>
          ))}
        </div>
        {errors.scanScope && <div className="form-error">{errors.scanScope}</div>}
      </div>

      <div className="form-group">
        <label className="form-label">scan window</label>
        <div className="radio-group is-pills">
          {WINDOW_OPTIONS.map(w => (
            <div key={w.value}
              className={`radio-opt${data.scanWindow === w.value ? ' is-active' : ''}`}
              onClick={() => update({ scanWindow: w.value })}>
              {w.label}
            </div>
          ))}
        </div>
        {errors.scanWindow && <div className="form-error">{errors.scanWindow}</div>}
      </div>

      {data.scanWindow === 'scheduled' && (
        <div className="form-group">
          <label className="form-label">scan window details</label>
          <input className="form-field" type="text" placeholder="e.g. Sat 2am–6am UTC"
            value={data.scanWindowDetail || ''} onChange={e => update({ scanWindowDetail: e.target.value })} />
          {errors.scanWindowDetail && <div className="form-error">{errors.scanWindowDetail}</div>}
        </div>
      )}

      <div className="form-group">
        <label className="form-label">additional notes <span className="form-label-optional">optional</span></label>
        <textarea className="form-field" rows={3}
          placeholder="anything else we should know about the environment..."
          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 →</button>
      </div>
    </div>
  );
}

window.ScanStep3Target = ScanStep3Target;