// Modal: "Änderung vorschlagen" — Step-by-step flow

function ProposeModal({ open, onClose }) {
  const [step, setStep] = React.useState(1);
  const [kind, setKind] = React.useState('uebergabe');

  React.useEffect(() => {
    if (open) setStep(1);
  }, [open]);

  const next = () => setStep(s => Math.min(s + 1, 3));
  const prev = () => setStep(s => Math.max(s - 1, 1));

  return (
    <div className={`modal-bg ${open ? 'open' : ''}`} onClick={onClose}>
      <div className="modal wide" onClick={e => e.stopPropagation()}>
        <div className="modal-head">
          <div style={{flex: 1, minWidth: 0}}>
            <div className="modal-eyebrow">Änderung vorschlagen</div>
            <div className="modal-title">{
              step === 1 ? 'Was möchten Sie ändern?' :
              step === 2 ? 'Wann soll die Änderung gelten?' :
              'Nachricht & Versand'
            }</div>
            <div className="modal-sub">
              Vorschläge gehen an Vater. Erst nach <b>gemeinsamer Bestätigung</b> werden sie im Kalender wirksam — bis dahin bleibt der Plan unverändert.
            </div>
          </div>
          <button className="close-btn" onClick={onClose}><IcX size={14}/></button>
        </div>

        {/* Stepper */}
        <div className="stepper">
          {[
            { n: 1, lbl: 'Was?' },
            { n: 2, lbl: 'Wann & wie?' },
            { n: 3, lbl: 'Nachricht' },
          ].map((s, i) => (
            <React.Fragment key={s.n}>
              <button
                className={`step ${step === s.n ? 'on' : ''} ${step > s.n ? 'done' : ''}`}
                onClick={() => setStep(s.n)}
              >
                <span className="step-num">
                  {step > s.n ? <IcCheck size={11} stroke={2.5}/> : s.n}
                </span>
                <span className="step-lbl">{s.lbl}</span>
              </button>
              {i < 2 && <div className={`step-line ${step > s.n ? 'done' : ''}`}/>}
            </React.Fragment>
          ))}
        </div>

        <div className="modal-body">
          {step === 1 && (
            <>
              <div className="field">
                <label>Was soll geändert werden?</label>
                <div className="kind-grid">
                  {[
                    { id: 'betreuung', ic: <IcHome size={16}/>, nm: 'Betreuungstag', sub: 'Wer hat das Kind' },
                    { id: 'uebergabe', ic: <IcSwap size={16}/>, nm: 'Übergabe', sub: 'Uhrzeit oder Ort' },
                    { id: 'ferien', ic: <IcSun size={16}/>, nm: 'Ferien', sub: 'Aufteilung anpassen' },
                    { id: 'aktivitaet', ic: <IcActivity size={16}/>, nm: 'Aktivität', sub: 'Termin verschieben' },
                    { id: 'zahlung', ic: <IcEuro size={16}/>, nm: 'Zahlung', sub: 'Betrag oder Datum' },
                    { id: 'sonstiges', ic: <IcSparkle size={16}/>, nm: 'Sonstiges', sub: 'Anderer Punkt' },
                  ].map(k => (
                    <button key={k.id} className={`kind-card ${kind === k.id ? 'on' : ''}`} onClick={() => setKind(k.id)}>
                      <div className="kc-ic">{k.ic}</div>
                      <div className="kc-nm">{k.nm}</div>
                      <div className="kc-sub">{k.sub}</div>
                      {kind === k.id && <div className="kc-check"><IcCheck size={10} stroke={2.5}/></div>}
                    </button>
                  ))}
                </div>
              </div>

              <div className="grid-2">
                <div className="field">
                  <label>Kind</label>
                  <select className="select">
                    <option>Liam (8 Jahre)</option>
                    <option>Bianca (11 Jahre)</option>
                    <option>Ariana (5 Jahre)</option>
                  </select>
                </div>
                <div className="field">
                  <label>Betroffener Tag</label>
                  <input className="input" defaultValue="Sa. 16. Mai 2026" />
                </div>
              </div>
            </>
          )}

          {step === 2 && (
            <>
              <div className="diff-cards">
                <div className="arrange-card">
                  <div className="arrange-label">Bisher (gemeinsam bestätigt)</div>
                  <div className="arrange-value">Liam bei Vater</div>
                  <div className="arrange-sub">Sa. 16.05. ganztägig · Übergabe 17:00 Bürgerpark</div>
                </div>
                <div className="diff-arrow">→</div>
                <div className="arrange-card proposed">
                  <div className="arrange-label">Ihr Vorschlag</div>
                  <div className="arrange-value">Liam bei Mutter</div>
                  <div className="arrange-sub">Sa. 16.05. ab 12:00 Uhr · Tausch mit 23.05.</div>
                </div>
              </div>

              <div className="grid-2">
                <div className="field">
                  <label>Neuer Zeitraum</label>
                  <div className="input-row">
                    <input className="input" defaultValue="Sa. 16.05. · 12:00" />
                    <span style={{color:'var(--ink-400)', padding: '0 4px'}}>→</span>
                    <input className="input" defaultValue="So. 17.05. · 20:00" />
                  </div>
                </div>
                <div className="field">
                  <label>Übergabe-Ort</label>
                  <select className="select">
                    <option>Parkplatz Bürgerpark</option>
                    <option>Sporthalle Offenbach</option>
                    <option>Schule</option>
                    <option>Anderer Ort…</option>
                  </select>
                </div>
              </div>

              <div className="field">
                <label>Ausgleichs-Tag (optional)</label>
                <div className="hint" style={{marginBottom: 6}}>Wenn der getauschte Tag an einem anderen Datum ausgeglichen werden soll, geben Sie das hier an.</div>
                <div className="exchange-row">
                  <span className="ex-lbl">Tausch mit</span>
                  <input className="input" defaultValue="Sa. 23. Mai 2026" style={{flex: 1}}/>
                  <span className="ex-ok"><IcCheck size={11} stroke={2.2}/> Auto-Vorschlag</span>
                </div>
              </div>
            </>
          )}

          {step === 3 && (
            <>
              <div className="grid-2">
                <div className="field">
                  <label>Grund</label>
                  <select className="select">
                    <option>Familienfeier</option>
                    <option>Geschäftsreise</option>
                    <option>Krankheit</option>
                    <option>Urlaub / Ferien</option>
                    <option>Schultermin</option>
                    <option>Sonstiges</option>
                  </select>
                </div>
                <div className="field">
                  <label>Antwort erbeten bis</label>
                  <input className="input" defaultValue="Mi. 15. Mai 2026" />
                </div>
              </div>

              <div className="field">
                <label>Persönliche Nachricht an Vater</label>
                <textarea className="textarea" defaultValue="Hallo, am Samstag den 16. Mai ist die Geburtstagsfeier meiner Mutter. Liam würde sehr gerne dabei sein. Ich schlage einen Tausch mit dem Wochenende vom 23.05. vor. Danke dir!"></textarea>
                <span className="hint">Eine kurze, freundliche Nachricht hilft, schnell eine Einigung zu finden.</span>
              </div>

              <div className="preview-card">
                <div className="pc-head"><IcAlertCircle size={12} /> Vorschau · so sieht Vater den Vorschlag</div>
                <div className="pc-body">
                  <div className="pc-title">Mutter schlägt Änderung vor</div>
                  <div className="pc-sub">Sa. 16. Mai · Übergabe & Betreuung</div>
                  <div className="pc-diff">
                    <span className="pc-old">Liam bei Vater (Sa+So)</span>
                    <span style={{color: 'var(--ink-400)'}}>→</span>
                    <span className="pc-new">Liam bei Mutter · Tausch mit 23.05.</span>
                  </div>
                </div>
              </div>
            </>
          )}
        </div>

        <div className="modal-foot">
          <div className="who-info">
            <IcShield size={13} />
            {step === 3 ? 'Wird an Vater gesendet · nachvollziehbar dokumentiert' : `Schritt ${step} von 3`}
          </div>
          <div className="btn-row">
            <button className="btn-secondary" onClick={step === 1 ? onClose : prev}>
              {step === 1 ? 'Abbrechen' : '← Zurück'}
            </button>
            {step < 3 ? (
              <button className="cta-primary" onClick={next}>
                Weiter →
              </button>
            ) : (
              <button className="cta-primary">
                <IcSend size={13} stroke={2}/>
                Vorschlag senden
              </button>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ProposeModal });