/* ============================================================================
 * CONSENT GATE — wrapt Drittanbieter-Inhalte (TidyCal, Google Reviews, …)
 * ----------------------------------------------------------------------------
 * Solange die nötige Cookie-Kategorie nicht zugestimmt ist, wird statt des
 * eingebetteten Inhalts ein Platzhalter angezeigt mit:
 *   - Name & Zweck des Anbieters
 *   - Hinweis auf US-Drittland-Transfer (wenn relevant)
 *   - "Akzeptieren & laden"-Button (setzt nur diese eine Kategorie)
 *   - "Einstellungen ändern"-Button (öffnet Cookie-Modal)
 *
 * Sobald die Kategorie zugestimmt ist (auch live über Cookie-Modal), wird
 * automatisch das eingebettete Child-Element gerendert.
 *
 * Usage:
 *   <ConsentGate
 *     category="functional"
 *     name="TidyCal"
 *     description="Online-Terminbuchung über AppSumo Originals, LLC (USA)."
 *     icon={<Icon.Calendar/>}
 *     fallbackHref="https://tidycal.com/..."
 *     fallbackLabel="Direkt bei TidyCal buchen">
 *     <TidyCalEmbed/>
 *   </ConsentGate>
 * ========================================================================= */

const { useState: useStateCG, useEffect: useEffectCG } = React;

function ConsentGate({ category, name, description, dataNote, icon, fallbackHref, fallbackLabel, children }) {
  // Initial check — wenn die Seite noch lädt, ist window.cookieConsent ggf. noch nicht da
  const [granted, setGranted] = useStateCG(() => {
    if (typeof window !== 'undefined' && window.cookieConsent) {
      return window.cookieConsent.get(category);
    }
    // Fallback: localStorage direkt lesen
    try {
      const raw = localStorage.getItem('mt_cookie_consent');
      if (raw) {
        const parsed = JSON.parse(raw);
        return !!(parsed.categories && parsed.categories[category]);
      }
    } catch (e) {}
    return false;
  });

  useEffectCG(() => {
    // Re-check bei jedem Cookie-Update
    const handler = (e) => {
      const cats = e.detail || {};
      setGranted(!!cats[category]);
    };
    window.addEventListener('cookie-consent-updated', handler);
    // Polling für den Fall dass das Cookie-Banner später lädt als wir
    const interval = setInterval(() => {
      if (window.cookieConsent) {
        setGranted(window.cookieConsent.get(category));
        clearInterval(interval);
      }
    }, 200);
    return () => {
      window.removeEventListener('cookie-consent-updated', handler);
      clearInterval(interval);
    };
  }, [category]);

  if (granted) {
    return children;
  }

  const acceptOne = () => {
    // Bestehende Categories lesen, nur die eine ändern und speichern
    let cats = { necessary: true };
    try {
      const raw = localStorage.getItem('mt_cookie_consent');
      if (raw) cats = JSON.parse(raw).categories || cats;
    } catch (e) {}
    cats[category] = true;
    try {
      localStorage.setItem('mt_cookie_consent', JSON.stringify({
        version: 1, timestamp: Date.now(), categories: cats
      }));
    } catch (e) {}
    window.dispatchEvent(new CustomEvent('cookie-consent-updated', { detail: cats }));
    setGranted(true);
  };

  const openSettings = () => {
    if (window.cookieConsent && window.cookieConsent.openSettings) {
      window.cookieConsent.openSettings();
    }
  };

  return (
    <div className="consent-gate">
      <div className="consent-gate-inner">
        <div className="consent-gate-icon">
          {icon || (
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <rect x="3" y="11" width="18" height="11" rx="2"/>
              <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
            </svg>
          )}
        </div>
        <h3 className="consent-gate-title">{name} ist deaktiviert</h3>
        <p className="consent-gate-desc">{description}</p>
        {dataNote && <p className="consent-gate-note">{dataNote}</p>}
        <div className="consent-gate-actions">
          <button type="button" className="btn btn-primary" onClick={acceptOne}>
            {`${name} akzeptieren & laden`}
          </button>
          <button type="button" className="btn btn-ghost" onClick={openSettings}>
            Cookie-Einstellungen
          </button>
        </div>
        {fallbackHref && (
          <a href={fallbackHref} target="_blank" rel="noopener" className="consent-gate-fallback">
            {fallbackLabel || `Stattdessen direkt zur Website von ${name}`} →
          </a>
        )}
        <p className="consent-gate-legal">
          Mehr in unserer <a href="datenschutz.html" target="_blank" rel="noopener">Datenschutzerklärung</a>.
        </p>
      </div>
    </div>
  );
}

window.ConsentGate = ConsentGate;