"use client";

import Image from "next/image";
import { useEffect, useRef, useState } from "react";
import { EvChevronLeftIcon, EvChevronRightIcon } from "@/components/ui/ev-icons";
import { brands as mockBrands, type Brand, type Scooter } from "@/lib/mock-data";
import { resolveAssetUrl } from "@/lib/media";
import { cn } from "@/lib/utils";

type HeroModelStripProps = {
  activeIndex: number;
  brands?: Brand[];
  scooters: Scooter[];
  onSelect: (index: number) => void;
  onMove: (direction: -1 | 1) => void;
};

export function HeroModelStrip({
  activeIndex,
  brands = mockBrands,
  scooters,
  onSelect,
  onMove,
}: HeroModelStripProps) {
  const trackRef = useRef<HTMLDivElement | null>(null);
  const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);

  useEffect(() => {
    const track = trackRef.current;
    const activeItem = itemRefs.current[activeIndex];

    if (!track || !activeItem) {
      return;
    }

    const left =
      activeItem.offsetLeft - track.clientWidth / 2 + activeItem.clientWidth / 2;

    track.scrollTo({
      left: Math.max(0, left),
      behavior: "smooth",
    });
  }, [activeIndex]);

  return (
    <div className="container-custom">
      <div className="relative z-20 -mt-10 overflow-hidden rounded-[1.25rem] border border-border bg-white px-4 py-3 shadow-card">
        <div className="flex h-[4.5rem] items-center gap-3">
          <button
            type="button"
            aria-label="Previous scooter"
            className="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-full border border-border bg-white text-navy-deep shadow-sm transition hover:text-primary"
            onClick={() => onMove(-1)}
          >
            <EvChevronLeftIcon className="h-5 w-5" />
          </button>

          <div
            ref={trackRef}
            className="flex min-w-0 flex-1 items-center gap-2 overflow-x-auto scroll-smooth [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
          >
            {scooters.map((scooter, index) => {
              const brand = brands.find((item) => item.id === scooter.brandId);
              const modelImage =
                resolveAssetUrl(scooter.thumbnailImage) ||
                resolveAssetUrl(scooter.heroImage) ||
                resolveAssetUrl(scooter.posterImage) ||
                `/images/scooters/model-${(index % 6) + 1}.png`;

              return (
                <button
                  key={scooter.id}
                  type="button"
                  ref={(node) => {
                    itemRefs.current[index] = node;
                  }}
                  className={cn(
                    "flex min-w-[180px] max-w-[190px] items-center gap-3 overflow-hidden border-r border-border/70 px-3 py-1.5 text-left transition-all duration-300 last:border-r-0",
                    index === activeIndex && "rounded-xl border border-ev/30 bg-ev-soft shadow-[0_8px_18px_rgba(16,165,97,0.15)]",
                  )}
                  onClick={() => onSelect(index)}
                >
                  <span className="relative h-14 w-20 shrink-0">
                    <ModelImage src={modelImage} alt={scooter.name} fallbackIndex={index} />
                  </span>
                  <span className="min-w-0">
                    <span className="block truncate text-xs font-bold text-navy-deep">
                      {brand?.name ?? "Bashista Auto"}
                    </span>
                    <span className="block truncate text-xs text-navy-muted">
                      {scooter.name}
                    </span>
                  </span>
                </button>
              );
            })}
          </div>

          <button
            type="button"
            aria-label="Next scooter"
            className="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-full border border-border bg-white text-navy-deep shadow-sm transition hover:text-primary"
            onClick={() => onMove(1)}
          >
            <EvChevronRightIcon className="h-5 w-5" />
          </button>
        </div>
      </div>
    </div>
  );
}

function ModelImage({
  src,
  alt,
  fallbackIndex,
}: {
  src: string;
  alt: string;
  fallbackIndex: number;
}) {
  const fallback = `/images/scooters/model-${(fallbackIndex % 6) + 1}.png`;
  const [imageSrc, setImageSrc] = useState(src || fallback);

  useEffect(() => {
    setImageSrc(src || fallback);
  }, [fallback, src]);

  return (
    <Image
      src={imageSrc}
      alt={alt}
      fill
      sizes="80px"
      className="object-contain"
      onError={() => setImageSrc(fallback)}
    />
  );
}