// Step3Deploy — how does it need to deploy?

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

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

  function handleNext() {
    const errs = window.IntakeSchema.validateStep3(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 });
  }

  const DEPLOY_MODES = [
    {
      value: 'managed_cloud',
      label: 'managed cloud',
      desc: 'sekura handles infra — you point us at targets',
    },
    {
      value: 'self_hosted',
      label: 'self-hosted',
      desc: 'you run the scanner in your own environment',
    },
    {
      value: 'air_gapped',
      label: 'air-gapped',
      desc: 'fully offline — no outbound, requires local LLM',
    },
    {
      value: 'decoupled_platform',
      label: 'decoupled',
      desc: 'scanner in your env, results sync to sekura cloud',
    },
    {
      value: 'byoc',
      label: 'bring your own cloud',
      desc: 'deploy to your own cloud account (AWS/GCP/Azure)',
    },
    {
      value: 'on_prem',
      label: 'on-premises',
      desc: 'bare-metal or VM, fully customer-managed',
    },
  ];

  const LLM_OPTIONS = [
    {
      value: 'sekura_managed',
      label: 'sekura-managed',
      desc: 'we run the LLM — easiest setup',
    },
    {
      value: 'byol',
      label: 'bring your own LLM',
      desc: 'your own OpenAI / Anthropic / Azure API key',
    },
    {
      value: 'fully_local',
      label: 'fully local',
      desc: 'no external LLM calls — runs on-device (required for air-gapped)',
    },
    {
      value: 'flexible',
      label: 'flexible',
      desc: 'no preference yet — open to discussion',
    },
  ];

  const RUNTIMES = [
    { value: 'docker', label: 'Docker' },
    { value: 'kubernetes', label: 'Kubernetes' },
    { value: 'podman', label: 'Podman' },
    { value: 'bare_vm', label: 'bare VM' },
    { value: 'not_sure', label: 'not sure yet' },
  ];

  const RESIDENCY = [
    { value: 'us_only', label: 'US only' },
    { value: 'eu_only', label: 'EU only' },
    { value: 'specific_region', label: 'specific region' },
    { value: 'none', label: 'no requirement' },
    { value: 'unsure', label: 'unsure' },
  ];

  const NETWORK = [
    {
      value: 'no_outbound_from_scanner',
      label: 'no outbound from scanner',
      desc: 'scanner cannot call external IPs',
    },
    {
      value: 'vpn_required',
      label: 'VPN required',
      desc: 'scanner must connect via VPN to reach targets',
    },
    {
      value: 'allowlist_only',
      label: 'allowlist only',
      desc: 'must add scanner IPs to allowlist first',
    },
    {
      value: 'no_restrictions',
      label: 'no restrictions',
      desc: 'standard internet access is fine',
    },
  ];

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

      <div className="form-group">
        <label className="form-label">deploy mode</label>
        <div className="radio-group is-vertical">
          {DEPLOY_MODES.map(m => (
            <div
              key={m.value}
              className={`radio-opt${data.deployMode === m.value ? ' is-active' : ''}`}
              onClick={() => update({ deployMode: m.value })}
            >
              <div>
                <div>{m.label}</div>
                <div className="radio-opt-desc">{m.desc}</div>
              </div>
            </div>
          ))}
        </div>
        {errors.deployMode && <div className="form-error">{errors.deployMode}</div>}
      </div>

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

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

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

      {(data.dataResidency || []).includes('specific_region') && (
        <div className="form-group">
          <label className="form-label">which region?</label>
          <input
            className="form-field"
            type="text"
            placeholder="e.g. us-east-1, eu-west-2, ap-southeast-1"
            value={data.dataResidencyDetail || ''}
            onChange={e => update({ dataResidencyDetail: e.target.value })}
          />
        </div>
      )}

      <div className="form-group">
        <label className="form-label">
          network constraints <span className="form-label-optional">optional — select all that apply</span>
        </label>
        <div className="check-group is-vertical">
          {NETWORK.map(n => {
            const checked = (data.networkConstraints || []).includes(n.value);
            return (
              <div
                key={n.value}
                className={`check-opt${checked ? ' is-checked' : ''}`}
                onClick={() => toggleArr('networkConstraints', n.value)}
              >
                <div className="check-box">{checked && '✓'}</div>
                <div className="check-opt-label">
                  {n.label}
                  <span className="check-opt-desc">{n.desc}</span>
                </div>
              </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.Step3Deploy = Step3Deploy;