"use client";
import { useRef, useState } from "react";
import {
  FiAward,
  FiCheck,
  FiChevronLeft,
  FiChevronRight,
} from "react-icons/fi";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, FreeMode } from "swiper/modules";
import type { Swiper as SwiperType } from "swiper/types";
import { useQueryClient } from "@tanstack/react-query";
import { useMembershipPlans, useMySubscription } from "@/hooks/useApi";
import { useAuthStore } from "@/store/authStore";
import { useAppSettings } from "@/lib/settingsContext";
import { QUERY_KEYS } from "@/lib/constants";
import { COLORS, TEXT } from "@/branding";
import { cn } from "@/lib/utils";
import type { MembershipPlan } from "@/types";
import { getBenefitLabels } from "@/components/membership/benefitLabels";
import MembershipPaymentModal from "@/components/membership/MembershipPaymentModal";

/* ─── Compact plan card — sized for a homepage carousel, not the full account panel ─── */
function CompactPlanCard({
  plan,
  isCurrent,
  isPopular,
  currencyCode,
  subscribing,
  onSubscribe,
}: {
  plan: MembershipPlan;
  isCurrent: boolean;
  isPopular: boolean;
  currencyCode: string;
  subscribing: boolean;
  onSubscribe: () => void;
}) {
  const benefitLabels = getBenefitLabels(plan);

  return (
    <div
      className={cn(
        "relative flex flex-col rounded-xl bg-white dark:bg-dm-surface p-4 h-full transition-shadow",
        isPopular ? "ring-2 ring-secondary-500 shadow-card-hover" : "shadow-sm",
      )}
    >
      {isPopular && (
        <span className="absolute top-1 right-2 px-2 py-0.5 rounded-full bg-secondary-500 text-primary-900 text-[9px] font-black uppercase tracking-wide">
          {TEXT.membership.mostPopular}
        </span>
      )}

      <div className="flex items-center gap-2">
        <div className="w-8 h-8 rounded-full bg-primary-50 dark:bg-dm-surface2 flex items-center justify-center flex-shrink-0">
          <FiAward size={14} className="text-primary-700" />
        </div>
        <h3 className="font-display text-sm font-bold text-gray-900 dark:text-white truncate">
          {plan.name}
        </h3>
      </div>

      <div className="flex items-baseline gap-1 mt-3">
        <span className="text-xl font-black text-gray-900 dark:text-white">
          {currencyCode}
          {plan.price}
        </span>
        <span className="text-[11px] text-gray-400 font-medium">
          {TEXT.membership.perPlan(plan.duration_type, plan.duration_value)}
        </span>
      </div>

      {benefitLabels.length > 0 && (
        <ul className="mt-3 space-y-1.5 flex-1">
          {benefitLabels.map((b) => (
            <li
              key={b}
              className="flex items-start gap-1.5 text-xs text-gray-600 dark:text-dm-muted"
            >
              <FiCheck
                size={12}
                className="text-primary-600 mt-0.5 flex-shrink-0"
              />
              <span className="leading-tight">{b}</span>
            </li>
          ))}
        </ul>
      )}

      <button
        onClick={onSubscribe}
        disabled={isCurrent || subscribing}
        className={cn(
          "w-full mt-3 py-2 rounded-lg font-bold text-xs transition-colors focus:outline-none focus:ring-2 disabled:cursor-not-allowed",
          isCurrent
            ? "bg-primary-50 text-primary-700 dark:bg-dm-surface2"
            : "bg-primary text-white hover:opacity-90 disabled:opacity-60",
        )}
      >
        {isCurrent
          ? TEXT.membership.yourPlan
          : subscribing
            ? TEXT.membership.subscribing
            : plan.is_buy === 1
              ? TEXT.membership.resubscribe
              : TEXT.membership.subscribeNow}
      </button>
    </div>
  );
}

