/* ==========================================================================
   CONSENT: Cookie-/Speicher-Einwilligung und Altersbestaetigung.

   Zwei getrennte Dinge, die nur die Darstellung teilen:

   1. Die Einwilligung entscheidet, ob die Analytics laufen duerfen. Der
      Session-Cookie ist technisch notwendig und steht nicht zur Wahl, die
      Analytics schon. Ablehnen ist genauso einfach wie Zustimmen, sonst ist
      die Einwilligung keine.

   2. Die Altersbestaetigung ist kein Datenschutzthema, sondern ein
      Inhaltsthema: die Wissensbasis behandelt Pharmakologie. Wer angemeldet
      ist, hat bei der Registrierung bestaetigt und wird nicht erneut gefragt.

   Beides blockiert die Seite nicht laenger als noetig und speichert nichts,
   bevor entschieden wurde.
   ========================================================================== */

/* --- Altersbestaetigung --------------------------------------------------- */

function AgeGate({ onConfirm }) {
  return (
    <div className="gate-backdrop" role="dialog" aria-modal="true" aria-labelledby="age-gate-title">
      <div className="gate-card">
        <div className="gate-mark" aria-hidden="true">18+</div>
        <h2 id="age-gate-title">{BB.t("Inhalte ab 18 Jahren")}</h2>
        <p>
          {BB.t("Diese Seite dokumentiert unter anderem Pharmakologie und Hormonphysiologie. Die Inhalte richten sich an volljährige Personen und sind keine medizinische Beratung.")}
        </p>
        <div className="gate-actions">
          <button
            type="button"
            className="btn primary"
            onClick={onConfirm}
          >
            {BB.t("Ich bin 18 Jahre oder älter")}
          </button>
          <a className="btn ghost" href="https://www.google.com" rel="noreferrer">
            {BB.t("Seite verlassen")}
          </a>
        </div>
        <p className="gate-note">
          {BB.t("Die Bestätigung wird nur lokal in deinem Browser gespeichert.")}
        </p>
      </div>
    </div>
  );
}

/* --- Einwilligung in die Messung ------------------------------------------ */

function ConsentBanner({ onChoose }) {
  const [details, setDetails] = useState(false);

  return (
    <div className="consent-bar" role="region" aria-label={BB.t("Einwilligung in die Messung")}>
      <div className="consent-in">
        <div className="consent-text">
          <strong>{BB.t("Messung nur mit deiner Zustimmung")}</strong>
          <p>
            {BB.t("Wir messen anonym, wie die Seite genutzt wird: selbst gehostet, ohne Werbenetzwerke und ohne Weitergabe an Dritte. Dafür wird eine zufällige Kennung für 24 Stunden in deinem Browser abgelegt. Ohne Zustimmung passiert nichts davon.")}
          </p>
          {details && (
            <ul className="consent-details">
              <li>
                <strong>{BB.t("Notwendig")}</strong>
                {": "}
                {BB.t("Ein Cookie hält deine Anmeldung. Ohne ihn kannst du dich nicht einloggen. Er lässt sich nicht abwählen.")}
              </li>
              <li>
                <strong>{BB.t("Messung")}</strong>
                {": "}
                {BB.t("Zufällige Kennung für maximal 24 Stunden, gespeichert wird davon nur ein Hash. Keine IP-Adresse, keine Verknüpfung mit deinem Konto, keine Weitergabe.")}
              </li>
            </ul>
          )}
          <button type="button" className="consent-more" onClick={() => setDetails((d) => !d)}>
            {details ? BB.t("Weniger anzeigen") : BB.t("Was wird gespeichert?")}
          </button>
        </div>
        <div className="consent-actions">
          <button type="button" className="btn ghost" onClick={() => onChoose(false)}>
            {BB.t("Nur Notwendiges")}
          </button>
          <button type="button" className="btn primary" onClick={() => onChoose(true)}>
            {BB.t("Messung erlauben")}
          </button>
        </div>
        <p className="consent-legal">
          <Link to="/datenschutz">{BB.t("Datenschutz")}</Link>
          {" · "}
          <Link to="/impressum">{BB.t("Impressum")}</Link>
        </p>
      </div>
    </div>
  );
}

/* Aenderung der Entscheidung, eingebunden in /einstellungen. Eine einmal
   erteilte Einwilligung muss jederzeit widerrufbar sein. */
function ConsentSetting() {
  const [value, setValue] = useState(() => BB.consent.current());

  const set = (yes) => {
    setValue(yes ? BB.consent.accept() : BB.consent.reject());
  };

  return (
    <div className="consent-setting">
      <h3>{BB.t("Messung")}</h3>
      <p className="muted">
        {BB.t("Anonyme Nutzungsmessung, selbst gehostet. Du kannst deine Entscheidung jederzeit ändern.")}
      </p>
      <div className="consent-choice">
        <button
          type="button"
          className={"btn " + (value && value.analytics ? "primary" : "ghost")}
          aria-pressed={!!(value && value.analytics)}
          onClick={() => set(true)}
        >
          {BB.t("Messung erlauben")}
        </button>
        <button
          type="button"
          className={"btn " + (value && !value.analytics ? "primary" : "ghost")}
          aria-pressed={!!(value && !value.analytics)}
          onClick={() => set(false)}
        >
          {BB.t("Nur Notwendiges")}
        </button>
      </div>
      {value && (
        <p className="muted consent-stamp">
          {BB.t("Zuletzt geändert")}: {BB.when(value.at)}
        </p>
      )}
    </div>
  );
}

/* --- Reihenfolge ---------------------------------------------------------- */

/* Erst das Alter, dann die Messung. Beides an einer Stelle, damit die zweite
   Frage nicht schon unter der ersten steht. */
function ConsentLayer() {
  const { user, ready } = useAuth();
  const [ageDone, setAgeDone] = useState(() => BB.ageGate.confirmed());
  const [consentDone, setConsentDone] = useState(() => BB.consent.decided());

  // Wer angemeldet ist, hat bei der Registrierung bestaetigt. Das wird lokal
  // mitgeschrieben, damit die Abfrage nach dem Abmelden nicht zurueckkommt.
  useEffect(() => {
    if (user && !BB.ageGate.confirmed()) BB.ageGate.confirm();
    if (user) setAgeDone(true);
  }, [user]);

  if (!ready) return null;
  if (!ageDone) {
    return <AgeGate onConfirm={() => { BB.ageGate.confirm(); setAgeDone(true); }} />;
  }
  if (!consentDone) {
    return (
      <ConsentBanner
        onChoose={(yes) => {
          if (yes) BB.consent.accept();
          else BB.consent.reject();
          setConsentDone(true);
        }}
      />
    );
  }
  return null;
}

Object.assign(window, { AgeGate, ConsentBanner, ConsentLayer, ConsentSetting });