// Am Waldrain, Cookie-Banner (ersetzt die CookieBar aus dem Bundle, Stand 02.11.2026).
// Schmale Leiste unten in Warmweiss, kein Blocker. "Nur notwendige" und "Alle akzeptieren" sind
// gleich gewichtet, damit Ablehnen so einfach ist wie Zustimmen. "Einstellungen" klappt die
// Kategorien auf. Die Wahl verwaltet ui_kits/website/consent.js (window.M57Consent); der Footer-Link
// "Cookie-Einstellungen" oeffnet den Banner jederzeit wieder (Widerruf).
// onHoehe meldet die aktuelle Hoehe, damit index.html Platz unter dem Footer und der Mobil-Leiste laesst.
(function () {
  const C = () => window.M57Consent;

  function Schalter({ an, onChange, gesperrt, label }) {
    return (
      <button type="button" role="switch" aria-checked={an} aria-label={label} disabled={gesperrt}
        onClick={() => !gesperrt && onChange(!an)}
        style={{
          flex: 'none', width: '2.5rem', height: '1.375rem', padding: 0, position: 'relative',
          border: '1px solid ' + (an ? 'var(--waldgruen)' : 'var(--sandstein)'),
          background: an ? 'var(--waldgruen)' : 'transparent',
          cursor: gesperrt ? 'default' : 'pointer', opacity: gesperrt ? 0.55 : 1,
          transition: 'background 200ms, border-color 200ms',
        }}>
        <span style={{
          position: 'absolute', top: '2px', left: an ? 'calc(100% - 1rem - 2px)' : '2px',
          width: '1rem', height: 'calc(100% - 4px)',
          background: an ? 'var(--warmweiss)' : 'var(--umbra-60)', transition: 'left 200ms',
        }}></span>
      </button>
    );
  }

  function CookieBanner({ onHoehe }) {
    const [offen, setOffen] = React.useState(() => !!(C() && C().offen()));
    const [details, setDetails] = React.useState(false);
    const start = (C() && C().stand()) || { statistik: false, marketing: false };
    const [wahl, setWahl] = React.useState({ statistik: start.statistik, marketing: start.marketing });
    const ref = React.useRef(null);

    React.useEffect(() => {
      const oeffnen = () => {
        const s = (C() && C().stand()) || { statistik: false, marketing: false };
        setWahl({ statistik: s.statistik, marketing: s.marketing });
        setDetails(true);
        setOffen(true);
      };
      window.addEventListener('m57-consent-oeffnen', oeffnen);
      return () => window.removeEventListener('m57-consent-oeffnen', oeffnen);
    }, []);

    React.useEffect(() => {
      if (!onHoehe) return;
      if (!offen || !ref.current) { onHoehe(0); return; }
      const melden = () => onHoehe(ref.current ? ref.current.offsetHeight : 0);
      melden();
      const ro = new ResizeObserver(melden);
      ro.observe(ref.current);
      return () => ro.disconnect();
    }, [offen, details, onHoehe]);

    if (!offen || !C()) return null;
    const fertig = (fn) => { fn(); setOffen(false); setDetails(false); };
    const dienste = C().dienste();
    const mit = (l) => l.length > 1 ? l.slice(0, -1).join(', ') + ' und ' + l[l.length - 1] : l[0];

    const text = { margin: 0, fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', color: 'var(--umbra)', lineHeight: 1.6 };
    const klein = { margin: 0, fontFamily: 'var(--font-text)', fontSize: 'var(--text-micro)', color: 'var(--umbra-60)', lineHeight: 1.6 };
    const knopf = {
      fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', fontWeight: 'var(--weight-medium)',
      color: 'var(--umbra)', background: 'transparent', border: '1px solid var(--umbra)',
      padding: '0.6rem 1.1rem', cursor: 'pointer', whiteSpace: 'nowrap',
    };
    const link = { background: 'none', border: 'none', padding: 0, cursor: 'pointer', fontFamily: 'var(--font-text)', fontSize: 'var(--text-small)', color: 'var(--umbra-60)', textDecoration: 'underline', textUnderlineOffset: '0.2em' };

    const zeilen = [
      { key: 'notwendig', titel: 'Notwendig', text: 'Letzter Stand des Wohnungsfinders und Ihre Cookie-Wahl, nur in Ihrem Browser gespeichert. Immer aktiv.', an: true, gesperrt: true },
      { key: 'statistik', titel: 'Statistik', text: dienste.statistik.length ? 'Auswertung der Seitennutzung mit ' + mit(dienste.statistik) + '.' : 'Auswertung der Seitennutzung. Derzeit ist kein Dienst im Einsatz.', an: wahl.statistik },
      { key: 'marketing', titel: 'Marketing', text: dienste.marketing.length ? 'Messung und Ausspielung unserer Anzeigen mit ' + mit(dienste.marketing) + '. Dabei werden Daten an den Anbieter übermittelt.' : 'Messung und Ausspielung von Anzeigen. Derzeit ist kein Dienst im Einsatz.', an: wahl.marketing },
    ];

    return (
      <div ref={ref} role="region" aria-label="Cookie-Einstellungen" className="m57-consent"
        style={{ position: 'fixed', left: 0, right: 0, bottom: 0, zIndex: 80, background: 'var(--warmweiss)', borderTop: '1px solid var(--sandstein)', maxHeight: '88vh', overflowY: 'auto' }}>
        <div style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: 'var(--space-4) var(--page-inset-lg)' }}>
          {details && (
            <div className="m57-consent-details" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-6)', padding: 'var(--space-2) 0 var(--space-5)', borderBottom: '1px solid var(--sandstein-40)', marginBottom: 'var(--space-4)' }}>
              {zeilen.map((z) => (
                <div key={z.key} style={{ display: 'flex', gap: 'var(--space-4)', alignItems: 'flex-start' }}>
                  <Schalter an={z.an} gesperrt={z.gesperrt} label={z.titel}
                    onChange={(v) => setWahl((w) => Object.assign({}, w, { [z.key]: v }))} />
                  <div>
                    <p style={{ ...text, fontWeight: 'var(--weight-medium)' }}>{z.titel}</p>
                    <p style={klein}>{z.text}</p>
                  </div>
                </div>
              ))}
            </div>
          )}
          <div className="m57-consent-row" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--space-6)' }}>
            <p style={text}>
              Wir speichern nur, was die Website braucht. Statistik und Marketing nutzen wir nur mit Ihrer Zustimmung, die Sie jederzeit widerrufen können.{' '}
              <a href="/datenschutz/" style={{ color: 'var(--umbra)', textDecoration: 'underline', textUnderlineOffset: '0.2em' }}>Datenschutzerklärung</a>
            </p>
            <div className="m57-consent-actions" style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-4)', flex: 'none' }}>
              {details
                ? <button type="button" className="m57-consent-link" style={link} onClick={() => fertig(() => C().setzen(wahl))}>Auswahl speichern</button>
                : <button type="button" className="m57-consent-link" style={link} onClick={() => setDetails(true)}>Einstellungen</button>}
              <button type="button" className="m57-consent-knopf" style={knopf} onClick={() => fertig(() => C().notwendig())}>Nur notwendige</button>
              <button type="button" className="m57-consent-knopf" style={knopf} onClick={() => fertig(() => C().alle())}>Alle akzeptieren</button>
            </div>
          </div>
        </div>
        <style>{`
          .m57-consent button:focus-visible { outline: 2px solid var(--waldgruen); outline-offset: 2px; }
          @media (max-width: 900px) { .m57-consent-details { grid-template-columns: 1fr !important; gap: var(--space-4) !important; } }
          @media (max-width: 760px) {
            .m57-consent-row { flex-direction: column; align-items: stretch !important; gap: var(--space-4) !important; }
            .m57-consent-actions { flex-wrap: wrap; }
            .m57-consent-knopf { flex: 1 1 0; padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
            .m57-consent-link { order: 3; flex-basis: 100%; text-align: left; }
          }
        `}</style>
      </div>
    );
  }

  window.M57CookieBanner = CookieBanner;
})();