"use client";
import { Subscription } from "@/interfaces/types";
import LocalePath from "@/shared/LocalePath";
import { Package, Heart } from "lucide-react";
import { useLocale, useTranslations } from "next-intl";
import Swal from "sweetalert2";
import Failed from "@/assets/images/failed.gif";
import UseSession from "@/hooks/UseSession";
import { useRouter } from "nextjs-toploader/app";
import { usePathname } from "next/navigation";
import { useRef } from "react";
import { updateURLParams } from "@/utils/helpers";
import AppPagination from "@/shared/Pagination/AppPagination";
import { RS } from "@/shared/Icons";

type Props = {
  subscriptions: Subscription[];
  paggination: any;
  current_page: number;
};

export default function SubscriptionsDetails({
  subscriptions,
  paggination,
  current_page,
}: Props) {
  const router = useRouter();
  const t = useTranslations();
  const locale = useLocale();
  const session = UseSession();
  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} className="container py-8 md:py-12">
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        {subscriptions.map((subscription) => (
          <div
            key={subscription?.id}
            className="relative group overflow-hidden bg-white border-2 border-primary/10 rounded-3xl shadow-lg shadow-black/7 transition-all duration-500 hover:shadow-xl hover:shadow-primary/20 hover:-translate-y-1"
          >
            <div className="p-8 flex flex-col gap-5">
              <div className="flex items-center gap-3.5">
                <div className="w-13 h-13 rounded-2xl bg-primary/10 border border-primary/20 flex-shrink-0 flex items-center justify-center">
                  <Package className="w-6 h-6 text-primary" />
                </div>
                <div>
                  <p className="text-xs text-text-secondary mb-0.5">
                    {t("Text.package")}
                  </p>
                  <h3 className="m-0 text-text-primary text-lg font-bold">
                    {subscription?.name}
                  </h3>
                </div>
              </div>
              <div className="relative">
                <div className="flex items-baseline gap-1.5">
                  <span className="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-primary to-primary-dark leading-none tracking-tight">
                    {subscription?.price}
                  </span>
                  <div className="flex flex-col">
                    <div className="text-lg font-bold text-primary">
                      <RS className="size-8 *:fill-primary" />
                    </div>
                    <div className="text-sm text-text-secondary whitespace-nowrap font-medium">
                      {t("Text.every")} {subscription?.period_formatted}
                    </div>
                  </div>
                </div>
              </div>
              <p className="m-0 text-sm text-text-secondary leading-relaxed">
                {subscription?.description}
              </p>
              <div className="h-px bg-primary/10"></div>

              {session ? (
                <LocalePath
                  href={`/subscriptions/${subscription?.id}`}
                  className="w-full py-3.5 rounded-xl border-2 border-primary bg-primary text-white font-bold text-base hover:bg-primary-dark transition-all duration-300 flex items-center justify-center gap-2 group-hover:shadow-lg"
                >
                  <Heart className="w-4 h-4 fill-white" />
                  {t("Text.subscribe_now")}
                </LocalePath>
              ) : (
                <button
                  className="w-full py-3.5 rounded-xl border-2 border-primary bg-primary text-white font-bold text-base hover:bg-primary-dark transition-all duration-300 flex items-center justify-center gap-2 group-hover:shadow-lg"
                  onClick={() => {
                    Swal.fire({
                      showConfirmButton: false,
                      title: t("session_expired_to_subscription"),
                      imageUrl: `${Failed.src}`,
                      imageHeight: "100px",
                      imageWidth: "100px",
                      footer: `<a href="${
                        locale == "ar" ? "" : "/en"
                      }/auth/login" id="swal2-footer"> ${t("NAV.login")}</a>`,
                      customClass: {
                        popup: "custom-popup-class",
                        title: "custom-title-class",
                        footer: "custom-footer-class",
                      },
                      padding: "1rem",
                      didOpen: () => {
                        const footerLink =
                          document.getElementById("swal2-footer");
                        if (footerLink) {
                          footerLink.addEventListener("click", () => {
                            Swal.close();
                            router.replace(
                              `${locale == "ar" ? "" : "/en"}/auth/login`,
                            );
                          });
                        }
                      },
                    });
                  }}
                >
                  {t("Text.subscribe_now")}
                </button>
              )}
            </div>
          </div>
        ))}
      </div>
      <div className="py-8">
        <AppPagination
          itemsPerPage={paggination?.per_page}
          totalItems={paggination?.total}
          totalPage={paggination?.last_page}
          currentPage={+current_page}
          paginate={handlePaggination}
        />
      </div>
    </div>
  );
}