/* Cyber-Risk Calculator with InfoTips */
const { useState, useMemo } = React;

function CyberReportModal({ open, onClose, onSubmitted, reportData }) {
  const [form, setForm] = React.useState({ firstName: '', lastName: '', email: '', consent: false, newsletter: false });
  const [errors, setErrors] = React.useState({});
  const [sending, setSending] = React.useState(false);
  const [sendError, setSendError] = React.useState(null);

  React.useEffect(() => {
    if (open) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
      setErrors({});
      setSendError(null);
    }
    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.email.trim() || !/^[^@]+@[^@]+\.[^@]+$/.test(form.email)) errs.email = 'Gültige E-Mail erforderlich';
    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,
      email: form.email,
      consent: form.consent,
      newsletter: form.newsletter,
      ...(reportData || {})
    };
    const res = await window.MaliTechFormAPI.submitForm('cyber-report', payload);
    setSending(false);

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

  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>
        <form onSubmit={submit} className="modal-form">
          <div className="modal-head">
            <span className="eyebrow"><Icon.Document size={14} /> &nbsp;Cyber-Report</span>
            <h3>Ihren Cyber-Report jetzt erhalten</h3>
            <p>Tragen Sie kurz Ihre Kontaktdaten ein — im Anschluss leiten wir Sie direkt zum Angebots-Konfigurator weiter.</p>
          </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>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={`consent ${errors.consent ? 'err' : ''}`}>
            <input type="checkbox" checked={form.consent} onChange={(e) => set('consent', e.target.checked)} />
            <span>
              Ich willige ein, dass MaliTech Solutions mich per E-Mail zu IT-Sicherheits- und Produktangeboten kontaktieren darf. Die Einwilligung kann jederzeit widerrufen werden. Weitere Informationen in der <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 …' : <>Cyber-Report erhalten &amp; weiter zum Konfigurator <Icon.Arrow /></>}
          </button>
        </form>
      </div>
    </div>);

}
window.CyberReportModal = CyberReportModal;

function fmtEUR(n) {
  return new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }).format(Math.round(n));
}
function fmtEURExact(n) {
  const hasCents = Math.round(n * 100) % 100 !== 0;
  return new Intl.NumberFormat('de-DE', {
    style: 'currency',
    currency: 'EUR',
    minimumFractionDigits: hasCents ? 2 : 0,
    maximumFractionDigits: 2
  }).format(n);
}
function fmtNum(n) {
  return new Intl.NumberFormat('de-DE').format(Math.round(n));
}

function YNToggle({ value, onChange }) {
  return (
    <div className="yn-toggle">
      <button className={value ? 'active yes' : ''} onClick={() => onChange(true)}>Ja</button>
      <button className={!value ? 'active no' : ''} onClick={() => onChange(false)}>Nein</button>
    </div>);

}

