"use client";

import { useState, useEffect } from "react";
import { useI18n } from "@/lib/i18n";
import { motion, AnimatePresence } from "framer-motion";
import { Button } from "@/components/ui/button";

const STORAGE_KEY = "cookie-consent";
const REOPEN_EVENT = "wordly:reopen-cookie-consent";

/** Reopen the banner after a choice was made (footer link uses this). */
export function reopenCookieConsent() {
  localStorage.removeItem(STORAGE_KEY);
  window.dispatchEvent(new Event(REOPEN_EVENT));
}

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

  useEffect(() => {
    setVisible(!localStorage.getItem(STORAGE_KEY));
    const onReopen = () => setVisible(true);
    window.addEventListener(REOPEN_EVENT, onReopen);
    return () => window.removeEventListener(REOPEN_EVENT, onReopen);
  }, []);

  function acceptAll() {
    localStorage.setItem(STORAGE_KEY, "all");
    setVisible(false);
  }

  function essentialOnly() {
    localStorage.setItem(STORAGE_KEY, "essential");
    setVisible(false);
  }

  return (
    <AnimatePresence>
      {visible && (
        <motion.div
          initial={{ y: 100, opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          exit={{ y: 100, opacity: 0 }}
          transition={{ type: "spring", damping: 25, stiffness: 300 }}
          className="fixed bottom-0 inset-x-0 z-50 p-4"
        >
          <div className="mx-auto max-w-3xl rounded-t-2xl border border-border bg-background/95 backdrop-blur-md shadow-2xl p-6">
            <div className="flex items-start gap-3">
              <span className="text-2xl shrink-0" aria-hidden="true">
                <CookieIcon />
              </span>
              <div className="flex-1 min-w-0">
                <h3 className="font-semibold text-foreground mb-1">
                  {t("cookieConsent.title")}
                </h3>
                <p className="text-sm text-muted-foreground leading-relaxed">
                  {t("cookieConsent.description")}
                </p>
                <div className="flex flex-wrap items-center gap-3 mt-4">
                  <Button variant="outline" size="sm" onClick={essentialOnly}>
                    {t("cookieConsent.essentialOnly")}
                  </Button>
                  <Button size="sm" onClick={acceptAll}>
                    {t("cookieConsent.acceptAll")}
                  </Button>
                </div>
              </div>
            </div>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}

/** Drawn icon instead of an emoji — keeps one consistent icon system. */
function CookieIcon() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-foreground/70" aria-hidden="true">
      <circle cx="12" cy="12" r="9" />
      <circle cx="9" cy="9" r="0.5" fill="currentColor" />
      <circle cx="14" cy="13" r="0.5" fill="currentColor" />
      <circle cx="10" cy="15" r="0.5" fill="currentColor" />
      <circle cx="16" cy="8" r="0.5" fill="currentColor" />
    </svg>
  );
}
