import {
  Caption1,
  Button,
  makeStyles,
  mergeClasses,
  tokens,
  shorthands
} from '@fluentui/react-components'
import {
  DismissRegular,
  ErrorCircleFilled,
  CheckmarkCircleFilled,
  InfoFilled
} from '@fluentui/react-icons'
import { useToasts, type ToastTone } from '../../store/toasts'
import { Z, ELEVATION, RADIUS, ICON } from './tokens'

/**
 * Renders the transient-toast stack (UX6/UX9) bottom-center. Deliberately NOT a
 * Fluent Toaster/portal — this app avoids portal-based overlays (they blank/flicker
 * on the dev GPU; see Select.tsx / CommandPalette.tsx) — so it's a plain fixed
 * stack. No enter/exit animation, matching the app's conservative motion policy on
 * this machine.
 */
const useStyles = makeStyles({
  stack: {
    position: 'fixed',
    left: '50%',
    bottom: '24px',
    transform: 'translateX(-50%)',
    zIndex: Z.tooltip,
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    gap: '8px',
    // Let clicks fall through the gaps between toasts to the app underneath.
    pointerEvents: 'none'
  },
  toast: {
    pointerEvents: 'auto',
    display: 'flex',
    alignItems: 'center',
    gap: '10px',
    maxWidth: 'min(520px, 90vw)',
    padding: '10px 8px 10px 12px',
    backgroundColor: tokens.colorNeutralBackground1,
    border: `1px solid ${tokens.colorNeutralStroke2}`,
    ...shorthands.borderRadius(RADIUS.surface),
    boxShadow: ELEVATION.overlay
  },
  icon: {
    flexShrink: 0,
    fontSize: `${ICON.control}px`,
    display: 'flex'
  },
  info: { color: tokens.colorNeutralForeground3 },
  error: { color: tokens.colorStatusDangerForeground1 },
  success: { color: tokens.colorStatusSuccessForeground1 },
  message: {
    flexGrow: 1,
    minWidth: 0
  }
})

const ICONS: Record<ToastTone, React.JSX.Element> = {
  info: <InfoFilled />,
  error: <ErrorCircleFilled />,
  success: <CheckmarkCircleFilled />
}

export function Toaster(): React.JSX.Element | null {
  const styles = useStyles()
  const toasts = useToasts((s) => s.toasts)
  const dismiss = useToasts((s) => s.dismiss)
  const toneClass: Record<ToastTone, string> = {
    info: styles.info,
    error: styles.error,
    success: styles.success
  }

  if (toasts.length === 0) return null
  return (
    <div className={styles.stack} role="status" aria-live="polite">
      {toasts.map((t) => (
        <div key={t.id} className={styles.toast}>
          <span className={mergeClasses(styles.icon, toneClass[t.tone])}>{ICONS[t.tone]}</span>
          <Caption1 className={styles.message}>{t.message}</Caption1>
          <Button
            size="small"
            appearance="subtle"
            icon={<DismissRegular />}
            onClick={() => dismiss(t.id)}
            aria-label="Dismiss notification"
          />
        </div>
      ))}
    </div>
  )
}