function RiskCalculator() {
  const [revenue, setRevenue] = useState(2500000);
  const [employees, setEmployees] = useState(25);
  const [mfa, setMfa] = useState(false);
  const [backup, setBackup] = useState(true);
  const [patch, setPatch] = useState(false);
  const [reportModalOpen, setReportModalOpen] = useState(false);

  const handleReportSubmit = (data) => {
    // Lead-Daten in shared store ablegen, damit sie im Angebots-Konfigurator vorausgefüllt werden
    try {
      const lead = { firstName: data.firstName, lastName: data.lastName, email: data.email, consent: data.consent };
      window.__mtLead = lead;
      localStorage.setItem('mt_lead', JSON.stringify(lead));
      window.dispatchEvent(new CustomEvent('mt:lead-updated', { detail: lead }));
    } catch (err) {/* noop */}
    setReportModalOpen(false);
    // Weiterleitung zum Angebots-Konfigurator
    const target = document.getElementById('preis');
    if (target) {
      const top = target.getBoundingClientRect().top + window.pageYOffset - 20;
      window.scrollTo({ top, behavior: 'smooth' });
    } else {
      window.location.hash = '#preis';
    }
  };

  const calc = useMemo(() => {
    // Schaden = unabhängig von Sicherheitsmaßnahmen (Worst-Case bei Vorfall)
    const downtime = revenue / 250 * 17; // Umsatzausfall: Tagesumsatz × 17
    const productivity = 240 * employees * 17; // Lohnkosten: 240€/MA/Tag × 17
    const ransom = revenue * 0.05; // Lösegeld: 5 % Umsatz
    const forensics = 5000 + 500 * employees; // IT-Forensik: 5.000€ + 500€/MA
    const gdpr = revenue / 360 * 4; // DSGVO: 4 Tagessätze
    const total = downtime + productivity + ransom + forensics + gdpr;

    // Risiko-Score — unabhängig vom Schaden, nur Eintrittswahrscheinlichkeit
    const riskScore = Math.min(100, Math.round(
      (mfa ? 0 : 30) + (backup ? 0 : 35) + (patch ? 0 : 25) + 10
    ));
    const level = riskScore >= 60 ? 'KRITISCH' : riskScore >= 30 ? 'ERHÖHT' : 'KONTROLLIERT';
    const levelClass = riskScore >= 60 ? 'high' : riskScore >= 30 ? 'med' : 'low';
    const fillColor = riskScore >= 60 ? '#ff4d4f' : riskScore >= 30 ? '#FFB703' : '#4ade80';

    return { downtime, productivity, ransom, forensics, gdpr, total, riskScore, level, levelClass, fillColor };
  }, [revenue, employees, mfa, backup, patch]);

  return (
    <div className="calc-shell">
      <div className="calc-grid">
        <div className="calc-inputs">
          <div className="calc-tag">
            <Icon.AlertTriangle size={14} /> Phase 1 — Risiko-Check
          </div>
          <h3 className="calc-h3">
            Was kostet Sie ein 17-tägiger Ransomware-Ausfall?
            <InfoTip text={<>Die angenommene Schadensdauer von 17 Tagen ist eine konservative Planungsgröße, die sich an aktuellen Ransomware-Recovery-Berichten orientiert (u.&nbsp;a. <a href="https://www.sophos.com/en-us/content/state-of-ransomware" target="_blank" rel="noopener" style={{color:'var(--color-gold)'}}>Sophos State of Ransomware 2025</a>). Laut Sophos sind rund die Hälfte der KMU nach einer Woche wiederhergestellt; bei stark betroffenen Fällen dauert die vollständige Wiederherstellung mehrere Wochen. 17 Tage dient hier als realistische Worst-Case-Planungsgröße.</>} />
          </h3>

          <div className="input-group">
            <label className="input-label">
              Jahresumsatz
              <InfoTip text="Ihr geschätzter Jahresumsatz. Daraus berechnen wir Ihren Tagesumsatz (Umsatz ÷ 250 Arbeitstage) als Basis für den Umsatzausfall." />
            </label>
            <div className="slider-wrap">
              <input type="range" className="range-input" min="500000" max="50000000" step="100000"
              value={revenue} onChange={(e) => setRevenue(+e.target.value)} />
              <div className="range-value">{fmtEUR(revenue)}</div>
            </div>
          </div>

          <div className="input-group">
            <label className="input-label">
              Mitarbeiter
              <InfoTip text="Anzahl Ihrer Mitarbeiter. Wir rechnen pauschal mit 240 € durchschnittlichen Lohnkosten (inkl. AG-Anteil) pro Mitarbeiter und Arbeitstag — entspricht etwa einem Jahresgehalt von 60.000 € brutto bei 250 Arbeitstagen. In der Ausfallzeit bleiben diese Kosten ungenutzt." />
            </label>
            <div className="slider-wrap">
              <input type="range" className="range-input" min="3" max="200" step="1"
              value={employees} onChange={(e) => setEmployees(+e.target.value)} />
              <div className="range-value">{employees}</div>
            </div>
          </div>

          <div style={{ height: 8 }} />

          <div className="input-group">
            <label className="input-label">
              Multi-Faktor-Authentifizierung (MFA)
              <InfoTip text="Beeinflusst nur den Risiko-Score (Eintrittswahrscheinlichkeit), nicht die Höhe des Schadens. MFA reduziert das Risiko eines erfolgreichen Angriffs erheblich." />
            </label>
            <YNToggle value={mfa} onChange={setMfa} />
          </div>

          <div className="input-group">
            <label className="input-label">
              Immutable / Air-Gap Backups
              <InfoTip text="Beeinflusst nur den Risiko-Score. Unveränderbare Backups sind die wichtigste Verteidigung gegen Ransomware — Versicherer machen sie zur Pflicht." />
            </label>
            <YNToggle value={backup} onChange={setBackup} />
          </div>

          <div className="input-group">
            <label className="input-label">
              Patchmanagement (14-Tage-Regel)
              <InfoTip text="Beeinflusst nur den Risiko-Score. Bekannte Schwachstellen müssen innerhalb von 14 Tagen geschlossen werden — Standard-Anforderung jeder Cyber-Police." />
            </label>
            <YNToggle value={patch} onChange={setPatch} />
          </div>

          <details className="report-info report-info--in-inputs report-info--collapsible">
            <summary className="report-info-summary">
              <div className="report-info-doc">
                <div className="report-info-doc-tag">PDF · 7 Seiten</div>
                <div className="report-info-doc-title">Cyber-Report</div>
                <div className="report-info-doc-sub">Welche IT-Obliegenheiten Cyber-Versicherer typischerweise verlangen — 5 Themen auf 7 Seiten.</div>
                <div className="report-info-doc-hint">Inhaltsverzeichnis anzeigen</div>
              </div>
              <span className="report-info-chevron" aria-hidden="true">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9" /></svg>
              </span>
            </summary>
            <div className="report-info-body">
              <div className="report-info-label">Inhalt des Reports</div>
              <ul className="report-info-list">
                <li>Die unsichtbare Lücke zwischen IT&#8209;Setup und Versicherungs&shy;leistung</li>
                <li>5 typische Gründe, warum Versicherer im Schadensfall ablehnen</li>
                <li>DSGVO Artikel 32 – was „nachweisbar sicher" konkret bedeutet</li>
                <li>4&#8209;Ebenen&#8209;Modell für einen auditfähigen Sicherheits&shy;standard</li>
                <li>Selbstprüfung: 4 Fragen, die im Ernstfall entscheiden</li>
              </ul>
              <div className="report-info-foot">
                <Icon.Lock size={12} /> Kostenlos
              </div>
            </div>
          </details>
        </div>

        <div className="calc-output">
          <div className="calc-tag">
            <Icon.Gauge size={14} /> Ihr Schadens-Szenario
          </div>

          <div className="risk-total">
            <div className="label">Potenzieller Gesamtschaden</div>
            <div className="amount">{fmtEUR(calc.total)}</div>
            <div className="sublabel">
              Konservative Planungsgröße eines 17-tägigen Ransomware-Ausfalls
              <InfoTip text={<>Summe aus Umsatzausfall, ungenutzten Lohnkosten, Lösegeld, IT-Forensik und DSGVO-Bußgeldern. Die 17 Tage sind eine konservative Planungsgröße auf Basis aktueller Recovery-Reports (<a href="https://www.sophos.com/en-us/content/state-of-ransomware" target="_blank" rel="noopener" style={{color:'var(--color-gold)'}}>Sophos State of Ransomware 2025</a>). Der tatsächliche Schaden hängt von vielen Faktoren ab und kann höher oder niedriger ausfallen — die Werte sind eine Berechnungshilfe, keine Prognose oder Garantie.</>} />
            </div>
          </div>

          <div className="score-meter">
            <div className="score-meter-head">
              <span>Risiko-Score (Eintrittswahrscheinlichkeit)<InfoTip text="Wahrscheinlichkeit, dass ein Vorfall überhaupt eintritt — abhängig von Ihren Sicherheitsmaßnahmen (MFA, Backups, Patchmanagement). Beeinflusst NICHT die Höhe des Schadens, nur die Eintrittswahrscheinlichkeit." /></span>
              <span className={`lvl ${calc.levelClass}`}>{calc.level} · {calc.riskScore}/100</span>
            </div>
            <div className="score-bar">
              <div className="score-fill" style={{ width: `${calc.riskScore}%`, background: calc.fillColor }} />
            </div>
          </div>

          <div className="risk-breakdown">
            <div className="risk-row">
              <div className="desc">
                <div className="icon"><Icon.Clock size={16} /></div>
                Betriebsunterbrechung (17 Tage)
                <InfoTip text="Umsatzausfall: Jahresumsatz ÷ 250 Arbeitstage = Tagesumsatz, multipliziert mit 17 Tagen Ausfall." />
              </div>
              <div className="val">{fmtEUR(calc.downtime)}</div>
            </div>
            <div className="risk-row">
              <div className="desc">
                <div className="icon"><Icon.Users size={16} /></div>
                Ungenutzte Arbeitszeit
                <InfoTip text="Pauschale Annahme: 240 € durchschnittliche Lohnkosten inkl. AG-Anteil pro Mitarbeiter und Arbeitstag, multipliziert mit der Mitarbeiterzahl und 17 Tagen Ausfall." />
              </div>
              <div className="val">{fmtEUR(calc.productivity)}</div>
            </div>
            <div className="risk-row">
              <div className="desc">
                <div className="icon"><Icon.Money size={16} /></div>
                Lösegeldforderung
                <InfoTip text="Planungsannahme: rund 5 % des Jahresumsatzes als typische Erstforderung bei Ransomware-Angriffen auf KMU. Die tatsächliche Forderung variiert stark je nach Branche, Datenmenge und Verhandlungssituation; aktuelle Branchen-Reports (z. B. Coveware) zeigen Forderungen von wenigen Tausend bis mehreren Millionen Euro." />
              </div>
              <div className="val">{fmtEUR(calc.ransom)}</div>
            </div>
            <div className="risk-row">
              <div className="desc">
                <div className="icon"><Icon.Server size={16} /></div>
                IT-Forensik &amp; Wiederherstellung
                <InfoTip text="Planungsannahme: 5.000 € Basis-Einsatzpauschale externer IT-Forensiker zzgl. 500 € pro Endgerät für Neuinstallation und Bereinigung. Tatsächliche Kosten variieren je nach Komplexität des Angriffs und Anzahl betroffener Systeme." />
              </div>
              <div className="val">{fmtEUR(calc.forensics)}</div>
            </div>
            <div className="risk-row">
              <div className="desc">
                <div className="icon"><Icon.Document size={16} /></div>
                DSGVO-Bußgelder
                <InfoTip text="Planungsannahme nach dem Bußgeld-Modell der deutschen Datenschutzaufsichtsbehörden: Tagessatz (Jahresumsatz ÷ 360) × Faktor 4 für einen mittelschweren Verstoß durch fehlende technisch-organisatorische Maßnahmen nach Art. 32 DSGVO. Die tatsächliche Höhe eines Bußgelds hängt vom Einzelfall ab." />
              </div>
              <div className="val">{fmtEUR(calc.gdpr)}</div>
            </div>
          </div>

          <button
            type="button"
            onClick={() => setReportModalOpen(true)}
            className="btn btn-primary btn-lg"
            style={{ width: '100%' }}>
            Jetzt Cyber-Report erhalten <Icon.Arrow />
          </button>
        </div>
      </div>

      <CyberReportModal
        open={reportModalOpen}
        onClose={() => setReportModalOpen(false)}
        onSubmitted={handleReportSubmit}
        reportData={{
          jahresumsatz: fmtEUR(revenue),
          mitarbeiter: employees,
          MFA: mfa ? 'Ja' : 'Nein',
          Backup: backup ? 'Ja' : 'Nein',
          Patchmanagement: patch ? 'Ja' : 'Nein',
          riskScore: calc.riskScore + '/100 — ' + calc.level,
          potenziellerSchaden: fmtEUR(calc.total),
          'davon Umsatzausfall': fmtEUR(calc.downtime),
          'davon Produktivitätsverlust': fmtEUR(calc.productivity),
          'davon Lösegeld': fmtEUR(calc.ransom),
          'davon IT-Forensik': fmtEUR(calc.forensics),
          'davon DSGVO-Bußgeld': fmtEUR(calc.gdpr)
        }} />
    </div>);

}

window.RiskCalculator = RiskCalculator;
window.fmtEUR = fmtEUR;
window.fmtEURExact = fmtEURExact;
window.fmtNum = fmtNum;
window.YNToggle = YNToggle;