import { useEffect, useState } from 'react'
import { CheckCircle, XCircle, Info, AlertCircle, X } from 'lucide-react'
import clsx from 'clsx'

export interface Toast {
  id: string
  type: 'success' | 'error' | 'info' | 'warning'
  title: string
  message?: string
  duration?: number
}

// Global toast state (in production, use Zustand or Context)
let toastListeners: ((toasts: Toast[]) => void)[] = []
let toastList: Toast[] = []

export const toast = {
  success: (title: string, message?: string) => addToast('success', title, message),
  error: (title: string, message?: string) => addToast('error', title, message),
  info: (title: string, message?: string) => addToast('info', title, message),
  warning: (title: string, message?: string) => addToast('warning', title, message),
}

function addToast(type: Toast['type'], title: string, message?: string, duration = 5000) {
  const id = Date.now().toString()
  const newToast: Toast = { id, type, title, message, duration }
  toastList = [...toastList, newToast]
  toastListeners.forEach(listener => listener(toastList))
  
  // Auto-remove after duration
  setTimeout(() => {
    removeToast(id)
  }, duration)
}

function removeToast(id: string) {
  toastList = toastList.filter(t => t.id !== id)
  toastListeners.forEach(listener => listener(toastList))
}

export function ToastContainer() {
  const [toasts, setToasts] = useState<Toast[]>([])

  useEffect(() => {
    const listener = (newToasts: Toast[]) => setToasts(newToasts)
    toastListeners.push(listener)
    return () => {
      toastListeners = toastListeners.filter(l => l !== listener)
    }
  }, [])

  const icons = {
    success: <CheckCircle className="h-5 w-5 text-pick" />,
    error: <XCircle className="h-5 w-5 text-reject" />,
    info: <Info className="h-5 w-5 text-primary" />,
    warning: <AlertCircle className="h-5 w-5 text-star" />,
  }

  const colors = {
    success: 'border-pick bg-pick/10',
    error: 'border-reject bg-reject/10',
    info: 'border-primary bg-primary/10',
    warning: 'border-star bg-star/10',
  }

  return (
    <div className="pointer-events-none fixed bottom-4 left-4 z-50 flex flex-col gap-2">
      {toasts.map((toast) => (
        <div
          key={toast.id}
          className={clsx(
            'pointer-events-auto flex items-start gap-3 rounded-lg border p-3 shadow-lg backdrop-blur-sm transition-all duration-300',
            'animate-slide-up',
            colors[toast.type]
          )}
          style={{ minWidth: '300px', maxWidth: '400px' }}
        >
          {icons[toast.type]}
          <div className="flex-1">
            <div className="font-medium text-text">{toast.title}</div>
            {toast.message && (
              <div className="mt-0.5 text-sm text-text-muted">{toast.message}</div>
            )}
          </div>
          <button
            onClick={() => removeToast(toast.id)}
            className="pointer-events-auto rounded p-0.5 text-text-muted hover:bg-surface-offset hover:text-text"
          >
            <X className="h-4 w-4" />
          </button>
        </div>
      ))}
    </div>
  )
}