import { styled, Typography, type SxProps, type Theme } from '@mui/material'

export const ChatMessageOverflow = styled(Typography)(() => ({
  whiteSpace: 'pre-wrap',
  overflowX: 'clip',
  overflowWrap: 'break-word',
  maxWidth: '100%',
}))
ChatMessageOverflow.displayName = 'ChatMessageOverflow'

export const styles = {
  agentMessageContainer: (theme: Theme) => ({
    ...theme.typography.body2,
    width: '100%',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'flex-start',
    // Separate the stacked turn blocks (tools → answer text → actions) per the
    // Figma "Chat Turn" spec (gap-8).
    gap: theme.spacing(1),
    paddingRight: theme.spacing(4),
    '& + .PsChat--agent-message': {
      marginTop: theme.spacing(1),
    },
    '& + .PsChat--user-message': {
      marginTop: theme.spacing(3),
    },
    '& > p:first-of-type': {
      marginTop: 0,
    },
    '& table': {
      alignSelf: 'stretch',
      display: 'block',
      overflowX: 'auto',
      maxWidth: '100%',
      borderCollapse: 'collapse',
      margin: theme.spacing(1, 0),
      fontSize: '0.875em',
    },
    '& th, & td': {
      border: `1px solid ${theme.palette.divider}`,
      padding: theme.spacing(0.5, 1),
      textAlign: 'left',
    },
    '& th': {
      backgroundColor: theme.palette.action.hover,
      fontWeight: 600,
    },
    '& tr:nth-of-type(even) td': {
      backgroundColor: theme.palette.action.hover,
    },
    '& ul.contains-task-list': {
      listStyle: 'none',
      paddingLeft: 0,
    },
    '& .task-list-item input[type="checkbox"]': {
      marginRight: theme.spacing(0.5),
    },
    '& del': {
      textDecoration: 'line-through',
      opacity: 0.7,
    },
    '& > ul, & > ol': {
      margin: theme.spacing(1, 0),
      paddingLeft: theme.spacing(3),
      '& > li + li': {
        marginTop: theme.spacing(1),
      },
    },
  }),
  userMessageContainer: {
    width: '100%',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'flex-end',
    paddingLeft: ({ spacing }) => spacing(4),
    '&:has(+ .PsChat--user-message) > .PsChat--user-message-inner': {
      borderRadius: ({ spacing }) => spacing(2),
    },
    '& + .PsChat--user-message': {
      marginTop: ({ spacing }) => spacing(0.5),
    },
    '& + .PsChat--agent-message': {
      marginTop: ({ spacing }) => spacing(3),
    },
  },
  userMessage: {
    padding: ({ spacing }) => spacing(0.75, 1.5),
    borderRadius: ({ spacing }) => spacing(2, 2, 0.25, 2),
    border: ({ palette }) => `1px solid ${palette.divider}`,
    backgroundColor: ({ palette }) => palette.background.paper,
    color: ({ palette }) => palette.text.primary,
    width: 'fit-content',
  },
  muted: {
    color: ({ palette }) => palette.text.disabled,
  },
  userMessageTop: {
    textAlign: 'right',
    marginBottom: ({ spacing }) => spacing(0.5),
  },
  errorMessage: {
    display: 'flex',
    alignItems: 'center',
    flexWrap: 'wrap',
    gap: ({ spacing }) => spacing(1),
  },
  errorActions: {
    display: 'flex',
    alignItems: 'center',
    gap: ({ spacing }) => spacing(0.5),
  },
  errorAction: {
    color: ({ palette }) => palette.text.primary,
  },
  errorActionSeparator: {
    mr: 0.5,
    color: ({ palette }) => palette.black[25],
    fontWeight: 600,
  },
  suggestionButton: {
    transition: 'border-color 0.2s',
    width: '100%',
    alignItems: 'flex-start',
    justifyContent: 'space-between',
    textAlign: 'left',
    gap: ({ spacing }) => spacing(1),
    padding: ({ spacing }) => spacing(0.75, 1.5),
    borderRadius: ({ spacing }) => spacing(2),
    border: ({ palette }) => `1px solid ${palette.divider}`,
    '& .MuiSvgIcon-root': {
      transition: 'color 0.2s',
      color: 'inherit',
      fontSize: ({ spacing }) => spacing(1.5),
      width: ({ spacing }) => spacing(1.5),
      minWidth: ({ spacing }) => spacing(1.5),
      height: ({ spacing }) => spacing(2.5),
    },
    '&:not(.Mui-disabled) .MuiSvgIcon-root': {
      color: ({ palette }) => palette.text.secondary,
    },
    '&:hover': {
      borderColor: ({ palette }) => palette.text.hint,
      '& .MuiSvgIcon-root': {
        color: ({ palette }) => palette.text.primary,
      },
    },
    '&.Mui-disabled': {
      color: ({ palette }) => palette.text.disabled,
    },
  },
} satisfies Record<string, SxProps<Theme>>