"use client";

import { useEffect, useState } from "react";
import { Cookie } from "lucide-react";
import { Button } from "@/components/common/Button";
import { useTranslation } from "@/hooks/useTranslation";

const COOKIE_CONSENT_KEY = "xremit_cookie_consent";

/** Fake cookie-consent banner (no real cookie gating behind it — display-only,
 *  to keep the standard compliance UX pattern). Only "accepted" is sticky —
 *  a "rejected" choice (or no choice yet) shows the banner again next visit. */
export function CookieBanner() {
  const { t } = useTranslation();
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    try {
      setVisible(localStorage.getItem(COOKIE_CONSENT_KEY) !== "accepted");
    } catch {
      setVisible(true);
    }
  }, []);

  function respond(value: "accepted" | "rejected") {
    try {
      localStorage.setItem(COOKIE_CONSENT_KEY, value);
    } catch {
      /* ignore */
    }
    setVisible(false);
  }

  if (!visible) return null;

  return (
    <div role="region" aria-label={t("cookieBanner.message")} className="fixed inset-x-0 bottom-0 z-50 p-4 sm:p-6">
      <div className="mx-auto flex max-w-3xl flex-col gap-4 rounded-2xl border border-slate-200 bg-white/95 p-5 shadow-elevated backdrop-blur-md dark:border-slate-800 dark:bg-slate-900/95 sm:flex-row sm:items-center sm:justify-between">
        <div className="flex items-start gap-3">
          <span className="grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-brand-50 text-brand-600 dark:bg-brand-500/15 dark:text-brand-300">
            <Cookie className="h-4 w-4" />
          </span>
          <p className="text-sm text-slate-600 dark:text-slate-300">{t("cookieBanner.message")}</p>
        </div>
        <div className="flex shrink-0 gap-2">
          <Button type="button" variant="outline" size="sm" onClick={() => respond("rejected")}>
            {t("cookieBanner.reject")}
          </Button>
          <Button type="button" size="sm" onClick={() => respond("accepted")}>
            {t("cookieBanner.accept")}
          </Button>
        </div>
      </div>
    </div>
  );
}