// src/pages/Plans.jsx
import React, { useEffect, useMemo, useState } from "react";
import { Axiosinstance } from "../services/auth/Axiosinstance";
import { useNavigate } from "react-router";
import { useToast } from "../components/ToastProvider";

import PageHeader from "../components/ui/PageHeader";
import Button from "../components/ui/Button";

import {
  LuRefreshCcw,
  LuBuilding2,
  LuUser,
  LuCalendarDays,
  LuCalendar,
} from "react-icons/lu";

import useCooldownAction from "../hooks/useCooldownAction";
import { getErrMsg } from "../utils/account";

import CurrentSubscriptionCard from "../components/plans/CurrentSubscriptionCard";
import PlanCard from "../components/plans/PlanCard";
import PlansSkeletonGrid from "../components/plans/PlansSkeletonGrid";

/* فقط برای کلاس‌ها */
function cn(...a) {
  return a.filter(Boolean).join(" ");
}

/* سوئیچ قرصی (مشابه لندینگ) */
function SwitchPill({ value, onChange, options, className = "" }) {
  return (
    <div
      className={cn(
        "inline-flex items-center p-1 rounded-2xl border border-black/10 bg-white shadow-sm dark:bg-neutral-900 dark:border-white/10",
        "gap-1 w-full sm:w-auto",
        className
      )}
      role="tablist"
    >
      {options.map((opt) => {
        const active = value === opt.value;
        const Icon = opt.icon;
        return (
          <button
            key={opt.value}
            type="button"
            onClick={() => onChange(opt.value)}
            className={cn(
              "flex-1 sm:flex-none inline-flex items-center justify-center gap-2",
              "px-3 py-2 rounded-xl text-sm font-semibold transition",
              active
                ? "bg-[#A1E3F980] border border-[#43BEFF]/30 text-black dark:text-black shadow"
                : "bg-transparent hover:bg-black/5 text-black/70 dark:text-white/70 dark:hover:bg-white/10"
            )}
            aria-pressed={active}
          >
            {Icon ? <Icon className="w-4 h-4" /> : null}
            {opt.label}
          </button>
        );
      })}
    </div>
  );
}

