"use client";

import { useState, useEffect } from "react";
import { X } from "lucide-react";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { useConfigStore } from "@/store/config";
import { useTranslations } from "next-intl";

export function PlatformAnnouncement() {
  const t = useTranslations("ext");
  const { settings } = useConfigStore();
  const [announcement, setAnnouncement] = useState<string | null>(null);
  const [isVisible, setIsVisible] = useState(true);

  useEffect(() => {
    if (!settings || Object.keys(settings).length === 0) return;

    const message = settings["icoAnnouncementMessage"];
    if (settings["icoAnnouncementActive"] && message) {
      // Check if this announcement has been dismissed before.
      const dismissedMessage = localStorage.getItem("dismissedAnnouncement");
      if (dismissedMessage === message) {
        setIsVisible(false);
      } else {
        setAnnouncement(message);
        setIsVisible(true);
      }
    } else {
      setAnnouncement(null);
      setIsVisible(false);
    }
  }, [settings]);

  const handleDismiss = () => {
    if (announcement) {
      localStorage.setItem("dismissedAnnouncement", announcement);
    }
    setIsVisible(false);
  };

  if (!announcement || !isVisible) {
    return null;
  }

  return (
    <div className="absolute left-0 right-0 top-24 z-50 px-4">
      <Alert className="container relative bg-primary/10 border-primary">
        <AlertTitle className="font-semibold">{t("announcement")}</AlertTitle>
        <AlertDescription className="mt-1">{announcement}</AlertDescription>
        <Button
          variant="ghost"
          size="icon"
          className="absolute top-2 right-2 text-primary"
          onClick={handleDismiss}
        >
          <X className="h-4 w-4" />
          <span className="sr-only">Dismiss</span>
        </Button>
      </Alert>
    </div>
  );
}