"use client";

import { useAppDispatch, useAppSelector } from "@/app/store/hooks";
import { RootState } from "@/app/store/store";
import Button from "@/components/common/Button";
import Loader from "@/components/common/Loader";
import MobilePageHeader from "@/components/common/MobilePageHeader";
import RouteLoader from "@/components/common/RouteLoader";
import PaymentModal from "@/components/PaymentModal";
import {
  getSubscriptions,
  subscribeOrUpdateTier,
} from "@/lib/actions/subscriptionsAction";
import { checkAuthErrorGet } from "@/lib/checkAuthError";
import { getStoredLocale } from "@/lib/getLocale";
import axios from "axios";
import { CheckCircle2 } from "lucide-react";
import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { toast } from "react-toastify";
interface TierPlan {
  tierNumber?: number | string;
  tierName?: string;
}
interface TierData {
  id: string;
  title: string;
  slug: string;
  description: string;
  status: string;
  tierNumber: string;
  maxPostedListings: number;
  listingDurationDays: number;
  annualSubscription: number;
  applicableFeePercent: number;
  maxFee: number;
  tierPlan?: TierPlan;
  tierName: any;
  createdAt: string;
  updatedAt: string;
}

type Feature = {
  label: string;
  available: boolean;
};

type Plan = {
  id: string;
  image: string;
  title: string;
  description: string;
  price: string;
  yearly?: boolean;
  current: boolean;
  features: Feature[];
  buttonLabel: string;
};

interface UserTier {
  _id: string;
  userId: string;
  createdAt: string;
  remainingPosts: number;
  status: string;
  tierId: string;
  tierSnapshot: {
    title: string;
    description: string;
    maxPostedListings: number;
    listingDurationDays: number;
    annualSubscription: number;
    applicableFeePercent: number;
    maxFee: number;
    tierPlan: TierPlan;
  };
  updatedAt: string;
}

