"use client"

import { useState, useRef, useCallback, useEffect } from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"
import type { VitalTransportData } from "@/lib/strapi/types"

function EnaBullets({ bullets, mobile }: { bullets: string[]; mobile: boolean }) {
  return (
    <div className="flex flex-col gap-4">
      {bullets.map((bullet, i) => {
        const parts = bullet.split(" – ")
        const title = parts[0]
        const desc = parts[1] ? " – " + parts.slice(1).join(" – ") : ""
        return (
          <div key={i} className={`flex gap-${mobile ? "[15px]" : "6"} items-center`}>
            <img
              src="/assets/vital-industries/vector-badge-red.svg"
              alt=""
              loading="lazy"
              className="w-[17px] h-[16px] shrink-0"
            />
            <p className={`font-sans text-[#4a5565] ${mobile ? "text-[14px]" : "text-[20px]"} leading-[24px]`}>
              <span className="font-heading font-bold text-[#101828]">{title}</span>
              {desc}
            </p>
          </div>
        )
      })}
    </div>
  )
}

export default function VitalTransport({ data }: { data: VitalTransportData }) {
  const [scrollPos, setScrollPos] = useState(0)
  const mobileScrollRef = useRef<HTMLDivElement>(null)
  const [mobileCanScrollLeft, setMobileCanScrollLeft] = useState(false)
  const [mobileCanScrollRight, setMobileCanScrollRight] = useState(true)
  const cardWidth = 234 + 24
  const mobileCardWidth = 234 + 16
  const maxScroll = Math.max(0, (data.products.length - 4) * cardWidth)

  const scrollLeft = () => setScrollPos((prev) => Math.max(0, prev - cardWidth))
  const scrollRight = () => setScrollPos((prev) => Math.min(maxScroll, prev + cardWidth))

  const updateMobileScrollState = useCallback(() => {
    const el = mobileScrollRef.current
    if (!el) return
    setMobileCanScrollLeft(el.scrollLeft > 2)
    setMobileCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 2)
  }, [])

  const mobileScrollLeft = () =>
    mobileScrollRef.current?.scrollBy({ left: -mobileCardWidth, behavior: "smooth" })
  const mobileScrollRight = () =>
    mobileScrollRef.current?.scrollBy({ left: mobileCardWidth, behavior: "smooth" })

  useEffect(() => {
    const el = mobileScrollRef.current
    if (!el) return
    updateMobileScrollState()
    el.addEventListener("scroll", updateMobileScrollState, { passive: true })
    window.addEventListener("resize", updateMobileScrollState)
    return () => {
      el.removeEventListener("scroll", updateMobileScrollState)
      window.removeEventListener("resize", updateMobileScrollState)
    }
  }, [updateMobileScrollState])

  return (
    <section className="w-full max-w-[1296px] mx-auto px-4 md:px-6 py-8">
      <div className="flex flex-col gap-5 md:gap-6 items-end">
        <div className="flex flex-col md:flex-row md:items-start md:justify-between w-full gap-5 md:gap-0">
          <div className="bg-[#ebebeb] rounded-full px-6 py-3 flex gap-2 items-center w-fit">
            <img
              src={data.badgeIcon}
              alt=""
              loading="lazy"
              className="w-[17px] h-[16px]"
            />
            <span className="font-heading text-black text-[16px] leading-none uppercase">
              {data.badge}
            </span>
          </div>
          <div className="flex flex-col gap-4 md:gap-6 md:w-[52%]">
            <p className="font-sans text-[rgba(32,38,43,0.6)] md:text-[#4a5565] text-[16px] leading-[1.5] md:leading-[24px] font-medium">
              {data.description}
            </p>
            <div className="w-full h-0 border-t border-[#e5e7eb]" />
          </div>
        </div>

        <div className="flex flex-col gap-5 md:gap-6 w-full">
          <div
            className="relative rounded-2xl overflow-clip w-full md:hidden"
            style={{
              backgroundImage:
                "radial-gradient(ellipse at 42% 84%, rgba(244,247,251,0) 0%, rgba(244,247,251,1) 100%), radial-gradient(ellipse at 42% 84%, rgba(255,232,233,0) 0%, rgba(255,232,233,1) 100%)",
            }}
          >
            <div
              className="absolute pointer-events-none"
              style={{ right: "-80px", top: "-82px" }}
              aria-hidden="true"
            >
              <img
                src="/assets/vital-industries/vector-decorative-light.svg"
                alt=""
                loading="lazy"
                className="w-[343px] h-[311px] rotate-[25deg]"
              />
            </div>
            <div className="relative flex flex-col gap-6 w-full max-w-[319px] mx-auto py-8 px-4">
              <p className="font-heading text-[#101828] text-[16px] leading-[24px] font-medium">
                {data.enaTransportationLabel}
              </p>
              <EnaBullets bullets={data.enaBullets} mobile />
            </div>
          </div>

          <div
            className="relative rounded-2xl p-10 overflow-hidden w-full hidden md:block"
            style={{
              background:
                "radial-gradient(at 42% 84%, rgba(244, 247, 251, 0) 0%, rgb(221 228 238) 100%)",
            }}
          >
            <div
              className="absolute right-[-60px] top-[-107px] flex items-center justify-center pointer-events-none"
              aria-hidden="true"
            >
              <img
                src="/assets/vital-industries/vector-decorative-light.svg"
                alt=""
                loading="lazy"
                className="w-[297px] h-[286px] rotate-[25deg]"
              />
            </div>
            <div className="flex flex-col gap-6 relative">
              <h3 className="font-heading text-[#101828] text-[24px] leading-[24px] font-medium">
                {data.enaTransportationLabel}
              </h3>
              <EnaBullets bullets={data.enaBullets} mobile={false} />
            </div>
          </div>

          <div
            className="relative rounded-2xl px-4 py-10 overflow-hidden w-full md:hidden"
            style={{
              background:
                "radial-gradient(ellipse at 42% 84%, rgba(255,232,233,0) 0%, rgba(255,232,233,1) 100%)",
            }}
          >
            <h3 className="font-heading text-[#2a3036] text-[24px] leading-[24px] font-medium mb-6">
              {data.productsLabel}
            </h3>
            <div
              ref={mobileScrollRef}
              className="overflow-x-auto -mx-4 px-4"
              style={{ scrollbarWidth: "none", msOverflowStyle: "none", WebkitOverflowScrolling: "touch" }}
            >
              <div className="flex gap-4">
                {data.products.map((product) => (
                  <div
                    key={product.name}
                    className="relative w-[234px] h-[288px] rounded-2xl overflow-hidden shrink-0"
                  >
                    <img
                      src={product.image}
                      alt={product.name}
                      loading="lazy"
                      className="absolute inset-0 w-full h-full object-cover"
                    />
                    <div
                      className="absolute inset-0"
                      style={{
                        background: "linear-gradient(180deg, rgba(8,19,37,0) 50%, rgb(5,16,32) 100%)",
                      }}
                    />
                    <div className="absolute bottom-4 left-4">
                      <p className="text-white text-[24px] leading-[1.04]">{product.name}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div className="flex items-center justify-end mt-6">
              <div className="flex gap-[13px] items-center">
                <button
                  onClick={mobileScrollLeft}
                  disabled={!mobileCanScrollLeft}
                  className={`w-[44px] h-[44px] rounded-full border-2 border-[#d20010] flex items-center justify-center transition-all active:scale-95 ${!mobileCanScrollLeft ? "opacity-30 cursor-not-allowed" : "opacity-100 hover:opacity-80"}`}
                  aria-label="Scroll left"
                >
                  <ChevronLeft size={20} strokeWidth={1.5} className="text-[#d20010]" />
                </button>
                <button
                  onClick={mobileScrollRight}
                  disabled={!mobileCanScrollRight}
                  className={`w-[44px] h-[44px] rounded-full border-2 border-[#d20010] flex items-center justify-center transition-all active:scale-95 ${!mobileCanScrollRight ? "opacity-30 cursor-not-allowed" : "opacity-100 hover:opacity-80"}`}
                  aria-label="Scroll right"
                >
                  <ChevronRight size={20} strokeWidth={1.5} className="text-[#d20010]" />
                </button>
              </div>
            </div>
          </div>

          <div
            className="relative rounded-2xl p-10 overflow-hidden w-full hidden md:block"
            style={{
              background:
                "radial-gradient(ellipse at 42% 84%, rgba(255,232,233,0) 0%, rgba(255,232,233,1) 100%)",
            }}
          >
            <div className="flex items-center justify-between mb-4">
              <h3 className="font-heading text-[#101828] text-[24px] leading-[24px] font-medium">
                {data.productsLabel}
              </h3>
              <div className="flex gap-2 items-center">
                <button
                  onClick={scrollLeft}
                  disabled={scrollPos <= 0}
                  className={`w-[60px] h-[58px] rounded-full border-2 border-[#d20010] flex items-center justify-center transition-all active:scale-95 ${scrollPos <= 0 ? "opacity-30 cursor-not-allowed" : "opacity-100 hover:opacity-80"}`}
                  aria-label="Scroll left"
                >
                  <ChevronLeft size={24} strokeWidth={1.5} className="text-[#d20010]" />
                </button>
                <button
                  onClick={scrollRight}
                  disabled={scrollPos >= maxScroll}
                  className={`w-[60px] h-[58px] rounded-full border-2 border-[#d20010] flex items-center justify-center transition-all active:scale-95 ${scrollPos >= maxScroll ? "opacity-30 cursor-not-allowed" : "opacity-100 hover:opacity-80"}`}
                  aria-label="Scroll right"
                >
                  <ChevronRight size={24} strokeWidth={1.5} className="text-[#d20010]" />
                </button>
              </div>
            </div>
            <div className="overflow-hidden">
              <div
                className="flex gap-6 transition-transform duration-300"
                style={{ transform: `translateX(-${scrollPos}px)` }}
              >
                {data.products.map((product) => (
                  <div
                    key={product.name}
                    className="relative w-[234px] h-[288px] rounded-2xl overflow-hidden shrink-0"
                  >
                    <img
                      src={product.image}
                      alt={product.name}
                      loading="lazy"
                      className="absolute inset-0 w-full h-full object-cover"
                    />
                    <div
                      className="absolute inset-0"
                      style={{
                        background: "linear-gradient(180deg, rgba(8,19,37,0) 50%, rgb(5,16,32) 100%)",
                      }}
                    />
                    <div className="absolute bottom-4 left-4">
                      <p className="font-accent text-white text-[32px] leading-[1.04]">{product.name}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}