/* Lead-Capture Modal — Pricing CTA */
function readStoredLead() {
  try {
    if (window.__mtLead) return window.__mtLead;
    const raw = localStorage.getItem('mt_lead');
    if (raw) return JSON.parse(raw);
  } catch (e) {/* noop */}
  return null;
}

function LeadCaptureModal({ open, onClose, onSubmitted, summary }) {
  const [form, setForm] = React.useState(() => {
    const stored = readStoredLead() || {};
    return {
      firstName: stored.firstName || '',
      lastName: stored.lastName || '',
      company: '',
      email: stored.email || '',
      phone: '',
      consent: !!stored.consent
    };
  });
  const [submitted, setSubmitted] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [sendError, setSendError] = React.useState(null);
  const [errors, setErrors] = React.useState({});
  const hp = window.MaliTechFormAPI.useHoneypot();

  // Wenn das Modal geöffnet wird, Lead-Daten erneut aus dem Store übernehmen (nicht überschreiben, was der User schon eingetippt hat)
  React.useEffect(() => {
    if (!open) return;
    const stored = readStoredLead();
    if (!stored) return;
    setForm((f) => ({
      ...f,
      firstName: f.firstName || stored.firstName || '',
      lastName: f.lastName || stored.lastName || '',
      email: f.email || stored.email || '',
      consent: f.consent || !!stored.consent
    }));
  }, [open]);

  // Live-Update, falls die Lead-Daten geändert werden, während das Modal noch geschlossen ist
  React.useEffect(() => {
    const handler = (e) => {
      const stored = e.detail || readStoredLead();
      if (!stored) return;
      setForm((f) => ({
        ...f,
        firstName: f.firstName || stored.firstName || '',
        lastName: f.lastName || stored.lastName || '',
        email: f.email || stored.email || '',
        consent: f.consent || !!stored.consent
      }));
    };
    window.addEventListener('mt:lead-updated', handler);
    return () => window.removeEventListener('mt:lead-updated', handler);
  }, []);

  React.useEffect(() => {
    if (open) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
      setSubmitted(false);
      setErrors({});
    }
    return () => {document.body.style.overflow = '';};
  }, [open]);

  if (!open) return null;

  const set = (k, v) => setForm((f) => ({ ...f, [k]: v }));

  const submit = async (e) => {
    e.preventDefault();
    if (sending) return;
    const errs = {};
    if (!form.firstName.trim()) errs.firstName = 'Pflichtfeld';
    if (!form.lastName.trim()) errs.lastName = 'Pflichtfeld';
    if (!form.company.trim()) errs.company = 'Pflichtfeld';
    if (!form.email.trim() || !/^[^@]+@[^@]+\.[^@]+$/.test(form.email)) errs.email = 'Gültige E-Mail erforderlich';
    if (!form.phone.trim()) errs.phone = 'Pflichtfeld';
    if (!form.consent) errs.consent = 'Bitte stimmen Sie zu';
    setErrors(errs);
    if (Object.keys(errs).length > 0) return;

    setSending(true);
    setSendError(null);

    const payload = {
      firstName: form.firstName,
      lastName: form.lastName,
      company: form.company,
      email: form.email,
      phone: form.phone,
      consent: form.consent,
      konfiguration: summary ? `${summary.tier} · ${summary.users} User · ${summary.term} Monate · ${summary.totalMRR}/Monat` : null,
      ...hp.read()
    };

    const res = await window.MaliTechFormAPI.submitForm('lead-config', payload);
    setSending(false);

    if (!res.ok) {
      setSendError(res.error || 'Versand fehlgeschlagen');
      return;
    }

    try {
      const lead = { firstName: form.firstName, lastName: form.lastName, email: form.email, consent: form.consent };
      window.__mtLead = lead;
      localStorage.setItem('mt_lead', JSON.stringify(lead));
    } catch (e) {/* noop */}
    setSubmitted(true);
    if (onSubmitted) onSubmitted();
  };

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal-card" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Schließen">×</button>

        {submitted ?
        <div className="modal-success">
            <div className="success-circle"><Icon.Check size={32} /></div>
            <h3>Vielen Dank, {form.firstName}!</h3>
            <p>Wir melden uns innerhalb von <strong>24 Stunden</strong> bei Ihnen — typischerweise direkt vom zuständigen Account Manager.</p>
            <p style={{ color: 'var(--color-text-muted)', fontSize: 13, marginTop: 16 }}>
              Tipp: Wenn Sie bereits eine Cyber-Police haben, halten Sie diese bereit — unser Audit prüft, ob Ihr IT-Setup die Obliegenheiten Ihrer Police erfüllt.
            </p>
            <button className="btn btn-primary" onClick={onClose} style={{ marginTop: 24 }}>Schließen</button>
          </div> :

        <form onSubmit={submit} className="modal-form">
            {hp.fields}
            <div className="modal-head">
              <span className="eyebrow"><Icon.Calendar size={14} /> &nbsp;Angebot erhalten</span>
              <h3>Ihr individuelles Angebot — in 24h</h3>
              <p>Wir prüfen Ihre Konfiguration, gleichen sie mit Ihrer aktuellen IT ab und senden Ihnen ein verbindliches Angebot.</p>
            </div>

            {summary &&
          <div className="modal-summary">
                <div className="ms-row"><span>Konfiguration:</span><strong>{summary.tier} · {summary.users} User · {summary.term} Mo.</strong></div>
                <div className="ms-row"><span>Monatlich:</span><strong style={{ color: 'var(--color-gold)' }}>{summary.totalMRR}</strong></div>
              </div>
          }

            <div className="form-grid-2">
              <label className="field">
                <span>Vorname *</span>
                <input type="text" value={form.firstName} onChange={(e) => set('firstName', e.target.value)} />
                {errors.firstName && <em>{errors.firstName}</em>}
              </label>
              <label className="field">
                <span>Nachname *</span>
                <input type="text" value={form.lastName} onChange={(e) => set('lastName', e.target.value)} />
                {errors.lastName && <em>{errors.lastName}</em>}
              </label>
            </div>

            <label className="field">
              <span>Unternehmen *</span>
              <input type="text" value={form.company} onChange={(e) => set('company', e.target.value)} />
              {errors.company && <em>{errors.company}</em>}
            </label>

            <div className="form-grid-2">
              <label className="field">
                <span>E-Mail *</span>
                <input type="email" value={form.email} onChange={(e) => set('email', e.target.value)} />
                {errors.email && <em>{errors.email}</em>}
              </label>
              <label className="field">
                <span>Telefonnummer *</span>
                <input type="tel" value={form.phone} onChange={(e) => set('phone', e.target.value)} />
                {errors.phone && <em>{errors.phone}</em>}
              </label>
            </div>

            <label className={`consent ${errors.consent ? 'err' : ''}`}>
              <input type="checkbox" checked={form.consent} onChange={(e) => set('consent', e.target.checked)} />
              <span>
                Ich stimme zu, dass meine Angaben zur Kontaktaufnahme und Beratung per E-Mail und Telefon verwendet werden dürfen. Weitere Informationen in unserer <a href="datenschutz.html" target="_blank" rel="noopener" style={{ color: 'var(--color-gold)' }}>Datenschutzerklärung</a>.
              </span>
            </label>
            {errors.consent && <em style={{ color: '#ff4d4f', fontSize: 12 }}>{errors.consent}</em>}

            {sendError && (
              <div className="form-error">
                <strong>Versand fehlgeschlagen.</strong> {sendError} —
                oder erreichen Sie uns direkt unter{' '}
                <a href="tel:+4952116391310">+49 521 163913-10</a>.
              </div>
            )}

            <button type="submit" className="btn btn-primary btn-lg" style={{ width: '100%', marginTop: 12 }} disabled={sending}>
              {sending ? 'Wird gesendet …' : <>Angebot erhalten <Icon.Arrow /></>}
            </button>
          </form>
        }
      </div>
    </div>);

}
window.LeadCaptureModal = LeadCaptureModal;