import { Toaster as SonnerToaster, toast } from 'sonner'
import { useTheme } from '@/stores/ThemeProvider'

/**
 * Toast notification provider — wraps sonner с our design tokens.
 *
 * Sonner = headless, кастомизируем через CSS variables. Параметризируется
 * theme="light" | "dark" — берётся из ThemeProvider, авто-switch на смену темы.
 *
 * Использование:
 * <pre>
 * import { toast } from '@/ui/components/toaster'
 * toast.success('Запись сохранена')
 * toast.error('Ошибка валидации', { description: '...' })
 * toast.promise(mutateAsync(), {loading, success, error})
 * </pre>
 *
 * Mount: <Toaster /> один раз в main.tsx внутри ThemeProvider.
 */
export function Toaster() {
  const { resolved } = useTheme()

  return (
    <SonnerToaster
      position="bottom-right"
      richColors
      closeButton
      theme={resolved}
      toastOptions={{
        // Inline styles переопределяют sonner CSS — tokens из @theme.
        // На light: surface bg + ink text + line border.
        // На dark: re-uses tokens автомат (другие значения cssvar).
        style: {
          background: 'var(--color-surface)',
          color: 'var(--color-ink)',
          border: '1px solid var(--color-line)',
          borderRadius: 'var(--radius-lg)',
          fontFamily: 'var(--font-sans)',
          fontSize: '13px',
          boxShadow: '0 12px 30px -10px rgba(40,25,10,0.38)',
        },
        classNames: {
          title: 'font-medium',
          description: 'text-mute text-cell',
        },
      }}
    />
  )
}

// Re-export для удобства: `import { toast } from '@/ui/components/toaster'`.
export { toast }