"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { AnimatePresence, motion } from "motion/react";
import { Button } from "@/components/ui";
import { useI18n } from "@/i18n/i18n-provider";

export const COOKIE_CONSENT_KEY = "wabenhain-cookie-consent";

type Consent = "all" | "essential";

export function CookieConsentBanner() {
  const { t } = useI18n();
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    // Liest bewusst erst nach dem Mount aus localStorage (Browser-API, im
    // SSR-Markup nicht verfuegbar), um einen Hydration-Mismatch zu vermeiden.
    const stored = window.localStorage.getItem(COOKIE_CONSENT_KEY);
    // eslint-disable-next-line react-hooks/set-state-in-effect -- externe Browser-Quelle (localStorage) einmalig nach dem Mount synchronisieren
    if (!stored) setVisible(true);
  }, []);

  function choose(consent: Consent) {
    window.localStorage.setItem(COOKIE_CONSENT_KEY, consent);
    setVisible(false);
  }

  return (
    <AnimatePresence>
      {visible ? (
        <motion.div
          initial={{ y: 100, opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          exit={{ y: 100, opacity: 0 }}
          transition={{ duration: 0.3 }}
          role="dialog"
          aria-label={t.cookieConsent.dialogLabel}
          className="fixed inset-x-0 bottom-0 z-50 bg-forest text-cream border-t border-cream/20"
        >
          <div className="mx-auto max-w-6xl px-6 py-6 flex flex-col md:flex-row md:items-center gap-4">
            <p className="text-sm text-cream/85 leading-relaxed flex-1">
              {t.cookieConsent.bannerTextBeforeLink}
              <Link href="/cookie-richtlinie" className="underline">
                {t.cookieConsent.policyLinkLabel}
              </Link>
              {t.cookieConsent.bannerTextAfterLink}
            </p>
            <div className="flex flex-shrink-0 flex-wrap gap-3">
              <Button
                variant="inverted"
                className="whitespace-nowrap"
                onClick={() => choose("essential")}
              >
                {t.cookieConsent.essentialOnly}
              </Button>
              <Button className="whitespace-nowrap" onClick={() => choose("all")}>
                {t.cookieConsent.acceptAll}
              </Button>
            </div>
          </div>
        </motion.div>
      ) : null}
    </AnimatePresence>
  );
}

/** Erlaubt es, die getroffene Cookie-Auswahl auf der Cookie-Richtlinie-Seite zu widerrufen. */
export function CookieSettingsButton() {
  const { t } = useI18n();
  return (
    <Button
      variant="secondary"
      onClick={() => {
        window.localStorage.removeItem(COOKIE_CONSENT_KEY);
        window.location.reload();
      }}
    >
      {t.cookieConsent.changeSettings}
    </Button>
  );
}