export default function MembershipSection() {
  const queryClient = useQueryClient();
  const { isAuthenticated, openModal } = useAuthStore();
  const { settings } = useAppSettings();
  const { data: plansData, isLoading } = useMembershipPlans();
  const { data: subData } = useMySubscription();

  const [payingPlan, setPayingPlan] = useState<MembershipPlan | null>(null);
  const prevRef = useRef<HTMLButtonElement>(null);
  const nextRef = useRef<HTMLButtonElement>(null);
  const [canNavigate, setCanNavigate] = useState(false);

  const plans = plansData?.result ?? [];
  // Same "still active until period end" rule used on the account membership panel.
  const activeSub =
    (subData?.result ?? [])
      .filter((s) => new Date(s.current_period_end).getTime() > Date.now())
      .sort(
        (a, b) =>
          new Date(b.current_period_end).getTime() -
          new Date(a.current_period_end).getTime(),
      )[0] ?? null;
  const popularId =
    plans.length >= 2 ? plans[Math.floor(plans.length / 2)]?.id : undefined;

  const refreshMembership = () => {
    queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.MY_SUBSCRIPTION] });
    queryClient.invalidateQueries({
      queryKey: [QUERY_KEYS.MEMBERSHIP_TRANSACTIONS],
    });
  };

  const handleSubscribe = (plan: MembershipPlan) => {
    if (!isAuthenticated) {
      openModal();
      return;
    }
    setPayingPlan(plan);
  };

  if (!isLoading && plans.length === 0) return null;

  return (
    <section
      className="relative overflow-hidden rounded-2xl shadow-card"
      style={{
        background: `linear-gradient(135deg, ${COLORS.primary[900]} 0%, ${COLORS.primary[700]} 55%, ${COLORS.secondary[600]} 135%)`,
      }}
    >
      <div
        className="absolute inset-0 opacity-[0.08] pointer-events-none"
        style={{
          background: `radial-gradient(circle at 88% -10%, ${COLORS.secondary[400]}, transparent 55%)`,
        }}
      />

      {payingPlan && (
        <MembershipPaymentModal
          plan={payingPlan}
          onClose={() => setPayingPlan(null)}
          onSuccess={refreshMembership}
        />
      )}

      <div className="relative p-4 sm:p-5">
        <div className="flex items-center justify-between gap-3 mb-4">
          <div className="flex items-center gap-2.5 min-w-0">
            <div className="w-9 h-9 rounded-full bg-white/15 flex items-center justify-center flex-shrink-0">
              <FiAward size={16} className="text-secondary-300" />
            </div>
            <div className="min-w-0">
              <h2 className="font-display text-base sm:text-lg font-black text-white leading-tight truncate">
                {TEXT.membership.title}
              </h2>
              <p className="text-[11px] sm:text-xs text-white/70 truncate">
                {TEXT.membership.tagline}
              </p>
            </div>
          </div>

          <div className="flex items-center gap-2 flex-shrink-0">
            <button
              ref={prevRef}
              className={cn(
                "w-7 h-7 rounded-full border border-white/25 bg-white/10 flex items-center justify-center hover:bg-white/20 transition-colors disabled:opacity-30 focus:outline-none focus:ring-2 focus:ring-white/40",
                !canNavigate && "hidden",
              )}
              aria-label="Previous"
            >
              <FiChevronLeft size={14} className="text-white" />
            </button>
            <button
              ref={nextRef}
              className={cn(
                "w-7 h-7 rounded-full border border-white/25 bg-white/10 flex items-center justify-center hover:bg-white/20 transition-colors disabled:opacity-30 focus:outline-none focus:ring-2 focus:ring-white/40",
                !canNavigate && "hidden",
              )}
              aria-label="Next"
            >
              <FiChevronRight size={14} className="text-white" />
            </button>
          </div>
        </div>

        {isLoading ? (
          <div className="flex gap-3 overflow-hidden">
            {[1, 2, 3].map((i) => (
              <div
                key={i}
                className="w-48 flex-shrink-0 h-56 rounded-xl bg-white/10 animate-pulse"
              />
            ))}
          </div>
        ) : (
          <Swiper
            className="p-2"
            modules={[Navigation, FreeMode]}
            navigation={{ prevEl: prevRef.current, nextEl: nextRef.current }}
            freeMode
            slidesPerView="auto"
            spaceBetween={12}
            onBeforeInit={(swiper) => {
              if (
                swiper.params.navigation &&
                typeof swiper.params.navigation !== "boolean"
              ) {
                swiper.params.navigation.prevEl = prevRef.current;
                swiper.params.navigation.nextEl = nextRef.current;
              }
            }}
            onSwiper={(swiper: SwiperType) => {
              setCanNavigate(!swiper.isLocked);
              swiper.on("lock", () => setCanNavigate(false));
              swiper.on("unlock", () => setCanNavigate(true));
            }}
          >
            {plans.map((plan) => (
              <SwiperSlide key={plan.id} className="!w-44 sm:!w-52 h-auto">
                <CompactPlanCard
                  plan={plan}
                  isCurrent={activeSub?.membership_plan_id === plan.id}
                  isPopular={plan.id === popularId}
                  currencyCode={settings.currencyCode}
                  subscribing={payingPlan?.id === plan.id}
                  onSubscribe={() => handleSubscribe(plan)}
                />
              </SwiperSlide>
            ))}
          </Swiper>
        )}
      </div>
    </section>
  );
}