import React, { useEffect } from "react";
import { useTenantDetails } from "../../hooks/useTenant";
import { useDispatch } from "react-redux";
import { setCurrentTenant } from "../../slices/globalVariablesSlice";
import { useNavigate } from "react-router-dom";
import { formatUTCToLocalTime } from "../../utils/dateUtils";
import { SUBSCRIPTION_PLAN_FREQUENCIES } from "../../utils/constants";

const SubScriptionHistory = ({ tenantId }) => {
  const { data, isLoading, isError, error } = useTenantDetails(tenantId);
  const dispatch = useDispatch();
  const navigate = useNavigate();

  useEffect(() => {
    if (data) {
      dispatch(setCurrentTenant({ operationMode: 1, data }));
    } else {
      dispatch(setCurrentTenant({ operationMode: 0, data: null }));
    }
  }, [data, dispatch]);

  const handleUpgradePlan = () => {
    navigate("/tenants/new-tenant");
  };

  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>{error}</div>;

  const plan = data?.currentPlan;
  const features = data?.currentPlanFeatures;
  const subscriptionHistory = data?.subscriptionHistery;

  if (!plan) {
    return (
      <div className="text-center p-4">
        <button className="btn btn-success" onClick={handleUpgradePlan}>
          Add Subscription
        </button>
        <div className="mt-2 text-center small text-muted">
          <i className="bx bx-info-circle bx-xs"></i> Add your new subscription
        </div>
      </div>
    );
  }

  // Format dates
  const end = plan?.endDate ? new Date(plan.endDate) : null;
  const today = new Date();

  const daysLeft = end
    ? Math.max(0, Math.ceil((end - today) / (1000 * 60 * 60 * 24)))
    : 0;

  // Render logic for subscription history table
  const renderSubscriptionHistory = () => {
    if (!subscriptionHistory || subscriptionHistory.length === 0) {
      return (
        <div className="text-center text-muted p-4">
          No subscription history found
        </div>
      );
    }

    const sortedHistory = subscriptionHistory
      .slice()
      .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));

    return (
      <>
        {/* Table for larger screens */}
        <div className=" d-md-block table-responsive">
          <table className="table border-top dataTable text-nowrap align-middle">
            <thead className="align-middle">
              <tr>
                <th>Date</th>
                <th>Type</th>
                <th>Amount</th>
                <th>Plan Name</th>
                <th className="text-center">Action</th>
              </tr>
            </thead>
            <tbody className="align-middle">
              {sortedHistory.map((item) => (
                <tr key={item.id}>
                  <td>{formatUTCToLocalTime(item?.createdAt)}</td>
                  <td>{SUBSCRIPTION_PLAN_FREQUENCIES[item.frequency] || "N/A"}</td>
                  <td>
                    {item.currency?.symbol || "₹"} {item.price}
                  </td>
                  <td>{item.planName}</td>
                  <td className="text-center">
                    <div className="dropdown">
                      <button
                        className="btn btn-icon btn-sm dropdown-toggle hide-arrow"
                        data-bs-toggle="dropdown"
                      >
                        <i className="bx bx-dots-vertical-rounded"></i>
                      </button>
                      <div className="dropdown-menu dropdown-menu-end">
                        <button
                          className="dropdown-item py-1"
                        >
                          <i className="bx bx-detail bx-sm"></i> View
                        </button>
                        <button
                          className="dropdown-item py-1"
                          onClick={() =>
                            console.log("Download clicked for", item.id)
                          }
                        >
                          <i className="bx bx-cloud-download bx-sm"></i> Download
                        </button>
                      </div>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Card-based view for smaller screens */}
     
      </>
    );
  };

  return (
    <div className="p-2 p-md-4">
      <div className="row g-4">
        {/* Left Card: Active Subscription */}
        <div className="col-12 col-lg-6">
          <div className="card shadow-sm border rounded p-3 h-100 text-start">
            <div className="divider text-start mb-3">
              <div className="divider-text">Active Subscription</div>
            </div>

            <p className="text-primary fw-bold m-0 fs-4">
              {plan.planName || "N/A"}
            </p>
            {plan.description && (
              <p className="m-0 text-muted small">{plan.description}</p>
            )}

            <div className="mt-2">
              <h3 className="m-0">
                {plan.currency?.symbol || "₹"} {plan.price}
              </h3>
              <small className="text-muted">
                {SUBSCRIPTION_PLAN_FREQUENCIES[plan.frequency] || ""}
              </small>
            </div>

            <div className="mt-3 small text-muted">
              <div>
                Activated Since:{" "}
                {plan.startDate ? formatUTCToLocalTime(plan.startDate) : "N/A"} (
                {daysLeft} days left)
              </div>
              <div className="mt-1">
                Ends on:{" "}
                {plan.endDate ? formatUTCToLocalTime(plan.endDate) : "N/A"}
              </div>
            </div>

            {/* Features list */}
            <div className="mt-4">
              <h6 className="text-secondary">Features</h6>
              <div className="row g-2">
                {features?.modules &&
                  Object.entries(features.modules).map(([key, mod]) => {
                    if (!mod?.name) return null;
                    return (
                      <div
                        key={key}
                        className="col-12 col-sm-6 d-flex align-items-center"
                      >
                        <i
                          className={`fa-regular ${
                            mod.enabled
                              ? "fa-circle-check text-success"
                              : "fa-circle-xmark text-danger"
                          }`}
                        ></i>
                        <span className="ms-2">{mod.name}</span>
                      </div>
                    );
                  })}
              </div>
            </div>

            <div className="mt-3 text-end">
              <button
                className="btn btn-sm btn-primary"
                onClick={handleUpgradePlan}
              >
                Upgrade Plan
              </button>
            </div>
          </div>
        </div>

        {/* Right Card: Subscription History */}
        <div className="col-12 col-lg-6">
          <div className="card shadow-sm border rounded p-3 h-100">
            <div className="divider text-start mb-3">
              <div className="divider-text">
                <i className="bx bx-history"></i> <small>History</small>
              </div>
            </div>
            {renderSubscriptionHistory()}
          </div>
        </div>
      </div>
    </div>
  );
};

export default SubScriptionHistory;