"use client";

import { useState } from "react";
import { FiAward } from "react-icons/fi";
import toast from "react-hot-toast";
import { useQueryClient } from "@tanstack/react-query";
import { useMembershipPlans, useMySubscription } from "@/hooks/useApi";
import { membershipService } from "@/services/membershipService";
import { QUERY_KEYS } from "@/lib/constants";
import { getErrorMessage } from "@/lib/utils";
import { TEXT } from "@/branding";
import type { MembershipPlan } from "@/types";
import MembershipPlanCard from "./MembershipPlanCard";
import CurrentMembershipCard from "./CurrentMembershipCard";
import MembershipTransactions from "./MembershipTransactions";
import MembershipPaymentModal from "./MembershipPaymentModal";
import { useAppSettings } from "@/lib/settingsContext";

export default function MembershipPanel() {
  const queryClient = useQueryClient();
  const { settings } = useAppSettings();
  const { data: plansData, isLoading: plansLoading } = useMembershipPlans();
  const { data: subData, isLoading: subLoading } = useMySubscription();
  const [payingPlan, setPayingPlan] = useState<MembershipPlan | null>(null);
  const [cancelling, setCancelling] = useState(false);
  const [showHistory, setShowHistory] = useState(false);

  const plans = plansData?.result ?? [];
  // A subscription still grants access until its period actually ends, even if it's
  // been cancelled (cancel_at_period_end) — `status` alone isn't a reliable "is active" signal.
  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 handleCancel = async () => {
    if (!activeSub) return;
    setCancelling(true);
    try {
      const res = await membershipService.cancel(activeSub.membership_plan_id);
      if (res.status === 200) {
        toast.success(res.message || TEXT.membership.cancelSuccess);
        refreshMembership();
      } else {
        toast.error(res.message || TEXT.common.error);
      }
    } catch (err) {
      toast.error(getErrorMessage(err));
    } finally {
      setCancelling(false);
    }
  };

  return (
    <div className="space-y-6">
      {payingPlan && (
        <MembershipPaymentModal
          plan={payingPlan}
          onClose={() => setPayingPlan(null)}
          onSuccess={refreshMembership}
        />
      )}

      <div>
        <h2 className="font-display text-xl font-bold text-gray-900 dark:text-white">{TEXT.membership.title}</h2>
        <p className="text-sm text-gray-500 dark:text-dm-muted mt-1">{TEXT.membership.tagline}</p>
      </div>

      {subLoading ? (
        <div className="skeleton h-40 rounded-2xl" />
      ) : activeSub ? (
        <CurrentMembershipCard subscription={activeSub} cancelling={cancelling} onCancel={handleCancel} />
      ) : (
        <div className="bg-white dark:bg-dm-surface rounded-2xl border border-gray-100 dark:border-dm-border shadow-sm p-8 text-center">
          <div className="w-14 h-14 rounded-full bg-secondary-50 dark:bg-dm-surface2 flex items-center justify-center mx-auto mb-4">
            <FiAward size={26} className="text-secondary-600" />
          </div>
          <p className="text-sm font-bold text-gray-700 dark:text-white mb-1">{TEXT.membership.noActivePlan}</p>
          <p className="text-xs text-gray-400">{TEXT.membership.noActivePlanSub}</p>
        </div>
      )}

      <div>
        <h3 className="font-display text-base font-bold text-gray-800 dark:text-white mb-3">
          {TEXT.membership.choosePlan}
        </h3>
        {plansLoading ? (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            {[1, 2, 3].map((i) => (
              <div key={i} className="skeleton h-80 rounded-2xl" />
            ))}
          </div>
        ) : plans.length === 0 ? (
          <p className="text-sm text-gray-400 text-center py-8">{TEXT.membership.noPlans}</p>
        ) : (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 items-start">
            {plans.map((plan) => (
              <MembershipPlanCard
                key={plan.id}
                plan={plan}
                isCurrent={activeSub?.membership_plan_id === plan.id}
                isPopular={plan.id === popularId}
                currencyCode={settings.currencyCode}
                subscribing={payingPlan?.id === plan.id}
                onSubscribe={() => setPayingPlan(plan)}
              />
            ))}
          </div>
        )}
      </div>

      <div>
        <button
          onClick={() => setShowHistory((s) => !s)}
          className="text-sm font-semibold text-primary-700 hover:text-primary-800 transition-colors focus:outline-none focus:ring-2 rounded"
        >
          {showHistory ? TEXT.membership.hideHistory : TEXT.membership.viewHistory}
        </button>
        {showHistory && (
          <div className="mt-3">
            <MembershipTransactions />
          </div>
        )}
      </div>
    </div>
  );
}