import React, { useRef, useState } from "react";
import {
  ChevronLeft,
  ChevronRight,
  GalleryHorizontal,
  LayoutGrid,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import type { ResourceCarouselProps } from "./types";

export function ResourceCarousel({
  title,
  items,
  headerAction,
  onViewModeChange,
  className,
}: ResourceCarouselProps) {
  const scrollRef = useRef<HTMLDivElement>(null);
  const [viewMode, setViewMode] = useState<"compact" | "grid">("compact");

  function scrollLeft() {
    scrollRef.current?.scrollBy({ left: -380, behavior: "smooth" });
  }

  function scrollRight() {
    scrollRef.current?.scrollBy({ left: 380, behavior: "smooth" });
  }

  return (
    <div className={cn("flex flex-col gap-4", className)}>
      {/* Header row */}
      {(title || headerAction) && (
        <div className="flex items-center justify-between gap-4">
          <div className="flex flex-1 items-center gap-4 min-w-0">
            {title && <h2 className="text-h3 text-foreground">{title}</h2>}
            {headerAction && (
              <div className="flex-1 flex justify-end">{headerAction}</div>
            )}
          </div>
          <ToggleGroup
            type="single"
            variant="outline"
            value={[viewMode]}
            onValueChange={(v) => {
              if (v.length > 0) {
                const mode = v[0] as "compact" | "grid";
                setViewMode(mode);
                onViewModeChange?.(mode);
              }
            }}
            aria-label="View mode"
          >
            <ToggleGroupItem value="compact" aria-label="Compact view">
              <GalleryHorizontal className="size-4" />
            </ToggleGroupItem>
            <ToggleGroupItem value="grid" aria-label="Grid view">
              <LayoutGrid className="size-4" />
            </ToggleGroupItem>
          </ToggleGroup>
        </div>
      )}

      {/* Content */}
      {items.length === 0 ? (
        <p className="py-8 text-center text-body-small text-muted-foreground">
          No items available
        </p>
      ) : viewMode === "grid" ? (
        <div className="grid grid-cols-4 gap-6 max-[1280px]:grid-cols-3 max-[900px]:grid-cols-2 max-[600px]:grid-cols-1">
          {items.map((item, i) => (
            <div key={i}>{item}</div>
          ))}
        </div>
      ) : (
        <div className="group/track relative">
          <button
            type="button"
            onClick={scrollLeft}
            aria-label="Scroll left"
            className={cn(
              "absolute left-0 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2",
              "flex size-9 items-center justify-center",
              "border border-border bg-background shadow-sm",
              "opacity-0 transition-opacity duration-200 group-hover/track:opacity-100",
              "hover:bg-muted focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
            )}
          >
            <ChevronLeft className="size-4 text-foreground" />
          </button>

          <div
            ref={scrollRef}
            className="flex gap-4 overflow-x-auto scroll-smooth pb-2"
            style={{ scrollbarWidth: "none" }}
          >
            {items.map((item, i) => (
              <div key={i} className="w-[360px] shrink-0">
                {item}
              </div>
            ))}
          </div>

          <button
            type="button"
            onClick={scrollRight}
            aria-label="Scroll right"
            className={cn(
              "absolute right-0 top-1/2 z-10 translate-x-1/2 -translate-y-1/2",
              "flex size-9 items-center justify-center",
              "border border-border bg-background shadow-sm",
              "opacity-0 transition-opacity duration-200 group-hover/track:opacity-100",
              "hover:bg-muted focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
            )}
          >
            <ChevronRight className="size-4 text-foreground" />
          </button>
        </div>
      )}
    </div>
  );
}