"use client";

import { useState, useRef, useEffect, MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from "react";
import Image from "next/image";
import { ArrowLeftRight } from "lucide-react";
import { cn } from "@/lib/utils";

interface ImageComparisonProps {
    beforeImage: string;
    afterImage: string;
    beforeLabel?: string;
    beforeTitle?: string;
    beforeDesc?: string;
    afterLabel?: string;
    afterTitle?: string;
    afterDesc?: string;
}

export default function ImageComparison({
    beforeImage,
    afterImage,
    beforeLabel = "BENCHMARK",
    beforeTitle = "Standard",
    beforeDesc = "Vulnerable to cracks, fading, and rapid decay in tropical weather.",
    afterLabel = "ENGINEERED",
    afterTitle = "i-Roof",
    afterDesc = "Indestructible ASA-Shield technology for lifetime structural integrity."
}: ImageComparisonProps) {
    const [sliderPos, setSliderPos] = useState(50);
    const [isDragging, setIsDragging] = useState(false);
    const containerRef = useRef<HTMLDivElement>(null);

    const handleMove = (clientX: number) => {
        if (!containerRef.current) return;

        const rect = containerRef.current.getBoundingClientRect();
        // Calculate X position relative to container width (0 to 1)
        const xPos = Math.max(0, Math.min((clientX - rect.left) / rect.width, 1));
        // Convert to percentage
        setSliderPos(xPos * 100);
    };

    const handleMouseMove = (e: globalThis.MouseEvent) => {
        if (!isDragging) return;
        e.preventDefault();
        handleMove(e.clientX);
    };

    const handleTouchMove = (e: globalThis.TouchEvent) => {
        if (!isDragging) return;
        // e.preventDefault();
        handleMove(e.touches[0].clientX);
    };

    const handleMouseUp = () => {
        setIsDragging(false);
    };

    useEffect(() => {
        if (isDragging) {
            window.addEventListener("mousemove", handleMouseMove);
            window.addEventListener("mouseup", handleMouseUp);
            window.addEventListener("touchmove", handleTouchMove, { passive: false });
            window.addEventListener("touchend", handleMouseUp);
        } else {
            window.removeEventListener("mousemove", handleMouseMove);
            window.removeEventListener("mouseup", handleMouseUp);
            window.removeEventListener("touchmove", handleTouchMove);
            window.removeEventListener("touchend", handleMouseUp);
        }

        return () => {
            window.removeEventListener("mousemove", handleMouseMove);
            window.removeEventListener("mouseup", handleMouseUp);
            window.removeEventListener("touchmove", handleTouchMove);
            window.removeEventListener("touchend", handleMouseUp);
        };
    }, [isDragging]);

    return (
        <div
            className="relative w-full overflow-hidden select-none group"
            style={{ aspectRatio: "2093 / 1096" }}
            ref={containerRef}
            onMouseDown={(e: ReactMouseEvent) => {
                setIsDragging(true);
                handleMove(e.clientX);
            }}
            onTouchStart={(e: ReactTouchEvent) => {
                setIsDragging(true);
                handleMove(e.touches[0].clientX);
            }}
        >
            {/* Base Image (Before / Left) */}
            <div className="absolute inset-0 w-full h-full">
                <Image
                    src={beforeImage}
                    alt="Before"
                    fill
                    className="object-cover"
                />

                {/* Full-width gradient for left side */}
                <div className="absolute bottom-0 inset-x-0 h-[60%] bg-gradient-to-t from-black/80 via-black/30 to-transparent pointer-events-none" />

                {/* Overlay text for Base Image (Left) */}
                <div className="absolute bottom-0 left-0 p-8 md:p-12 w-full max-w-md">
                    <p className="text-[10px] font-medium uppercase tracking-[0.3em] text-white/90 mb-2">
                        {beforeLabel}
                    </p>
                    <h3 className="text-2xl md:text-3xl font-semibold text-white tracking-tighter mb-3">
                        {beforeTitle}
                    </h3>
                    <p className="text-xs md:text-sm text-white/70 font-normal leading-relaxed">
                        {beforeDesc}
                    </p>
                </div>
            </div>

            {/* Top Image (After / Right) bounded by clip-path */}
            <div
                className="absolute inset-0 w-full h-full"
                style={{ clipPath: `inset(0 0 0 ${sliderPos}%)` }}
            >
                <Image
                    src={afterImage}
                    alt="After"
                    fill
                    className="object-cover"
                />

                {/* Full-width gradient for right side */}
                <div className="absolute bottom-0 inset-x-0 h-[60%] bg-gradient-to-t from-black/80 via-black/30 to-transparent pointer-events-none" />

                {/* Overlay text for Top Image (Right) */}
                <div className="absolute bottom-0 right-0 p-8 md:p-12 w-full max-w-md text-right">
                    <p className="text-[10px] font-medium uppercase tracking-[0.3em] text-white/90 mb-2">
                        {afterLabel}
                    </p>
                    <h3 className="text-2xl md:text-3xl font-semibold text-white tracking-tighter mb-3">
                        {afterTitle}
                    </h3>
                    <p className="text-xs md:text-sm text-white/70 font-normal leading-relaxed">
                        {afterDesc}
                    </p>
                </div>
            </div>

            {/* Draggable Slider Line & Handle */}
            <div
                className="absolute top-0 bottom-0 w-0.5 bg-white cursor-ew-resize flex items-center justify-center transform -translate-x-1/2"
                style={{ left: `${sliderPos}%` }}
            >
                {/* Visual Handle */}
                <div className={cn(
                    "w-10 h-10 md:w-12 md:h-12 bg-red-700 rounded-full border-4 border-white flex items-center justify-center shadow-xl transition-transform duration-200",
                    isDragging ? "scale-110" : "scale-100"
                )}>
                    <ArrowLeftRight className="w-4 h-4 md:w-5 md:h-5 text-white" />
                </div>
            </div>
        </div>
    );
}