// ScanStep2Cloud — cloud provider selection + provider-specific configuration.

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

  const [errors, setErrors] = useState({});
  const CP = window.CloudProviders;

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

  function selectProvider(provider) {
    const defaults = CP[provider].defaults;
    update({ cloudProvider: provider, ...defaults });
  }

  function handleGcpRegionChange(region) {
    const zones = CP.gcp.zones[region] || [];
    update({ gcp_region: region, gcp_zone: zones[0] || '' });
  }

  const PROVIDERS = [
    { id: 'aws', label: 'AWS', icon: '☁' },
    { id: 'azure', label: 'Azure', icon: '◈' },
    { id: 'gcp', label: 'GCP', icon: '△' },
  ];

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

      <div className="form-group">
        <label className="form-label">cloud provider</label>
        <div className="cloud-selector">
          {PROVIDERS.map(p => (
            <div key={p.id}
              className={`cloud-card${data.cloudProvider === p.id ? ' is-active' : ''}`}
              onClick={() => selectProvider(p.id)}>
              <div className="cloud-card-icon">{p.icon}</div>
              <div className="cloud-card-name">{p.label}</div>
            </div>
          ))}
        </div>
        {errors.cloudProvider && <div className="form-error">{errors.cloudProvider}</div>}
      </div>

      {data.cloudProvider === 'aws' && (
        <div className="cloud-config">
          <div className="form-group">
            <label className="form-label">region</label>
            <select className="form-field" value={data.aws_region || 'us-east-1'}
              onChange={e => update({ aws_region: e.target.value })}>
              {CP.aws.regions.map(r => <option key={r.value} value={r.value}>{r.label}</option>)}
            </select>
          </div>

          <div className="form-group">
            <label className="form-label">VPC ID</label>
            <input className="form-field" type="text" placeholder="vpc-xxxxxxxxxxxxxxxxx"
              value={data.aws_vpc_id || ''} onChange={e => update({ aws_vpc_id: e.target.value })} />
            {errors.aws_vpc_id && <div className="form-error">{errors.aws_vpc_id}</div>}
          </div>

          <div className="form-group">
            <label className="form-label">subnet ID</label>
            <input className="form-field" type="text" placeholder="subnet-xxxxxxxxxxxxxxxxx"
              value={data.aws_subnet_id || ''} onChange={e => update({ aws_subnet_id: e.target.value })} />
            {errors.aws_subnet_id && <div className="form-error">{errors.aws_subnet_id}</div>}
          </div>

          <div className="form-group">
            <label className="form-label">instance type</label>
            <select className="form-field" value={data.aws_instance_type || 'm5.xlarge'}
              onChange={e => update({ aws_instance_type: e.target.value })}>
              {CP.aws.instanceTypes.map(t => <option key={t.value} value={t.value}>{t.label}</option>)}
            </select>
          </div>

          <div className="form-group">
            <label className="form-label">EC2 key pair name <span className="form-label-optional">optional</span></label>
            <input className="form-field" type="text" placeholder="my-key-pair"
              value={data.aws_key_name || ''} onChange={e => update({ aws_key_name: e.target.value })} />
          </div>
        </div>
      )}

      {data.cloudProvider === 'azure' && (
        <div className="cloud-config">
          <div className="form-group">
            <label className="form-label">subscription ID</label>
            <input className="form-field" type="text" placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
              value={data.azure_subscription_id || ''} onChange={e => update({ azure_subscription_id: e.target.value })} />
            {errors.azure_subscription_id && <div className="form-error">{errors.azure_subscription_id}</div>}
          </div>

          <div className="form-group">
            <label className="form-label">location</label>
            <select className="form-field" value={data.azure_location || 'eastus'}
              onChange={e => update({ azure_location: e.target.value })}>
              {CP.azure.locations.map(l => <option key={l.value} value={l.value}>{l.label}</option>)}
            </select>
          </div>

          <div className="form-group">
            <label className="form-label">VM size</label>
            <select className="form-field" value={data.azure_vm_size || 'Standard_D4s_v5'}
              onChange={e => update({ azure_vm_size: e.target.value })}>
              {CP.azure.vmSizes.map(s => <option key={s.value} value={s.value}>{s.label}</option>)}
            </select>
          </div>

          <div className="form-group">
            <label className="form-label">SSH public key</label>
            <textarea className="form-field" rows={3} placeholder="ssh-rsa AAAA..."
              value={data.azure_ssh_public_key || ''} onChange={e => update({ azure_ssh_public_key: e.target.value })} />
            {errors.azure_ssh_public_key && <div className="form-error">{errors.azure_ssh_public_key}</div>}
          </div>

          <div className="form-group">
            <label className="form-label">resource group name <span className="form-label-optional">optional — leave empty to create new</span></label>
            <input className="form-field" type="text" placeholder="my-resource-group"
              value={data.azure_resource_group_name || ''} onChange={e => update({ azure_resource_group_name: e.target.value })} />
          </div>

          <div className="form-group">
            <label className="form-label">VNet name <span className="form-label-optional">optional — leave empty to create new</span></label>
            <input className="form-field" type="text" placeholder="my-vnet"
              value={data.azure_vnet_name || ''} onChange={e => update({ azure_vnet_name: e.target.value })} />
          </div>

          <div className="form-group">
            <label className="form-label">subnet ID <span className="form-label-optional">optional — leave empty to create new</span></label>
            <input className="form-field" type="text" placeholder="/subscriptions/.../subnets/..."
              value={data.azure_subnet_id || ''} onChange={e => update({ azure_subnet_id: e.target.value })} />
          </div>
        </div>
      )}

      {data.cloudProvider === 'gcp' && (
        <div className="cloud-config">
          <div className="form-group">
            <label className="form-label">project ID</label>
            <input className="form-field" type="text" placeholder="my-gcp-project-id"
              value={data.gcp_project_id || ''} onChange={e => update({ gcp_project_id: e.target.value })} />
            {errors.gcp_project_id && <div className="form-error">{errors.gcp_project_id}</div>}
          </div>

          <div className="form-group">
            <label className="form-label">region</label>
            <select className="form-field" value={data.gcp_region || 'us-central1'}
              onChange={e => handleGcpRegionChange(e.target.value)}>
              {CP.gcp.regions.map(r => <option key={r.value} value={r.value}>{r.label}</option>)}
            </select>
          </div>

          <div className="form-group">
            <label className="form-label">zone</label>
            <select className="form-field" value={data.gcp_zone || ''}
              onChange={e => update({ gcp_zone: e.target.value })}>
              {(CP.gcp.zones[data.gcp_region || 'us-central1'] || []).map(z =>
                <option key={z} value={z}>{z}</option>
              )}
            </select>
          </div>

          <div className="form-group">
            <label className="form-label">machine type</label>
            <select className="form-field" value={data.gcp_machine_type || 'e2-standard-4'}
              onChange={e => update({ gcp_machine_type: e.target.value })}>
              {CP.gcp.machineTypes.map(t => <option key={t.value} value={t.value}>{t.label}</option>)}
            </select>
          </div>

          <div className="form-group">
            <label className="form-label">VPC network <span className="form-label-optional">optional</span></label>
            <input className="form-field" type="text" placeholder="default"
              value={data.gcp_network || 'default'} onChange={e => update({ gcp_network: e.target.value })} />
          </div>

          <div className="form-group">
            <label className="form-label">subnet <span className="form-label-optional">optional</span></label>
            <input className="form-field" type="text" placeholder="default"
              value={data.gcp_subnet || 'default'} onChange={e => update({ gcp_subnet: e.target.value })} />
          </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.ScanStep2Cloud = ScanStep2Cloud;