import { AnimatePresence, motion } from "framer-motion"
import { CircleCheck, AlertTriangle, Info, CircleX, X } from "lucide-react"
import { useEffect, useState, useRef } from "react"
import { ToastProps } from "./ToastProps.js"

const icons = {
    success: CircleCheck,
    error: CircleX,
    warning: AlertTriangle,
    info: Info
}

const colors = {
    success: 'text-success',
    error: 'text-destructive',
    warning: 'text-attention',
    info: 'text-info'
}

interface NotificationPanelProps {
    data: ToastProps
    onClose: () => void
}
export function NotificationPanel({ data, onClose }: NotificationPanelProps) {
    const [show, setShow] = useState(true)
    const timeoutRef = useRef<NodeJS.Timeout | null>(null)

    const resetTimeout = () => {
        if (timeoutRef.current) {
            globalThis.clearTimeout(timeoutRef.current)
        }
        if (data.duration) {
            timeoutRef.current = setTimeout(() => setShow(false), data.duration)
        }
    }

    const clearCurrentTimeout = () => {
        if (timeoutRef.current) {
            globalThis.clearTimeout(timeoutRef.current)
            timeoutRef.current = null
        }
    }

    useEffect(() => {
        resetTimeout()
        return clearCurrentTimeout
    }, [data.duration])

    const Icon = icons[data.status] || Info;
    const color = colors[data.status] || 'text-info';

    // Global notification live region, render this permanently at the end of the document
    return (
        <div
            aria-live="assertive"
            className="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6 z-100"
        >
            <div className="flex w-full flex-col items-center space-y-4 sm:items-end">
                {/* Notification panel, dynamically insert this into the live region when it needs to be displayed */}
                <AnimatePresence onExitComplete={onClose}>
                    {show && (
                        <motion.div
                            className="pointer-events-auto w-full max-w-md overflow-hidden rounded-lg bg-muted shadow-lg ring-1 ring-border"
                            initial={{ opacity: 0, x: 8 }}
                            animate={{ opacity: 1, x: 0, transition: { ease: 'easeOut', duration: 0.7 } }}
                            exit={{ opacity: 0, transition: { ease: 'easeIn', duration: 0.3 } }}
                            onMouseEnter={clearCurrentTimeout}
                            onMouseLeave={resetTimeout}
                        >
                            <div className="p-5">
                                <div className="flex items-start">
                                    <div className="shrink-0">
                                        <Icon className={`size-6 ${color}`} aria-hidden="true" />
                                    </div>
                                    <div className="ml-3 flex-1 pt-0.5 min-w-0">
                                        <p className="text-sm font-semibold text-foreground break-words">{data.title}</p>
                                        {data.description && (
                                            <p className="mt-2 text-sm text-muted break-words whitespace-pre-wrap leading-relaxed">
                                                {data.description}
                                            </p>
                                        )}
                                    </div>
                                    <div className="ml-4 flex shrink-0">
                                        <button
                                            type="button"
                                            className="inline-flex rounded-md bg-muted text-muted hover:text-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background"
                                            onClick={() => setShow(false)}
                                        >
                                            <span className="sr-only">Close</span>
                                            <X className="size-5" aria-hidden="true" />
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </motion.div>
                    )}
                </AnimatePresence>
            </div>
        </div>
    )
}