'use client'

import { createContext, useCallback, useContext, useState } from 'react'
{{#IF_DESIGN_FRAMER_MOTION}}
import { AnimatePresence, motion } from 'framer-motion'
{{/IF_DESIGN_FRAMER_MOTION}}

/**
 * Toast — Notification system
 * Generated by Traqr Init ({{DESIGN_FLAVOR}} flavor). Edit freely.
 *
 * Usage:
 *   const { addToast } = useToast()
 *   addToast({ message: 'Saved!', type: 'success' })
 */

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

interface Toast {
  id: string
  message: string
  type: ToastType
}

interface ToastContextValue {
  addToast: (toast: Omit<Toast, 'id'>) => void
  removeToast: (id: string) => void
}

const ToastContext = createContext<ToastContextValue | null>(null)

export function useToast() {
  const ctx = useContext(ToastContext)
  if (!ctx) throw new Error('useToast must be used within ToastProvider')
  return ctx
}

const typeStyles: Record<ToastType, string> = {
  success: 'border-l-4 border-l-green-500 bg-green-500/10',
  error: 'border-l-4 border-l-red-500 bg-red-500/10',
  info: 'border-l-4 border-l-design-primary bg-design-primary/10',
  warning: 'border-l-4 border-l-design-accent bg-design-accent/10',
}

export function ToastProvider({ children }: { children: React.ReactNode }) {
  const [toasts, setToasts] = useState<Toast[]>([])

  const addToast = useCallback((toast: Omit<Toast, 'id'>) => {
    const id = Math.random().toString(36).slice(2, 9)
    setToasts((prev) => [...prev, { ...toast, id }])
    setTimeout(() => {
      setToasts((prev) => prev.filter((t) => t.id !== id))
    }, 4000)
  }, [])

  const removeToast = useCallback((id: string) => {
    setToasts((prev) => prev.filter((t) => t.id !== id))
  }, [])

  return (
    <ToastContext.Provider value={{ addToast, removeToast }}>
      {children}
      <div className="fixed bottom-4 right-4 z-[100] flex flex-col gap-2 max-w-sm">
{{#IF_DESIGN_FRAMER_MOTION}}
        <AnimatePresence mode="popLayout">
          {toasts.map((toast) => (
            <motion.div
              key={toast.id}
              layout
              initial={{ opacity: 0, y: 20, scale: 0.95 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
              exit={{ opacity: 0, y: -10, scale: 0.95 }}
              transition={{ type: 'spring', stiffness: {{DESIGN_SPRING_STIFFNESS}}, damping: {{DESIGN_SPRING_DAMPING}} }}
              className={`${typeStyles[toast.type]} {{DESIGN_RADIUS_MD}} border border-design-border bg-design-card p-3 design-shadow-lg cursor-pointer`}
              onClick={() => removeToast(toast.id)}
            >
              <p className="text-sm text-design-fg">{toast.message}</p>
            </motion.div>
          ))}
        </AnimatePresence>
{{/IF_DESIGN_FRAMER_MOTION}}
        {toasts.map((toast) => (
          <div
            key={toast.id}
            className={`${typeStyles[toast.type]} {{DESIGN_RADIUS_MD}} border border-design-border bg-design-card p-3 design-shadow-lg cursor-pointer design-animate-in`}
            onClick={() => removeToast(toast.id)}
          >
            <p className="text-sm text-design-fg">{toast.message}</p>
          </div>
        ))}
      </div>
    </ToastContext.Provider>
  )
}