import Link from "next/link";
import { MarkAllRead, MarkRead } from "@/components/features/accounts";
import { Badge, Card, EmptyState, PageHeader, Pagination } from "@/components/ui";
import { buildHref } from "@/lib/list-params";
import { listNotifications } from "@/lib/services/account";
import { formatDateTime } from "@/lib/utils";

export async function NotificationsScreen({ path, page }: { path: string; page: number }) {
  const { rows, total, unread } = await listNotifications(page);
  return (
    <>
      <PageHeader title="Notifications" description={`${unread} unread`} actions={<MarkAllRead disabled={unread === 0} />} />
      <Card>
        {rows.length === 0 ? <EmptyState title="No notifications" description="Ticket assignments and updates will appear here." /> : (
          <ul className="divide-y divide-border">
            {rows.map((n) => (
              <li key={n.id} className="flex items-start justify-between gap-3 px-4 py-3 text-sm">
                <div>
                  <p className="font-medium">{n.href && n.href.startsWith("/") ? <Link href={n.href} className="hover:underline">{n.title}</Link> : n.title} {n.readAt ? null : <Badge tone="info">new</Badge>}</p>
                  {n.body ? <p className="text-muted-foreground">{n.body}</p> : null}
                  <p className="text-xs text-muted-foreground">{formatDateTime(n.createdAt)}</p>
                </div>
                {n.readAt ? null : <MarkRead id={n.id} title={n.title} />}
              </li>
            ))}
          </ul>
        )}
        <Pagination page={page} total={total} buildHref={(p) => buildHref(path, { page: p })} />
      </Card>
    </>
  );
}