"use client";

import { useRooSports } from "@/components/app-provider";

export default function NotificationsPage() {
  const { notifications, markNotificationsRead } = useRooSports();
  const unread = notifications.filter((notice) => notice.unread).length;

  return (
    <div className="mx-auto max-w-4xl pb-10 pt-4 text-[#0b0f12] sm:pt-10">
      <header className="flex flex-wrap items-end justify-between gap-5">
        <div>
          <p className="flex items-center gap-3 text-[11px] font-extrabold uppercase tracking-[0.18em] text-[#617078]">
            <span className="h-2.5 w-2.5 rounded-full bg-[#ef7d00]" />
            Stay ready
          </p>
          <h1 className="mt-4 text-[clamp(3rem,6vw,4.8rem)] font-extrabold leading-none tracking-[-0.065em]">
            Messages & updates.
          </h1>
          <p className="mt-5 text-base text-[#617078]">Only booking, schedule and safety updates.</p>
        </div>
        {unread > 0 && (
          <button
            type="button"
            onClick={markNotificationsRead}
            className="rounded-full bg-white/48 px-5 py-3 text-sm font-extrabold transition hover:bg-white/78"
          >
            Mark all read
          </button>
        )}
      </header>

      <section className="rs-soft-panel mt-10 overflow-hidden rounded-[2.3rem]">
        {notifications.map((notice, index) => (
          <article
            key={notice.id}
            className={`flex gap-4 px-5 py-6 transition sm:px-7 ${
              index > 0 ? "border-t border-[#adc0c8]/22" : ""
            } ${notice.unread ? "bg-[#dfecef]/48" : "bg-white/18"}`}
          >
            <span className="material-symbols-outlined grid h-11 w-11 shrink-0 place-items-center rounded-full bg-white/62 text-[#315f70]">
              {notice.icon}
            </span>
            <div className="min-w-0 flex-1">
              <div className="flex items-start justify-between gap-3">
                <h2 className="text-sm font-extrabold">{notice.title}</h2>
                <span className="shrink-0 text-[10px] text-[#7c8897]">{notice.time}</span>
              </div>
              <p className="mt-1.5 text-xs leading-5 text-[#647283]">{notice.message}</p>
            </div>
            {notice.unread && <span className="mt-1 h-2.5 w-2.5 shrink-0 rounded-full bg-[#ef7d00]" />}
          </article>
        ))}
      </section>

      <p className="mt-5 text-center text-xs text-[#738091]">
        Notification preferences for email and SMS will be available in a later release.
      </p>
    </div>
  );
}