import { useEffect, useState } from 'react'
import { useToastStore, type ToastType } from '@/stores/useToastStore'

const typeColors: Record<ToastType, string> = {
  success: 'var(--color-semantic-success)',
  error: 'var(--color-semantic-error)',
  info: 'var(--color-semantic-info)',
  warning: 'var(--color-semantic-warning)',
}

const typeIcons: Record<ToastType, string> = {
  success: '✓',
  error: '✗',
  info: 'i',
  warning: '!',
}

function ToastItem({ id, message, type }: { id: string; message: string; type: ToastType }) {
  const [exiting, setExiting] = useState(false)
  const removeToast = useToastStore((s) => s.removeToast)
  const color = typeColors[type]

  useEffect(() => {
    const exitTimer = setTimeout(() => setExiting(true), 3000)
    return () => clearTimeout(exitTimer)
  }, [])

  return (
    <div
      className={`flex items-start gap-2.5 min-w-[280px] max-w-[400px] px-3 py-2.5 rounded-lg shadow-glass-lg toast${exiting ? ' toast-exit' : ''}`}
      style={{
        backgroundColor: 'var(--color-panel-bg)',
        border: '1px solid var(--color-panel-border)',
        borderLeft: `3px solid ${color}`,
      }}
      role="alert"
      onAnimationEnd={() => { if (exiting) removeToast(id) }}
    >
      <span
        className="flex items-center justify-center w-[18px] h-[18px] mt-[1px] rounded-full text-[10px] font-bold shrink-0"
        style={{ backgroundColor: color, color: '#fff' }}
      >
        {typeIcons[type]}
      </span>
      <span className="flex-1 text-ui-sm text-text-primary leading-[1.4]">{message}</span>
      <button
        className="shrink-0 text-text-muted hover:text-text-primary transition-colors duration-fast"
        onClick={() => removeToast(id)}
      >
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
          <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
        </svg>
      </button>
    </div>
  )
}

export default function Toasts() {
  const toasts = useToastStore((s) => s.toasts)

  if (toasts.length === 0) return null

  return (
    <div className="fixed bottom-4 right-4 z-50 flex flex-col-reverse gap-2 pointer-events-none">
      {toasts.map((t) => (
        <div key={t.id} className="pointer-events-auto">
          <ToastItem id={t.id} message={t.message} type={t.type} />
        </div>
      ))}
    </div>
  )
}