"use client";

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

export default function PricingPlansSection() {
  const [activeTabId, setActiveTabId] = useState(
    pricingTabs[0]?.id ?? "monthly",
  );

  const getDisplayPrice = (price: string, isYearly: boolean) => {
    if (!isYearly) {
      return price;
    }

    const numericPrice = Number.parseFloat(price.replace("$", ""));
    if (Number.isNaN(numericPrice)) {
      return price;
    }

    return `$${(numericPrice * 0.77).toFixed(2)}`;
  };

  return (
    <>
      <div className="price-title3">
        <div className="sec-title white">
          <span
            className="sub-title"
            data-aos="fade-up"
            data-aos-duration="900"
            data-aos-delay="300"
          >
            Choose your Plan
          </span>
          <h2
            className="title"
            data-aos="fade-up"
            data-aos-duration="900"
            data-aos-delay="400"
          >
            Flexible Pricing for Every Stage
          </h2>
          <p
            data-aos="fade-up"
            data-aos-duration="900"
            data-aos-delay="500"
          >
            Basic for Starter. Upgrade anytime. No hidden fees.
          </p>
        </div>
        <ul
          className="nav nav-tabs"
          id="myTab"
          role="tablist"
          data-aos="fade-up"
          data-aos-duration="900"
          data-aos-delay="400"
        >
          {pricingTabs.map((tab) => (
            <li className="nav-item" role="presentation" key={tab.id}>
              <button
                className={`nav-link${activeTabId === tab.id ? " active" : ""}`}
                id={tab.id === "monthly" ? "home-tab" : "profile-tab"}
                type="button"
                role="tab"
                aria-controls={tab.id === "monthly" ? "home" : "profile"}
                aria-selected={activeTabId === tab.id}
                onClick={() => setActiveTabId(tab.id)}
              >
                {tab.label}
              </button>
            </li>
          ))}
        </ul>
      </div>

      <div className="tab-content" id="myTabContent">
        {pricingTabs.map((tab) => {
          const isYearly = tab.id === "yearly";
          const periodLabel = isYearly ? "/yearly package" : "/monthly package";
          const tabPaneId = tab.id === "monthly" ? "home" : "profile";
          const tabLabelId = tab.id === "monthly" ? "home-tab" : "profile-tab";

          return (
            <div
              key={tab.id}
              className={`tab-pane fade${activeTabId === tab.id ? " show active" : ""}`}
              id={tabPaneId}
              role="tabpanel"
              aria-labelledby={tabLabelId}
            >
              <div className="price-info">
                <div className="row">
                  {tab.plans.map((plan) => (
                    <div
                      className="col-lg-4 col-md-6"
                      key={`${tab.id}-${plan.id}`}
                    >
                      <div
                        className={`price-card${plan.cardClassName ? ` ${plan.cardClassName}` : ""}${plan.id === 3 ? " mb-0" : ""}`}
                        data-aos="fade"
                        data-aos-duration="900"
                        data-aos-delay="300"
                      >
                        <h3 className="title">{plan.title}</h3>
                        <p>{plan.subtitle}</p>
                        <div className="price-border"></div>
                        <h4 className="price">
                          {getDisplayPrice(plan.price, isYearly)}
                        </h4>
                        <span className="month">{periodLabel}</span>
                        <div className="price-border"></div>
                        <p className="para">{plan.description}</p>
                        <Link href={plan.buttonPath} className="btn-style1">
                          {plan.buttonLabel}
                          <span>
                            <Image
                              src="/assets/images/icon/arrow.svg"
                              alt="Arrow Icon"
                              width={16}
                              height={16}
                            />
                          </span>
                        </Link>
                        <span className="credit">
                          <Image
                            src="/assets/images/icon/card.svg"
                            alt="Credit Card Icon"
                            width={18}
                            height={18}
                          />
                          No credit card required
                        </span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </>
  );
}