import type { SceneTheme } from '@/entities/scene';
import { getSceneCardBackgroundStyle, type SceneAssetMap } from '@/entities/media';
import { copy } from '@/shared/i18n';
import { cn } from '@/shared/lib/cn';
import { useDragScroll } from '@/shared/lib/useDragScroll';

interface SceneSelectCarouselProps {
  scenes: SceneTheme[];
  selectedSceneId: string;
  sceneAssetMap?: SceneAssetMap;
  onSelect: (sceneId: string) => void;
}

export const SceneSelectCarousel = ({
  scenes,
  selectedSceneId,
  sceneAssetMap,
  onSelect,
}: SceneSelectCarouselProps) => {
  const { containerRef, events, isDragging, shouldSuppressClick } = useDragScroll();

  return (
    <div 
      ref={containerRef}
      {...events}
      className={cn(
        "-mx-1 overflow-x-auto px-1 pb-1 scrollbar-none",
        isDragging ? "cursor-grabbing" : "cursor-grab"
      )}
    >
      <div className="flex min-w-full gap-2.5">
        {scenes.map((scene) => {
          const selected = scene.id === selectedSceneId;

          return (
            <button
              key={scene.id}
              type="button"
              onClick={() => {
                if (!shouldSuppressClick) {
                  onSelect(scene.id);
                }
              }}
              className={cn(
                'group relative h-24 min-w-[138px] overflow-hidden rounded-xl border text-left sm:min-w-[148px]',
                selected
                  ? 'border-sky-200/38 shadow-[0_0_0_1px_rgba(186,230,253,0.2),0_0_10px_rgba(56,189,248,0.12)]'
                  : 'border-white/16 hover:border-white/24',
                isDragging && 'pointer-events-none'
              )}
              style={getSceneCardBackgroundStyle(scene, sceneAssetMap?.[scene.id])}
              aria-label={`${scene.name} ${copy.common.select}`}
            >
              <span className="absolute inset-x-0 bottom-0 h-[56%] bg-[linear-gradient(180deg,rgba(2,6,23,0)_0%,rgba(2,6,23,0.2)_52%,rgba(2,6,23,0.24)_100%)]" />
              {selected ? (
                <span className="absolute right-2 top-2 inline-flex h-5 w-5 items-center justify-center rounded-full border border-sky-200/64 bg-sky-200/24 text-[10px] font-semibold text-sky-50">
                  ✓
                </span>
              ) : null}
              <div className="absolute inset-x-2 bottom-2">
                <p className="truncate text-sm font-semibold text-white/96">{scene.name}</p>
                <p className="truncate text-[11px] text-white/66">{scene.vibeLabel}</p>
              </div>
            </button>
          );
        })}
      </div>
    </div>
  );
};