'use client';

import type { ReactNode } from 'react';
import { SnackbarProvider, MaterialDesignContent } from 'notistack';
import { styled } from '@mui/material/styles';
import { ToastBridge } from './ToastBridge';

/*
 * Toast colors follow the theme rules: every value is a `--bal-*` token from
 * src/theme/tokens.css (scheme-aware via [data-mui-color-scheme]). Although
 * notistack renders in a Portal outside the MUI theme tree, the tokens are
 * defined on <html>, so they cascade into the portal and switch with dark mode
 * for free — no hard-coded colors here.
 *
 * Direction is inherited the same way: <html dir> cascades to the portal, so
 * toasts are RTL on `fa` without any explicit prop.
 */
const StyledSnackbarContent = styled(MaterialDesignContent)({
  '&.notistack-MuiContent-success': {
    backgroundColor: 'var(--bal-success)',
    color: 'var(--bal-success-contrast)',
  },
  '&.notistack-MuiContent-error': {
    backgroundColor: 'var(--bal-error)',
    color: 'var(--bal-error-contrast)',
  },
  '&.notistack-MuiContent-warning': {
    backgroundColor: 'var(--bal-warning)',
    color: 'var(--bal-warning-contrast)',
  },
  '&.notistack-MuiContent-info': {
    backgroundColor: 'var(--bal-info)',
    color: 'var(--bal-info-contrast)',
  },
});

interface NotistackProviderProps {
  children: ReactNode;
}

export function NotistackProvider({ children }: NotistackProviderProps) {
  return (
    <SnackbarProvider
      maxSnack={3}
      anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
      Components={{
        success: StyledSnackbarContent,
        error: StyledSnackbarContent,
        warning: StyledSnackbarContent,
        info: StyledSnackbarContent,
      }}
    >
      <ToastBridge />
      {children}
    </SnackbarProvider>
  );
}