function Plans() {
  const navigate = useNavigate();
  const { success, error: toastError, info } = useToast();

  const [plans, setPlans] = useState([]);
  const [loading, setLoading] = useState(true);

  const [subscription, setSubscription] = useState(null);
  const [subLoading, setSubLoading] = useState(true);

  const [payingId, setPayingId] = useState(null);

  // سوییچ نوع پلن و دوره پرداخت
  const [planKind, setPlanKind] = useState("personal"); // personal | org
  const [billingCycle, setBillingCycle] = useState("monthly"); // monthly | yearly

  /* === fetch plans === */
  const fetchPlans = async ({ toast = false } = {}) => {
    setLoading(true);
    try {
      const res = await Axiosinstance.get("billing/plans/");
      setPlans(res.data || []);
      if (toast) {
        success("لیست پلن‌ها بروزرسانی شد.", { title: "پلن‌ها" });
      }
    } catch (e) {
      toastError(getErrMsg(e, "خطا در دریافت پلن‌ها"), { title: "خطا" });
    } finally {
      setLoading(false);
    }
  };

  /* === fetch subscription === */
  const fetchSubscription = async ({ toast = false } = {}) => {
    setSubLoading(true);
    try {
      const res = await Axiosinstance.get("billing/me/subscription/");
      setSubscription(res.data || null);
      if (toast) {
        success("اطلاعات اشتراک بروزرسانی شد.", { title: "اشتراک" });
      }
    } catch {
      setSubscription(null);
      if (toast) {
        info("اشتراک فعالی برای شما یافت نشد.", { title: "اشتراک" });
      }
    } finally {
      setSubLoading(false);
    }
  };

  /* === refresh with cooldown === */
  const refresh = useCooldownAction({
    cooldownMs: 3000,
    toastGapMs: 900,
    isBusy: loading || subLoading,
    busyMessage: "در حال بروزرسانی هستیم...",
    busyToast: info,
    title: "بروزرسانی",
    onRun: async () => {
      await Promise.all([
        fetchPlans({ toast: true }),
        fetchSubscription({ toast: true }),
      ]);
    },
  });

  useEffect(() => {
    fetchPlans();
    fetchSubscription();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  /* === filter & sort plans based on switches === */
  const filteredPlans = useMemo(() => {
    const arr = Array.isArray(plans) ? [...plans] : [];

    // فیلتر نوع پلن
    const kindFiltered = arr.filter((p) => {
      const t = String(p?.plan_type || "").toLowerCase();
      if (planKind === "org") {
        return (
          t === "org" ||
          t === "organization" ||
          t === "organisation" ||
          t === "organisational"
        );
      }
      return t === "personal" || t === "user";
    });

    // فیلتر دوره پرداخت
    const cycleFiltered = kindFiltered.filter((p) => {
      if (billingCycle === "yearly") return p?.yearly_enabled === true;
      // ماهیانه: اگر صراحتاً false نباشد، قابل نمایش است
      return p?.monthly_enabled !== false;
    });

    // مرتب‌سازی براساس قیمت دوره انتخاب‌شده
    cycleFiltered.sort((a, b) => {
      const ap =
        billingCycle === "yearly"
          ? Number(a?.yearly_price ?? 0)
          : Number(a?.price ?? 0);
      const bp =
        billingCycle === "yearly"
          ? Number(b?.yearly_price ?? 0)
          : Number(b?.price ?? 0);
      return ap - bp;
    });

    return cycleFiltered;
  }, [plans, planKind, billingCycle]);

  /* === best plan among filtered === */
  const bestPlanId = useMemo(() => {
    if (!filteredPlans.length) return undefined;

    const gold = filteredPlans.find(
      (p) => p?.slug === "gold" && p?.is_active
    );
    if (gold) return gold.id;

    return filteredPlans[filteredPlans.length - 1]?.id;
  }, [filteredPlans]);

  const currentPlanId = subscription?.plan?.id || null;
  const currentPlanSlug = subscription?.plan?.slug || null;
  const isSubActive =
    (subscription?.status || "").toLowerCase() === "active";

  const isSameAsCurrent = (plan) => {
    if (!isSubActive) return false;
    if (currentPlanId) return plan?.id === currentPlanId;
    if (currentPlanSlug) return plan?.slug === currentPlanSlug;
    return false;
  };

  /* === invoice creation with correct price & duration === */
  const createInvoice = async (plan) => {
    if (!plan?.id) {
      return toastError("پلن نامعتبر است.", { title: "خطا" });
    }

    const isCurrentPlan = isSameAsCurrent(plan);

    if (!plan.is_active) {
      return info("این پلن در حال حاضر قابل خرید نیست.", { title: "پلن" });
    }
    if (isCurrentPlan) {
      return info("این پلن همین الان برای شما فعاله و قابل خرید مجدد نیست.", {
        title: "پلن",
      });
    }
    if (payingId !== null) {
      return info("یک درخواست در حال انجام است. لطفاً کمی صبر کنید.", {
        title: "پلن",
      });
    }

    setPayingId(plan.id);

    try {
      const isYearly = billingCycle === "yearly";
      const rawPrice = isYearly
        ? plan?.yearly_price ?? plan?.price
        : plan?.price;
      const rawDuration = isYearly
        ? plan?.yearly_duration_days ?? 365
        : plan?.duration_days;

      await Axiosinstance.post("billing/invoices/", {
        plan_id: plan.id,
        billing_cycle: isYearly ? "yearly" : "monthly",
        duration_days: rawDuration,
        price: rawPrice,
      });

      success("فاکتور با موفقیت صادر شد ✅", { title: "پرداخت" });
      navigate("/receipt");
    } catch (e) {
      toastError(getErrMsg(e, "خطا در ساخت فاکتور"), { title: "خطا" });
    } finally {
      setPayingId(null);
    }
  };

  const refreshLabel =
    loading || subLoading ? "درحال بروزرسانی..." : "بروزرسانی";
  const refreshTitle =
    refresh.leftMs > 0
      ? `تا ${Math.ceil(refresh.leftMs / 1000)} ثانیه دیگر`
      : "بروزرسانی پلن‌ها و اشتراک";

  return (
    <div className="dark:text-white w-full md:py-6 py-3 md:px-6 space-y-6">
      <PageHeader
        title="پلن‌ها"
        subtitle="پلن مناسب خود را انتخاب کنید و فاکتور صادر شود"
        right={
          <Button
            type="button"
            onClick={refresh.run}
            disabled={refresh.disabled}
            variant="outline"
            size="lg"
            title={refreshTitle}
            leftIcon={
              <LuRefreshCcw
                className={`w-4 h-4 text-[#43BEFF] dark:text-white ${
                  loading || subLoading ? "animate-spin" : ""
                }`}
              />
            }
          >
            {refreshLabel}
          </Button>
        }
      />


      {/* کارت اشتراک فعلی */}
      <CurrentSubscriptionCard
        subscription={subscription}
        subLoading={subLoading}
      />

      {/* سوییچ‌های نوع پلن و دوره پرداخت */}
      <div className="flex flex-col sm:flex-row gap-3 sm:items-center sm:justify-between">
        <div className="flex flex-col sm:flex-row justify-between w-full gap-3">
          <SwitchPill
            value={planKind}
            onChange={setPlanKind}
            options={[
              { value: "personal", label: "شخصی", icon: LuUser },
              { value: "org", label: "سازمانی", icon: LuBuilding2 },
            ]}
          />
          <SwitchPill
            value={billingCycle}
            onChange={setBillingCycle}
            options={[
              { value: "monthly", label: "ماهیانه", icon: LuCalendarDays },
              { value: "yearly", label: "سالیانه", icon: LuCalendar },
            ]}
          />
        </div>
      </div>

      {/* اسکلت لودینگ */}
      {loading && <PlansSkeletonGrid count={3} />}

      {/* وقتی پلنی برای ترکیب انتخابی نیست */}
      {!loading && filteredPlans.length === 0 && (
        <div className="p-4 rounded-xl shadow border border-white/10 bg-white/5 text-sm">
          در این حالت، هیچ پلنی برای این نوع/دوره یافت نشد.
        </div>
      )}

      {/* لیست پلن‌ها */}
      {!loading && filteredPlans.length > 0 && (
        <div className="grid md:grid-cols-3 gap-5">
          {filteredPlans.map((plan) => {
            const isBest = plan.id === bestPlanId;
            const isCurrentPlan = isSameAsCurrent(plan);
            const disabled =
              !plan.is_active || payingId !== null || isCurrentPlan;

            // قیمت و مدت خام براساس دوره انتخابی
            const isYearly = billingCycle === "yearly";
            const rawPrice = isYearly
              ? plan?.yearly_price ?? plan?.price
              : plan?.price;
            const rawDuration = isYearly
              ? plan?.yearly_duration_days ?? 365
              : plan?.duration_days;

            // بدون فرمت برای UI؛ PlanCard خودش فرمت کند
            const _planForCard = {
              ...plan,
              price: rawPrice,
              duration_days: rawDuration,
              billing_cycle: isYearly ? "yearly" : "monthly",
            };

            return (
              <PlanCard
                key={plan.id}
                plan={_planForCard}
                isBest={isBest}
                isCurrentPlan={isCurrentPlan}
                disabled={disabled}
                isPaying={payingId === plan.id}
                onSelect={() => createInvoice(plan)}
                onDisabledClick={() => {
                  if (payingId !== null) {
                    return info(
                      "یک درخواست در حال انجام است. لطفاً صبر کنید.",
                      { title: "پلن" }
                    );
                  }
                  if (isCurrentPlan) {
                    return info("این پلن همین الان برای شما فعاله.", {
                      title: "پلن",
                    });
                  }
                  if (!plan.is_active) {
                    return info(
                      "این پلن در حال حاضر قابل خرید نیست.",
                      { title: "پلن" }
                    );
                  }
                }}
              />
            );
          })}
        </div>
      )}
    </div>
  );
}

export default Plans;
