/* global React */
// cookies.jsx — Banner de cookies + panel de configuración granular (RGPD / LSSI-CE)

const COOKIE_KEY = "pax_cookies_v1";

window.PaxCookies = {
  get() {
    try { return JSON.parse(localStorage.getItem(COOKIE_KEY) || "null"); }
    catch (e) { return null; }
  },
  set(v) {
    localStorage.setItem(COOKIE_KEY, JSON.stringify({ ...v, ts: Date.now() }));
    window.dispatchEvent(new CustomEvent("pax:cookies-changed", { detail: v }));
  },
  reset() { localStorage.removeItem(COOKIE_KEY); },
};

function CookiesBanner({ t, onOpenConfig, onAccept, onReject }) {
  return (
    <div className="cookies-banner" role="dialog" aria-label="Cookies" aria-live="polite">
      <div>
        <h4>{t.cookies.title}</h4>
        <p dangerouslySetInnerHTML={{ __html: t.cookies.body }} />
      </div>
      <div className="cookies-banner__actions">
        <button className="btn btn--ghost" onClick={onReject}>{t.cookies.reject}</button>
        <button className="btn btn--ghost" onClick={onOpenConfig}>{t.cookies.configure}</button>
        <button className="btn btn--on-dark" onClick={onAccept}>{t.cookies.accept}</button>
      </div>
    </div>
  );
}

function CookiesModal({ t, initial, onClose, onSave }) {
  const [prefs, setPrefs] = React.useState(initial || {
    necessary: true, analytics: false, marketing: false,
  });

  const toggle = (id) => () => {
    if (id === "necessary") return;
    setPrefs({ ...prefs, [id]: !prefs[id] });
  };

  return (
    <div className="cookies-modal" role="dialog" aria-modal="true" onClick={(e) => {
      if (e.target.classList.contains("cookies-modal")) onClose();
    }}>
      <div className="cookies-modal__panel">
        <h3>{t.cookies.modal_title}</h3>
        <p className="cookies-modal__lead">{t.cookies.modal_lead}</p>

        {t.cookies.groups.map((g) => (
          <div key={g.id} className={`cookies-group ${g.required ? "cookies-group--required" : ""}`}>
            <div>
              <h4>{g.h}</h4>
              {g.required && <span className="badge">{t.lang === "en" ? "Always active" : "Siempre activas"}</span>}
              <p style={{ marginTop: 8 }}>{g.p}</p>
            </div>
            <button
              type="button"
              className={`switch ${prefs[g.id] ? "is-on" : ""} ${g.required ? "is-locked" : ""}`}
              onClick={toggle(g.id)}
              aria-label={g.h}
              aria-pressed={!!prefs[g.id]}
              disabled={g.required}
            />
          </div>
        ))}

        <div className="cookies-modal__actions">
          <button className="btn btn--ghost" onClick={onClose}>
            {t.lang === "en" ? "Cancel" : "Cancelar"}
          </button>
          <button className="btn btn--ghost" onClick={() => {
            onSave({ necessary: true, analytics: false, marketing: false });
          }}>
            {t.cookies.reject}
          </button>
          <button className="btn" onClick={() => onSave(prefs)}>
            {t.cookies.save}
          </button>
        </div>
      </div>
    </div>
  );
}

function CookiesManager({ t }) {
  const [state, setState] = React.useState(() => window.PaxCookies.get());
  const [showModal, setShowModal] = React.useState(false);
  const [showBanner, setShowBanner] = React.useState(() => !window.PaxCookies.get());

  // Re-open config from any link with href="#cookies-config" or footer link
  React.useEffect(() => {
    const handler = (e) => {
      const a = e.target.closest && e.target.closest("a");
      if (a && a.getAttribute("href") === "#cookies-config") {
        e.preventDefault();
        setShowModal(true);
      }
    };
    document.addEventListener("click", handler);
    const evt = () => setShowModal(true);
    window.addEventListener("pax:open-cookies", evt);
    return () => {
      document.removeEventListener("click", handler);
      window.removeEventListener("pax:open-cookies", evt);
    };
  }, []);

  const acceptAll = () => {
    const p = { necessary: true, analytics: true, marketing: true };
    window.PaxCookies.set(p);
    setState(p); setShowBanner(false); setShowModal(false);
  };
  const rejectAll = () => {
    const p = { necessary: true, analytics: false, marketing: false };
    window.PaxCookies.set(p);
    setState(p); setShowBanner(false); setShowModal(false);
  };
  const save = (p) => {
    window.PaxCookies.set(p);
    setState(p); setShowBanner(false); setShowModal(false);
  };

  return (
    <React.Fragment>
      {showBanner && !showModal && (
        <CookiesBanner t={t} onAccept={acceptAll} onReject={rejectAll} onOpenConfig={() => setShowModal(true)} />
      )}
      {showModal && (
        <CookiesModal t={t} initial={state} onClose={() => setShowModal(false)} onSave={save} />
      )}
    </React.Fragment>
  );
}

Object.assign(window, { CookiesManager, CookiesBanner, CookiesModal });