"use client";

import Link from "next/link";
import { useEffect, useState } from "react";

import { useI18n } from "@/lib/i18n";

const STORAGE_KEY = "freezmo.consent.v1";

/**
 * The cookie notice. There are no cookies (see /cookies), so this is an
 * honest "here is what we store in your browser" line, dismissed once and
 * remembered. It sits below the immersive feeds in the stack (z-44) so it can
 * never cover a study session, and above the phone tab bar.
 */
export function CookieConsent() {
  const { t } = useI18n();
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    try {
      setVisible(window.localStorage.getItem(STORAGE_KEY) === null);
    } catch {
      /* private mode: no storage, no banner */
    }
  }, []);

  if (!visible) return null;

  const dismiss = () => {
    try {
      window.localStorage.setItem(STORAGE_KEY, JSON.stringify({ at: Date.now() }));
    } catch {
      /* private mode */
    }
    setVisible(false);
  };

  return (
    <div className="cookie-notice pointer-events-none fixed inset-x-0 bottom-[calc(env(safe-area-inset-bottom,0px)+5.25rem)] z-[44] flex justify-center px-4 sm:bottom-6">
      <div
        role="region"
        aria-label={t("consent.title")}
        /* Floating glass (blurred backdrop + rim + shadow): as a plain card it
           read as part of the page background instead of a notice above it. */
        className="glass-panel pointer-events-auto flex max-w-xl flex-wrap items-center gap-3 p-3"
      >
        <p className="min-w-0 flex-1 text-[12.5px] leading-snug text-[var(--text-muted)]">
          {t("consent.body")}{" "}
          <Link href="/cookies" className="font-semibold text-[var(--text)] underline decoration-dotted">
            {t("consent.link")}
          </Link>
        </p>
        <button
          type="button"
          onClick={dismiss}
          className="btn-primary touch-target h-10 shrink-0 rounded-xl px-4 text-[13px] font-semibold"
        >
          {t("consent.ok")}
        </button>
      </div>
    </div>
  );
}