"use client";

import { useEffect, useState } from "react";

interface Announcement {
  id: number;
  title: string;
  content: string;
  type: string;
  target: string;
}

const typeStyles: Record<string, { bg: string; border: string; text: string }> = {
  info: {
    bg: "bg-blue-500/10",
    border: "border-blue-500/30",
    text: "text-blue-400",
  },
  warning: {
    bg: "bg-yellow-500/10",
    border: "border-yellow-500/30",
    text: "text-yellow-400",
  },
  urgent: {
    bg: "bg-red-500/10",
    border: "border-red-500/30",
    text: "text-red-400",
  },
  success: {
    bg: "bg-green-500/10",
    border: "border-green-500/30",
    text: "text-green-400",
  },
};

export function AnnouncementBanner() {
  const [announcements, setAnnouncements] = useState<Announcement[]>([]);
  const [dismissed, setDismissed] = useState<Set<number>>(new Set());

  useEffect(() => {
    // Load dismissed IDs from sessionStorage
    try {
      const stored = sessionStorage.getItem("dismissed_announcements");
      if (stored) {
        setDismissed(new Set(JSON.parse(stored)));
      }
    } catch {
      // ignore
    }

    async function fetchAnnouncements() {
      try {
        const res = await fetch("/api/announcements/active");
        if (res.ok) {
          const data = await res.json();
          setAnnouncements(data.announcements || []);
        }
      } catch {
        // silently fail
      }
    }
    fetchAnnouncements();
  }, []);

  function dismiss(id: number) {
    const newDismissed = new Set(dismissed);
    newDismissed.add(id);
    setDismissed(newDismissed);
    try {
      sessionStorage.setItem(
        "dismissed_announcements",
        JSON.stringify([...newDismissed])
      );
    } catch {
      // ignore
    }
  }

  const visible = announcements.filter((a) => !dismissed.has(a.id));

  if (visible.length === 0) return null;

  return (
    <div className="space-y-0">
      {visible.map((announcement) => {
        const styles = typeStyles[announcement.type] || typeStyles.info;
        return (
          <div
            key={announcement.id}
            className={`${styles.bg} ${styles.border} border-b px-4 py-3 flex items-center justify-between`}
          >
            <div className="flex items-center gap-3 flex-1 min-w-0">
              <span
                className={`${styles.text} text-xs font-semibold uppercase shrink-0`}
              >
                {announcement.type}
              </span>
              <span className={`${styles.text} font-medium text-sm`}>
                {announcement.title}
              </span>
              <span className="text-text-muted text-sm truncate hidden sm:inline">
                {announcement.content}
              </span>
            </div>
            <button
              onClick={() => dismiss(announcement.id)}
              className="text-text-muted hover:text-white ml-3 shrink-0 transition-colors"
              aria-label="Dismiss"
            >
              <svg
                className="w-4 h-4"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M6 18L18 6M6 6l12 12"
                />
              </svg>
            </button>
          </div>
        );
      })}
    </div>
  );
}