import React, { useEffect, useState } from "react";
import { MessageCircle, Sparkles } from "lucide-react";
import { WhatsAppComposeDialog } from "@/components/WhatsAppComposeDialog";
import { readSharePayload, isShareDrag } from "@/lib/shareDrag";
import { useDraggable } from "@/hooks/useDraggable";

/**
 * Floating WhatsApp button — fixed to viewport, user-draggable.
 *
 * Three behaviours retained:
 *   1. CLICK         → opens wa.me with optional default phone/message
 *   2. DROP TARGET   → drag any Party / Invoice / Item row onto the button.
 *                      On drop, WhatsAppComposeDialog opens with a smart
 *                      pre-filled template (recipient + message).
 *   3. FREE DRAG     → user can reposition the FAB by holding & dragging;
 *                      position persists in localStorage (key `whatsapp`).
 *                      Movement < 5px → treated as click, so wa.me still opens.
 */
export function WhatsAppFAB({ phone = "917972532968", message = "" }) {
    const [armed, setArmed] = useState(false);    // a share-drag is in flight
    const [over, setOver] = useState(false);      // pointer is on the FAB
    const [composer, setComposer] = useState({ open: false, payload: null });

    // Free-drag with persisted position (default = bottom:96px right:20px, matches `bottom-24 right-5`)
    const drag = useDraggable({ key: "whatsapp", defaultPosition: { right: 20, bottom: 96 } });

    useEffect(() => {
        const on = () => setArmed(true);
        const off = () => { setArmed(false); setOver(false); };
        window.addEventListener("rm-share:dragstart", on);
        window.addEventListener("rm-share:dragend", off);
        return () => {
            window.removeEventListener("rm-share:dragstart", on);
            window.removeEventListener("rm-share:dragend", off);
        };
    }, []);

    const defaultHref = `https://wa.me/${phone}${message ? `?text=${encodeURIComponent(message)}` : ""}`;

    const onDragEnter = (e) => {
        if (!isShareDrag(e)) return;
        e.preventDefault();
        setOver(true);
    };
    const onDragOver = (e) => {
        if (!isShareDrag(e) && !armed) return;
        e.preventDefault();
        e.dataTransfer.dropEffect = "copy";
    };
    const onDragLeave = () => setOver(false);
    const onDrop = (e) => {
        if (!isShareDrag(e) && !armed) return;
        e.preventDefault();
        e.stopPropagation();
        const payload = readSharePayload(e);
        setOver(false);
        setArmed(false);
        if (!payload) return;
        setComposer({ open: true, payload });
    };
    const onClick = (e) => {
        if (composer.open) e.preventDefault();
    };

    return (
        <>
            <a
                ref={drag.ref}
                href={defaultHref}
                target="_blank"
                rel="noopener noreferrer"
                draggable={false}
                aria-label={armed ? "Drop here to share on WhatsApp" : "Chat on WhatsApp (drag to reposition)"}
                data-testid="whatsapp-fab"
                data-armed={armed ? "1" : "0"}
                className="group z-50"
                style={drag.style}
                onClick={onClick}
                onDragEnter={onDragEnter}
                onDragOver={onDragOver}
                onDragLeave={onDragLeave}
                onDrop={onDrop}
                {...drag.bind}
            >
                <span
                    className={`absolute inset-0 rounded-full pointer-events-none ${
                        armed
                            ? "bg-emerald-400/70 animate-ping"
                            : "bg-emerald-500/40 animate-ping"
                    }`}
                    aria-hidden
                />
                {armed && (
                    <span
                        className="absolute -inset-3 rounded-full border-2 border-dashed border-emerald-300/80 pointer-events-none animate-pulse"
                        aria-hidden
                    />
                )}

                <span
                    className={`relative flex items-center justify-center h-14 w-14 rounded-full shadow-lg shadow-emerald-900/30 ring-2 ring-white/40 transition-all ${
                        over
                            ? "bg-emerald-400 text-white scale-125"
                            : armed
                                ? "bg-emerald-500 text-white scale-110"
                                : "bg-[#25D366] text-white hover:scale-110 active:scale-95"
                    }`}
                >
                    {armed ? <Sparkles className="h-7 w-7" strokeWidth={2.2} /> : <MessageCircle className="h-7 w-7" strokeWidth={2.2} />}
                </span>

                <span
                    className={`absolute right-16 top-1/2 -translate-y-1/2 whitespace-nowrap rounded-md text-xs px-2 py-1 pointer-events-none transition-opacity ${
                        armed
                            ? "bg-emerald-600 text-white opacity-100 shadow-lg"
                            : "bg-foreground/90 text-background opacity-0 group-hover:opacity-100"
                    }`}
                    data-testid="whatsapp-fab-hint"
                >
                    {over
                        ? "Release to compose →"
                        : armed
                            ? "Drop here to WhatsApp"
                            : "Chat / drop to share"}
                </span>
            </a>

            <WhatsAppComposeDialog
                open={composer.open}
                onOpenChange={(o) => setComposer((c) => ({ ...c, open: o }))}
                payload={composer.payload}
            />
        </>
    );
}