'use client';

import * as React from 'react';
import { motion } from 'framer-motion';
import Link from 'next/link';
import Image from 'next/image';
import { HoverShineOverlay } from "@/components/ui/HoverShineOverlay";
import { useTranslations, useLocale } from 'next-intl';
import { getImageForProject } from '@/lib/image-matcher';

export interface Reference {
  id: string;
  title: string;
  slug: string;
  category: string;
  image?: {
    url: string;
    alt?: string;
  } | string | null;
}

interface ReferencesSliderProps {
  references?: Reference[];
  badge?: string;
  title?: string;
  description?: string;
  ctaLabel?: string;
  ctaHref?: string;
  data?: {
    badge?: string;
    title?: string;
    description?: string;
    ctaLabel?: string;
    ctaHref?: string;
  }
}

export function ReferencesSlider(props: ReferencesSliderProps) {
  const t = useTranslations('ReferencesSlider');
  const locale = useLocale();

  const { data } = props;
  const references = props.references || [];
  const containerRef = React.useRef<HTMLDivElement>(null);
  const dragDistanceRef = React.useRef(0);
  const startXRef = React.useRef(0);
  const scrollLeftRef = React.useRef(0);
  const isDraggingRef = React.useRef(false);
  const [isDragging, setIsDragging] = React.useState(false);
  
  const badge = props.badge || data?.badge || t('badge');
  const title = props.title || data?.title || t('title');
  const description = props.description || data?.description || t('description');
  const ctaLabel = props.ctaLabel || data?.ctaLabel || t('ctaLabel');
  const ctaHref = props.ctaHref || data?.ctaHref || `/${locale}/referenzen`;

  if (!references || references.length === 0) return null;

  // Map the display category back to our internal image matcher categories
  const mapCategoryToInternal = (cat: string) => {
    const lower = cat.toLowerCase();
    if (lower.includes('pv') || lower.includes('solar')) return 'pv';
    if (lower.includes('wind')) return 'wind';
    if (lower.includes('trasse') || lower.includes('spannung') || lower.includes('power')) return 'power';
    if (lower.includes('batterie') || lower.includes('bess') || lower.includes('speicher')) return 'battery';
    return 'fiber'; // fallback for Tiefbau / Breitband
  };

  const onMouseDown = (e: React.MouseEvent) => {
    if (!containerRef.current) return;
    setIsDragging(true);
    isDraggingRef.current = true;
    const startXVal = e.clientX - (containerRef.current.offsetLeft || 0);
    startXRef.current = startXVal;
    scrollLeftRef.current = containerRef.current.scrollLeft || 0;
    dragDistanceRef.current = 0;
  };

  const onMouseLeave = () => {
    setIsDragging(false);
    isDraggingRef.current = false;
  };

  const onMouseUp = () => {
    setIsDragging(false);
    isDraggingRef.current = false;
  };

  const onMouseMove = (e: React.MouseEvent) => {
    if (!isDraggingRef.current || !containerRef.current) return;
    e.preventDefault();
    const x = e.clientX - (containerRef.current.offsetLeft || 0);
    const walk = (x - startXRef.current) * 2; // Scroll-fast
    containerRef.current.scrollLeft = scrollLeftRef.current - walk;
    dragDistanceRef.current = Math.abs(x - startXRef.current);
  };


  return (
    <section id="referenzen" className="py-24 bg-neutral-dark text-white relative overflow-hidden">
      <div className="absolute inset-0 bg-gradient-to-b from-neutral-dark via-neutral-900 to-neutral-dark z-0" />
      
      <div className="container relative z-10 mb-12 flex flex-col md:flex-row justify-between items-end gap-6">
        <div>
          <h2 className="text-primary-light font-bold tracking-wider uppercase text-sm mb-3">{badge}</h2>
          <h3 className="font-heading text-4xl md:text-5xl font-extrabold">{title}</h3>
        </div>
        <p className="text-white/60 max-w-md">
          {description}
        </p>
      </div>

      <div className="relative z-10">
        <div 
          ref={containerRef}
          onMouseDown={onMouseDown}
          onMouseLeave={onMouseLeave}
          onMouseUp={onMouseUp}
          onMouseMove={onMouseMove}
          className={`select-none flex gap-6 overflow-x-auto pb-12 pt-4 px-[max(1rem,calc((100vw-1280px)/2))] md:px-[max(2rem,calc((100vw-1280px)/2))] lg:px-[max(2.5rem,calc((100vw-1280px)/2))] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ${isDragging ? 'cursor-grabbing snap-none' : 'cursor-grab snap-x snap-mandatory'}`}
        >
          {references.map((ref, i) => {
            const imgSrc = (ref.image && typeof ref.image === 'object' && ref.image.url) 
              ? ref.image.url 
              : typeof ref.image === 'string'
              ? ref.image
              : getImageForProject(ref.slug || ref.id, mapCategoryToInternal(ref.category));

            return (
              <motion.div
                key={ref.id}
                initial={{ opacity: 0, x: 50 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.1, duration: 0.6, ease: "easeOut" }}
                className="flex-shrink-0 w-[320px] md:w-[480px] snap-center group pointer-events-auto"
              >
                <Link
                  href={`/${locale}/referenzen/${ref.slug}`}
                  data-testid="reference-tile"
                  draggable={false}
                  onClick={(e) => {
                    if (dragDistanceRef.current > 15) {
                      e.preventDefault();
                    }
                    dragDistanceRef.current = 0;
                  }}
                  className="block relative select-none aspect-[16/10] bg-neutral-800 rounded-2xl overflow-hidden mb-5 border border-white/5 shadow-2xl"
                >
                  <Image
                    draggable={false}
                    src={imgSrc}
                    alt={ref.title}
                    fill
                    sizes="(max-width: 768px) 320px, 480px"
                    className="object-cover saturate-50 opacity-70 group-hover:scale-105 group-hover:opacity-100 group-hover:saturate-100 transition-all duration-700 ease-in-out pointer-events-none"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent opacity-80 group-hover:opacity-90 transition-opacity duration-300 pointer-events-none" />
                  
                  <HoverShineOverlay />
                  
                  <div className="absolute bottom-6 left-6 right-6 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-500 pointer-events-none bg-black/60 backdrop-blur-sm p-4 rounded-xl border border-white/10">
                    <span className="inline-block py-1 px-3 rounded-full bg-primary/20 text-white text-[10px] font-bold uppercase tracking-widest mb-2 border border-primary/30">
                      {ref.category}
                    </span>
                    <h4 className="font-heading text-xl md:text-2xl font-bold leading-tight break-words">{ref.title}</h4>
                  </div>
                </Link>
              </motion.div>
            );
          })}
        </div>
      </div>

      <div className="container relative z-10 mt-4 flex justify-center">
        <Link 
          href={ctaHref} 
          className="px-8 py-4 rounded-xl bg-white/5 border border-white/20 hover:bg-white hover:text-neutral-dark hover:shadow-[0_0_20px_rgba(255,255,255,0.3)] transition-all font-bold flex items-center gap-3 backdrop-blur-sm"
        >
          {ctaLabel}
          <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
        </Link>
      </div>
    </section>
  );
}