"use client";

import { useTranslations } from "next-intl";
import type { AdminAnnouncementPayload } from "@/lib/socket/yearlyTypes";

interface AdminAnnouncementsCardProps {
  announcements: AdminAnnouncementPayload[];
}

export default function AdminAnnouncementsCard({
  announcements,
}: AdminAnnouncementsCardProps) {
  const t = useTranslations("YEARLY_AUCTION_LIVE");

  // Only show announcements with actual content (filter out empty placeholders)
  const hasContent = (a: AdminAnnouncementPayload) =>
    (a.message && a.message.trim()) || (a.title && a.title.trim());
  const validAnnouncements = announcements.filter(hasContent);

  const getLevelStyles = (level: "info" | "warning" | "danger") => {
    switch (level) {
      case "warning":
        return "before:bg-amber-500";
      case "danger":
        return "before:bg-[#B42318]";
      default:
        return "before:bg-[#0F5132]";
    }
  };

  return (
    <div
      className="bg-white rounded-[26px] p-5 sm:p-6 shadow-[0_6px_18px_rgba(15,81,50,0.08)] border border-[#E4E4E4] w-full h-full"
      dir="rtl"
    >
      <h3 className="text-xl sm:text-3xl font-extrabold text-[#0F5132] mb-4 text-right">
        إشعارات الإدارة
      </h3>

      {validAnnouncements.length === 0 ? (
        <p className="text-sm text-slate-400 text-center py-6">
          {t("no_admin_announcements_yet")}
        </p>
      ) : (
        <div className="space-y-3 max-h-[290px] overflow-y-auto">
          {validAnnouncements.map((announcement, index) => (
            <div
              key={index}
              className={`relative rounded-xl py-3.5 px-4 bg-[#F3F3F3] text-slate-800 before:absolute before:right-0 before:top-2 before:bottom-2 before:w-1 before:rounded-full ${getLevelStyles(announcement.level)}`}
            >
              <div className="pr-2">
                {announcement.title && (
                  <div className="text-xs font-semibold mb-1 text-slate-500">
                    {announcement.title}
                  </div>
                )}
                <div className="text-base sm:text-lg font-semibold leading-snug">
                  {announcement.message}
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}