"use client";

import { useQuery } from "@tanstack/react-query";

import { getDashboardInfo } from "@/services/user/dashboard.service";

type CancelSubscriptionRetentionModalProps = {
  show: boolean;
  onClose: () => void;
  onContinueCancellation: () => void;
};

const formatCurrency = (value: number) => `$${Number(value || 0).toFixed(2)}`;

export default function CancelSubscriptionRetentionModal({
  show,
  onClose,
  onContinueCancellation,
}: CancelSubscriptionRetentionModalProps) {
  const { data } = useQuery({
    queryKey: ["dashboard"],
    queryFn: getDashboardInfo,
    enabled: show,
  });

  const rebatesWallet = Number(data?.rebates_wallet || 0);
  const pendingCashback = Number(data?.pending_cashback || 0);
  const totalSavings = rebatesWallet + pendingCashback;

  if (!show) return null;

  return (
    <div
      className="modal fade show d-block"
      tabIndex={-1}
      role="dialog"
      aria-modal="true"
      aria-labelledby="cancelRetentionModalLabel"
      style={{ backgroundColor: "rgba(0, 0, 0, 0.5)" }}
      onClick={onClose}
    >
      <div
        className="modal-dialog modal-lg webContent modal-dialog-centered"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="modal-content bg-light">
          <div className="modal-header border-0">
            <button
              type="button"
              className="btn-close"
              aria-label="Close"
              onClick={onClose}
            />
          </div>
          <div className="modal-body text-center px-3 px-lg-5 pt-0 pb-4">
            <div className="px-md-3 px-xl-4">
              <p className="fw-semibold text-success mb-2">
                Wait — your benefits are still active
              </p>
              <h2
                id="cancelRetentionModalLabel"
                className="fw-bold mainHeading text-black mb-2"
              >
                Before You Cancel, See What You Still Have Available
              </h2>
              <p className="fw-medium mb-4">
                Your Rebates Plus Membership includes benefits you may not have
                used yet, including free shipping rebates on future eligible
                orders.
              </p>
            </div>
            <div className="row g-3 justify-content-center">
              <div className="col-md-6 col-lg-4">
                <div className="card h-100 border rounded-4 shadow py-4 px-3">
                  <p className="fw-bold mainHeading mb-2">
                    {formatCurrency(totalSavings)}
                  </p>
                  <p className="fw-bold text-black mb-1">You&apos;ve Saved</p>
                  <p className="fw-medium mb-0">
                    Total cash back and rebates earned with your Rebates Plus
                    Membership.
                  </p>
                </div>
              </div>
              <div className="col-md-6 col-lg-4">
                <div className="card h-100 border rounded-4 shadow py-4 px-3">
                  <p className="fw-bold mainHeading mb-2">
                    {formatCurrency(pendingCashback)}
                  </p>
                  <p className="fw-bold text-black mb-1">Pending Cash Back</p>
                  <p className="fw-medium mb-0">
                    Cash back still processing in your account.
                  </p>
                </div>
              </div>
              <div className="col-md-6 col-lg-4">
                <div className="card h-100 border rounded-4 shadow py-4 px-3">
                  <p className="fw-bold mainHeading mb-2">
                    {formatCurrency(0)}
                  </p>
                  <p className="fw-bold text-black mb-1">
                    Shipping Rebates Available
                  </p>
                  <p className="fw-medium mb-0">
                    Use your membership to get shipping costs back on future
                    eligible orders.
                  </p>
                </div>
              </div>
              <div className="col-md-6 col-lg-6">
                <div className="card h-100 border rounded-4 shadow py-4 px-3">
                  <p className="fw-bold mainHeading mb-2">6+ Benefits</p>
                  <p className="fw-bold text-black mb-1">
                    Included With Your Membership
                  </p>
                  <p className="fw-medium mb-0">
                    Free shipping rebates, cash back, order protection, bill
                    savings, gadget insurance, and member bonuses.
                  </p>
                </div>
              </div>
              <div className="col-md-12 col-lg-6">
                <div className="card h-100 border rounded-4 shadow py-4 px-3">
                  <p className="fw-bold mainHeading mb-2">Free Shipping</p>
                  <p className="fw-bold text-black mb-1">
                    You Still Have Benefits to Use
                  </p>
                  <p className="fw-medium mb-0">
                    Your free shipping rebate benefit is available with your
                    active membership.
                  </p>
                </div>
              </div>
            </div>
            <div className="d-md-flex flex-column flex-sm-row gap-3 justify-content-center mt-4">
              <button
                type="button"
                className="button w-100 bg-danger opacity-75 text-decoration-none text-white rounded-2 py-3 px-3 px-md-4 mb-0"
                onClick={onContinueCancellation}
              >
                Continue to Cancellation
              </button>
              <button
                type="button"
                className="button w-100 bg-success text-decoration-none text-white rounded-2 py-3 px-3 px-md-4 mb-2 mb-md-0"
                onClick={onClose}
              >
                Keep My Rebates Plus Benefits
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}