import Pagination from '@/components/Pagination';
import { m } from '@/paraglide/messages';
import { notificationQueries } from '@/service/queries';
import NotificationItem from '@components/notification/notification-item';
import { BellRingingIcon } from '@phosphor-icons/react';
import { useQuery } from '@tanstack/react-query';
import { createFileRoute } from '@tanstack/react-router';
import { Card, CardHeader, CardTitle } from '@ui/card';
import { useState } from 'react';

export const Route = createFileRoute('/(app)/(auth)/management/notifications')({
  component: RouteComponent,
  staticData: { breadcrumb: () => m.ui_label_notifications() },
});

function RouteComponent() {
  const [page, setPage] = useState(1);
  const { data, isLoading } = useQuery(
    notificationQueries.list({
      page,
      limit: 10,
    }),
  );

  if (isLoading) return null;

  return (
    <div className="@container/main p-4">
      <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card *:data-[slot=card]:bg-linear-to-br *:data-[slot=card]:shadow-xs">
        <Card>
          <CardHeader>
            <CardTitle className="text-xl flex items-center gap-2">
              <BellRingingIcon
                size={24}
                className="origin-top animate-bell-ring"
              />
              {m.ui_label_notifications()}
            </CardTitle>
          </CardHeader>
        </Card>
        {data && data.result.length > 0 ? (
          <div className="mt-5 max-w-200 min-w-107 mx-auto flex flex-col gap-5">
            {data.result.map((notify) => {
              return <NotificationItem notify={notify} key={notify.id} />;
            })}
            <Pagination
              currentPage={page}
              totalPages={data?.pagination.totalPage}
              onPageChange={setPage}
            />
          </div>
        ) : (
          <div className="mt-5 max-w-full h-50 mx-auto flex justify-center items-center">
            {m.common_no_notify()}
          </div>
        )}
      </div>
    </div>
  );
}
