"use client";
import { useRef } from "react";
import { useTranslations } from "next-intl";
import axiosInstance from "@/utils/axiosClient";
import ShowAlertMixin from "@/shared/ShowAlertMixin";
import { usePathname } from "next/navigation";
import AppPagination from "@/shared/Pagination/AppPagination";
import { updateURLParams } from "@/utils/helpers";
import { useRouter } from "nextjs-toploader/app";
import EmptyNotifications from "./EmptyNotifications";
const NotificationsData = ({
  notifications,
  paggination,
  current_page,
  refetch,
}: {
  notifications: {
    id: string;
    title: string;
    body: string;
    type: string;
    created_at: string;
    is_read: boolean;
    notify_id: string;
  }[];
  paggination: any;
  current_page: any;
  refetch: () => void;
}) => {
  const t = useTranslations("");
  const markAsRead = async (id: any) => {
    await axiosInstance
      .post(`notifications/mark-as-read/${id}`)
      .then((res: any) => {
        ShowAlertMixin({
          icon: "success",
          title: res.data.message,
        });
        refetch();
      })
      .catch((error) => {
        const errorMessage = error?.response?.data?.message;
        ShowAlertMixin({
          icon: "error",
          title: errorMessage,
        });
      });
  };

  const router = useRouter();
  const pathname = usePathname();
  const containerRef = useRef<HTMLDivElement | null>(null);

  const handlePaggination = (selectedPage: any) => {
    updateURLParams({
      params: { page: selectedPage },
      router: router,
      pathname: pathname,
    });
    setTimeout(() => {
      if (containerRef.current) {
        containerRef.current.scrollIntoView({
          behavior: "smooth",
          block: "start",
        });
      }
    }, 300);
  };

  return (
    <div ref={containerRef}>
      <section className="relative bg-gradient-to-br from-primary-light to-white overflow-hidden lg:pt-0 pt-20">
        <div className="container py-8 md:py-12">
          <div className="text-center max-w-3xl mx-auto">
            <div className="inline-flex items-center gap-2 bg-white px-4 py-2 rounded-full mb-4 shadow-sm">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="lucide lucide-sparkles text-primary"
              >
                <path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path>
                <path d="M20 3v4"></path>
                <path d="M22 5h-4"></path>
                <path d="M4 17v2"></path>
                <path d="M5 18H3"></path>
              </svg>
              <span className="text-sm">{t("Text.new")}</span>
            </div>
            <h1 className="text-3xl md:text-4xl mb-4 text-text-primary">
              {t("NAV.notifications")}
            </h1>
            <p className="text-base md:text-lg text-text-secondary leading-relaxed">
              {t("Text.follow_updates")}
            </p>
          </div>
        </div>
      </section>
      <div className="container max-w-4xl py-12">
        <h1 className="text-3xl md:text-4xl mb-6"> {t("NAV.notifications")}</h1>
        <div className="space-y-3">
          {notifications?.length > 0 ? (
            notifications?.map((notify: any, index: number) => (
              <div
                onClick={() => markAsRead(notify?.id)}
                key={index}
                className={`border rounded-2xl shadow-md shadow-black/10 bg-white p-4 cursor-pointer transition-all duration-300 ${
                  +notify.is_read === 1
                    ? "border-gray-200 opacity-60"
                    : " hover:shadow-lg border-l-4 border-primary"
                }`}
              >
                <div className="flex gap-4">
                  <div className="flex-shrink-0 w-10 h-10 bg-gray-50 rounded-full flex items-center justify-center">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="20"
                      height="20"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="lucide lucide-package *:stroke-primary"
                    >
                      <path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"></path>
                      <path d="M12 22V12"></path>
                      <polyline points="3.29 7 12 12 20.71 7"></polyline>
                      <path d="m7.5 4.27 9 5.15"></path>
                    </svg>
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-start justify-between gap-2 mb-1">
                      <h3 className="">{notify.title}</h3>
                      {+notify.is_read === 0 && (
                        <span className="w-2 h-2 bg-primary rounded-full flex-shrink-0 mt-2"></span>
                      )}
                    </div>
                    <p className="text-sm text-text-secondary mb-2">
                      {notify.body}
                    </p>
                    <p className="text-xs text-text-secondary">
                      {notify.created_at}
                    </p>
                  </div>
                </div>
              </div>
            ))
          ) : (
            <EmptyNotifications />
          )}
        </div>
        {notifications?.length > 0 && (
          <div className="py-8">
            <AppPagination
              itemsPerPage={paggination?.per_page}
              totalItems={paggination?.total}
              totalPage={paggination?.last_page}
              currentPage={+current_page}
              paginate={handlePaggination}
            />
          </div>
        )}
      </div>
    </div>
  );
};

export default NotificationsData;