const IR_TYPES = [
  { value: "ransomware", label: "Ransomware or encrypted files" },
  { value: "suspicious", label: "Suspicious activity or alerts" },
  { value: "account", label: "Compromised email or account" },
  { value: "breach", label: "Data breach or leak" },
  { value: "other", label: "Something else / not sure" },
];
const IR_STATUS = [
  { value: "ongoing", label: "Yes, it's ongoing" },
  { value: "contained", label: "We think it's contained" },
  { value: "unsure", label: "Not sure" },
];

function IncidentIntake({ initial, onBack, onSubmit }) {
  const B = window.BRAND || {};
  const irPhone = B.irPhone || "0800 000 000";
  const tel = "tel:" + irPhone.replace(/[^\d+]/g, "");
  const [d, setD] = React.useState(initial || { types: [], status: "", name: "", phone: "", email: "", company: "", notes: "" });
  const [tried, setTried] = React.useState(false);
  const set = (k, v) => setD((x) => ({ ...x, [k]: v }));
  const toggleType = (v) => set("types", d.types.includes(v) ? d.types.filter((t) => t !== v) : [...d.types, v]);
  const errs = {
    name: !d.name.trim() && "Please enter your name.",
    phone: d.phone.replace(/\D/g, "").length < 7 && "Please enter a number we can call you on.",
    company: !d.company.trim() && "Please enter your organisation.",
    email: d.email && !/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(d.email) && "That email doesn't look right.",
  };
  const valid = !Object.values(errs).some(Boolean);
  const submit = (e) => { e.preventDefault(); setTried(true); if (valid) onSubmit(d); };
  const Err = ({ k }) => tried && errs[k] ? <span className="ir-err">{errs[k]}</span> : null;
  const cls = (k) => "field" + (tried && errs[k] ? " invalid" : "");

  return (
    <div className="ir step-anim">
      <div className="ir-top"><button type="button" className="ir-back" onClick={onBack}><span className="arrow">←</span> Back</button><button type="button" className="restart-btn" onClick={onBack}>↺ Start again</button></div>
      <div className="ir-head">
        <div className="ir-tag"><span className="ir-dot" />Incident response · On call 24/7</div>
        <h1 className="ir-title">Let's get a responder on this.</h1>
        <p className="ir-sub">Calling is the fastest way to reach us. If you can't call right now, send a few details and an on-call responder will phone you back.</p>
      </div>

      <div className="ir-call">
        <div>
          <div className="ir-call-label">24/7 incident line</div>
          <a className="ir-call-num" href={tel}>{irPhone}</a>
        </div>
        <a className="btn btn-critical ir-call-btn" href={tel}>Call now <span className="arrow">→</span></a>
      </div>

      <div className="ir-or"><span>or request a call back</span></div>

      <form className="card ir-card" onSubmit={submit} noValidate>
        <fieldset className="ir-fs">
          <legend>What's happening? <span className="ir-hint">Pick any that apply</span></legend>
          <div className="ir-chips">
            {IR_TYPES.map((t) => (
              <button type="button" key={t.value} className="ir-chip" aria-pressed={d.types.includes(t.value)} onClick={() => toggleType(t.value)}>{t.label}</button>
            ))}
          </div>
        </fieldset>
        <fieldset className="ir-fs">
          <legend>Is it still happening?</legend>
          <div className="ir-chips">
            {IR_STATUS.map((t) => (
              <button type="button" key={t.value} className="ir-chip" aria-pressed={d.status === t.value} onClick={() => set("status", t.value)}>{t.label}</button>
            ))}
          </div>
        </fieldset>
        <div className="field-grid ir-grid">
          <div className={cls("name")}><label htmlFor="ir-name">Your name *</label><input id="ir-name" value={d.name} onChange={(e) => set("name", e.target.value)} autoComplete="name" /><Err k="name" /></div>
          <div className={cls("phone")}><label htmlFor="ir-phone">Best number to call *</label><input id="ir-phone" type="tel" placeholder={B.phonePh || ""} value={d.phone} onChange={(e) => set("phone", e.target.value)} autoComplete="tel" /><Err k="phone" /></div>
          <div className={cls("company")}><label htmlFor="ir-co">Organisation *</label><input id="ir-co" value={d.company} onChange={(e) => set("company", e.target.value)} autoComplete="organization" /><Err k="company" /></div>
          <div className={cls("email")}><label htmlFor="ir-email">Email</label><input id="ir-email" type="email" value={d.email} onChange={(e) => set("email", e.target.value)} autoComplete="email" /><Err k="email" /></div>
          <div className="field full"><label htmlFor="ir-notes">What have you noticed so far?</label><textarea id="ir-notes" rows={3} placeholder="e.g. Files on a shared drive were renamed overnight and a ransom note appeared this morning" value={d.notes} onChange={(e) => set("notes", e.target.value)} /></div>
        </div>
        <p className="ir-note">If your email may be compromised, give a phone number or email address you trust. Please don't include passwords or credentials.</p>
        <div className="ir-foot">
          <button type="submit" className="btn btn-critical">Request a call back <span className="arrow">→</span></button>
          <span className="ir-foot-alt">Prefer to talk now? <a href={tel}>Call {irPhone}</a></span>
        </div>
      </form>
    </div>
  );
}

Object.assign(window, { IncidentIntake, IR_TYPES, IR_STATUS });