"use client"
import useEmblaCarousel from "embla-carousel-react"
import Autoplay from "embla-carousel-autoplay"
import { useMemo } from "react"
import { clx } from "@medusajs/ui"
import {
  LayoutComponentDefinition,
  LayoutContext,
} from "@vibentec/component-map"
import { NextButton, PrevButton, usePrevNextButtons } from "@modules/layout/templates/vt-carousel/carousel-arrow-button"

export default function VtFeedback({
  nodes,
  context,
}: {
  nodes: LayoutComponentDefinition
  context: LayoutContext
}) {
  
  const props = nodes.config ?? {}

  const title: string = props.title ?? ""
  const items = props.items ?? []
  const durationSeconds: number = props.duration ?? 5
  const options = props.options ?? { loop: true }
 const plugins = useMemo(() => {
    if (!durationSeconds || durationSeconds <= 0) return []
    return [
      Autoplay({
        delay: durationSeconds * 1000,
        stopOnInteraction: false,
        stopOnMouseEnter: true,
      }),
    ]
  }, [durationSeconds])
  const [emblaRef, emblaApi] = useEmblaCarousel(options, plugins)
  const { prevBtnDisabled, nextBtnDisabled, onPrevButtonClick, onNextButtonClick } = usePrevNextButtons(emblaApi)

  const classes = {
    container: props.className ?? "content-container py-16",
    title: props.titleClassName ?? "text-[#1f3521] text-[28px] font-bold text-center mb-10",
    viewport: "relative overflow-hidden",
    containerInner: "flex",
    slide: props.itemClassName ?? "min-w-full px-6",
    slideInner: "flex flex-col items-center text-center gap-3",
    stars: props.starsClassName ?? "text-[#C4622C] text-xl leading-none",
    reviewTitle: props.reviewTitleClassName ?? "text-[#1f3521] font-bold",
    reviewText: props.reviewTextClassName ?? "text-[#1f3521]",
    author: props.authorClassName ?? "italic text-[#1f3521]",
    controls: props.controls,
  }

  if (!items || items.length === 0) return null

  const showControls = items.length > 1 && classes.controls

  const renderStars = (rating?: number) => {
    const count = Math.max(0, Math.min(5, Math.round(rating ?? 5)))
    return "★★★★★".slice(0, count)
  }

  return (
    <section className={classes.container}>
      {title && <h2 className={classes.title}>{title}</h2>}
      <div className={classes.viewport} ref={emblaRef}>
        <div className={classes.containerInner}>
          {items.map((it: any, idx: number) => (
            <div className={classes.slide} key={`feedback-${idx}`}>
              <div className={classes.slideInner}>
                <div className={classes.stars}>{renderStars(it.rating)}</div>
                {it.title && <div className={classes.reviewTitle}>{it.title}</div>}
                {it.text && <div className={classes.reviewText}>{it.text}</div>}
                {it.author && <div className={classes.author}>{it.author}</div>}
              </div>
            </div>
          ))}
        </div>
        {showControls && (
          <div className="absolute top-1/2 -translate-y-1/2 left-0 right-0 flex items-center justify-between px-4">
            <div className="pointer-events-auto">
              <PrevButton onClick={onPrevButtonClick} disabled={prevBtnDisabled} />
            </div>
            <div className="pointer-events-auto">
              <NextButton onClick={onNextButtonClick} disabled={nextBtnDisabled} />
            </div>
          </div>
        )}
      </div>
    </section>
  )
}
