import { useEffect } from "react";
import { INK, MUTE } from "../../theme";
import { PRIVACY_TITLE, PRIVACY_INTRO, PRIVACY_SECTIONS } from "../../content/privacy";
import AirmailEdge from "../../components/AirmailEdge";

/*
 * De privacyverklaring in de app (dezelfde tekst als /api/privacy op de server). Te openen
 * vanuit registratie, de toestemmingsvraag en Mijn profiel → Jouw gegevens. onClose sluit.
 */
export default function PrivacyDialog({ onClose }) {
  useEffect(() => {
    const onKey = (e) => e.key === "Escape" && onClose();
    document.addEventListener("keydown", onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = prev;
    };
  }, [onClose]);

  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-label={PRIVACY_TITLE}
      className="dialog-backdrop"
      style={{ background: "rgba(31,44,85,0.55)" }}
      onClick={(e) => e.target === e.currentTarget && onClose()}
    >
      <div className="dialog-sheet" style={{ background: "#fff" }}>
        <AirmailEdge />
        <div style={{ padding: 20 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }}>
            <h2 style={{ margin: 0, fontSize: 20 }}>{PRIVACY_TITLE}</h2>
            <button onClick={onClose} aria-label="Sluiten" style={{ background: "none", border: "none", fontSize: 22, color: MUTE, lineHeight: 1 }}>
              ×
            </button>
          </div>
          <PrivacyText />
        </div>
      </div>
    </div>
  );
}

/* Alleen de tekst (ook los bruikbaar, bv. in ConsentView) */
export function PrivacyText() {
  return (
    <div style={{ fontSize: 14, lineHeight: 1.55, color: INK }}>
      <p style={{ color: MUTE, margin: "0 0 14px" }}>{PRIVACY_INTRO}</p>
      {PRIVACY_SECTIONS.map((s) => (
        <section key={s.heading}>
          <h3 style={{ fontSize: 15, margin: "18px 0 6px" }}>{s.heading}</h3>
          {s.paragraphs.map((p, i) =>
            Array.isArray(p) ? (
              <ul key={i} style={{ margin: "0 0 8px", paddingLeft: 18 }}>
                {p.map((li, j) => (
                  <li key={j} style={{ marginBottom: 6 }}>{li}</li>
                ))}
              </ul>
            ) : (
              <p key={i} style={{ margin: "0 0 8px" }}>{p}</p>
            )
          )}
        </section>
      ))}
    </div>
  );
}