"use client";

import "swiper/css";
import "swiper/css/pagination";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Pagination } from "swiper/modules";
import { useTranslations } from "next-intl";
import { StatsSectionProps } from "./types";
const variantOf = (index: number): "dark" | "light" =>
  index % 2 === 0 ? "dark" : "light";

const CARD_W = "w-[160px] lg:w-[190px]";

function TimelineStar() {
  return (
    <svg
      width="14"
      height="14"
      viewBox="0 0 14 14"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden
    >
      <path
        d="M7 0L8.2 5.8L14 7L8.2 8.2L7 14L5.8 8.2L0 7L5.8 5.8L7 0Z"
        className="fill-primary"
      />
    </svg>
  );
}

export default function StatsSection({ stats }: StatsSectionProps) {
  const t = useTranslations("Investments");
  const sideLabel = [t("fleetWorksLine1"), t("fleetWorksLine2")];

  // Design (5 cards):
  //   top cards [2,3] centered over the timeline gap
  //   heading aligned with bottom-right pair [0,1]
  //   bottom-left [4] + line + bottom-right [0,1]
  const isTypicalLayout = stats.length === 5;
  const topCards = isTypicalLayout
    ? [
        { stat: stats[2], index: 2 },
        { stat: stats[3], index: 3 },
      ]
    : stats.slice(0, 2).map((stat, i) => ({ stat, index: i }));
  const bottomRightCards = isTypicalLayout
    ? [
        { stat: stats[0], index: 0 },
        { stat: stats[1], index: 1 },
      ]
    : [];
  const bottomLeftCard = isTypicalLayout
    ? { stat: stats[4], index: 4 }
    : null;
  const extraCards = isTypicalLayout ? [] : stats.slice(2);

  return (
    <section className="py-14 bg-white overflow-hidden">
      <div className="container lg:px-16 px-4">
        {/* ── Desktop / tablet ── */}
        <div className="hidden md:block">
          {isTypicalLayout ? (
            <div className="flex flex-col gap-5 lg:gap-6">
              {/*
                Top (logical start→end):
                heading (aligns with bottom-right pair) | top cards centered on gap | spacer (matches left card)
              */}
              <div className="flex items-start gap-3 lg:gap-4">
                {/* Heading — same footprint as the two bottom-right cards */}
                <div
                  data-aos="fade-right"
                  className="shrink-0 text-start self-center w-[calc(2*160px+0.75rem)] lg:w-[calc(2*190px+1rem)]"
                >
                  <p className="text-primary text-xl lg:text-2xl font-medium leading-snug">
                    {sideLabel[0]}
                  </p>
                  <p className="text-primary text-2xl lg:text-4xl font-bold leading-snug">
                    {sideLabel[1]}
                  </p>
                </div>

                {/* Top cards — centered over the connecting line */}
                <div className="flex-1 flex items-start justify-center gap-3 lg:gap-4">
                  {topCards.map(({ stat, index }) => (
                    <StatCard
                      key={index}
                      stat={stat}
                      delay={index * 100}
                      variant={variantOf(index)}
                    />
                  ))}
                </div>

                {/* Spacer matching bottom-left card so center aligns with the timeline */}
                <div className={`${CARD_W} shrink-0`} aria-hidden />
              </div>

              {/*
                Bottom (logical start→end):
                right pair [0,1] | timeline ★ | left card [4]
              */}
              <div className="flex items-center gap-3 lg:gap-4">
                <div className="flex items-center gap-3 lg:gap-4 shrink-0">
                  {bottomRightCards.map(({ stat, index }) => (
                    <StatCard
                      key={index}
                      stat={stat}
                      delay={index * 100}
                      variant={variantOf(index)}
                    />
                  ))}
                </div>

                <div className="flex-1 flex items-center relative min-w-[64px] mx-1 lg:mx-4">
                  <div className="w-full h-px bg-primary" />
                  <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-white px-1">
                    <TimelineStar />
                  </span>
                </div>

                {bottomLeftCard && (
                  <StatCard
                    key={bottomLeftCard.index}
                    stat={bottomLeftCard.stat}
                    delay={bottomLeftCard.index * 100}
                    variant={variantOf(bottomLeftCard.index)}
                  />
                )}
              </div>
            </div>
          ) : (
            <div className="space-y-6 lg:space-y-8">
              <div className="flex items-start justify-between gap-4 flex-wrap">
                <div data-aos="fade-right" className="text-start shrink-0">
                  <p className="text-primary text-xl lg:text-2xl font-medium leading-snug">
                    {sideLabel[0]}
                  </p>
                  <p className="text-primary text-2xl lg:text-4xl font-bold leading-snug">
                    {sideLabel[1]}
                  </p>
                </div>
                <div className="flex items-start gap-3 lg:gap-4">
                  {topCards.map(({ stat, index }) => (
                    <StatCard
                      key={index}
                      stat={stat}
                      delay={index * 100}
                      variant={variantOf(index)}
                    />
                  ))}
                </div>
              </div>

              {extraCards.length > 0 &&
                (extraCards.length <= 3 ? (
                  <div className="flex items-center gap-3">
                    <div className="flex gap-3">
                      {extraCards.slice(0, -1).map((stat, i) => {
                        const index = 2 + i;
                        return (
                          <StatCard
                            key={index}
                            stat={stat}
                            delay={index * 100}
                            variant={variantOf(index)}
                          />
                        );
                      })}
                    </div>
                    <div className="flex-1 flex items-center relative mx-3">
                      <div className="w-full h-px bg-primary" />
                      <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-white px-1">
                        <TimelineStar />
                      </span>
                    </div>
                    <StatCard
                      stat={extraCards[extraCards.length - 1]}
                      delay={(stats.length - 1) * 100}
                      variant={variantOf(stats.length - 1)}
                    />
                  </div>
                ) : (
                  <Swiper
                    modules={[Autoplay, Pagination]}
                    slidesPerView={2}
                    spaceBetween={12}
                    loop={extraCards.length > 3}
                    autoplay={{ delay: 3000, disableOnInteraction: false }}
                    pagination={{ clickable: true }}
                    breakpoints={{
                      576: { slidesPerView: 3 },
                      992: { slidesPerView: 4 },
                    }}
                    className="pb-10"
                  >
                    {extraCards.map((stat, i) => (
                      <SwiperSlide key={i + 2}>
                        <StatCard
                          stat={stat}
                          delay={0}
                          variant={variantOf(i + 2)}
                        />
                      </SwiperSlide>
                    ))}
                  </Swiper>
                ))}
            </div>
          )}
        </div>

        {/* ── Mobile ── */}
        <div className="md:hidden space-y-6">
          <div data-aos="fade-right" className="text-start">
            <p className="text-primary text-xl font-medium leading-snug">
              {sideLabel[0]}
            </p>
            <p className="text-primary text-2xl font-bold leading-snug">
              {sideLabel[1]}
            </p>
          </div>

          <Swiper
            modules={[Autoplay, Pagination]}
            slidesPerView={1.35}
            spaceBetween={12}
            centeredSlides={false}
            autoplay={{ delay: 3000, disableOnInteraction: false }}
            pagination={{ clickable: true }}
            className="pb-10 !overflow-visible"
          >
            {stats.map((stat, i) => (
              <SwiperSlide key={i} className="!h-auto">
                <StatCard
                  stat={stat}
                  delay={0}
                  variant={variantOf(i)}
                  className="w-full min-w-0"
                />
              </SwiperSlide>
            ))}
          </Swiper>
        </div>
      </div>
    </section>
  );
}

