Glass Notifications

/**
 * VibeBox Motion · Glass Notifications
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";
import { Glass, GlassGlyphIcon, type GlassGlyph } from "@/lib/vibebox/glass";

export type GlassNotice = { id: string; app: string; title: string; body?: string; time?: string; glyph?: GlassGlyph };

export type GlassNotificationsProps = {
  notices?: GlassNotice[];
  /** Start expanded instead of as a stack. */
  expanded?: boolean;
  tone?: "auto" | "dark" | "light";
  className?: string;
};

const NOTICES: GlassNotice[] = [
  { id: "1", app: "Calendar", title: "Design review at 3:00", body: "Room 4, with the brand team.", time: "now", glyph: "calendar" },
  { id: "2", app: "Messages", title: "Ana sent you a photo", body: "The prototype looks great on a phone.", time: "2m", glyph: "chat" },
  { id: "3", app: "Mail", title: "Invoice 0142 paid", body: "A deposit arrived this morning.", time: "1h", glyph: "mail" },
  { id: "4", app: "Music", title: "New release from Luna Park", time: "3h", glyph: "music" },
];

/**
 * A lock-screen notification stack: the newest card in front with two layers peeking behind it;
 * a tap fans them out into a list, and each can be dismissed. Transforms and opacity only.
 */
export function GlassNotifications({ notices = NOTICES, expanded: startOpen = false, tone, className }: GlassNotificationsProps) {
  const [list, setList] = useState(notices);
  const [open, setOpen] = useState(startOpen);
  const dismiss = (id: string) => setList((value) => value.filter((notice) => notice.id !== id));
  const stacked = !open && list.length > 1;

  return (
    <section data-vb="glass-notifications" aria-label="Notifications" className={cn("w-full max-w-[22rem] min-w-0", className)}>
      <div className="mb-2 flex items-center justify-between px-1 text-[0.8rem] text-current">
        <span className="font-medium opacity-90">Notifications</span>
        {list.length > 1 && (
          <button type="button" onClick={() => setOpen((value) => !value)} aria-expanded={open} className="rounded-md px-1.5 py-0.5 opacity-75 transition-opacity hover:opacity-100 focus-visible:outline-2 focus-visible:outline-ring">
            {open ? "Show less" : `Show all ${list.length}`}
          </button>
        )}
      </div>
      <ul className={cn("min-w-0", stacked ? "relative grid pb-3" : "flex flex-col gap-1.5")}>
        {list.map((notice, index) => {
          const peek = stacked ? index : 0;
          if (stacked && index > 2) return null;
          return (
            <li
              key={notice.id}
              className={cn("min-w-0", stacked && "col-start-1 row-start-1 transition-[transform,opacity] duration-500 ease-out motion-reduce:transition-none")}
              style={stacked ? { transform: `translateY(${peek * 10}px) scale(${1 - peek * 0.045})`, opacity: 1 - peek * 0.28, zIndex: 10 - peek } : undefined}
            >
              <Glass tone={tone} still aria-hidden={stacked && peek > 0 ? true : undefined} className={cn("flex min-w-0 items-start gap-2.5 p-2.5", stacked && peek > 0 && "[&>*]:invisible")}>
                <span className="grid size-7 flex-none place-items-center rounded-md border border-white/25 bg-white/15">
                  <GlassGlyphIcon name={notice.glyph ?? "bell"} className="size-[0.95rem]" />
                </span>
                <div className="min-w-0 flex-1">
                  <p className="flex items-center justify-between gap-2 font-mono text-[0.58rem] tracking-wide uppercase opacity-65">
                    <span>{notice.app}</span>
                    <span>{notice.time}</span>
                  </p>
                  <p className="mt-0.5 line-clamp-2 text-[0.8rem] leading-tight font-semibold">{notice.title}</p>
                  {notice.body && <p className="mt-0.5 line-clamp-2 text-[0.72rem] leading-snug opacity-75">{notice.body}</p>}
                </div>
                <button
                  type="button"
                  aria-label={`Dismiss ${notice.title}`}
                  onClick={() => dismiss(notice.id)}
                  className="-mt-0.5 -mr-0.5 grid size-6 flex-none place-items-center rounded-full opacity-60 transition hover:bg-white/15 hover:opacity-100 focus-visible:outline-2 focus-visible:outline-ring"
                >
                  <svg viewBox="0 0 16 16" aria-hidden="true" className="size-3" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
                    <path d="m4 4 8 8M12 4l-8 8" />
                  </svg>
                </button>
              </Glass>
            </li>
          );
        })}
      </ul>
      {list.length === 0 && <p className="px-1 py-6 text-center text-[0.85rem] opacity-70">You are all caught up.</p>}
    </section>
  );
}

/**
 * VibeBox Motion · Glass Notifications
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
export * from "./glass-notifications.client";