export default function Subscription() {
  const { user } = useAppSelector((state: RootState) => state.auth);
  const dispatch = useAppDispatch();
  const router = useRouter();
  const locale = getStoredLocale();
  const t = useTranslations();
  const [plans, setPlans] = useState<Plan[]>([]);
  const [isFetchingPlans, setIsFetchingPlans] = useState(false);
  const [isUpgrading, setIsUpgrading] = useState(false);
  const [showConfirmModal, setShowConfirmModal] = useState<null | "on">(null);
  const [showPaymentModal, setShowPaymentModal] = useState(false);
  const [selectedTier, setSelectedTier] = useState<string>("");
  const [currentTier, setCurrentTier] = useState<string>("");

  const [activeSubscription, setActiveSubscription] = useState<UserTier | null>(
    null
  );

  const handleBack = () => window.history.back();

  useEffect(() => {
    if (!user?.token) return;

    const fetchSubscriptions = async () => {
      setIsFetchingPlans(true);
      try {
        const response: any = await getSubscriptions(user.token);
        if (response?.success && Array.isArray(response?.tierData)) {
          const tierData: TierData[] = response.tierData.reverse();

          // ✅ Extract subscription details
          const subscriptionUserId = response.subscription?.userId;
          setActiveSubscription(response.subscription);
          const activeTierId = response.subscription?.tierId;

          setPlans(
            convertData(
              tierData,
              activeTierId,
              subscriptionUserId,
              user?.id,
              response.subscription
            )
          );
        }
      } catch (error: any) {
        if (checkAuthErrorGet(error, dispatch, router)) return;
        toast.error(
          error?.response?.data?.message || t("validation.error_msg")
        );
      } finally {
        setIsFetchingPlans(false);
      }
    };

    fetchSubscriptions();
  }, [user?.token, locale]);

  const convertData = (
    tiers: TierData[],
    activeTierId?: string,
    subscriptionUserId?: string,
    loggedInUserId?: string,
    activeSubscription?: any
  ): Plan[] => {
    const defaultImage = "/default.png";

    let activeTierLevel = -1;

    if (activeTierId && subscriptionUserId === loggedInUserId) {
      const activeTier = tiers.find((tier) => tier.id === activeTierId);
      if (activeTier) {
        activeTierLevel = Number(activeTier.slug.split("-")[1]);
      }
    }

    return tiers.map((tier, index) => {
      // ✅ Handle tierPlan being object OR string
      let tierName = "";
      if (typeof tier?.tierPlan === "object" && tier?.tierPlan !== null) {
        tierName = tier?.tierPlan?.tierName || "";
      } else if (typeof tier?.tierPlan === "string") {
        tierName = tier.tierPlan;
      }

      const imageName = tierName
        ? `/${tierName.toLowerCase().trim()}.png`
        : defaultImage;

      const tierNumber = tier?.tierNumber || "default";

      const price =
        tier?.annualSubscription === 0 && index == 0
          ? t("subscription.user_satus")
          : tier?.annualSubscription === 0
          ? t("subscription.free")
          : `${process.env.NEXT_PUBLIC_CURRENCY_TYPE} ${tier.annualSubscription}`;

      // ✅ Mark as current if it matches activeTierId and user owns it
      const isCurrent =
        subscriptionUserId === loggedInUserId && activeTierId === tier.id;

      let currentTier = Number(tier.slug.split("-")[1]);

      const canSell = (tier.maxPostedListings ?? 0) > 0;

      const features: Feature[] = [
        { label: t("subscription.features.can_buy"), available: true },
        { label: t("subscription.features.can_sell"), available: canSell },
        {
          label: `${t("subscription.features.max_listings")}: ${
            tier.maxPostedListings ?? 0
          }`,
          available: canSell,
        },
        {
          label: `${t("subscription.features.listing_duration")}: ${
            tier.listingDurationDays ?? 0
          } ${t("subscription.features.days")}`,
          available: canSell,
        },
        {
          label: `${t("subscription.features.fee")}: ${
            tier.applicableFeePercent ?? 0
          }% (${t("subscription.features.per_item")})`,
          available: canSell,
        },
        {
          label: `${t("subscription.features.fee_starts_above")}: ${
            process.env.NEXT_PUBLIC_CURRENCY_TYPE
          } 1000 (${t("subscription.features.per_item")})`,
          available: canSell,
        },
        {
          label: `${t("subscription.features.max_fee_cap")}: ${
            process.env.NEXT_PUBLIC_CURRENCY_TYPE
          } ${tier.maxFee ?? 0} (${t("subscription.features.per_item")})`,
          available: canSell,
        },
      ];

      let buttonLabel = "";
      if (isCurrent) {
        if (activeSubscription && activeSubscription?.remainingPosts > 0) {
          buttonLabel = t("subscription.button.your_current_plan");
        } else {
          buttonLabel = t("subscription.button.expired");
        }
      } else if (currentTier > activeTierLevel) {
        buttonLabel = `${t("subscription.button.upgrade_to")} ${
          tierName || tierNumber
        }`;
      } else {
        if (tierNumber.includes("0")) {
          buttonLabel = `Unsuspend ${tierName || tierNumber}`;
        } else {
          buttonLabel = `${t("subscription.button.downgrade_to")} ${
            tierName || tierNumber
          }`;
        }
      }

      return {
        id: tier?.id,
        image: imageName,
        title: tierName || t("subscription.untitled_plan"),
        description: tier.description || "",
        price,
        yearly: (tier.annualSubscription ?? 0) > 0,
        current: isCurrent,
        features,
        buttonLabel,
      };
    });
  };

  // -------------------
  // Confirm upgrade for free plans
  // -------------------
  const handleUpgrade = async () => {
    if (!selectedTier?.trim()) {
      toast.error(t("subscription.modal.no_plan_selected"));
      return;
    }
    setIsUpgrading(true);
    try {
      const response: any = await subscribeOrUpdateTier(
        user.token,
        selectedTier
      );
      if (response?.success) {
        toast.success(t("subscription.modal.tier_subscribed"));

        // ✅ Immediately update current tier and highlight plan
        setCurrentTier(selectedTier);
        setPlans((prevPlans) => {
          const selectedIndex = prevPlans.findIndex(
            (plan) => plan.id === selectedTier
          );

          return prevPlans.map((plan, index) => {
            if (plan.id === selectedTier) {
              return {
                ...plan,
                current: true,
                buttonLabel: t("subscription.button.your_current_plan"),
              };
            } else if (index < selectedIndex) {
              return {
                ...plan,
                current: false,
                buttonLabel: `${t("subscription.button.downgrade_to")} ${
                  plan.title
                }`,
              };
            } else {
              return {
                ...plan,
                current: false,
                buttonLabel: `${t("subscription.button.upgrade_to")} ${
                  plan.title
                }`,
              };
            }
          });
        });

        setShowConfirmModal(null);
      } else {
        toast.error(
          response?.message || t("subscription.modal.upgrade_failed")
        );
      }
    } catch (error: any) {
      if (checkAuthErrorGet(error, dispatch, router)) return;
      toast.error(error?.response?.data?.message || t("validation.error_msg"));
    } finally {
      setIsUpgrading(false);
    }
  };

  const handlePaymentSubmit = async (values: any) => {
    if (!selectedTier)
      return toast.error(t("subscription.modal.no_plan_selected"));

    const plan = plans.find((p) => p.id === selectedTier);
    if (!plan) return toast.error(t("subscription.modal.plan_not_found"));
    if (!user?.id || !user?.token)
      if (!user?.id || !user?.token)
        return toast.error(t("subscription.modal.user_not_authenticated"));

    setIsUpgrading(true);
    try {
      const amountNumber =
        typeof plan.price === "string"
          ? Number(plan.price.replace(/[^\d.-]/g, "")) || 0
          : plan.price || 0;

      const paymentData = {
        amount: amountNumber,
        currency: process.env.NEXT_PUBLIC_CURRENCY_TYPE || "SAR",
        paymentBrand: values.paymentMethod,
        card_number: values.cardNumber,
        holder: values.cardholderName,
        expiryMonth: values.expiryMonth,
        expiryYear: values.expiryYear,
        cvv: values.cvc,
      };

      // Call our API route
      const response = await fetch("/api/subscriber", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          payment: paymentData,
          subscriptionTier: selectedTier,
          userId: user?.id,
          token: user?.token,
        }),
      });

      const result = await response.json();

      if (response.ok && result.success) {
        toast.success(
          result?.message || t("subscription.modal.subscription_successful")
        );
        setCurrentTier(selectedTier);
        setPlans((prevPlans) =>
          prevPlans.map((plan) => ({
            ...plan,
            current: plan.id === selectedTier, // instantly mark selected as current
            buttonLabel:
              plan.id === selectedTier
                ? t("your_current_plan")
                : `${t("upgrade_to")} ${plan.title}`,
          }))
        );
        setShowPaymentModal(false);
      } else {
        toast.error(
          result?.message || t("subscription.modal.subscription_failed")
        );
      }
    } catch (err: any) {
      if (checkAuthErrorGet(err, dispatch, router)) return;
      toast.error(t("subscription.modal.payment_failed"));
    } finally {
      setIsUpgrading(false);
    }
  };

  // -------------------
  // Modal Esc key support
  // -------------------
  useEffect(() => {
    const handleEsc = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        setShowConfirmModal(null);
        setShowPaymentModal(false);
      }
    };
    window.addEventListener("keydown", handleEsc);
    return () => window.removeEventListener("keydown", handleEsc);
  }, []);

  if (isFetchingPlans) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <Loader />
      </div>
    );
  }

  return (
    <RouteLoader>
      <MobilePageHeader title={t("subscription.title")} onBack={handleBack} />
      <main className="flex-1 max-md:px-0">
        <h1 className="text-lg font-bold mb-6 text-neutrals900 dark:text-white max-md:hidden">
          {t("subscription.title")}
        </h1>

        <div className="p-5 border border-neutrals100 dark:border-darkborder max-md:p-0 max-md:border-hidden">
          <h2 className="text-lg font-bold text-gray-800 dark:text-neutrals200 mb-1">
            {t("subscription.header_title")}
          </h2>
          <p className="text-base text-gray-500 max-w-2xl mb-10 dark:text-neutrals400 max-md:mb-5 max-md:text-sm">
            {t("subscription.header_description")}
          </p>

          {isFetchingPlans ? (
            <div>{t("subscription.loading")}</div>
          ) : plans.length === 0 ? (
            <div>{t("subscription.no_plans")}</div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-6 2xl:grid-cols-4">
              {plans.map((plan, ind) => {
                const planPriceNumber =
                  typeof plan.price === "string"
                    ? Number(plan.price.replace(/[^\d.-]/g, ""))
                    : plan.price;

                return (
                  <div
                    key={plan.id}
                    className={`rounded-xl border p-6 flex flex-col justify-between shadow-sm transition-all duration-300
                    ${
                      plan.current
                        ? "border-primary500/50 shadow-xl scale-[1.02] bg-primary400/5 dark:bg-primary400 dark:border-primary400" // highlighted
                        : "border-gray-200 bg-white hover:shadow-md dark:bg-darkbg dark:border-darkborder"
                    }
                  `}
                  // className={`rounded-xl border ${
                  //   plan.current
                  //     ? "border-primary-500 shadow-md hover:border-primary500 dark:hover:border-primary400"
                  //     : "border-neutrals200 dark:border-darkborder hover:border-primary500 dark:hover:border-primary400"
                  // } bg-white p-6 flex flex-col justify-between shadow-sm dark:bg-card dark:border-darkborder`}
                  >
                    <div>
                      <div className="flex flex-col max-md:flex-row max-md:gap-5 max-md:border-b max-md:border-neutrals200 max-md:mb-2.5">
                        <div className="w-12 h-12 rounded-lg bg-neutrals100 mb-3">
                          {/* <img src={plan.image} alt="" /> */}
                          <img src={`/sub_image_${ind}.png`} alt="" />
                        </div>
                        <div className="w-[calc(100%-48px)]">
                          <h3 className="text-xl font-bold text-neutrals800 mb-1 dark:text-neutrals100">
                            {plan.title}
                          </h3>
                          <p className="text-sm text-gray-500 mb-4 dark:text-neutrals300 max-md:mb-1">
                            {plan.description}
                          </p>
                          <div className="text-xl font-bold text-gray-900 mb-4 dark:text-neutrals300 max-md:text-lg max-md:font-medium max-md:mb-2">
                            {plan.price}{" "}
                            {plan.yearly && (
                              <span className="text-sm font-normal">
                                {t("subscription.per_year")}
                              </span>
                            )}
                          </div>
                        </div>
                      </div>

                      <ul className="text-sm space-y-2 mb-6">
                        {plan.features.map((feature, idx) => {
                          const [labelName, labelValue] =
                            feature.label.split(/:(.+)/);
                          return (
                            <li
                              key={idx}
                              className={`flex items-center gap-2 ${
                                feature.available
                                  ? "text-green-600"
                                  : "text-red-500"
                              }`}
                            >
                              <span>{feature.available ? "✓" : "✕"}</span>
                              <span className="text-sm text-neutrals500 dark:text-neutrals200">
                                {labelValue ? (
                                  <>
                                    {labelName}:
                                    <span className="font-semibold text-neutrals500 dark:text-neutrals200">
                                      {labelValue}
                                    </span>
                                  </>
                                ) : (
                                  feature.label
                                )}
                              </span>
                            </li>
                          );
                        })}
                      </ul>
                    </div>
                    {ind === 0 ? (
                      <>
                        <div className="w-full py-3 px-4 rounded-lg text-sm font-semibold transition-all duration-300 bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white shadow-md hover:shadow-lg flex items-center justify-center gap-2">
                          <CheckCircle2 size={18} />
                          {t("unsuspend")}
                        </div>
                      </>
                    ) : (
                      <button
                        onClick={() => {
                          setSelectedTier(plan?.id);
                          if (planPriceNumber > 0) {
                            setShowPaymentModal(true);
                          } else {
                            setShowConfirmModal("on");
                          }
                        }}
                        className={`w-full py-2 px-4 rounded-md text-sm font-medium cursor-pointer ${
                          plan.current
                            ? "border border-primary500 text-primary500 hover:bg-primary500 hover:text-white dark:text-white dark:border-white dark:hover:bg-white dark:hover:text-primary400"
                            : "border border-primary500 text-primary500 hover:bg-primary500 hover:text-white dark:text-primary400 dark:border-primary400 dark:hover:bg-primary400 dark:hover:text-white"
                        }`}
                      >
                        {plan.buttonLabel}
                      </button>
                    )}
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </main>

      {/* Confirm Modal for Free Plans */}
      {showConfirmModal && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-30"
          onClick={() => setShowConfirmModal(null)}
        >
          <div
            onClick={(e) => e.stopPropagation()}
            className="bg-white rounded-xl shadow-2xl p-6 w-full max-w-sm dark:bg-darkbg transition-all"
          >
            <div className="mb-4">
              <h2 className="text-lg font-semibold text-neutrals800 dark:text-neutrals100">
                {t("subscription.modal.confirm_upgrade")}
              </h2>
              <p className="mt-2 text-sm text-neutrals600 dark:text-neutrals300">
                {t("subscription.modal.confirm_message")}
              </p>
            </div>

            <hr className="my-4 border-t border-neutrals200 dark:border-neutrals700" />

            <div className="flex justify-end gap-3">
              <Button
                variant="outline"
                onClick={() => setShowConfirmModal(null)}
                label={t("subscription.button.cancel")}
              />
              <Button
                label={
                  isUpgrading
                    ? t("subscription.button.upgrading")
                    : t("subscription.button.confirm")
                }
                type="button"
                onClick={handleUpgrade}
                disabled={isUpgrading}
                variant="outline"
              />
            </div>
          </div>
        </div>
      )}

      {/* Payment Modal for Paid Plans */}
      {showPaymentModal && (
        <PaymentModal
          onClose={() => setShowPaymentModal(false)}
          onSubmit={handlePaymentSubmit}
          isSubmitting={isUpgrading}
        />
      )}
    </RouteLoader>
  );
}