function StatCard({
  stat,
  delay,
  variant,
  className = "",
}: {
  stat: { value: string; subLabel: string };
  delay: number;
  variant: "dark" | "light";
  className?: string;
}) {
  const darkClasses = "bg-primary text-white";
  const lightClasses = "bg-[#d8c09b] text-primary";
  const subColor = variant === "dark" ? "text-white/80" : "text-primary/75";
  const plusColor = variant === "dark" ? "text-primary/40" : "text-primary/50";

  return (
    <div
      data-aos="zoom-in"
      data-aos-delay={String(delay)}
      className={`
        relative flex flex-col justify-center gap-3
        px-5 py-10 lg:py-12 rounded-2xl
        ${CARD_W} min-h-[200px] lg:min-h-[220px]
        ${variant === "dark" ? darkClasses : lightClasses}
        ${className}
      `}
    >
      <span
        className={`
          absolute top-4 left-4
          flex items-center justify-center
          w-5 h-5 rounded-full bg-white
          text-xs font-bold leading-none ${plusColor}
        `}
      >
        +
      </span>

      <p className="text-2xl lg:text-3xl font-bold leading-tight text-center">
        {stat.value}
      </p>
      <p className={`text-xs leading-relaxed text-center ${subColor}`}>
        {stat.subLabel}
      </p>
    </div>
  );
}