"use client";

import { useState } from "react";
import Image from "next/image";
import Link from "next/link";
import {
  compareColumns,
  compareCtas,
  comparePricePresets,
  compareRows,
} from "@/data/pricingData";

export default function PricingCompareSection() {
  const [activeCtaId, setActiveCtaId] = useState(compareCtas[0]?.id ?? "");

  const activePrices =
    comparePricePresets.find((preset) => preset.ctaId === activeCtaId)?.prices ??
    compareColumns.map((column) => column.planPrice);

  const getCtaClassName = (buttonClassName: string, isActive: boolean) => {
    if (!isActive) {
      return buttonClassName;
    }

    return `${buttonClassName.replace(" v3", "")} active`;
  };

  return (
    <section className="pricing-compare space">
      <div className="carousel-container">
        <div className="sec-title">
          <span
            className="sub-title"
            data-aos="fade-up"
            data-aos-duration="900"
            data-aos-delay="300"
          >
            Compare Pricing Plan
          </span>
          <h2
            className="title"
            data-aos="fade-up"
            data-aos-duration="900"
            data-aos-delay="400"
          >
            Conversion-friendly Compare CRM Plans outline
          </h2>
        </div>

        <div
          className="pricing-info3"
          data-aos="zoom-in"
          data-aos-duration="900"
          data-aos-delay="300"
        >
          <div className="price-row">
            <div className="pricing-compare-content">
              <h3 className="title">Features</h3>
              <p>Conversion-friendly Compare Plans outline</p>
            </div>
            <div className="info-box">
              {compareColumns.map((column, index) => (
                <div className="price-box3" key={column.id}>
                  <span className="sub-title">{column.planName}</span>
                  <h3 className="price">
                    {activePrices[index] ?? column.planPrice}
                    <span>/m</span>
                  </h3>
                </div>
              ))}
            </div>
          </div>

          {compareRows.map((row) => (
            <div
              className={`price-row2${row.rowClassName ? ` ${row.rowClassName}` : ""}`}
              key={row.id}
            >
              <div className="price-title">
                <h4 className="title">{row.title}</h4>
              </div>
              <div className="info-box">
                {row.values.map((value, index) => (
                  <div
                    className={`price-box3-two${value.type === "boolean" && !value.value ? " v3" : ""}`}
                    key={`${row.id}-${index}`}
                  >
                    {value.type === "text" ? (
                      <h4 className="title">{value.value}</h4>
                    ) : (
                      <Image
                        src={
                          value.value
                            ? "/assets/images/icon/check1-4.svg"
                            : "/assets/images/icon/cross.svg"
                        }
                        alt={value.value ? "Included" : "Not Included"}
                        width={15}
                        height={15}
                      />
                    )}
                  </div>
                ))}
              </div>
            </div>
          ))}

          <div className="price-row2 v2">
            <div className="price-title v2"></div>
            <div className="info-box v2">
              {compareCtas.map((cta) => (
                <div
                  className={`price-box3-two${activeCtaId === cta.id ? " active" : ""}`}
                  key={cta.id}
                >
                  {cta.path === "#" ? (
                    <button
                      type="button"
                      className={getCtaClassName(cta.buttonClassName, activeCtaId === cta.id)}
                      aria-pressed={activeCtaId === cta.id}
                      onClick={() => setActiveCtaId(cta.id)}
                    >
                      {cta.label}
                      <span>
                        <Image
                          src="/assets/images/icon/arrow.svg"
                          alt="Arrow icon"
                          width={16}
                          height={16}
                        />
                      </span>
                    </button>
                  ) : (
                    <Link
                      href={cta.path}
                      className={getCtaClassName(cta.buttonClassName, activeCtaId === cta.id)}
                      aria-pressed={activeCtaId === cta.id}
                      onClick={() => setActiveCtaId(cta.id)}
                    >
                      {cta.label}
                      <span>
                        <Image
                          src="/assets/images/icon/arrow.svg"
                          alt="Arrow icon"
                          width={16}
                          height={16}
                        />
                      </span>
                    </Link>
                  )}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}