/* Logik Systems — multi-step lead form (React)
   Renders as a modal (#leadFormRoot) and/or inline (#leadFormInline). */
const { useState, useEffect, useRef } = React;

const LEAD_STEPS = [
  { key: "size", q: "Wie groß ist Ihr Unternehmen?", type: "single",
    options: ["1–50", "51–250", "251–1.000", "1.000+"] },
  { key: "erp", q: "Welches ERP-System nutzen Sie?", type: "single",
    options: ["ProAlpha", "SAP", "Sage", "Microsoft Dynamics", "Anderes / keins"] },
  { key: "interest", q: "Woran sind Sie interessiert?", hint: "Mehrfachauswahl möglich.", type: "multi",
    options: ["Individueller Konfigurator", "PK-Easy", "ERP-Integration", "CAD-Anbindung", "Allgemeine Beratung"] },
  { key: "timeline", q: "In welchem Zeitraum planen Sie?", type: "single",
    options: ["So schnell wie möglich", "1–3 Monate", "3–6 Monate", "Über 6 Monate"] },
  { key: "contact", q: "Ihre Kontaktdaten", type: "contact" }
];

function LeadOption({ label, selected, multi, onClick }) {
  return (
    <button type="button" className={"lead-opt " + (multi ? "" : "radio ") + (selected ? "sel" : "")} onClick={onClick}>
      <span className="box"></span>
      <span>{label}</span>
    </button>
  );
}

