import type { GreenEnergyStatCardData } from "@/lib/strapi/types"

const cardGradient =
  "linear-gradient(164.47deg, rgb(46, 69, 30) 16.68%, rgb(12, 22, 6) 95.23%)"

const cardGradientMobile =
  "linear-gradient(163.7deg, rgb(46, 69, 30) 16.68%, rgb(12, 22, 6) 95.23%)"

const cardRadialOverlay = `url("data:image/svg+xml;utf8,<svg viewBox='0 0 351 205' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%25' width='100%25' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(16.107 -15.483 26.509 14.405 146.17 172.05)'><stop stop-color='rgba(219,233,255,0)' offset='0'/><stop stop-color='rgba(219,233,255,1)' offset='1'/></radialGradient></defs></svg>")`

function CardOverlaySVG() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="159"
      height="182"
      viewBox="0 0 159 182"
      fill="none"
      className="absolute pointer-events-none select-none"
      style={{
        right: "-5px",
        top: "-47px",
        width: "278px",
        height: "286.116px",
        transform: "rotate(20.975deg)",
      }}
      aria-hidden="true"
    >
      <path
        d="M128.255 42.9513C133.027 38.3938 128.13 30.5685 121.945 32.8669L3.9601 76.7118C0.353847 78.052 -1.11345 82.3649 0.927358 85.6262L27.8948 128.722C29.9356 131.983 34.456 132.549 37.238 129.892L128.255 42.9513Z"
        fill="white"
        fillOpacity="0.06"
      />
      <path
        d="M154.874 17.3622C150.937 22.6576 142.569 18.76 144.09 12.3394L173.098 -110.141C173.985 -113.884 178.085 -115.871 181.572 -114.246L227.656 -92.7811C231.143 -91.1567 232.261 -86.7402 229.966 -83.6526L154.874 17.3622Z"
        fill="white"
        fillOpacity="0.06"
      />
      <path
        d="M141.842 49.5052C142.196 42.9165 151.324 41.5403 153.605 47.7318L197.117 165.84C198.447 169.45 196.128 173.371 192.324 173.945L142.055 181.523C138.25 182.097 134.878 179.034 135.085 175.192L141.842 49.5052Z"
        fill="white"
        fillOpacity="0.06"
      />
      <path
        d="M134.693 13.2677C138.376 18.7427 131.914 25.3354 126.367 21.7636L20.5339 -46.3705C17.299 -48.4531 16.7911 -52.9804 19.484 -55.728L55.0685 -92.0352C57.7614 -94.7829 62.298 -94.366 64.4452 -91.1737L134.693 13.2677Z"
        fill="white"
        fillOpacity="0.06"
      />
      <path
        d="M161.13 25.5816C154.57 26.2856 153.681 35.4737 159.985 37.4224L280.238 74.5957C283.914 75.7319 287.707 73.2076 288.077 69.3783L292.973 18.7769C293.344 14.9476 290.106 11.743 286.28 12.1535L161.13 25.5816Z"
        fill="white"
        fillOpacity="0.06"
      />
    </svg>
  )
}

function StatsCard({ icon, title, description }: GreenEnergyStatCardData) {
  return (
    <>
      <div
        className="md:hidden relative w-full rounded-2xl p-4 h-[205px] overflow-clip"
        style={{ background: `${cardGradientMobile}, ${cardRadialOverlay}` }}
      >
        <CardOverlaySVG />
        <div className="relative flex flex-col justify-between h-[173px]">
          {icon ? (
            <img src={icon} alt="" loading="lazy" className="w-[45px] h-[45px]" />
          ) : null}
          <div className="flex flex-col gap-2">
            <p className="font-accent text-white text-[32px] leading-[1.04] tracking-[-0.96px] font-bold">
              {title}
            </p>
            <p className="text-white text-[14px] leading-[24px]">{description}</p>
          </div>
        </div>
      </div>

      <div
        className="hidden md:flex relative flex-1 min-w-[280px] rounded-2xl p-6 items-center justify-between min-h-[231px]"
        style={{ backgroundImage: `${cardGradient}, ${cardRadialOverlay}`, overflow: "clip" }}
      >
        <CardOverlaySVG />
        <div className="relative flex flex-col gap-10 items-start flex-1">
          {icon ? (
            <img src={icon} alt="" loading="lazy" className="w-[45px] h-[45px]" />
          ) : null}
          <div className="flex flex-col gap-2 w-full">
            <p className="font-accent text-white text-[40px] leading-[40px] capitalize font-bold">
              {title}
            </p>
            <p className="text-[rgba(255,255,255,0.7)] text-[20px] leading-[25px] capitalize max-w-[285px]">
              {description}
            </p>
          </div>
        </div>
      </div>
    </>
  )
}

/** Split an array into fixed-size rows (handles any count). */
function chunk<T>(arr: T[], size: number): T[][] {
  const rows: T[][] = []
  for (let i = 0; i < arr.length; i += size) rows.push(arr.slice(i, i + size))
  return rows
}

export default function GreenEnergyStats({ data }: { data: GreenEnergyStatCardData[] }) {
  const rows = chunk(data, 3)
  return (
    <section className="w-full max-w-[1296px] mx-auto px-5 md:px-6 py-16 flex flex-col gap-5 md:gap-6">
      <div className="flex flex-col gap-5 md:hidden">
        {data.map((card, i) => (
          <StatsCard key={i} {...card} />
        ))}
      </div>
      {rows.map((row, ri) => (
        <div key={ri} className="hidden md:grid md:grid-cols-3 md:gap-6">
          {row.map((card, ci) => (
            <StatsCard key={`${ri}-${ci}`} {...card} />
          ))}
        </div>
      ))}
    </section>
  )
}