"use client"

import { useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react"
import { createPortal } from "react-dom"
import { Mail } from "lucide-react"
import { EMAIL_DRAG_RETURN_MS, useEmailDrag } from "@/lib/drag-context"
import {
  getDragPointerSnapshot,
  subscribeDragPointer,
} from "@/lib/drag-pointer-store"
import { useIsXs } from "@/hooks/use-xs"

const DRAG_POINTER_SERVER_SNAPSHOT = { x: 0, y: 0 } as const

export function MoveDragIndicator() {
  const isXs = useIsXs()
  const { state } = useEmailDrag()
  const [mounted, setMounted] = useState(false)
  const elRef = useRef<HTMLDivElement>(null)

  const livePointer = useSyncExternalStore(
    subscribeDragPointer,
    getDragPointerSnapshot,
    () => DRAG_POINTER_SERVER_SNAPSHOT
  )

  useEffect(() => {
    setMounted(true)
  }, [])

  useLayoutEffect(() => {
    if (!state) return
    if (state.phase !== "returning") return
    const el = elRef.current
    if (!el) return
    const dx = state.originX - state.pointerX
    const dy = state.originY - state.pointerY
    const animation = el.animate(
      [
        { translate: "0px 0px", opacity: 1 },
        { translate: `${dx}px ${dy}px`, opacity: 0 },
      ],
      {
        duration: EMAIL_DRAG_RETURN_MS,
        easing: "cubic-bezier(0.22, 0.61, 0.36, 1)",
        fill: "forwards",
      }
    )
    return () => {
      animation.cancel()
    }
  }, [state?.phase, state?.originX, state?.originY, state?.pointerX, state?.pointerY])

  if (isXs || !mounted || !state) return null

  const count = state.ids.length
  const label =
    count > 1 ? `Déplacer ${count} conversations` : "Déplacer 1 conversation"

  const x = state.phase === "returning" ? state.pointerX : livePointer.x
  const y = state.phase === "returning" ? state.pointerY : livePointer.y

  return createPortal(
    <div
      ref={elRef}
      aria-hidden
      className="pointer-events-none fixed z-100 select-none"
      style={{
        left: x,
        top: y,
        transform: "translate(-50%, -50%)",
        willChange: "translate, opacity",
      }}
    >
      <div className="flex items-center gap-2 rounded-md bg-[#1a73e8] px-4 py-3 text-sm font-medium text-white shadow-lg">
        <Mail className="size-5 shrink-0" strokeWidth={1.75} />
        <span className="whitespace-nowrap">{label}</span>
      </div>
    </div>,
    document.body
  )
}