marco.pms.web/src/pages/Home/SubscriptionPlans.jsx

import React, { useState, useEffect } from "react";
import axios from "axios";
import { Link } from "react-router-dom";
import PlanCardSkeleton from "./PlanCardSkeleton";

const SubscriptionPlans = () => {
  const [plans, setPlans] = useState([]);
  const [frequency, setFrequency] = useState(1);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchPlans = async () => {
      try {
        setLoading(true);
        const res = await axios.get(
          `http://localhost:5032/api/market/list/subscription-plan?frequency=${frequency}`,
          { headers: { "Content-Type": "application/json" } }
        );
        setPlans(res.data?.data || []);
      } catch (err) {
        console.error("Error fetching plans:", err);
      } finally {
        setLoading(false);
      }
    };
    fetchPlans();
  }, [frequency]);

  const frequencyLabel = (freq) => {
    switch (freq) {
      case 0: return "1 mo";
      case 1: return "3 mo";
      case 2: return "6 mo";
      case 3: return "1 yr";
      default: return "mo";
    }
  };

  return (
    <div className="container py-5">
      {/* Frequency Switcher */}
      <div className="text-center mb-4">
        <div className="btn-group" role="group" aria-label="Plan frequency">
          {["Monthly", "Quarterly", "Half-Yearly", "Yearly"].map((label, idx) => (
            <button
              key={idx}
              type="button"
              className={`btn btn-${frequency === idx ? "primary" : "outline-secondary"}`}
              onClick={() => setFrequency(idx)}
            >
              {label}
            </button>
          ))}
        </div>
      </div>

      {/* Cards */}
      <div className="row g-4 mt-10">
        {loading ? (
          // Show 3 skeletons
          <>
            <PlanCardSkeleton />
            <PlanCardSkeleton />
            <PlanCardSkeleton />
          </>
        ) : plans.length === 0 ? (
          <div className="text-center">No plans found</div>
        ) : (
          plans.map((plan) => (
            <div key={plan.id} className="col-xl-4 col-lg-6 col-md-6">
              <div className="card h-100 shadow-lg border-0 p-3 text-center p-10">
                {/* Header */}
                <div className="mb-3">
                  <i className="bx bxs-package text-primary fs-1 mb-2"></i>
                  <p className="card-title fs-3 fw-bold mb-1">{plan.planName}</p>
                  <p className="text-muted mb-0 fs-5">{plan.description}</p>
                </div>

                {/* Price */}
                <div className="mb-3">
                  <h4 className="fw-semibold mt-auto mb-0 fs-3">
                    {plan.currency?.symbol} {plan.price}
                    <small className="text-muted ms-1">/ {frequencyLabel(frequency)}</small>
                  </h4>
                </div>

                {/* Storage & Trial */}
                <div className="text-muted mb-5 d-flex justify-content-center gap-4">
                  <div>
                    <i className="fa-solid fa-hdd me-2"></i>
                    Storage {plan.maxStorage} MB
                  </div>
                  <div>
                    <i className="fa-regular fa-calendar-check text-success me-2"></i>
                    Trial Days {plan.trialDays}
                  </div>
                </div>

                {/* Features */}
                <h6 className="fw-bold text-uppercase border-top pt-3 mb-3 text-center">
                  Features
                </h6>
                <ul className="list-unstyled text-start mb-4 ms-7 fs-5">
                  {plan.features?.modules &&
                    Object.values(plan.features.modules).map((mod) =>
                      mod && mod.name ? (
                        <li
                          key={mod.id}
                          className="d-flex align-items-center mb-4"
                        >
                          {mod.enabled ? (
                            <i className="fa-regular fa-circle-check text-success me-2"></i>
                          ) : (
                            <i className="fa-regular fa-circle-xmark text-danger me-2"></i>
                          )}
                          {mod.name}
                        </li>
                      ) : null
                    )}
                </ul>

                {/* Button */}
                <div className="mt-auto">
                  <Link
                    to="/auth/reqest/demo"
                    className="btn btn-outline-primary w-100 fw-bold"
                  >
                    Request a Demo
                  </Link>
                </div>
              </div>
            </div>
          ))
        )}
      </div>

    </div>
  );
};

export default SubscriptionPlans;