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

export interface ToastItem {
  id: number;
  message: string;
  type: 'success' | 'error' | 'info';
}

interface ToastProps { toasts: ToastItem[]; }

export function Toast({ toasts }: ToastProps) {
  return (
    <div className="fixed bottom-4 left-1/2 -translate-x-1/2 z-[100] flex flex-col gap-2 items-center pointer-events-none">
      {toasts.map(t => (
        <div key={t.id}
          className={`px-4 py-2 rounded-xl text-[12px] font-medium shadow-xl border animate-toast-in
            ${t.type === 'success' ? 'bg-green-500/20 text-green-300 border-green-500/30' :
              t.type === 'error'   ? 'bg-red-500/20 text-red-300 border-red-500/30' :
                                     'bg-white/10 text-white/70 border-white/15'}`}>
          {t.type === 'success' ? '✓ ' : t.type === 'error' ? '✕ ' : 'ℹ '}{t.message}
        </div>
      ))}
    </div>
  );
}

let _toastId = 0;

export function useToast() {
  const [toasts, setToasts] = useState<ToastItem[]>([]);
  const timerRef = useRef<Map<number, ReturnType<typeof setTimeout>>>(new Map());

  const showToast = useCallback((message: string, type: ToastItem['type'] = 'success', duration = 2500) => {
    const id = ++_toastId;
    setToasts(prev => [...prev, { id, message, type }]);
    const timer = setTimeout(() => {
      setToasts(prev => prev.filter(t => t.id !== id));
      timerRef.current.delete(id);
    }, duration);
    timerRef.current.set(id, timer);
  }, []);

  useEffect(() => {
    const timers = timerRef.current;
    return () => { timers.forEach(t => clearTimeout(t)); };
  }, []);

  return { toasts, showToast };
}