/* eslint-disable */
// Cookie & privacy consent banner — GDPR + Curaçao LBP compliant.
//
// First-time visitors see a banner with three actions:
//   - Accept all
//   - Necessary only
//   - Adjust preferences (opens detail modal with toggles)
//
// Consent is stored in localStorage under cbm.consent as:
//   { necessary: true, analytics: bool, marketing: bool, ts: ISO date string }
//
// The "Cookie-instellingen" link in the footer re-opens the banner so users
// can withdraw or change consent at any time.

const CONSENT_KEY = 'cbm.consent';

function readConsent() {
  try {
    const raw = localStorage.getItem(CONSENT_KEY);
    if (!raw) return null;
    return JSON.parse(raw);
  } catch (e) { return null; }
}
function writeConsent(c) {
  try {
    localStorage.setItem(CONSENT_KEY, JSON.stringify({ ...c, ts: new Date().toISOString() }));
  } catch (e) {}
  // Same-window event so any listeners (analytics loaders etc) can react.
  window.dispatchEvent(new CustomEvent('cbm:consentchange', { detail: c }));
}

const CookieBanner = ({ setRoute }) => {
  const t = (window.useT && window.useT()) || ((k) => k);

  // Open on first visit OR when triggered by event from elsewhere.
  const [open, setOpen] = React.useState(() => readConsent() == null);
  // Show preferences view (vs the simple banner)
  const [showPrefs, setShowPrefs] = React.useState(false);
  // Toggle state inside the prefs modal
  const initial = readConsent() || { necessary: true, analytics: false, marketing: false };
  const [analytics, setAnalytics] = React.useState(!!initial.analytics);
  const [marketing, setMarketing] = React.useState(!!initial.marketing);

  // Listen for external "open preferences" requests (footer link).
  React.useEffect(() => {
    const onOpen = () => { setOpen(true); setShowPrefs(true); };
    window.addEventListener('cbm:openconsent', onOpen);
    return () => window.removeEventListener('cbm:openconsent', onOpen);
  }, []);

  const acceptAll = () => {
    writeConsent({ necessary: true, analytics: true, marketing: true });
    setOpen(false);
  };
  const necessaryOnly = () => {
    writeConsent({ necessary: true, analytics: false, marketing: false });
    setOpen(false);
  };
  const savePrefs = () => {
    writeConsent({ necessary: true, analytics, marketing });
    setOpen(false);
    setShowPrefs(false);
  };

  if (!open) return null;

  return (
    <div className="cbm-consent">
      <div className="cbm-consent__inner">
        {!showPrefs ? (
          <>
            <div className="cbm-consent__body">
              <h3>{t('consent_title')}</h3>
              <p>
                {t('consent_intro')}{' '}
                <a onClick={() => setRoute('privacy')} className="cbm-consent__link">
                  {t('consent_more_link')}
                </a>.
              </p>
            </div>
            <div className="cbm-consent__actions">
              <button className="cbm-btn cbm-btn--ghost" onClick={() => setShowPrefs(true)}>
                {t('consent_adjust')}
              </button>
              <button className="cbm-btn cbm-btn--ghost" onClick={necessaryOnly}>
                {t('consent_necessary_only')}
              </button>
              <button className="cbm-btn cbm-btn--gold" onClick={acceptAll}>
                {t('consent_accept_all')}
              </button>
            </div>
          </>
        ) : (
          <>
            <div className="cbm-consent__body">
              <h3>{t('consent_prefs_title')}</h3>
              <p>{t('consent_prefs_intro')}</p>
              <div className="cbm-consent__pref">
                <div>
                  <strong>{t('consent_pref_necessary')}</strong>
                  <p>{t('consent_pref_necessary_body')}</p>
                </div>
                <span className="cbm-consent__locked">{t('consent_pref_always_on')}</span>
              </div>
              <div className="cbm-consent__pref">
                <div>
                  <strong>{t('consent_pref_analytics')}</strong>
                  <p>{t('consent_pref_analytics_body')}</p>
                </div>
                <label className="cbm-consent__switch">
                  <input type="checkbox" checked={analytics} onChange={(e) => setAnalytics(e.target.checked)} />
                  <span></span>
                </label>
              </div>
              <div className="cbm-consent__pref">
                <div>
                  <strong>{t('consent_pref_marketing')}</strong>
                  <p>{t('consent_pref_marketing_body')}</p>
                </div>
                <label className="cbm-consent__switch">
                  <input type="checkbox" checked={marketing} onChange={(e) => setMarketing(e.target.checked)} />
                  <span></span>
                </label>
              </div>
            </div>
            <div className="cbm-consent__actions">
              <button className="cbm-btn cbm-btn--ghost" onClick={() => setShowPrefs(false)}>
                {t('back')}
              </button>
              <button className="cbm-btn cbm-btn--gold" onClick={savePrefs}>
                {t('consent_save_prefs')}
              </button>
            </div>
          </>
        )}
      </div>
    </div>
  );
};

Object.assign(window, { CookieBanner, readConsent, writeConsent });