"use client";

 import Header from "@/components/layout/Header";
 import Footer from "@/components/layout/Footer";
 import { useNotifications } from "@/context/NotificationsContext";
 import { useTranslation } from "@/lib/i18n";
 import { Bell, CheckCircle2, ShieldCheck, Trash2 } from "lucide-react";

 export default function NotificationsPage() {
   const { notifications, markAllRead, markRead, clear } = useNotifications();
   const { t } = useTranslation();

   const iconFor = (type?: string) => {
     if (type === "success") return <CheckCircle2 size={18} className="text-green-500" />;
     if (type === "warning") return <ShieldCheck size={18} className="text-amber-500" />;
     return <Bell size={18} className="text-blue-500" />;
   };

   return (
     <div className="min-h-screen bg-[#fcfcfc] selection:bg-[#2b9d10] selection:text-white">
       <Header />
       <main className="container mx-auto px-4 py-8 md:py-12">
         <div className="flex items-center justify-between mb-8">
           <h1 className="text-2xl md:text-3xl font-black text-zinc-900 tracking-tight">
             {t("myNotifications")}
           </h1>
           <div className="flex items-center gap-2">
             <button
               onClick={markAllRead}
               className="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-zinc-100 text-zinc-700 text-sm font-bold hover:bg-zinc-200 transition-colors"
             >
               {t("markAllRead")}
             </button>
             <button
               onClick={clear}
               className="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-red-50 text-red-600 text-sm font-bold hover:bg-red-100 transition-colors"
             >
               <Trash2 size={16} /> {t("clearAll")}
             </button>
           </div>
         </div>

         {notifications.length === 0 ? (
           <div className="bg-white border border-zinc-100 rounded-2xl p-8 text-center">
             <p className="text-zinc-500 font-medium">{t("noNotifications")}</p>
           </div>
         ) : (
           <ul className="space-y-3">
             {notifications.map((n) => (
               <li
                 key={n.id}
                 className={`bg-white border border-zinc-100 rounded-2xl p-4 flex items-start gap-4 ${
                   !n.isRead ? "ring-2 ring-[#2b9d10]/10" : ""
                 }`}
               >
                 <div className="shrink-0 w-10 h-10 rounded-xl bg-zinc-50 flex items-center justify-center">
                   {iconFor(n.type)}
                 </div>
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center justify-between gap-2">
                     <h3 className="font-bold text-zinc-900">{n.title}</h3>
                     <span className="text-xs text-zinc-500 whitespace-nowrap">{n.time}</span>
                   </div>
                   <p className="text-sm text-zinc-600 mt-1">{n.message}</p>
                   {!n.isRead && (
                     <button
                       onClick={() => markRead(n.id)}
                       className="mt-2 inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-[#2b9d10] text-white text-[12px] font-bold hover:bg-[#23800d] transition-colors"
                     >
                       {t("markAllRead")}
                     </button>
                   )}
                 </div>
               </li>
             ))}
           </ul>
         )}
       </main>
       <Footer />
     </div>
   );
 }