"use client";

import React, { useState, useRef } from 'react';
import Image from 'next/image';

interface ComparisonSliderProps {
  beforeImage: string;
  afterImage: string;
  beforeLabel?: string;
  afterLabel?: string;
}

export const ComparisonSlider: React.FC<ComparisonSliderProps> = ({
  beforeImage,
  afterImage,
  beforeLabel = "Technical Drawing",
  afterLabel = "3D Visualization",
}) => {
  const [sliderPosition, setSliderPosition] = useState(50);
  const containerRef = useRef<HTMLDivElement>(null);

  const handleMove = (event: React.MouseEvent | React.TouchEvent) => {
    if (!containerRef.current) return;

    const rect = containerRef.current.getBoundingClientRect();
    const x = 'touches' in event ? event.touches[0].clientX : (event as React.MouseEvent).clientX;
    const position = ((x - rect.left) / rect.width) * 100;

    if (position >= 0 && position <= 100) {
      setSliderPosition(position);
    }
  };

  return (
    <div 
      ref={containerRef}
      className="relative aspect-video rounded-xl overflow-hidden cursor-ew-resize select-none border border-ui-border shadow-2xl"
      onMouseMove={handleMove}
      onTouchMove={handleMove}
    >
      {/* After Image (3D Visualization) - Bottom Layer */}
      <div className="absolute inset-0">
        <Image 
          src={afterImage} 
          alt="After" 
          fill
          className="object-cover"
          priority
        />
      </div>

      {/* Before Image (Technical Drawing) - Top Layer with Clip Path */}
      <div 
        className="absolute inset-0 z-10"
        style={{ clipPath: `inset(0 ${100 - sliderPosition}% 0 0)` }}
      >
        <Image 
          src={beforeImage} 
          alt="Before" 
          fill
          className="object-cover"
          priority
        />
      </div>

      {/* Slider Handle */}
      <div 
        className="absolute top-0 bottom-0 z-20 w-1 bg-white pointer-events-none"
        style={{ left: `${sliderPosition}%` }}
      >
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-10 h-10 md:w-12 md:h-12 bg-white rounded-full shadow-xl flex items-center justify-center pointer-events-auto">
          <div className="w-7 h-7 md:w-8 md:h-8 rounded-full bg-primary flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="m18 8 4 4-4 4"></path><path d="m6 8-4 4 4 4"></path></svg>
          </div>
        </div>
      </div>

      {/* Labels */}
      <div className="absolute bottom-4 left-4 md:bottom-8 md:left-8 z-30 glass-effect px-4 py-2 md:px-6 md:py-3 rounded-lg text-[10px] md:text-sm font-bold uppercase tracking-widest">
        {beforeLabel}
      </div>
      <div className="absolute bottom-4 right-4 md:bottom-8 md:right-8 z-30 bg-primary/80 backdrop-blur-xl border border-primary/30 px-4 py-2 md:px-6 md:py-3 rounded-lg text-[10px] md:text-sm font-bold uppercase tracking-widest text-white">
        {afterLabel}
      </div>
    </div>
  );
};
