"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { Button } from "@/components/ui/button";

const STORAGE_KEY = "novelia.consent.v1";

type Consent = {
  analytics: boolean;
  decidedAt: string;
};

// Bandeau cookies discret, affiche tant que l'utilisateur n'a pas decide.
// Au clic Accepter, debloque analytics_storage via Consent Mode v2.
// Au clic Refuser, persiste juste le choix sans rien activer.
//
// Stockage : localStorage (pas de cookie pour le choix de consentement,
// pour eviter de declarer un cookie supplementaire).
export function CookieBanner() {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    try {
      const stored = localStorage.getItem(STORAGE_KEY);
      if (!stored) setVisible(true);
    } catch {
      setVisible(true);
    }
  }, []);

  function persist(consent: Consent) {
    try {
      localStorage.setItem(STORAGE_KEY, JSON.stringify(consent));
    } catch {
      // ignore (mode prive, quota plein, etc.)
    }
  }

  function acceptAll() {
    persist({ analytics: true, decidedAt: new Date().toISOString() });
    type GtagFn = (...args: unknown[]) => void;
    const w = window as unknown as { gtag?: GtagFn };
    if (typeof w.gtag === "function") {
      w.gtag("consent", "update", {
        analytics_storage: "granted",
      });
    }
    setVisible(false);
  }

  function rejectAll() {
    persist({ analytics: false, decidedAt: new Date().toISOString() });
    // Rien a appeler : tout est deja en 'denied' par defaut via consent default.
    setVisible(false);
  }

  if (!visible) return null;

  return (
    <div
      role="dialog"
      aria-live="polite"
      aria-label="Consentement aux cookies"
      className="fixed inset-x-0 bottom-0 z-50 px-4 pb-4 sm:px-6 sm:pb-6"
    >
      <div className="mx-auto max-w-3xl rounded-xl border border-border bg-surface/95 backdrop-blur-md shadow-xl p-4 sm:p-5">
        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
          <div className="text-sm text-text-muted">
            Nous utilisons des cookies de mesure d&apos;audience pour comprendre comment
            le site est consulte. Aucune donnee personnelle n&apos;est partagee avec des
            annonceurs.{" "}
            <Link
              href="/confidentialite"
              className="text-accent hover:text-accent-hi underline-offset-2 hover:underline"
            >
              En savoir plus
            </Link>
            .
          </div>
          <div className="flex items-center gap-2 shrink-0">
            <Button variant="ghost" size="sm" onClick={rejectAll}>
              Refuser
            </Button>
            <Button variant="primary" size="sm" onClick={acceptAll}>
              Accepter
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}