"use client";

import { useRef, useState, useEffect } from "react";
import { CheckCircle } from "lucide-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 flex-col h-full p-5 rounded-xl bg-muted/30 border-l-4 border-l-primary/60 border-y border-r border-border/30 hover:bg-muted/50 transition-colors duration-200">
      {/* Icon - smaller, inline style */}
      <div className="flex items-center gap-3 mb-3">
        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary flex-shrink-0">
          {icon}
        </div>
        {highlight && (
          <span className="inline-flex items-center gap-1 py-0.5 px-2 rounded-full bg-primary/10 text-[10px] font-semibold text-primary whitespace-nowrap">
            <CheckCircle className="h-3 w-3" />
            {highlight}
          </span>
        )}
      </div>

      <h3 className="font-semibold text-foreground text-sm mb-1.5">{title}</h3>
      <p className="text-xs text-muted-foreground leading-relaxed flex-grow">{description}</p>
    </div>
  );
}

/**
 * Mobile Carousel Item - Compact card for horizontal scrolling
 */
function MobileCarouselItem({ icon, title, description, highlight }: HighlightFeature) {
  return (
    <div className="flex-shrink-0 w-[280px] snap-center">
      <div className="h-full p-4 rounded-xl bg-gradient-to-br from-muted/40 to-muted/20 border border-border/40 shadow-sm">
        {/* Top row: Icon + Highlight badge */}
        <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/10 text-primary flex-shrink-0">
            {icon}
          </div>
          {highlight && (
            <span className="inline-flex items-center gap-1 py-0.5 px-2 rounded-full bg-primary/10 text-[10px] font-bold text-primary uppercase tracking-wide">
              {highlight}
            </span>
          )}
        </div>

        {/* Content */}
        <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
 *
 * A clean, grid-based layout for displaying service features/highlights.
 * On mobile: horizontal scrolling carousel with snap points.
 * On desktop: grid layout.
 */
export function ServiceHighlights({ features, className = "" }: ServiceHighlightsProps) {
  const scrollContainerRef = useRef<HTMLDivElement>(null);
  const [activeIndex, setActiveIndex] = useState(0);

  // Track scroll position to update active dot indicator
  useEffect(() => {
    const container = scrollContainerRef.current;
    if (!container) return;

    const handleScroll = () => {
      const scrollLeft = container.scrollLeft;
      const itemWidth = 280 + 12; // card width + gap
      const newIndex = Math.round(scrollLeft / itemWidth);
      setActiveIndex(Math.min(newIndex, features.length - 1));
    };

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

  // Scroll to specific item when dot is clicked
  const scrollToIndex = (index: number) => {
    const container = scrollContainerRef.current;
    if (!container) return;

    const itemWidth = 280 + 12; // card width + gap
    container.scrollTo({
      left: index * itemWidth,
      behavior: "smooth",
    });
  };

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

        {/* Dot indicators */}
        <div className="flex justify-center gap-1.5 mt-2">
          {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-6 bg-primary"
                  : "w-1.5 bg-muted-foreground/30 hover:bg-muted-foreground/50"
              )}
            />
          ))}
        </div>

        {/* Swipe hint - only show initially */}
        <p className="text-[10px] text-muted-foreground/60 text-center mt-2">
          Swipe to explore features →
        </p>
      </div>

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