// Step1Identity — who are you?

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

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

  function extractDomain(email) {
    const m = email.trim().match(/@([^@]+)$/);
    return m ? m[1].toLowerCase() : '';
  }

  function handleEmailBlur(e) {
    const email = e.target.value;
    const domain = extractDomain(email);
    if (domain && !data.companyDomain) {
      update({ companyDomain: domain });
    }
  }

  function handleEmailChange(e) {
    const email = e.target.value;
    update({ workEmail: email });
    const domain = extractDomain(email);
    if (domain) update({ companyDomain: domain });
  }

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

  const ROLE_OPTIONS = [
    { value: '', label: 'select role' },
    { value: 'ciso', label: 'CISO / Head of Security' },
    { value: 'security_engineer', label: 'Security Engineer' },
    { value: 'appsec_lead', label: 'AppSec Lead / Manager' },
    { value: 'devops_sre', label: 'DevOps / SRE' },
    { value: 'cto_vp_eng', label: 'CTO / VP Engineering' },
    { value: 'founder', label: 'Founder' },
    { value: 'other', label: 'other' },
  ];

  const INDUSTRY_OPTIONS = [
    { value: '', label: 'select industry' },
    { value: 'fintech', label: 'fintech / payments' },
    { value: 'healthcare', label: 'healthcare / biotech' },
    { value: 'saas', label: 'B2B SaaS' },
    { value: 'ecommerce', label: 'ecommerce' },
    { value: 'gov_defense', label: 'government / defense' },
    { value: 'crypto_web3', label: 'crypto / web3' },
    { value: 'media', label: 'media / consumer' },
    { value: 'enterprise', label: 'enterprise software' },
    { value: 'other', label: 'other' },
  ];

  const SIZES = [
    { value: '1-50', label: '1–50' },
    { value: '51-500', label: '51–500' },
    { value: '501-5000', label: '501–5000' },
    { value: '5000+', label: '5000+' },
  ];

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

      <div className="form-group">
        <label className="form-label">full name</label>
        <input
          className="form-field"
          type="text"
          placeholder="jane smith"
          value={data.fullName || ''}
          onChange={e => update({ fullName: e.target.value })}
        />
        {errors.fullName && <div className="form-error">{errors.fullName}</div>}
      </div>

      <div className="form-group">
        <label className="form-label">work email</label>
        <input
          className="form-field"
          type="email"
          placeholder="jane@company.com"
          value={data.workEmail || ''}
          onChange={handleEmailChange}
          onBlur={handleEmailBlur}
        />
        {errors.workEmail && <div className="form-error">{errors.workEmail}</div>}
      </div>

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

      <div className="form-group">
        <label className="form-label">company domain</label>
        <input
          className="form-field"
          type="text"
          placeholder="acme.com"
          value={data.companyDomain || ''}
          onChange={e => update({ companyDomain: e.target.value })}
        />
        {errors.companyDomain && <div className="form-error">{errors.companyDomain}</div>}
      </div>

      <div className="form-group">
        <label className="form-label">role</label>
        <select
          className="form-field"
          value={data.role || ''}
          onChange={e => update({ role: e.target.value })}
        >
          {ROLE_OPTIONS.map(o => (
            <option key={o.value} value={o.value}>{o.label}</option>
          ))}
        </select>
        {errors.role && <div className="form-error">{errors.role}</div>}
      </div>

      <div className="form-group">
        <label className="form-label">company size</label>
        <div className="radio-group is-pills">
          {SIZES.map(s => (
            <div
              key={s.value}
              className={`radio-opt${data.companySize === s.value ? ' is-active' : ''}`}
              onClick={() => update({ companySize: s.value })}
            >
              {s.label}
            </div>
          ))}
        </div>
        {errors.companySize && <div className="form-error">{errors.companySize}</div>}
      </div>

      <div className="form-group">
        <label className="form-label">industry</label>
        <select
          className="form-field"
          value={data.industry || ''}
          onChange={e => update({ industry: e.target.value })}
        >
          {INDUSTRY_OPTIONS.map(o => (
            <option key={o.value} value={o.value}>{o.label}</option>
          ))}
        </select>
        {errors.industry && <div className="form-error">{errors.industry}</div>}
      </div>

      <div className="form-actions">
        <span />
        <button className="btn-next" onClick={handleNext}>
          next <span>→</span>
        </button>
      </div>
    </div>
  );
}

window.Step1Identity = Step1Identity;