"use client";

import * as React from "react";
import { MoveHorizontal } from "lucide-react";

export function BeforeAfterSlider({
  before,
  after,
  alt = "Before and after comparison",
}: {
  before: string;
  after: string;
  alt?: string;
}) {
  const [pos, setPos] = React.useState(50);
  const [width, setWidth] = React.useState(0);
  const ref = React.useRef<HTMLDivElement>(null);
  const dragging = React.useRef(false);

  const update = (clientX: number) => {
    const el = ref.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    const x = ((clientX - rect.left) / rect.width) * 100;
    setPos(Math.max(0, Math.min(100, x)));
  };

  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const updateWidth = () => setWidth(el.clientWidth);
    updateWidth();
    const ro = new ResizeObserver(updateWidth);
    ro.observe(el);
    return () => ro.disconnect();
  }, []);

  React.useEffect(() => {
    const move = (e: MouseEvent) => dragging.current && update(e.clientX);
    const touch = (e: TouchEvent) => dragging.current && update(e.touches[0].clientX);
    const stop = () => (dragging.current = false);
    window.addEventListener("mousemove", move);
    window.addEventListener("touchmove", touch, { passive: true });
    window.addEventListener("mouseup", stop);
    window.addEventListener("touchend", stop);
    return () => {
      window.removeEventListener("mousemove", move);
      window.removeEventListener("touchmove", touch);
      window.removeEventListener("mouseup", stop);
      window.removeEventListener("touchend", stop);
    };
  }, []);

  return (
    <div
      ref={ref}
      className="relative w-full aspect-[16/10] rounded-2xl overflow-hidden select-none bg-muted cursor-ew-resize"
      onMouseDown={(e) => { dragging.current = true; update(e.clientX); }}
      onTouchStart={(e) => { dragging.current = true; update(e.touches[0].clientX); }}
    >
      {/* After (full) */}
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img src={after} alt={`${alt} - after`} className="absolute inset-0 size-full object-cover" draggable={false} />
      <span className="absolute top-3 right-3 z-10 px-2.5 py-1 rounded-md bg-[var(--brand-royal)] text-white text-xs font-semibold">
        After
      </span>

      {/* Before (clipped) */}
      <div className="absolute inset-0 overflow-hidden" style={{ width: `${pos}%` }}>
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img src={before} alt={`${alt} - before`} className="absolute inset-0 h-full object-cover" style={{ width: width || "100%" }} draggable={false} />
        <span className="absolute top-3 left-3 px-2.5 py-1 rounded-md bg-foreground/80 text-white text-xs font-semibold">
          Before
        </span>
      </div>

      {/* Handle */}
      <div className="absolute top-0 bottom-0 z-20 ba-handle" style={{ left: `${pos}%`, transform: "translateX(-50%)" }}>
        <div className="absolute top-0 bottom-0 w-0.5 bg-white shadow-lg" />
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 grid place-items-center size-11 rounded-full bg-white shadow-xl">
          <MoveHorizontal className="size-5 text-[var(--brand-royal)]" />
        </div>
      </div>
    </div>
  );
}