import { useCallback, useEffect, useRef, useState } from "react";

export function BeforeAfter({
  before,
  after,
  beforeLabel = "Today",
  afterLabel = "1860",
}: {
  before: string;
  after: string;
  beforeLabel?: string;
  afterLabel?: string;
}) {
  const [pct, setPct] = useState(50);
  const [width, setWidth] = useState(800);
  const wrap = useRef<HTMLDivElement>(null);
  const dragging = useRef(false);

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

  const setFromEvent = useCallback((clientX: number) => {
    const el = wrap.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    const next = ((clientX - r.left) / r.width) * 100;
    setPct(Math.min(96, Math.max(4, next)));
  }, []);

  return (
    <div
      ref={wrap}
      className="relative aspect-[3/4] w-full overflow-hidden rounded-xl bg-ink-elevated select-none"
      onPointerDown={(e) => {
        dragging.current = true;
        (e.currentTarget as HTMLDivElement).setPointerCapture(e.pointerId);
        setFromEvent(e.clientX);
      }}
      onPointerMove={(e) => {
        if (dragging.current) setFromEvent(e.clientX);
      }}
      onPointerUp={() => {
        dragging.current = false;
      }}
    >
      <img
        src={after}
        alt={afterLabel}
        className="absolute inset-0 h-full w-full object-cover object-[center_18%]"
      />
      <div className="absolute inset-0 overflow-hidden" style={{ width: `${pct}%` }}>
        <img
          src={before}
          alt={beforeLabel}
          className="absolute inset-y-0 left-0 h-full max-w-none object-cover object-[center_18%]"
          style={{ width }}
        />
      </div>
      <div className="absolute inset-y-0 z-10 w-px bg-ivory" style={{ left: `${pct}%` }}>
        <div className="absolute top-1/2 left-1/2 flex size-10 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border border-ivory/40 bg-ink/80 text-ivory">
          <span className="text-[0.6rem] tracking-widest">DRAG</span>
        </div>
      </div>
      <span className="absolute bottom-4 left-4 text-[0.65rem] uppercase tracking-[0.22em] text-ivory">
        {beforeLabel}
      </span>
      <span className="absolute bottom-4 right-4 text-[0.65rem] uppercase tracking-[0.22em] text-ivory">
        {afterLabel}
      </span>
    </div>
  );
}