"use client";



import { Suspense } from "react";

import Link from "next/link";

import { useRouter } from "next/navigation";

import { FilterToolbar } from "@/components/design-system/filter-toolbar";

import { PageLayout } from "@/components/design-system/page-layout";

import { FilterSelect } from "@/components/ui/filter-select";

import { ListPagination } from "@/components/ui/list-pagination";

import { Button } from "@/components/ui/button";

import { Card } from "@/components/ui/card";

import { PriorityBadge } from "@/lib/status-badges";

import { useInstantList } from "@/hooks/use-instant-list";

import { useLocale } from "@/components/providers/locale-provider";



interface NotificationRow {

  _id: string;

  title: string;

  message?: string;

  priority: string;

  status: string;

  type: string;

  actionUrl?: string;

  createdAt: string;

}



const DEFAULT_FILTERS = { status: "", priority: "" };



function NotificationsListInner({

  initialData,

  initialPagination,

}: {

  initialData: NotificationRow[];

  initialPagination: { total?: number; totalPages?: number };

}) {

  const router = useRouter();

  const { locale, t } = useLocale();

  const {

    data,

    loading,

    totalPages,

    page,

    setPage,

    values,

    setFilters,

    clearFilters,

    activeChips,

    refetch,

  } = useInstantList<NotificationRow>({

    apiPath: "/api/notifications",

    defaultFilters: DEFAULT_FILTERS,

    initialData,

    initialPagination: {

      totalPages: initialPagination.totalPages ?? 1,

    },

    limit: 25,

  });



  async function markRead(id: string) {

    await fetch(`/api/notifications/${id}/read`, { method: "PATCH" });

    await refetch();

    router.refresh();

  }



  async function markAllRead() {

    await fetch("/api/notifications/read-all", { method: "POST" });

    await refetch();

    router.refresh();

  }



  async function remove(id: string) {

    await fetch(`/api/notifications/${id}`, { method: "DELETE" });

    await refetch();

  }



  return (

    <PageLayout

      title={locale === "ar" ? "الإشعارات" : "Notifications"}

      description={

        locale === "ar"

          ? `إجمالي ${initialPagination.total ?? data.length}`

          : `Total ${initialPagination.total ?? data.length}`

      }

      actions={

        <Button type="button" variant="outline" size="sm" onClick={() => void markAllRead()}>

          {locale === "ar" ? "تعليم الكل كمقروء" : "Mark all read"}

        </Button>

      }

    >

      <FilterToolbar

        chips={activeChips.map((c) => ({ key: c.key, value: c.value }))}

        onClear={clearFilters}

      >

        <FilterSelect

          value={values.status}

          onChange={(v) => setFilters({ status: v })}

          options={["unread", "read"]}

          allLabel={locale === "ar" ? "كل الحالات" : "All statuses"}

        />

        <FilterSelect

          value={values.priority}

          onChange={(v) => setFilters({ priority: v })}

          options={["critical", "high", "medium", "low"]}

          allLabel={locale === "ar" ? "كل الأولويات" : "All priorities"}

        />

      </FilterToolbar>



      {loading && data.length === 0 ? (

        <p className="text-sm text-muted-foreground">{t.loading}</p>

      ) : null}



      <Card className="divide-y divide-border overflow-hidden">

        {data.map((row) => (

          <div

            key={row._id}

            className={`flex min-h-[44px] flex-wrap items-start justify-between gap-3 p-4 ${

              row.status === "unread" ? "bg-primary/5" : ""

            }`}

          >

            <div className="min-w-0 flex-1">

              <p className="font-semibold">{row.title}</p>

              {row.message ? (

                <p className="mt-1 text-sm text-muted-foreground">{row.message}</p>

              ) : null}

              <div className="mt-2 flex flex-wrap items-center gap-2">

                <PriorityBadge value={row.priority} />

                <span className="text-xs text-muted-foreground">

                  {row.type} ·{" "}

                  {new Date(row.createdAt).toLocaleString(

                    locale === "ar" ? "ar-SA" : "en-US"

                  )}

                </span>

              </div>

            </div>

            <div className="flex flex-wrap gap-2">

              {row.actionUrl ? (

                <Button variant="outline" size="sm" asChild>

                  <Link href={row.actionUrl}>

                    {locale === "ar" ? "فتح" : "Open"}

                  </Link>

                </Button>

              ) : null}

              {row.status === "unread" ? (

                <Button

                  type="button"

                  variant="outline"

                  size="sm"

                  onClick={() => void markRead(row._id)}

                >

                  {locale === "ar" ? "مقروء" : "Read"}

                </Button>

              ) : null}

              <Button

                type="button"

                variant="destructive"

                size="sm"

                onClick={() => void remove(row._id)}

              >

                {locale === "ar" ? "حذف" : "Delete"}

              </Button>

            </div>

          </div>

        ))}

        {data.length === 0 && !loading ? (

          <p className="p-8 text-center text-sm text-muted-foreground">

            {locale === "ar" ? "لا توجد إشعارات" : "No notifications"}

          </p>

        ) : null}

      </Card>



      <ListPagination

        page={page}

        totalPages={totalPages}

        loading={loading}

        onPageChange={setPage}

      />

    </PageLayout>

  );

}



export function NotificationsList(props: {

  initialData: NotificationRow[];

  initialPagination: { total: number; totalPages?: number };

}) {

  return (

    <Suspense fallback={<div className="p-8 text-muted-foreground">...</div>}>

      <NotificationsListInner {...props} />

    </Suspense>

  );

}