// Step4Compliance — compliance & reporting requirements.

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

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

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

  function toggleArr(field, val) {
    const cur = data[field] || [];
    const next = cur.includes(val) ? cur.filter(x => x !== val) : [...cur, val];
    update({ [field]: next });
  }

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

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

  const FRAMEWORKS = [
    { value: 'soc2', label: 'SOC 2' },
    { value: 'hipaa', label: 'HIPAA' },
    { value: 'pci_dss', label: 'PCI DSS' },
    { value: 'gdpr', label: 'GDPR' },
    { value: 'cmmc_2', label: 'CMMC 2.0' },
    { value: 'fedramp', label: 'FedRAMP' },
    { value: 'iso_27001', label: 'ISO 27001' },
    { value: 'nist_800_53', label: 'NIST 800-53' },
    { value: 'eu_ai_act', label: 'EU AI Act' },
    { value: 'none', label: 'none' },
    { value: 'other', label: 'other' },
  ];

  const FORMATS = [
    { value: 'html', label: 'HTML' },
    { value: 'pdf', label: 'PDF' },
    { value: 'json_sarif', label: 'JSON / SARIF' },
    { value: 'csv', label: 'CSV' },
    { value: 'custom', label: 'custom' },
  ];

  const INTEGRATIONS = [
    { value: 'jira', label: 'Jira' },
    { value: 'slack', label: 'Slack' },
    { value: 'github_gitlab_pr', label: 'GitHub / GitLab PR' },
    { value: 'servicenow', label: 'ServiceNow' },
    { value: 'splunk', label: 'Splunk' },
    { value: 'elastic', label: 'Elastic / SIEM' },
    { value: 'pagerduty', label: 'PagerDuty' },
    { value: 'drata', label: 'Drata' },
    { value: 'vanta', label: 'Vanta' },
    { value: 'tugboat', label: 'Tugboat Logic' },
  ];

  const SSO_OPTIONS = [
    { value: 'saml', label: 'SAML 2.0' },
    { value: 'oidc', label: 'OIDC / OAuth2' },
    { value: 'not_needed', label: 'not needed' },
    { value: 'later', label: 'decide later' },
  ];

  const frameworks = data.complianceFrameworks || [];
  const integrations = data.integrations || [];

  return (
    <div className="form-step">
      <div className="form-step-heading">step 4 of 6 — compliance</div>

      <div className="form-group">
        <label className="form-label">
          compliance frameworks <span className="form-label-optional">optional</span>
        </label>
        <div className="check-group">
          {FRAMEWORKS.map(f => {
            const checked = frameworks.includes(f.value);
            return (
              <div
                key={f.value}
                className={`check-opt${checked ? ' is-checked' : ''}`}
                onClick={() => toggleArr('complianceFrameworks', f.value)}
              >
                <div className="check-box">{checked && '✓'}</div>
                <div className="check-opt-label">{f.label}</div>
              </div>
            );
          })}
        </div>
      </div>

      {frameworks.includes('other') && (
        <div className="form-group">
          <label className="form-label">other framework</label>
          <input
            className="form-field"
            type="text"
            placeholder="specify..."
            value={data.complianceOther || ''}
            onChange={e => update({ complianceOther: e.target.value })}
          />
        </div>
      )}

      <div className="form-group">
        <label className="form-label">report formats</label>
        <div className="check-group">
          {FORMATS.map(f => {
            const checked = (data.reportFormats || []).includes(f.value);
            return (
              <div
                key={f.value}
                className={`check-opt${checked ? ' is-checked' : ''}`}
                onClick={() => toggleArr('reportFormats', f.value)}
              >
                <div className="check-box">{checked && '✓'}</div>
                <div className="check-opt-label">{f.label}</div>
              </div>
            );
          })}
        </div>
        {errors.reportFormats && <div className="form-error">{errors.reportFormats}</div>}
      </div>

      <div className="form-group">
        <label className="form-label">
          integrations <span className="form-label-optional">optional</span>
        </label>
        <div className="check-group">
          {INTEGRATIONS.map(i => {
            const checked = integrations.includes(i.value);
            return (
              <div
                key={i.value}
                className={`check-opt${checked ? ' is-checked' : ''}`}
                onClick={() => toggleArr('integrations', i.value)}
              >
                <div className="check-box">{checked && '✓'}</div>
                <div className="check-opt-label">{i.label}</div>
              </div>
            );
          })}
        </div>
        <div className="tag-input-wrap" style={{ marginTop: '8px' }}>
          {integrations.filter(v => !INTEGRATIONS.find(i => i.value === v)).map(t => (
            <span key={t} className="tag-chip">
              {t}
              <span className="tag-chip-remove" onClick={() => removeIntegration(t)}>×</span>
            </span>
          ))}
          <input
            className="tag-field"
            type="text"
            placeholder="other integration..."
            value={intInput}
            onChange={e => setIntInput(e.target.value)}
            onKeyDown={e => {
              if (e.key === 'Enter' || e.key === ',') { e.preventDefault(); addIntegration(intInput); }
            }}
            onBlur={() => addIntegration(intInput)}
          />
        </div>
      </div>

      <div className="form-group">
        <label className="form-label">SSO requirement</label>
        <div className="radio-group is-pills">
          {SSO_OPTIONS.map(o => (
            <div
              key={o.value}
              className={`radio-opt${data.ssoRequirement === o.value ? ' is-active' : ''}`}
              onClick={() => update({ ssoRequirement: o.value })}
            >
              {o.label}
            </div>
          ))}
        </div>
        {errors.ssoRequirement && <div className="form-error">{errors.ssoRequirement}</div>}
      </div>

      <div className="form-group">
        <div
          className={`check-opt${data.hasAiInProduction ? ' is-checked' : ''}`}
          onClick={() => update({ hasAiInProduction: !data.hasAiInProduction })}
        >
          <div className="check-box">{data.hasAiInProduction && '✓'}</div>
          <div className="check-opt-label">we have AI models or agents in production</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.Step4Compliance = Step4Compliance;