Notification Center

"use client";

import { useState } from "react";
import { toast } from "sonner";

import {
  NotificationCenter,
  unreadCount,
  type NotificationItem,
} from "@/components/f-ui/notification-center/notification-center";
import { Button } from "@/components/ui/button";
import { createDemoNotifications } from "@/demos/notification-center/demo-data";

function seedItems(): NotificationItem[] {
  return createDemoNotifications((actionId, item) => {
    toast.message(`${item.title}: ${actionId}`);
  });
}

export function NotificationCenterDemo() {
  const [items, setItems] = useState<NotificationItem[]>(seedItems);
  const [unseen, setUnseen] = useState(() => unreadCount(seedItems()));
  const [open, setOpen] = useState(false);

  const unread = unreadCount(items);

  return (
    <div className="bg-card rounded-xl border">
      <div className="flex h-12 items-center justify-between gap-3 border-b px-3">
        <p className="text-muted-foreground min-w-0 truncate text-sm">
          Host unseen: {unseen} · Unread: {unread}. Open the bell — this host
          clears unseen on open.
        </p>
        <div className="flex shrink-0 items-center gap-2">
          <Button
            type="button"
            variant="outline"
            onClick={() => {
              const next = seedItems();
              setItems(next);
              setUnseen(unreadCount(next));
              setOpen(false);
            }}
          >
            Reset
          </Button>
          <NotificationCenter
            items={items}
            unseenCount={unseen}
            open={open}
            onOpenChange={(next) => {
              setOpen(next);
              if (next) setUnseen(0);
            }}
            onNavigate={(item) => {
              toast.message(`Open: ${item.title}`);
            }}
            onMarkRead={(id, read) => {
              setItems((current) =>
                current.map((item) =>
                  item.id === id ? { ...item, read } : item,
                ),
              );
            }}
            onMarkAllRead={() => {
              setItems((current) =>
                current.map((item) => ({ ...item, read: true })),
              );
            }}
            onDismiss={(id) => {
              setItems((current) => current.filter((item) => item.id !== id));
            }}
          />
        </div>
      </div>
    </div>
  );
}

"use client";

import { useMemo, useState } from "react";
import { toast } from "sonner";

import type { NotificationItem } from "@/components/f-ui/notification-center/notification-center";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  createDemoNotifications,
  NotificationCenterFrame,
} from "@/demos/notification-center/demo-data";

type DemoStatus = "populated" | "loading" | "empty" | "error";

const STATUS_OPTIONS: { value: DemoStatus; label: string }[] = [
  { value: "populated", label: "Populated" },
  { value: "loading", label: "Loading" },
  { value: "empty", label: "Empty" },
  { value: "error", label: "Error" },
];

export function NotificationCenterStatesDemo() {
  const [status, setStatus] = useState<DemoStatus>("loading");
  const items = useMemo(
    () =>
      createDemoNotifications((actionId, item) => {
        toast.message(`${item.title}: ${actionId}`);
      }),
    [],
  );

  const populated = status === "populated";
  const list: readonly NotificationItem[] = populated ? items : [];

  return (
    <div className="flex flex-col gap-3">
      <label className="text-muted-foreground flex items-center gap-2 text-sm">
        <span className="whitespace-nowrap">Demo status</span>
        <Select
          value={status}
          onValueChange={(value) => setStatus(value as DemoStatus)}
        >
          <SelectTrigger aria-label="Demo status" className="w-32">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {STATUS_OPTIONS.map((opt) => (
              <SelectItem key={opt.value} value={opt.value}>
                {opt.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </label>
      <NotificationCenterFrame
        items={list}
        pending={status === "loading"}
        error={status === "error"}
        onRetry={() => setStatus("populated")}
        onNavigate={(item) => {
          toast.message(`Open: ${item.title}`);
        }}
      />
    </div>
  );
}

"use client";

import { useMemo } from "react";
import { toast } from "sonner";

import { Button } from "@/components/ui/button";
import {
  createDemoNotifications,
  NotificationCenterFrame,
} from "@/demos/notification-center/demo-data";

export function NotificationCenterActionsDemo() {
  const items = useMemo(
    () =>
      createDemoNotifications((actionId, item) => {
        toast.message(`${item.title}: ${actionId}`);
      }),
    [],
  );

  return (
    <NotificationCenterFrame
      items={items}
      onNavigate={(item) => {
        toast.message(`Open: ${item.title}`);
      }}
      onMarkRead={() => {
        toast.message("Mark as read is host-owned");
      }}
      onDismiss={() => {
        toast.message("Dismiss removes the row only");
      }}
      footer={
        <Button
          type="button"
          variant="link"
          className="h-auto w-full justify-center p-0"
          onClick={() => toast.message("View all notifications")}
        >
          View all notifications
        </Button>
      }
    />
  );
}