back_end_oudelaa/oudelaa_dashboard/app/(dashboard)/notifications/page.tsx

"use client";

import { useCallback, useEffect, useRef, useState } from "react";

import { NoPermissionState } from "@/components/auth/no-permission-state";
import { useSuperAdminSession } from "@/components/auth/session-context";
import { PageHeader } from "@/components/dashboard/page-header";
import { PaginationControls } from "@/components/dashboard/pagination-controls";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { EmptyState } from "@/components/ui/empty-state";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { useToast } from "@/components/ui/toast";
import { getItems, getPagination } from "@/lib/api/core";
import { listPlatformNotifications } from "@/lib/api/notifications";
import { formatDateTime } from "@/lib/format";
import { SUPERADMIN_PERMISSIONS, hasPermission } from "@/lib/permissions";
import type { NotificationItem, NotificationsResponse } from "@/types/api";

export default function NotificationsPage() {
  const { permissions } = useSuperAdminSession();
  const [readFilter, setReadFilter] = useState("all");
  const [typeFilter, setTypeFilter] = useState("all");
  const [resourceTypeFilter, setResourceTypeFilter] = useState("all");
  const [page, setPage] = useState(1);
  const [response, setResponse] = useState<NotificationsResponse | null>(null);
  const [loading, setLoading] = useState(true);
  const { toast } = useToast();
  const filtersRef = useRef({ readFilter, typeFilter, resourceTypeFilter });

  const canReadNotifications = hasPermission(
    permissions,
    SUPERADMIN_PERMISSIONS.NOTIFICATIONS_READ,
  );

  filtersRef.current = { readFilter, typeFilter, resourceTypeFilter };

  const loadNotifications = useCallback(async () => {
    if (!canReadNotifications) {
      setLoading(false);
      return;
    }

    const {
      readFilter: currentReadFilter,
      typeFilter: currentTypeFilter,
      resourceTypeFilter: currentResourceTypeFilter,
    } = filtersRef.current;
    const read =
      currentReadFilter === "all" ? undefined : currentReadFilter === "read" ? true : false;

    setLoading(true);
    try {
      const result = await listPlatformNotifications({
        page,
        limit: 15,
        read,
        type: currentTypeFilter === "all" ? undefined : currentTypeFilter,
        resourceType:
          currentResourceTypeFilter === "all" ? undefined : currentResourceTypeFilter,
        sortOrder: "desc",
      });
      setResponse(result);
    } catch (error) {
      toast({ title: "Failed to load notifications", description: String(error), variant: "danger" });
    } finally {
      setLoading(false);
    }
  }, [canReadNotifications, page, toast]);

  useEffect(() => {
    void loadNotifications();
  }, [loadNotifications]);

  const applyFilters = () => {
    if (page === 1) {
      void loadNotifications();
      return;
    }
    setPage(1);
  };

  const items = getItems(response) as NotificationItem[];

  if (!canReadNotifications) {
    return (
      <div className="space-y-5 pb-8">
        <PageHeader
          title="Notifications center"
          subtitle="Platform notifications with filters for type, read state, and target resource."
        />
        <NoPermissionState description="This page needs the notifications.read permission." />
      </div>
    );
  }

  return (
    <div className="space-y-5 pb-8">
      <PageHeader
        title="Notifications center"
        subtitle="Platform notifications with filters for type, read state, and target resource."
      />

      <Card>
        <CardHeader>
          <CardTitle>Filters</CardTitle>
        </CardHeader>
        <CardContent className="grid gap-3 md:grid-cols-4">
          <Select value={readFilter} onValueChange={setReadFilter}>
            <SelectTrigger>
              <SelectValue placeholder="Read state" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All</SelectItem>
              <SelectItem value="unread">Unread</SelectItem>
              <SelectItem value="read">Read</SelectItem>
            </SelectContent>
          </Select>
          <Select value={typeFilter} onValueChange={setTypeFilter}>
            <SelectTrigger>
              <SelectValue placeholder="Type" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All types</SelectItem>
              <SelectItem value="like">like</SelectItem>
              <SelectItem value="comment">comment</SelectItem>
              <SelectItem value="follow">follow</SelectItem>
              <SelectItem value="message">message</SelectItem>
              <SelectItem value="save">save</SelectItem>
              <SelectItem value="share">share</SelectItem>
              <SelectItem value="mention">mention</SelectItem>
            </SelectContent>
          </Select>
          <Select value={resourceTypeFilter} onValueChange={setResourceTypeFilter}>
            <SelectTrigger>
              <SelectValue placeholder="Target" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All targets</SelectItem>
              <SelectItem value="post">post</SelectItem>
              <SelectItem value="comment">comment</SelectItem>
              <SelectItem value="conversation">conversation</SelectItem>
              <SelectItem value="user">user</SelectItem>
            </SelectContent>
          </Select>
          <Button variant="outline" onClick={applyFilters}>
            Apply
          </Button>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="flex flex-row items-center justify-between">
          <CardTitle>Notifications</CardTitle>
          <Badge variant={response?.unreadCount ? "warning" : "muted"}>
            Unread: {response?.unreadCount ?? 0}
          </Badge>
        </CardHeader>
        <CardContent className="space-y-4">
          {!items.length && !loading ? (
            <EmptyState title="No notifications" description="No results matched the selected filters." />
          ) : (
            <div className="space-y-3">
              {items.map((item) => (
                <div key={item._id} className="rounded-xl border border-border/70 bg-secondary/20 p-4">
                  <div className="flex flex-wrap items-center justify-between gap-3">
                    <div>
                      <p className="text-sm font-semibold text-foreground">{item.title ?? item.type}</p>
                      <p className="mt-1 text-xs text-muted-foreground">{formatDateTime(item.createdAt)}</p>
                    </div>
                    <div className="flex flex-wrap gap-2">
                      <Badge variant={item.read ? "muted" : "warning"}>
                        {item.read ? "Read" : "New"}
                      </Badge>
                      <Badge>{item.type}</Badge>
                      <Badge variant="muted">{item.resourceType ?? "-"}</Badge>
                    </div>
                  </div>
                  <p className="mt-3 text-sm text-foreground">{item.previewText ?? item.body ?? "-"}</p>
                  {item.deepLink ? (
                    <p className="mt-2 text-xs text-muted-foreground">Deep link: {item.deepLink}</p>
                  ) : null}
                </div>
              ))}
            </div>
          )}
          <PaginationControls pagination={getPagination(response)} loading={loading} onPageChange={setPage} />
        </CardContent>
      </Card>
    </div>
  );
}