"use client";
import React, { useRef } from "react";
import EmptySubscriptions from "./EmptySubscriptions";
import { Subscriptions } from "@/interfaces/types";
import { usePathname } from "next/navigation";
import { updateURLParams } from "@/utils/helpers";
import AppPagination from "@/shared/Pagination/AppPagination";
import { useRouter } from "nextjs-toploader/app";
import { useTranslations } from "next-intl";
import MediaWithFallback from "@/shared/MediaWithFallback";
import { RS } from "@/shared/Icons";

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

export default function SubscriptionsIndex({
  type,
  subscriptions,
  paggination,
  current_page,
}: Props) {
  const t = useTranslations();
  const types = [
    { label: t("status.all"), value: "all" },
    { label: t("status.pending"), value: "pending" },
    { label: t("status.accepted"), value: "accepted" },
  ];
  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 className="container max-w-6xl" ref={containerRef}>
      <h1 className="text-3xl md:text-4xl mb-8">{t("NAV.subscriptions")}</h1>
      <div className="flex gap-2 mb-8 overflow-x-auto">
        {types?.map((ele, index) => {
          return (
            <button
              key={index}
              onClick={() =>
                updateURLParams({
                  params: { type: ele?.value },
                  router,
                  pathname,
                  page: true,
                })
              }
              className={`px-6 py-2 rounded-lg whitespace-nowrap transition-all duration-300 ${
                type === ele?.value
                  ? "bg-primary text-white"
                  : "bg-white border border-gray-200 hover:bg-gray-50"
              }`}
            >
              {ele?.label}
            </button>
          );
        })}
      </div>
      {subscriptions?.length > 0 ? (
        <div className="space-y-4">
          {subscriptions?.map((subscription, index: number) => (
            <div
              key={subscription?.id || index}
              className="border border-gray-200 rounded-2xl shadow-md shadow-black/10 bg-white p-6"
            >
              <div className="flex flex-wrap items-start justify-between gap-4 mb-6 pb-6 border-b border-gray-200">
                <div>
                  <div className="flex items-center gap-3 mb-2">
                    <h3 className="text-lg font-semibold">
                      {t("Text.subscription")} #{subscription?.id}
                    </h3>
                    <span
                      className={`statuses px-3 py-1 rounded-full text-xs font-medium statuses ${subscription?.status}`}
                    >
                      {subscription?.status}
                    </span>
                  </div>
                  <div className="flex items-center gap-2 text-sm text-text-secondary">
                    <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-calendar"
                    >
                      <path d="M8 2v4"></path>
                      <path d="M16 2v4"></path>
                      <rect width="18" height="18" x="3" y="4" rx="2"></rect>
                      <path d="M3 10h18"></path>
                    </svg>
                    <span>
                      {subscription?.start_date} - {subscription?.end_date}
                    </span>
                  </div>
                </div>
                <div className="text-left">
                  <p className="text-2xl text-primary flex items-center gap-1">
                    {subscription?.price}
                    <RS className="*:fill-primary" />
                  </p>
                </div>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                <div className="flex gap-3">
                  <MediaWithFallback
                    src={subscription?.product?.image}
                    alt={subscription?.product?.name || "منتج"}
                    className="w-20 h-20 object-cover rounded-lg flex-shrink-0"
                  />
                  <div className="flex-1 min-w-0">
                    <p className="line-clamp-1 mb-1 font-medium">
                      {subscription?.product?.name}
                    </p>
                    <p className="text-sm text-text-secondary mb-1 line-clamp-2">
                      {subscription?.product?.description}
                    </p>
                    <div className="flex items-center justify-between">
                      <span className="text-xs text-text-secondary">
                        {t("Text.plan")}: {subscription?.subscription?.name}
                      </span>
                      <span className="text-sm text-primary font-medium flex items-center gap-1">
                        {subscription?.subscription?.price}
                        <RS className="*:fill-primary" />
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-[1.6fr_2fr] gap-4 p-4 bg-gray-50 rounded-lg">
                <div className="flex items-start gap-2">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="18"
                    height="18"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="lucide lucide-map-pin text-primary mt-1 flex-shrink-0"
                  >
                    <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path>
                    <circle cx="12" cy="10" r="3"></circle>
                  </svg>
                  <div>
                    <p className="text-sm text-text-secondary mb-1">
                      {t("Text.delivery_address")}
                    </p>
                    <p className="text-sm">
                      {subscription?.address?.location?.country?.name}-{" "}
                      {subscription?.address?.location?.city?.name}-{" "}
                      {subscription?.address?.location?.district?.name}
                    </p>
                    {subscription?.address?.description && (
                      <p className="text-xs text-text-secondary mt-1">
                        {subscription?.address?.description}
                      </p>
                    )}
                  </div>
                </div>
                <div className="grid lg:grid-cols-2 gap-6">
                  <div className="flex items-center justify-between py-2 border-b border-gray-100">
                    <div className="flex items-center gap-2">
                      <div className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="14"
                          height="14"
                          viewBox="0 0 24 24"
                          fill="none"
                          stroke="currentColor"
                          strokeWidth="2"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          className="text-gray-600"
                        >
                          <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
                        </svg>
                      </div>
                      <span className="text-sm text-gray-600">
                        {t("Text.subtotal")}
                      </span>
                    </div>
                    <span className="text-sm font-medium flex items-center gap-1">
                      {subscription?.price} <RS className="*:fill-gray-600" />
                    </span>
                  </div>

                  <div className="flex items-center justify-between py-2 border-b border-gray-100">
                    <div className="flex items-center gap-2">
                      <div className="w-8 h-8 rounded-full bg-blue-50 flex items-center justify-center">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="14"
                          height="14"
                          viewBox="0 0 24 24"
                          fill="none"
                          stroke="currentColor"
                          strokeWidth="2"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          className="text-blue-600"
                        >
                          <rect
                            width="18"
                            height="11"
                            x="3"
                            y="11"
                            rx="2"
                            ry="2"
                          ></rect>
                          <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                        </svg>
                      </div>
                      <span className="text-sm text-gray-600">
                        {t("Text.arrival_time")}
                      </span>
                    </div>
                    <span className="text-sm font-medium flex items-center gap-1">
                      {subscription?.arrival_time}
                    </span>
                  </div>

                  <div className="flex items-center justify-between py-2 border-b border-gray-100">
                    <div className="flex items-center gap-2">
                      <div className="w-8 h-8 rounded-full bg-green-50 flex items-center justify-center">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="14"
                          height="14"
                          viewBox="0 0 24 24"
                          fill="none"
                          stroke="currentColor"
                          strokeWidth="2"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          className="text-green-600"
                        >
                          <circle cx="12" cy="12" r="10"></circle>
                          <path d="M12 6v6l4 2"></path>
                        </svg>
                      </div>
                      <span className="text-sm text-gray-600">
                        {t("Text.orderTax")}
                      </span>
                    </div>
                    <span className="text-sm font-medium flex items-center gap-1">
                      {subscription?.tax_amount}
                      <RS className="*:fill-green-600" />
                    </span>
                  </div>

                  <div className="flex items-center justify-between py-2 border-b border-gray-100">
                    <div className="flex items-center gap-2">
                      <div className="w-8 h-8 rounded-full bg-primary flex items-center justify-center">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="14"
                          height="14"
                          viewBox="0 0 24 24"
                          fill="none"
                          stroke="currentColor"
                          strokeWidth="2"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          className="text-white"
                        >
                          <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
                        </svg>
                      </div>
                      <span className="text-sm text-primary">
                        {t("Text.total")}
                      </span>
                    </div>
                    <span className="text-sm font-medium text-primary flex items-center gap-1">
                      {subscription?.price} <RS className="*:fill-primary" />
                    </span>
                  </div>
                </div>
              </div>
              <div className="mt-4 p-4 bg-blue-50 rounded-lg">
                <p className="text-sm text-text-secondary mb-1">
                  {t("Text.subscription_details")}
                </p>
                <p className="text-sm font-medium">
                  {subscription?.subscription?.description}
                </p>
                <p className="text-xs text-text-secondary mt-1">
                  {t("Text.period")}:{" "}
                  {subscription?.subscription?.period_formatted}
                </p>
              </div>
              <div className="mt-4 p-4 bg-primary/10 rounded-lg">
                <p className="text-sm text-text-secondary mb-2">
                  {t("Text.subscriber_info")}
                </p>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm">
                  <div>
                    <span className="text-text-secondary">
                      {t("LABELS.name")}:
                    </span>
                    <span className="mr-2 font-medium">
                      {subscription?.name}
                    </span>
                  </div>
                  <div>
                    <span className="text-text-secondary">
                      {t("LABELS.username")}:
                    </span>
                    <span className="mr-2 font-medium">
                      {subscription?.username}
                    </span>
                  </div>
                  <div className="md:col-span-2">
                    <span className="text-text-secondary">
                      {t("LABELS.phone")}:
                    </span>
                    <span className="mr-2 font-medium inline-block" dir="ltr">
                      +{subscription?.phone_code} {subscription?.phone}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      ) : (
        <EmptySubscriptions />
      )}

      {subscriptions && subscriptions?.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>
  );
}