"use client";

import { useState, useRef, useEffect } from "react";
import { Bell, X, Check, CheckCheck, Loader2, Megaphone } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useAnnouncements } from "@/app/context/AnnouncementContext";
import { cleanHtmlContent } from "@/lib/htmlUtils";
import { useLanguage } from "@/src/hooks/LanguageContext";
import { getTranslation } from "@/src/hooks/useTranslation";

export default function AnnouncementBell() {
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);
  const router = useRouter();
  const { language } = useLanguage();
  const t = getTranslation(language).announcementPage;
  const {
    announcements,
    unreadCount,
    loading,
    markAsRead,
    markAllAsRead,
  } = useAnnouncements();

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (
        dropdownRef.current &&
        !dropdownRef.current.contains(event.target as Node)
      ) {
        setIsOpen(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  const handleAnnouncementClick = async (announcementId: number) => {
    await markAsRead([announcementId]);
    setIsOpen(false);
    router.push("/announcement");
  };

  const handleMarkAllRead = async (e: React.MouseEvent) => {
    e.stopPropagation();
    await markAllAsRead();
  };

  const formatDate = (dateString: string) => {
    try {
      const date = new Date(dateString);
      const now = new Date();
      const diffMs = now.getTime() - date.getTime();
      const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));

      if (diffDays === 0) {
        return t.today;
      } else if (diffDays === 1) {
        return t.yesterday;
      } else if (diffDays < 7) {
        return `${diffDays} ${t.daysAgo}`;
      } else {
        return date.toLocaleDateString("en-US", {
          month: "short",
          day: "numeric",
        });
      }
    } catch {
      return "";
    }
  };

  const recentAnnouncements = announcements.slice(0, 5);

  return (
    <div className="relative" ref={dropdownRef}>
      {/* Bell Button */}
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="relative p-2 rounded-full hover:bg-gray-100 transition-colors"
        aria-label="Announcements"
      >
        <Megaphone
          className={`w-5 h-5 ${isOpen ? "text-[#FAA631]" : "text-gray-600"}`}
        />

        {/* Unread Badge */}
        {unreadCount > 0 && (
          <span
            className="absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] flex items-center justify-center 
            bg-red-500 text-white text-[10px] font-bold rounded-full px-1
            animate-pulse"
          >
            {unreadCount > 99 ? "99+" : unreadCount}
          </span>
        )}
      </button>

      {/* Dropdown Panel */}
      {isOpen && (
        <div
          className="absolute right-0 mt-2 w-80 sm:w-96 bg-white rounded-2xl shadow-2xl 
          border border-gray-100 overflow-hidden z-50 animate-in fade-in slide-in-from-top-2 duration-200"
        >
          {/* Header */}
          <div className="flex items-center justify-between px-4 py-3 bg-gradient-to-r from-[#FFF8EE] to-white border-b border-gray-100">
            <div className="flex items-center gap-2">
              <Megaphone className="w-5 h-5 text-[#FAA631]" />
              <h3 className="font-semibold text-gray-900">{t.title}</h3>
            </div>
            <div className="flex items-center gap-2">
              {unreadCount > 0 && (
                <button
                  onClick={handleMarkAllRead}
                  className="text-xs text-[#FAA631] hover:text-[#e0911d] font-medium flex items-center gap-1"
                >
                  <CheckCheck className="w-3.5 h-3.5" />
                  {t.markAllRead}
                </button>
              )}
              <button
                onClick={() => setIsOpen(false)}
                className="p-1 hover:bg-gray-100 rounded-full"
              >
                <X className="w-4 h-4 text-gray-500" />
              </button>
            </div>
          </div>

          {/* Content */}
          <div className="max-h-[400px] overflow-y-auto">
            {loading ? (
              <div className="flex items-center justify-center py-12">
                <Loader2 className="w-6 h-6 text-[#FAA631] animate-spin" />
              </div>
            ) : announcements.length === 0 ? (
              <div className="flex flex-col items-center justify-center py-12 text-gray-500">
                <Megaphone className="w-12 h-12 mb-3 text-gray-300" />
                <p className="text-sm">{t.noAnnouncementsYet}</p>
              </div>
            ) : (
              <div className="divide-y divide-gray-50">
                {recentAnnouncements.map((announcement) => (
                  <button
                    key={announcement.id}
                    onClick={() =>
                      handleAnnouncementClick(Number(announcement.id))
                    }
                    className={`w-full text-left p-4 hover:bg-orange-50/50 transition-colors
                    ${!announcement.is_read ? "bg-blue-50/30" : ""}`}
                  >
                    <div className="flex items-start gap-3">
                      {/* Unread indicator */}
                      <div className="mt-1.5">
                        {!announcement.is_read ? (
                          <div className="w-2.5 h-2.5 rounded-full bg-[#FAA631] animate-pulse" />
                        ) : (
                          <Check className="w-2.5 h-2.5 text-gray-400" />
                        )}
                      </div>

                      {/* Content */}
                      <div className="flex-1 min-w-0">
                        <p
                          className={`text-sm mb-1 line-clamp-2 ${
                            !announcement.is_read
                              ? "font-semibold text-gray-900"
                              : "text-gray-700"
                          }`}
                        >
                          {announcement.title}
                        </p>
                        <p className="text-xs text-gray-500 line-clamp-2">
                          {cleanHtmlContent(announcement.description)}
                        </p>
                        <p className="text-[10px] text-gray-400 mt-1.5">
                          {formatDate(announcement.created_at)}
                        </p>
                      </div>
                    </div>
                  </button>
                ))}
              </div>
            )}
          </div>

          {/* Footer */}
          {announcements.length > 5 && (
            <div className="border-t border-gray-100 p-3 bg-gray-50/50">
              <Link
                href="/announcement"
                onClick={() => setIsOpen(false)}
                className="block text-center text-sm font-medium text-[#FAA631] hover:text-[#e0911d]"
              >
                {t.viewAll} ({announcements.length})
              </Link>
            </div>
          )}
        </div>
      )}
    </div>
  );
}