import { AnimatePresence, motion } from 'framer-motion';
import type { ReactNode } from 'react';

export interface ToastData {
	id: string;
	message: ReactNode;
	type?: 'info' | 'success' | 'error' | 'warning';
	duration?: number;
}

export interface ToastProps {
	toast: ToastData;
	onDismiss: (id: string) => void;
}

const TYPE_COLORS: Record<string, string> = {
	info: 'var(--brand-primary, #5865f2)',
	success: '#23a55a',
	error: '#f23f43',
	warning: '#f0b232',
};

export function Toast({ toast, onDismiss }: ToastProps) {
	return (
		<motion.div
			layout
			initial={{ opacity: 0, y: 20, scale: 0.95 }}
			animate={{ opacity: 1, y: 0, scale: 1 }}
			exit={{ opacity: 0, y: -20, scale: 0.95 }}
			style={{
				backgroundColor: 'var(--background-floating, #111214)',
				color: 'var(--text-primary, #dbdee1)',
				padding: '12px 16px',
				borderRadius: 'var(--radius-md, 4px)',
				boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
				display: 'flex',
				alignItems: 'center',
				gap: 12,
				minWidth: 300,
				maxWidth: 500,
				borderLeft: `4px solid ${TYPE_COLORS[toast.type || 'info']}`,
				cursor: 'pointer',
			}}
			onClick={() => onDismiss(toast.id)}
		>
			<div style={{ flex: 1, fontSize: '0.875rem' }}>{toast.message}</div>
		</motion.div>
	);
}

export function ToastContainer({ toasts, onDismiss }: { toasts: ToastData[]; onDismiss: (id: string) => void }) {
	return (
		<div
			style={{
				position: 'fixed',
				bottom: 24,
				right: 24,
				zIndex: 'var(--z-index-toast, 50000)' as any,
				display: 'flex',
				flexDirection: 'column',
				gap: 8,
			}}
		>
			<AnimatePresence>
				{toasts.map((toast) => (
					<Toast key={toast.id} toast={toast} onDismiss={onDismiss} />
				))}
			</AnimatePresence>
		</div>
	);
}
