// Startseite mit drei Wegen + leichte Formulare für Änderung / Nachricht
(function () {
const { useState, useEffect, useRef } = React;
const CHANGE_KEY = "x-sec-3cx-change-v1";
const SUPPORT_PHONE = "02104 493770";
const SUPPORT_PHONE_RAW = "+492104493770";

const TOPICS = [
 { id: "nutzer", label: "Nutzer anlegen / löschen", hint: "Neue Mitarbeitende, Austritte, Namensänderungen", ph: "z. B. Neu: Max Muster, m.muster@firma.de, Durchwahl 23\nEntfernen: Anna Alt (Durchwahl 14)" },
 { id: "zeiten", label: "Öffnungszeiten", hint: "Wann Sie telefonisch erreichbar sind", ph: "z. B. Ab 01.11. freitags nur bis 13:00 Uhr" },
 { id: "feiertage", label: "Feiertage / Urlaub", hint: "Betriebsurlaub, Brückentage, Sonderzeiten", ph: "z. B. Betriebsurlaub 23.12. bis 02.01., Ansage: „Ab 3. Januar sind wir wieder für Sie da.“" },
 { id: "ansagen", label: "Ansagen", hint: "Begrüßung, Warteansage, Abwesenheit", ph: "z. B. Neuer Begrüßungstext: „Willkommen bei …“, oder: Wir schicken Ihnen eine Audiodatei." },
 { id: "ivr", label: "Sprachmenü", hint: "„Drücken Sie 1 für …“", ph: "z. B. Neue Taste 3 für die Buchhaltung" },
 { id: "weiterleitung", label: "Weiterleitungen", hint: "Wohin Anrufe gehen, wenn niemand rangeht", ph: "z. B. Durchwahl 20 nach 20 Sekunden aufs Handy 0171 1234567 weiterleiten" },
 { id: "warteschlange", label: "Warteschlangen", hint: "Anrufer warten, bis jemand frei ist", ph: "z. B. Support: höchstens 2 Minuten warten, danach Voicemail" },
 { id: "gruppen", label: "Abteilungen / Gruppen", hint: "Mehrere Personen klingeln gemeinsam", ph: "z. B. Neue Gruppe „Vertrieb“ mit Max, Lisa und Tom" },
 { id: "rufnummern", label: "Rufnummern", hint: "Neue Nummern, Mitnahme, Anzeige nach außen", ph: "z. B. Neue Nummer 0211 1234-50 soll beim Vertrieb klingeln" },
 { id: "telefone", label: "Tischtelefone", hint: "Neue Geräte, Austausch, Tastenbelegung", ph: "z. B. Zwei neue Yealink T54W für Max und Lisa" },
 { id: "voicemail", label: "Voicemail", hint: "Mailbox, Zustellung per E-Mail", ph: "z. B. Voicemails von Lisa zusätzlich an buero@firma.de" }
];

function useStore(baseData) {
 const [d, setD] = useState(() => {
 let saved = {};
 try { saved = JSON.parse(localStorage.getItem(CHANGE_KEY)) || {}; } catch (e) {}
 const b = baseData || {};
 return { topics: [], text: {}, when: "asap", date: "", msg: "", rueckruf: "ja", zeit: "Egal", firma: b.firma || "", name: b.ansprechpartner || "", kontakt: b.kontakt_email || "", ...saved };
 });
 useEffect(() => { try { localStorage.setItem(CHANGE_KEY, JSON.stringify(d)); } catch (e) {} }, [d]);
 const set = (k, v) => setD(s => ({ ...s, [k]: v }));
 return [d, set];
}

const fmtDate = (iso) => { if (!iso) return ""; const [y, m, dd] = iso.split("-"); return `${dd}.${m}.${y}`; };

function contactErrors(d) {
 const e = {};
 if (!d.firma.trim()) e.firma = "Pflichtfeld";
 if (!d.name.trim()) e.name = "Pflichtfeld";
 if (!d.kontakt.trim()) e.kontakt = "Pflichtfeld";
 else if (!window.isValidEmailOrPhone(d.kontakt)) e.kontakt = "Bitte eine gültige E-Mail-Adresse oder Telefonnummer eintragen.";
 return e;
}

// Versand an X-sec mit Sperre gegen Doppelklick; liefert true bei Erfolg
function useSender() {
 const [sending, setSending] = useState(false);
 const [error, setError] = useState("");
 const busy = useRef(false);
 const sendNow = async (payload) => {
 if (busy.current) return false;
 busy.current = true;
 setSending(true);
 setError("");
 const res = await window.sendToXsec(payload);
 busy.current = false;
 setSending(false);
 if (!res.ok) setError(res.error);
 else { try { localStorage.removeItem(CHANGE_KEY); } catch (e) {} } // nach erfolgreichem Versand nur diesen Entwurf löschen, der Fragebogen bleibt erhalten
 return res.ok;
 };
 return { sending, error, sendNow };
}

function TopBar({ label, onHome }) {
 return (
 <header className="story-top">
 <div className="story-top-inner">
 <div className="story-top-l">
 <div className="story-top-title">3CX-Telefonanlage</div>
 <div className="story-top-mode">{label}</div>
 </div>
 <div></div>
 <div className="story-top-r">
 {onHome && <button className="story-top-link" onClick={onHome}><XsecIcon name="arrow-left" /> Startseite</button>}
 </div>
 </div>
 </header>
 );
}

function TextField({ id, label, value, onChange, error, required, placeholder, hint, multiline, rows }) {
 return (
 <div className={`field ${error ? "has-error" : ""}`}>
 <label htmlFor={id} className="field-label">
 <span className="field-label-main">{label}{required && <span className="req-star">*</span>}</span>
 {hint && <span className="field-hint">{hint}</span>}
 {error && <span className="field-error">{error}</span>}
 </label>
 {multiline
 ? <textarea id={id} className="input textarea" rows={rows || 3} value={value} placeholder={placeholder || ""} onChange={(e) => onChange(e.target.value)}></textarea>
 : <input id={id} className="input" value={value} placeholder={placeholder || ""} onChange={(e) => onChange(e.target.value)} />}
 </div>
 );
}

function RadioCards({ name, options, value, onChange }) {
 return (
 <div className="radio-group">
 {options.map(([v, l]) => (
 <label key={v} className={`radio-card ${value === v ? "is-active" : ""}`}>
 <input type="radio" name={name} checked={value === v} onChange={() => onChange(v)} />
 <span className="radio-dot" aria-hidden="true"></span>
 <span className="radio-text">{l}</span>
 </label>
 ))}
 </div>
 );
}

function ContactBlock({ d, set, errors }) {
 const [touched, setTouched] = useState(false);
 const fmtErr = touched && d.kontakt.trim() && !window.isValidEmailOrPhone(d.kontakt) ? "Bitte eine gültige E-Mail-Adresse oder Telefonnummer eintragen." : null;
 return (
 <div className="start-contact">
 <TextField id="sc_firma" label="Firma" required value={d.firma} onChange={(v) => set("firma", v)} error={errors.firma} placeholder="z. B. Mustermann GmbH" />
 <TextField id="sc_name" label="Ihr Name" required value={d.name} onChange={(v) => set("name", v)} error={errors.name} placeholder="z. B. Anna Mustermann" />
 <div className={`field span ${errors.kontakt || fmtErr ? "has-error" : ""}`}>
 <label htmlFor="sc_kontakt" className="field-label">
 <span className="field-label-main">Telefon / E-Mail<span className="req-star">*</span></span>
 <span className="field-hint">Beides möglich, mit „ / “ trennen.</span>
 {(errors.kontakt || fmtErr) && <span className="field-error">{errors.kontakt || fmtErr}</span>}
 </label>
 <input id="sc_kontakt" className="input" value={d.kontakt} placeholder="a.mustermann@firma.de / 0211 12345-0" onChange={(e) => set("kontakt", e.target.value)} onBlur={() => setTouched(true)} />
 </div>
 </div>
 );
}

function SentScreen({ label, onHome }) {
 return (
 <div className="story-shell">
 <TopBar label={label} onHome={onHome} />
 <main className="story-main">
 <div className="story-summary-card">
 <div className="start-sent-icon" aria-hidden="true"><XsecIcon name="circle-check" size={40} /></div>
 <h2>Vielen Dank, Ihre {label} ist bei uns angekommen.</h2>
 <p>Wir melden uns schnellstmöglich bei Ihnen.</p>
 </div>
 <div className="start-sent-actions">
 <button className="story-btn story-btn-prim" onClick={onHome}>Zur Startseite</button>
 </div>
 </main>
 </div>
 );
}

function StartScreen({ hasDraft, onNew, onProfi, onChange, onMessage }) {
 return (
 <div className="story-shell">
 <TopBar label="Start" />
 <main className="start-main">
 <h1 className="start-title">Was möchten Sie an Ihrer Telefonanlage tun?</h1>
 <p className="story-sub">Technikwissen brauchen Sie dafür nicht. Wählen Sie, worum es geht. Die Einrichtung übernehmen wir.</p>
 <div className="start-paths">
 <article className="start-card">
 <h2>Neue Telefonanlage einrichten</h2>
 <p>Wir fragen Schritt für Schritt ab, wie Ihre Anlage funktionieren soll: wer telefoniert, wann Sie erreichbar sind und was Anrufer hören.</p>
 <div className="start-meta">ca. 10 bis 15 Minuten</div>
 <div className="start-actions">
 <button className="btn btn-primary" onClick={onNew}>{hasDraft ? "Fortsetzen" : "Geführt starten"} <XsecIcon name="arrow-right" /></button>
 <button className="start-link" onClick={onProfi}>Ausführliches Formular</button>
 </div>
 </article>
 <article className="start-card">
 <h2>Etwas an meiner Anlage ändern</h2>
 <p>Ihre 3CX läuft bereits? Kreuzen Sie an, was sich ändern soll. Alles andere bleibt so, wie es eingerichtet ist.</p>
 <div className="start-meta">ca. 2 bis 5 Minuten</div>
 <div className="start-actions">
 <button className="btn btn-primary" onClick={onChange}>Änderung melden <XsecIcon name="arrow-right" /></button>
 </div>
 </article>
 <article className="start-card">
 <h2>Kurze Nachricht oder Rückruf</h2>
 <p>Sie wissen nicht genau, wo Sie anfangen sollen? Schreiben Sie uns ein paar Worte. Wir melden uns bei Ihnen.</p>
 <div className="start-meta">ca. 1 Minute</div>
 <div className="start-actions">
 <button className="btn btn-primary" onClick={onMessage}>Nachricht schreiben <XsecIcon name="arrow-right" /></button>
 </div>
 </article>
 </div>
 <div className="start-foot">
 <span>Lieber direkt sprechen? <a href={"tel:" + SUPPORT_PHONE_RAW}>{SUPPORT_PHONE}</a></span>
 <span>Ihre Angaben bleiben bis zum Absenden nur in diesem Browser gespeichert.</span>
 </div>
 </main>
 </div>
 );
}

function ChangeRequest({ baseData, onHome }) {
 const [d, set] = useStore(baseData);
 const [tried, setTried] = useState(false);
 const [sent, setSent] = useState(false);
 const { sending, error: sendError, sendNow } = useSender();
 const toggle = (id) => set("topics", d.topics.includes(id) ? d.topics.filter(t => t !== id) : [...d.topics, id]);
 const setText = (id, v) => set("text", { ...d.text, [id]: v });
 const errors = tried ? contactErrors(d) : {};
 const topicErr = tried && d.topics.length === 0;
 const selected = TOPICS.filter(t => d.topics.includes(t.id));

 const body = () => {
 const L = ["3CX: Änderungswunsch", "====================", "", "Firma: " + d.firma, "Ansprechpartner: " + d.name, "Kontakt: " + d.kontakt,
 "Gültig ab: " + (d.when === "date" && d.date ? fmtDate(d.date) : "So schnell wie möglich"), ""];
 selected.forEach(t => { L.push("Bereich: " + t.label); L.push((d.text[t.id] || "").trim() || "(keine Details, bitte Rückruf)"); L.push(""); });
 return L.join("\n");
 };
 const send = async () => {
 setTried(true);
 if (d.topics.length === 0 || Object.keys(contactErrors(d)).length) return;
 if (!(await sendNow({ type: "aenderung", firma: d.firma, name: d.name, kontakt: d.kontakt, text: body() }))) return;
 setSent(true);
 window.scrollTo(0, 0);
 };
 if (sent) return <SentScreen label="Änderung" onHome={onHome} />;

 return (
 <div className="story-shell">
 <TopBar label="Änderung" onHome={onHome} />
 <main className="story-main">
 <h1 className="story-q">Was soll sich ändern?</h1>
 <p className="story-sub">Wählen Sie alle Bereiche aus, die sich ändern sollen. Was Sie nicht auswählen, bleibt wie bisher eingerichtet.</p>

 <h3 className="start-step">Bereiche</h3>
 <div className="start-topics">
 {TOPICS.map(t => (
 <button key={t.id} type="button" className={`start-topic ${d.topics.includes(t.id) ? "is-on" : ""}`} onClick={() => toggle(t.id)} aria-pressed={d.topics.includes(t.id)}>
 <span className="start-check" aria-hidden="true">{d.topics.includes(t.id) && <XsecIcon name="check" size={12} />}</span>
 <span className="start-topic-label">{t.label}</span>
 <span className="start-topic-hint">{t.hint}</span>
 </button>
 ))}
 </div>
 {topicErr && <div className="start-error">Bitte mindestens einen Bereich auswählen.</div>}

 <h3 className="start-step">Was genau?</h3>
 {selected.length === 0 ? (
 <div className="start-empty">Sobald Sie oben einen Bereich auswählen, können Sie hier Ihren Wunsch beschreiben.</div>
 ) : (
 <div className="start-details">
 <p className="start-note">Stichworte reichen. Wenn Sie unsicher sind, lassen Sie das Feld leer. Wir rufen Sie an.</p>
 {selected.map(t => (
 <TextField key={t.id} id={"sc_t_" + t.id} label={t.label} multiline value={d.text[t.id] || ""} onChange={(v) => setText(t.id, v)} placeholder={t.ph} />
 ))}
 </div>
 )}

 <h3 className="start-step">Ab wann?</h3>
 <RadioCards name="sc_when" value={d.when} onChange={(v) => set("when", v)} options={[["asap", "So schnell wie möglich"], ["date", "Ab einem bestimmten Datum"]]} />
 {d.when === "date" && (
 <div className="start-date"><input type="date" className="input" value={d.date} onChange={(e) => set("date", e.target.value)} /></div>
 )}

 <h3 className="start-step">Ihre Kontaktdaten</h3>
 <ContactBlock d={d} set={set} errors={errors} />

 {sendError && <div className="start-error">{sendError}</div>}
 <div className="story-acts">
 <button className="story-btn-ghost" onClick={onHome}><XsecIcon name="arrow-left" /> Zur Startseite</button>
 <div className="story-acts-r">
 <button className="story-btn story-btn-prim" onClick={send} disabled={sending}>{sending ? "Wird gesendet …" : <>Änderung senden <XsecIcon name="arrow-right" /></>}</button>
 </div>
 </div>
 </main>
 </div>
 );
}

function MessageForm({ baseData, onHome }) {
 const [d, set] = useStore(baseData);
 const [tried, setTried] = useState(false);
 const [sent, setSent] = useState(false);
 const { sending, error: sendError, sendNow } = useSender();
 const errs = () => { const e = contactErrors(d); if (!d.msg.trim()) e.msg = "Pflichtfeld"; return e; };
 const errors = tried ? errs() : {};
 const body = () => ["3CX: Nachricht", "==============", "", "Firma: " + d.firma, "Name: " + d.name, "Kontakt: " + d.kontakt,
 "Rückruf: " + (d.rueckruf === "ja" ? "Ja, bitte (" + d.zeit + ")" : "Nein, Antwort per E-Mail"), "", "Anliegen:", d.msg.trim()].join("\n");
 const send = async () => {
 setTried(true);
 if (Object.keys(errs()).length) return;
 if (!(await sendNow({ type: "nachricht", firma: d.firma, name: d.name, kontakt: d.kontakt, text: body() }))) return;
 setSent(true);
 window.scrollTo(0, 0);
 };
 if (sent) return <SentScreen label="Nachricht" onHome={onHome} />;

 return (
 <div className="story-shell">
 <TopBar label="Nachricht" onHome={onHome} />
 <main className="story-main">
 <h1 className="story-q">Worum geht es?</h1>
 <p className="story-sub">Beschreiben Sie Ihr Anliegen in eigenen Worten. Fachbegriffe sind nicht nötig.</p>
 <div className="start-details">
 <TextField id="sc_msg" label="Ihr Anliegen" required multiline rows={5} value={d.msg} onChange={(v) => set("msg", v)} error={errors.msg} placeholder="z. B. Unsere Kunden landen ständig auf der Mailbox, obwohl jemand im Büro ist." />
 <div className="field">
 <span className="field-label-main">Möchten Sie zurückgerufen werden?</span>
 <RadioCards name="sc_rr" value={d.rueckruf} onChange={(v) => set("rueckruf", v)} options={[["ja", "Ja, bitte zurückrufen"], ["nein", "Nein, Antwort per E-Mail reicht"]]} />
 </div>
 {d.rueckruf === "ja" && (
 <div className="field">
 <span className="field-label-main">Wann passt es Ihnen am besten?</span>
 <RadioCards name="sc_zeit" value={d.zeit} onChange={(v) => set("zeit", v)} options={[["Vormittags", "Vormittags"], ["Nachmittags", "Nachmittags"], ["Egal", "Egal"]]} />
 </div>
 )}
 </div>
 <h3 className="start-step">Ihre Kontaktdaten</h3>
 <ContactBlock d={d} set={set} errors={errors} />
 {sendError && <div className="start-error">{sendError}</div>}
 <div className="story-acts">
 <button className="story-btn-ghost" onClick={onHome}><XsecIcon name="arrow-left" /> Zur Startseite</button>
 <div className="story-acts-r">
 <button className="story-btn story-btn-prim" onClick={send} disabled={sending}>{sending ? "Wird gesendet …" : <>Nachricht senden <XsecIcon name="arrow-right" /></>}</button>
 </div>
 </div>
 </main>
 </div>
 );
}

window.StartMode = { StartScreen, ChangeRequest, MessageForm, TOPICS };
})();