"use client";

import { useRef, useState, useEffect } from "react";
import { cn } from "@/shared/utils";

export interface HighlightFeature {
  icon: React.ReactNode;
  title: string;
  description: string;
  highlight?: string;
}

interface ServiceHighlightsProps {
  features: HighlightFeature[];
  className?: string;
}

function HighlightItem({ icon, title, description, highlight }: HighlightFeature) {
  return (
    <div className="group relative flex items-start gap-3 p-4 rounded-xl bg-card border border-border/60 hover:border-primary/30 hover:shadow-sm transition-all duration-200">
      <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/8 text-primary flex-shrink-0 mt-0.5">
        {icon}
      </div>
      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-2 mb-0.5">
          <h3 className="font-semibold text-foreground text-sm">{title}</h3>
          {highlight && (
            <span className="inline-flex py-0.5 px-1.5 rounded-md bg-primary/8 text-[10px] font-semibold text-primary whitespace-nowrap">
              {highlight}
            </span>
          )}
        </div>
        <p className="text-xs text-muted-foreground leading-relaxed">{description}</p>
      </div>
    </div>
  );
}

function MobileCarouselItem({ icon, title, description, highlight }: HighlightFeature) {
  return (
    <div className="flex-shrink-0 w-[260px] snap-center">
      <div className="h-full p-4 rounded-xl bg-card border border-border/60 shadow-sm">
        <div className="flex items-center justify-between gap-2 mb-3">
          <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/8 text-primary flex-shrink-0">
            {icon}
          </div>
          {highlight && (
            <span className="inline-flex py-0.5 px-1.5 rounded-md bg-primary/8 text-[10px] font-bold text-primary uppercase tracking-wide">
              {highlight}
            </span>
          )}
        </div>
        <h3 className="font-semibold text-foreground text-sm mb-1">{title}</h3>
        <p className="text-xs text-muted-foreground leading-relaxed line-clamp-3">{description}</p>
      </div>
    </div>
  );
}

/**
 * ServiceHighlights - Grid-based feature highlights.
 * Mobile: horizontal scrolling carousel. Desktop: 3-column grid.
 */
export function ServiceHighlights({ features, className = "" }: ServiceHighlightsProps) {
  const scrollContainerRef = useRef<HTMLDivElement>(null);
  const [activeIndex, setActiveIndex] = useState(0);

  useEffect(() => {
    const container = scrollContainerRef.current;
    if (!container) return;

    const handleScroll = () => {
      const scrollLeft = container.scrollLeft;
      const itemWidth = 260 + 12;
      const newIndex = Math.min(Math.round(scrollLeft / itemWidth), features.length - 1);
      setActiveIndex(prev => (prev === newIndex ? prev : newIndex));
    };

    container.addEventListener("scroll", handleScroll, { passive: true });
    return () => container.removeEventListener("scroll", handleScroll);
  }, [features.length]);

  const scrollToIndex = (index: number) => {
    const container = scrollContainerRef.current;
    if (!container) return;
    const itemWidth = 260 + 12;
    container.scrollTo({ left: index * itemWidth, behavior: "smooth" });
  };

  return (
    <>
      {/* Mobile: Horizontal carousel */}
      <div className={cn("md:hidden", className)}>
        <div
          ref={scrollContainerRef}
          className="flex gap-3 overflow-x-auto pb-3 -mx-4 px-4 snap-x snap-mandatory scrollbar-hide touch-pan-x"
        >
          {features.map((feature, index) => (
            <MobileCarouselItem key={index} {...feature} />
          ))}
          <div className="flex-shrink-0 w-1" aria-hidden="true" />
        </div>

        {/* Dot indicators */}
        <div className="flex justify-center gap-1.5 mt-1.5">
          {features.map((_, index) => (
            <button
              key={index}
              type="button"
              onClick={() => scrollToIndex(index)}
              aria-label={`Go to slide ${index + 1}`}
              className={cn(
                "h-1.5 rounded-full transition-all duration-300",
                activeIndex === index
                  ? "w-5 bg-primary"
                  : "w-1.5 bg-muted-foreground/25 hover:bg-muted-foreground/40"
              )}
            />
          ))}
        </div>
      </div>

      {/* Desktop: Grid */}
      <div className={cn("hidden md:grid md:grid-cols-2 lg:grid-cols-3 gap-3", className)}>
        {features.map((feature, index) => (
          <HighlightItem key={index} {...feature} />
        ))}
      </div>
    </>
  );
}
