import Breadcrumb from "../components/Breadcrumb";
import { PricingData, PricingAPIResponse, Plan, TestimonialItem } from "./types";

const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001";

async function getPricingData(): Promise<PricingData | null> {
  try {
    const res = await fetch(`${API_URL}/api/pricing`, {
      next: { revalidate: 60 }, // Revalidate every 60 seconds
    });
    if (!res.ok) {
      throw new Error("Failed to fetch pricing data");
    }
    const response: PricingAPIResponse = await res.json();
    return response.data;
  } catch (error) {
    console.error("Error fetching pricing data:", error);
    return null;
  }
}

// Component to render a single plan
function PlanCard({ plan, index }: { plan: Plan; index: number }) {
  const styleClass = plan.style === "style-2" ? " style-2" : "";
  const buttonStyleClass = plan.style === "style-2" ? " style-2" : "";

  return (
    <div className={`pricing-box-items${styleClass}`}>
      <div className="pricing-header">
        <h2>
          <sup>{plan.currency}</sup>
          {plan.price}
          <sub>/{plan.period}</sub>
        </h2>
        <span className="sub-texts">{plan.name}</span>
      </div>
      <a href={plan.buttonLink} className={`theme-btn${buttonStyleClass}`}>
        {plan.buttonText}
        <i className={plan.buttonIcon}></i>
      </a>
      <ul className="pricing-list">
        {plan.features.map((feature, idx) => (
          <li key={idx}>
            <i className="fa-solid fa-chevrons-right"></i> {feature}
          </li>
        ))}
      </ul>
    </div>
  );
}

// Component to render star rating
function StarRating({ rating }: { rating: number }) {
  return (
    <div className="star">
      {[...Array(rating)].map((_, i) => (
        <i key={i} className="fa-solid fa-star"></i>
      ))}
    </div>
  );
}

// Component to render testimonial slide
function TestimonialSlide({ item }: { item: TestimonialItem }) {
  return (
    <div className="swiper-slide">
      <div className="content">
        <StarRating rating={item.rating} />
        <h3>&ldquo;{item.content}&rdquo;</h3>
        <div className="info-item">
          <div className="icon">
            <i className="fa-solid fa-quote-right"></i>
          </div>
          <div className="content">
            <h5>{item.name},</h5>
            <span>{item.role}</span>
          </div>
        </div>
      </div>
    </div>
  );
}

export default async function PricingPage() {
  const data = await getPricingData();

  // Fallback values if data is not available
  const pricingSection = data?.pricingSection || {
    subtitle: "pricing plan",
    heading: "Flexible Plans to Suit Every Traveler",
    description: "Choose the plan that fits your visa needs and enjoy expert guidance every step of the way.",
  };

  const plans = data?.plans || {
    monthly: [],
    yearly: [],
  };

  const testimonials = data?.testimonials || {
    subtitle: "What Our Clients Say",
    heading: "Immigration Success Stories",
    buttonText: "View All Review",
    buttonLink: "/contact",
    buttonIcon: "fa-solid fa-arrow-right",
    image: "/assets/img/home-3/test-thumb.jpg",
    items: [],
  };

  const hero = data?.hero || {
    title: "pricing plan",
  };

  return (
    <>
      {/* Breadcrumb-Wrapper Section Start */}
      <Breadcrumb title={hero.title} current={hero.title} />

      {/* Pricing Section Start */}
      <section className="pricing-section-2 section-padding fix section-bg-1">
        <div className="container">
          <div className="pricing-wrapper-2">
            <div className="row g-4 align-items-center">
              <div className="col-xl-6 col-lg-5">
                <div className="pricing-content">
                  <div className="section-title mb-0">
                    <span className="sub-title-2 wow fadeInUp">
                      {pricingSection.subtitle}
                    </span>
                    <h2 className="split-text-right split-text-in-right">
                      {pricingSection.heading}
                    </h2>
                  </div>
                  <p className="pricing-text wow fadeInUp" data-wow-delay=".5s">
                    {pricingSection.description}
                  </p>
                  <div
                    className="d-flex mt-3 mt-md-0 wow fadeInUp"
                    data-wow-delay=".5s"
                  >
                    <div className="pricing-two__tab">
                      <nav>
                        <div className="nav nav-tabs" id="nav-tab" role="tablist">
                          <button
                            className="nav-link active"
                            id="pt-1-tab"
                            data-bs-toggle="tab"
                            data-bs-target="#pt-1"
                            type="button"
                            role="tab"
                            aria-controls="pt-1"
                            aria-selected="true"
                          >
                            Monthly
                          </button>
                          <button
                            className="nav-link"
                            id="pt-2-tab"
                            data-bs-toggle="tab"
                            data-bs-target="#pt-2"
                            type="button"
                            role="tab"
                            aria-controls="pt-2"
                            aria-selected="false"
                            tabIndex={-1}
                          >
                            Yearly
                          </button>
                        </div>
                      </nav>
                    </div>
                  </div>
                </div>
              </div>
              <div className="col-xl-6 col-lg-7">
                <div className="pricing__tab-content">
                  <div className="tab-content" id="nav-tabContent">
                    {/* Monthly Plans Tab */}
                    <div
                      className="tab-pane fade active show"
                      id="pt-1"
                      role="tabpanel"
                      aria-labelledby="pt-1-tab"
                    >
                      <div className="pricing-right-items">
                        {plans.monthly.map((plan, index) => (
                          <PlanCard key={index} plan={plan} index={index} />
                        ))}
                      </div>
                    </div>
                    {/* Yearly Plans Tab */}
                    <div
                      className="tab-pane fade"
                      id="pt-2"
                      role="tabpanel"
                      aria-labelledby="pt-2-tab"
                    >
                      <div className="pricing-right-items">
                        {plans.yearly.map((plan, index) => (
                          <PlanCard key={index} plan={plan} index={index} />
                        ))}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Testimonial Section Start */}
      <section className="testimonial-section section-padding fix">
        <div className="container">
          <div className="section-title-area">
            <div className="section-title mb-0">
              <span className="sub-title-2 wow fadeInUp">
                {testimonials.subtitle}
              </span>
              <h2 className="split-text-right split-text-in-right">
                {testimonials.heading}
              </h2>
            </div>
            <a href={testimonials.buttonLink} className="theme-btn">
              {testimonials.buttonText}
              <i className={testimonials.buttonIcon}></i>
            </a>
          </div>
          <div className="testimonial-wrapper-3">
            <div className="row g-4 align-items-center">
              <div className="col-lg-4">
                <div className="testimonial-thumb">
                  <img src={testimonials.image} alt="testimonial" />
                </div>
              </div>
              <div className="col-lg-8">
                <div className="testimonial-content">
                  <div className="swiper testimonial-slider-3">
                    <div className="swiper-wrapper">
                      {testimonials.items.map((item, index) => (
                        <TestimonialSlide key={index} item={item} />
                      ))}
                    </div>
                  </div>
                  <div className="array-buttons-3">
                    <button className="array-prev">
                      <i className="fa-solid fa-arrow-left"></i>
                    </button>
                    <button className="array-next">
                      <i className="fa-solid fa-arrow-right"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}