'use client'

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

export type ToastType = 'success' | 'error' | 'info'

interface ToastProps {
  message: string
  type?: ToastType
  duration?: number
  onClose: () => void
}

export function Toast({ message, type = 'success', duration = 4000, onClose }: ToastProps) {
  const [isVisible, setIsVisible] = useState(true)
  const [isLeaving, setIsLeaving] = useState(false)

  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLeaving(true)
      setTimeout(onClose, 300)
    }, duration)

    return () => clearTimeout(timer)
  }, [duration, onClose])

  const handleClose = () => {
    setIsLeaving(true)
    setTimeout(onClose, 300)
  }

  const Icon = type === 'success' ? Check : type === 'error' ? AlertCircle : Info

  return (
    <div
      className={clsx(
        "fixed bottom-6 right-6 z-[100] flex items-center gap-3 px-4 py-3 rounded-xl shadow-2xl border transition-all duration-300",
        isLeaving ? "translate-y-2 opacity-0" : "translate-y-0 opacity-100",
        type === 'success' && "bg-accent/10 border-accent/20",
        type === 'error' && "bg-danger/10 border-danger/20",
        type === 'info' && "bg-foreground/5 border-border"
      )}
    >
      <div className={clsx(
        "w-7 h-7 rounded-lg flex items-center justify-center",
        type === 'success' && "bg-accent/20",
        type === 'error' && "bg-danger/20",
        type === 'info' && "bg-foreground/10"
      )}>
        <Icon className={clsx(
          "w-4 h-4",
          type === 'success' && "text-accent",
          type === 'error' && "text-danger",
          type === 'info' && "text-foreground-muted"
        )} />
      </div>
      <p className={clsx(
        "text-body-sm",
        type === 'success' && "text-accent",
        type === 'error' && "text-danger",
        type === 'info' && "text-foreground"
      )}>{message}</p>
      <button
        onClick={handleClose}
        className={clsx(
          "ml-2 p-1 rounded hover:bg-foreground/5 transition-colors",
          type === 'success' && "text-accent/70 hover:text-accent",
          type === 'error' && "text-danger/70 hover:text-danger",
          type === 'info' && "text-foreground-muted hover:text-foreground"
        )}
      >
        <X className="w-4 h-4" />
      </button>
    </div>
  )
}

// Hook for managing toasts
export function useToast() {
  const [toast, setToast] = useState<{ message: string; type: ToastType } | null>(null)

  const showToast = (message: string, type: ToastType = 'success') => {
    setToast({ message, type })
  }

  const hideToast = () => {
    setToast(null)
  }

  return { toast, showToast, hideToast }
}