"use client";

import * as React from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import { RoundedBox, Text } from "@react-three/drei";
import type { Group } from "three";
import { cn } from "@/lib/utils";

function Ring({
  items,
  colors,
  targetRef,
}: {
  items: string[];
  colors: string[];
  targetRef: React.RefObject<number>;
}) {
  const group = React.useRef<Group>(null);
  const radius = 2.6;

  useFrame(() => {
    if (!group.current) return;
    const target = targetRef.current ?? 0;
    group.current.rotation.y += (target - group.current.rotation.y) * 0.08;
  });

  return (
    <group ref={group}>
      {items.map((label, index) => {
        const angle = (index / items.length) * Math.PI * 2;
        return (
          <group
            key={label}
            position={[Math.sin(angle) * radius, 0, Math.cos(angle) * radius]}
            rotation={[0, angle, 0]}
          >
            <RoundedBox args={[1.5, 2, 0.08]} radius={0.08} smoothness={4}>
              <meshStandardMaterial
                color={colors[index % colors.length]}
                roughness={0.3}
                metalness={0.4}
              />
            </RoundedBox>
            <Text position={[0, 0, 0.06]} fontSize={0.2} anchorX="center" anchorY="middle">
              {label}
            </Text>
          </group>
        );
      })}
    </group>
  );
}

export function Carousel3D({
  items,
  colors = ["#8b5cf6", "#0ea5e9", "#f43f5e", "#22c55e", "#f59e0b", "#14b8a6"],
  height = 380,
  className,
}: {
  items: string[];
  colors?: string[];
  height?: number;
  className?: string;
}) {
  const targetRef = React.useRef(0);
  const dragging = React.useRef<{ x: number; start: number } | null>(null);
  const [index, setIndex] = React.useState(0);

  const step = (Math.PI * 2) / items.length;

  function snap(rotation: number) {
    const snapped = Math.round(rotation / step) * step;
    targetRef.current = snapped;
    const normalised = ((-snapped / step) % items.length + items.length) % items.length;
    setIndex(Math.round(normalised) % items.length);
  }

  return (
    <div className={cn("w-full space-y-3", className)}>
      <div
        className="w-full cursor-grab overflow-hidden rounded-2xl border bg-black active:cursor-grabbing"
        style={{ height }}
        onPointerDown={(event) => {
          dragging.current = { x: event.clientX, start: targetRef.current };
          (event.target as HTMLElement).setPointerCapture?.(event.pointerId);
        }}
        onPointerMove={(event) => {
          if (!dragging.current) return;
          const delta = (event.clientX - dragging.current.x) / 180;
          targetRef.current = dragging.current.start + delta;
        }}
        onPointerUp={() => {
          if (dragging.current) snap(targetRef.current);
          dragging.current = null;
        }}
        onPointerLeave={() => {
          if (dragging.current) snap(targetRef.current);
          dragging.current = null;
        }}
      >
        <Canvas camera={{ position: [0, 0.6, 6], fov: 45 }} dpr={[1, 2]}>
          <ambientLight intensity={0.7} />
          <directionalLight position={[3, 5, 4]} intensity={2} />
          <pointLight position={[-4, 0, -3]} intensity={14} color="#38bdf8" />
          <Ring items={items} colors={colors} targetRef={targetRef} />
        </Canvas>
      </div>

      <div className="flex items-center justify-center gap-1.5">
        {items.map((item, itemIndex) => (
          <span
            key={item}
            className={cn(
              "h-1.5 rounded-full transition-all",
              itemIndex === index ? "w-6 bg-primary" : "w-1.5 bg-muted"
            )}
          />
        ))}
      </div>
    </div>
  );
}
Related components
