"use client";

import { pricingData } from "@/data/home/pricingData";
import Image from "next/image";
import Link from "next/link";
import { useMemo, useState } from "react";

export default function PricingSection() {
  const { tabs, plans } = pricingData;
  const [billingCycle, setBillingCycle] = useState<"monthly" | "yearly">(
    "monthly",
  );

  const discountPercent = useMemo(() => {
    const match = tabs.discount.match(/\d+/);
    return match ? Number(match[0]) : 0;
  }, [tabs.discount]);

  const getDisplayPrice = (monthlyPrice: string) => {
    if (billingCycle === "monthly") {
      return monthlyPrice;
    }

    const numeric = Number(monthlyPrice.replace(/[^\d.]/g, ""));
    const yearlyDiscounted = Math.round(
      numeric * 12 * (1 - discountPercent / 100),
    );
    return `$${yearlyDiscounted}`;
  };

  const getDisplayPriceUnit = () =>
    billingCycle === "monthly" ? "/per month cost" : "/per year cost";

  return (
    <div className="carousel-container">
      <div className="price-title">
        <ul
          className="nav nav-tabs"
          id="myTab"
          role="tablist"
          data-aos="fade-up"
          data-aos-duration={900}
          data-aos-delay={400}
        >
          <li className="nav-item" role="presentation">
            <button
              className={`nav-link ${billingCycle === "monthly" ? "active" : ""}`}
              id="home-tab"
              type="button"
              role="tab"
              aria-controls="home"
              aria-selected={billingCycle === "monthly"}
              onClick={() => setBillingCycle("monthly")}
            >
              {tabs.monthly}
            </button>
          </li>
          <li className="nav-item" role="presentation">
            <button
              className={`nav-link ${billingCycle === "yearly" ? "active" : ""}`}
              id="profile-tab"
              type="button"
              role="tab"
              aria-controls="profile"
              aria-selected={billingCycle === "yearly"}
              onClick={() => setBillingCycle("yearly")}
            >
              {tabs.yearly} - <span>{tabs.discount}</span>
            </button>
          </li>
        </ul>
      </div>
      <div className="tab-content" id="myTabContent">
        <div
          className="tab-pane fade show active"
          id="home"
          role="tabpanel"
          aria-labelledby="home-tab"
        >
          <div className="row">
            {plans.map((plan, index) => (
              <div key={index} className="col-lg-4 col-md-6">
                <div
                  className={`pricing-card ${plan.buttonVariant || ""}`}
                  data-aos="fade"
                  data-aos-duration={900}
                  data-aos-delay={300 + index * 100}
                >
                  <span className="sub-title">{plan.subtitle}</span>
                  <p>{plan.description}</p>
                  <h3 className="price">
                    {getDisplayPrice(plan.price)}
                    <span>{getDisplayPriceUnit()}</span>
                  </h3>
                  <h4 className="title">{plan.includesTitle}</h4>
                  <p className="mb-0">{plan.includesDescription}</p>
                  <ul className="price-list">
                    {plan.features.map((feature, featureIndex) => (
                      <li key={featureIndex}>
                        <Image
                          src={feature.icon}
                          alt="Check icon for pricing feature"
                          width={16}
                          height={16}
                          style={{ width: "auto", height: "auto" }}
                        />
                        {feature.text}
                      </li>
                    ))}
                  </ul>
                  <Link
                    href="#"
                    className={`btn-style1 ${plan.buttonVariant || ""}`}
                  >
                    {plan.buttonText}
                    <span>
                      <Image
                        src="/assets/images/icon/arrow.svg"
                        alt="Arrow icon for free trial button"
                        width={20}
                        height={20}
                      />
                    </span>
                  </Link>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}