function LeadCard({ embedded, initialInterest, onClose }) {
  const [step, setStep] = useState(0);
  const [done, setDone] = useState(false);
  const [touched, setTouched] = useState(false);
  const [data, setData] = useState({
    size: "", erp: "", interest: initialInterest ? initialInterest.slice() : [],
    timeline: "", contact: { name: "", firma: "", email: "", tel: "", msg: "" }
  });

  const cur = LEAD_STEPS[step];
  const emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.contact.email);
  const contactValid = data.contact.name.trim() && data.contact.firma.trim() && emailOk;

  function stepValid() {
    if (cur.type === "single") return !!data[cur.key];
    if (cur.type === "multi") return data[cur.key].length > 0;
    if (cur.type === "contact") return contactValid;
    return true;
  }
  function pickSingle(val) { setData(d => ({ ...d, [cur.key]: val })); }
  function toggleMulti(val) {
    setData(d => {
      const arr = d[cur.key];
      return { ...d, [cur.key]: arr.includes(val) ? arr.filter(x => x !== val) : arr.concat(val) };
    });
  }
  function setContact(field, val) { setData(d => ({ ...d, contact: { ...d.contact, [field]: val } })); }
  function next() {
    setTouched(true);
    if (!stepValid()) return;
    if (step < LEAD_STEPS.length - 1) { setStep(step + 1); setTouched(false); }
    else { setDone(true); }
  }
  function back() { if (step > 0) { setStep(step - 1); setTouched(false); } }
  function restart() {
    setStep(0); setDone(false); setTouched(false);
    setData({ size: "", erp: "", interest: [], timeline: "", contact: { name: "", firma: "", email: "", tel: "", msg: "" } });
  }

  const pct = done ? 100 : Math.round((step / LEAD_STEPS.length) * 100) + 8;
  const cardClass = (embedded ? "lead-modal lead-embedded" : "lead-modal");

  if (done) {
    return (
      <div className={cardClass} role="dialog" aria-modal={embedded ? undefined : "true"}>
        <div className="lead-success">
          <span className="ok">
            <svg width="30" height="30" viewBox="0 0 30 30" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M8 15.5l4.5 4.5L22 9.5"></path></svg>
          </span>
          <h3>Vielen Dank!</h3>
          <p>Wir melden uns innerhalb von 1 Werktag bei Ihnen.</p>
          {embedded
            ? <button className="btn btn-ghost" onClick={restart}>Neue Anfrage</button>
            : <button className="btn btn-primary" onClick={onClose}>Schließen</button>}
        </div>
      </div>
    );
  }

  return (
    <div className={cardClass} role="dialog" aria-modal={embedded ? undefined : "true"}>
      <div className="lead-top">
        <div className="lead-top-row">
          <span className="lead-step-label">Schritt {step + 1}/{LEAD_STEPS.length}</span>
          {!embedded && <button className="lead-close" onClick={onClose} aria-label="Schließen">✕</button>}
        </div>
        <div className="lead-progress"><i style={{ width: pct + "%" }}></i></div>
      </div>

      <div className="lead-body">
        <div className="lead-q">{cur.q}</div>
        {cur.hint && <p className="lead-hint">{cur.hint}</p>}

        {cur.type === "single" && (
          <div className="lead-options">
            {cur.options.map(o => (
              <LeadOption key={o} label={o} selected={data[cur.key] === o} multi={false} onClick={() => pickSingle(o)} />
            ))}
          </div>
        )}
        {cur.type === "multi" && (
          <div className="lead-options">
            {cur.options.map(o => (
              <LeadOption key={o} label={o} selected={data[cur.key].includes(o)} multi={true} onClick={() => toggleMulti(o)} />
            ))}
          </div>
        )}
        {cur.type === "contact" && (
          <div className="lead-fields">
            <div className={"lead-field" + (touched && !data.contact.name.trim() ? " err" : "")}>
              <label>Name <span className="req">*</span></label>
              <input value={data.contact.name} onChange={e => setContact("name", e.target.value)} placeholder="Ihr Name" />
            </div>
            <div className={"lead-field" + (touched && !data.contact.firma.trim() ? " err" : "")}>
              <label>Firma <span className="req">*</span></label>
              <input value={data.contact.firma} onChange={e => setContact("firma", e.target.value)} placeholder="Unternehmen" />
            </div>
            <div className={"lead-field" + (touched && !emailOk ? " err" : "")}>
              <label>E-Mail <span className="req">*</span></label>
              <input type="email" value={data.contact.email} onChange={e => setContact("email", e.target.value)} placeholder="name@firma.de" />
              {touched && !emailOk && <span className="lead-err">Bitte eine gültige E-Mail-Adresse angeben.</span>}
            </div>
            <div className="lead-field">
              <label>Telefon</label>
              <input value={data.contact.tel} onChange={e => setContact("tel", e.target.value)} placeholder="Optional" />
            </div>
            <div className="lead-field">
              <label>Nachricht</label>
              <textarea value={data.contact.msg} onChange={e => setContact("msg", e.target.value)} placeholder="Worum geht es? (optional)"></textarea>
            </div>
          </div>
        )}
      </div>

      <div className="lead-foot">
        <button className={"lead-back" + (step === 0 ? " hidden" : "")} onClick={back}>← Zurück</button>
        <button className="btn btn-primary" onClick={next}>
          {step === LEAD_STEPS.length - 1 ? "Beratungsgespräch anfragen" : "Weiter"}
        </button>
      </div>
    </div>
  );
}

function LeadModal() {
  const [open, setOpen] = useState(false);
  const [openCount, setOpenCount] = useState(0);
  const presetRef = useRef(null);

  useEffect(() => {
    window.openLeadForm = function (preset) {
      presetRef.current = (preset && Array.isArray(preset.interest)) ? preset.interest : null;
      setOpenCount(c => c + 1);
      setOpen(true);
    };
    return () => { try { delete window.openLeadForm; } catch (e) {} };
  }, []);

  useEffect(() => {
    function onKey(e) { if (e.key === "Escape") setOpen(false); }
    if (open) { document.addEventListener("keydown", onKey); document.body.style.overflow = "hidden"; }
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [open]);

  if (!open) return null;
  return (
    <div className="lead-overlay" onMouseDown={(e) => { if (e.target === e.currentTarget) setOpen(false); }}>
      <LeadCard key={openCount} initialInterest={presetRef.current} onClose={() => setOpen(false)} />
    </div>
  );
}

(function mountLeadForm() {
  const modalRoot = document.getElementById("leadFormRoot");
  if (modalRoot) ReactDOM.createRoot(modalRoot).render(<LeadModal />);
  const inlineRoot = document.getElementById("leadFormInline");
  if (inlineRoot) ReactDOM.createRoot(inlineRoot).render(<LeadCard embedded={true} />);
})();