// -----------------------------------------------------------------------------
// Rent-Ka — Rental listings aggregator (Canada, outside Québec)
// Author: Simon-Pierre Boucher — contact@spboucher.ai
// components/CookieConsent.tsx: consent banner (cookies/storage)
//   Honest by design: Rent-Ka uses NO third-party cookies or trackers.
//   The selector covers local storage (preferences) and possible future
//   anonymous audience measurement. Choice saved in localStorage,
//   re-openable via the "rentka:openConsent" event (footer link).
// -----------------------------------------------------------------------------
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";

const KEY = "rentka-consent-v1";

export interface Consent {
  essential: true;          // always on (site operation)
  preferences: boolean;     // remember filters and list/map view
  statistics: boolean;      // anonymous audience measurement (if ever enabled)
  ts: number;
}

export function getConsent(): Consent | null {
  try {
    const raw = localStorage.getItem(KEY);
    return raw ? (JSON.parse(raw) as Consent) : null;
  } catch {
    return null;
  }
}

function save(preferences: boolean, statistics: boolean): Consent {
  const c: Consent = { essential: true, preferences, statistics, ts: Date.now() };
  try { localStorage.setItem(KEY, JSON.stringify(c)); } catch { /* storage blocked */ }
  return c;
}

export default function CookieConsent() {
  const [visible, setVisible] = useState(false);
  const [custom, setCustom] = useState(false);
  const [prefs, setPrefs] = useState(true);
  const [stats, setStats] = useState(false);

  useEffect(() => {
    if (getConsent() === null) setVisible(true);
    const open = () => { setVisible(true); setCustom(true); };
    window.addEventListener("rentka:openConsent", open);
    return () => window.removeEventListener("rentka:openConsent", open);
  }, []);

  // the banner must never cover the floating controls (Filters button,
  // sticky CTA of the listing page): publish its height as a CSS variable
  // so they shift above it while it is displayed
  useEffect(() => {
    const root = document.documentElement;
    if (!visible) {
      root.style.setProperty("--consent-h", "0px");
      return;
    }
    const el = document.querySelector(".cookie-banner");
    const apply = () =>
      root.style.setProperty("--consent-h", `${(el?.getBoundingClientRect().height ?? 0) + 12}px`);
    apply();
    const ro = el ? new ResizeObserver(apply) : null;
    if (el && ro) ro.observe(el);
    return () => { ro?.disconnect(); root.style.setProperty("--consent-h", "0px"); };
  }, [visible, custom]);

  if (!visible) return null;

  const close = (p: boolean, s: boolean) => { save(p, s); setVisible(false); setCustom(false); };

  return (
    <div className="cookie-banner" role="dialog" aria-modal="false" aria-label="Cookie preferences">
      <div className="cookie-inner">
        <div className="cookie-text">
          <b>🍪 Your cookies, your choice.</b>{" "}
          Rent-Ka uses no advertising trackers or third-party cookies. The site
          locally remembers your preferences (filters, map view) and your
          consent choice. <Link to="/privacy">Privacy policy</Link>
        </div>

        {custom && (
          <div className="cookie-options">
            <label className="cookie-opt">
              <input type="checkbox" checked disabled />
              <span><b>Essential</b> — site operation (always on)</span>
            </label>
            <label className="cookie-opt">
              <input type="checkbox" checked={prefs} onChange={(e) => setPrefs(e.target.checked)} />
              <span><b>Preferences</b> — remember your filters and list/map view</span>
            </label>
            <label className="cookie-opt">
              <input type="checkbox" checked={stats} onChange={(e) => setStats(e.target.checked)} />
              <span><b>Statistics</b> — anonymous audience measurement, no profiling</span>
            </label>
          </div>
        )}

        <div className="cookie-actions">
          {!custom && (
            <button className="btn btn-ghost" onClick={() => setCustom(true)}>
              Customize
            </button>
          )}
          <button className="btn btn-ghost" onClick={() => close(false, false)}>
            Essential only
          </button>
          {custom ? (
            <button className="btn btn-primary" onClick={() => close(prefs, stats)}>
              Save my choices
            </button>
          ) : (
            <button className="btn btn-primary" onClick={() => close(true, true)}>
              Accept all
            </button>
          )}
        </div>
      </div>
    </div>
  );
}