import { type SxProps, type Theme } from '@mui/material'
import { keyframes } from '@mui/material/styles'

const shimmer = keyframes`
  0% {
    background-position: 150% 0;
  }
  100% {
    background-position: -50% 0;
  }
`

const breatheOuter = keyframes`
  0% { transform: scale(0.68); opacity: 0.7; }
  40% { transform: scale(1); opacity: 1; }
  80% { transform: scale(0.6); opacity: 0.65; }
  100% { transform: scale(0.68); opacity: 0.7; }
`

const breatheInner = keyframes`
  0% { transform: scale(1); }
  40% { transform: scale(0.75); }
  80% { transform: scale(1.125); }
  100% { transform: scale(1); }
`

export const styles = {
  thinking: {
    display: 'flex',
    alignItems: 'center',
    minHeight: ({ spacing }) => spacing(3),
    background: ({ palette }) => `linear-gradient(
      90deg,
      ${palette.text.disabled} 25%,
      ${palette.text.secondary} 50%,
      ${palette.text.disabled} 75%
    )`,
    backgroundSize: '200% 100%',
    backgroundClip: 'text',
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    animation: `${shimmer} 2s ease-in-out infinite`,
    animationDuration: '2s',
  },
  loader: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    position: 'relative',
    p: 1,
  },
  loaderOuterCircle: {
    position: 'absolute',
    inset: 0,
    margin: 'auto',
    borderRadius: '50%',
    backgroundColor: ({ palette }) => palette.action.disabled,
    animation: `${breatheOuter} 1s ease-in-out infinite`,
  },
  loaderInnerCircle: {
    position: 'absolute',
    inset: 0,
    margin: 'auto',
    borderRadius: '50%',
    backgroundColor: ({ palette }) => palette.text.primary,
    animation: `${breatheInner} 1s ease-in-out infinite`,
  },
  // --- Tool Trace styles ---
  traceHeader: {
    display: 'flex',
    alignItems: 'center',
    padding: 0,
    paddingLeft: ({ spacing }) => spacing(0.5),
    borderRadius: ({ spacing }) => spacing(0.5),
    width: 'fit-content',
    color: ({ palette }) => palette.text.secondary,
    '&:hover': {
      backgroundColor: ({ palette }) => palette.action.hover,
    },
  },
  traceChevron: {
    color: ({ palette }) => palette.text.secondary,
    transition: 'transform 0.2s',
  },
  traceDetailsWrapper: {
    marginTop: ({ spacing }) => spacing(0.5),
    padding: ({ spacing }) => spacing(1.5),
    border: '1px solid',
    borderColor: 'divider',
    borderRadius: ({ spacing }) => spacing(1),
  },
  traceField: {
    display: 'flex',
    alignItems: 'flex-start',
    gap: ({ spacing }) => spacing(1),
  },
  traceFieldLabel: {
    flexShrink: 0,
  },
  traceReference: {
    display: 'flex',
    borderRadius: ({ spacing }) => spacing(0.25),
    padding: ({ spacing }) => spacing(0, 0.5),
    gap: ({ spacing }) => spacing(0.5),
    backgroundColor: ({ palette }) => palette.success.relatedLight,
    color: ({ palette }) => palette.success.dark,
  },
  traceStatusSuccess: {
    color: ({ palette }) => palette.success.main,
  },
  traceStatusError: {
    color: ({ palette }) => palette.error.main,
  },
  // --- Code Area styles ---
  codeArea: {
    position: 'relative',
    width: '100%',
  },
  codeAreaPre: {
    margin: 0,
    padding: ({ spacing }) => spacing(1),
    borderRadius: ({ spacing }) => spacing(0.5),
    backgroundColor: ({ palette }) => palette.background.default,
    fontFamily: ({ typography }) =>
      typography.code3?.fontFamily ??
      typography.code1?.fontFamily ??
      'monospace',
    fontSize: ({ typography }) => typography.code3?.fontSize ?? '0.75rem',
    lineHeight: ({ typography }) => typography.code3?.lineHeight ?? 1.333,
    whiteSpace: 'pre-wrap',
    wordBreak: 'break-word',
    overflowY: 'auto',
  },
  codeAreaPreError: {
    borderLeft: ({ palette }) => `3px solid ${palette.error.main}`,
    backgroundColor: ({ palette }) => `${palette.error.main}08`,
  },
  codeAreaFullViewButton: {
    position: 'absolute',
    top: ({ spacing }) => spacing(0.5),
    right: ({ spacing }) => spacing(0.5),
  },
  // --- Full View Dialog styles ---
  fullViewDialog: {
    margin: ({ spacing }) => spacing(5),
  },
  fullViewPaper: {
    borderRadius: 1,
  },
  fullViewTitle: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: ({ spacing }) => spacing(2),
    borderBottom: '1px solid',
    borderBottomColor: 'divider',
  },
  fullViewDialogContent: {
    padding: 0,
    '&:first-of-type': { paddingTop: 0 },
  },
  fullViewPre: {
    margin: 0,
    padding: ({ spacing }) => spacing(1),
    background: ({ palette, spacing }) =>
      `linear-gradient(to right, ${palette.action.hover} calc(${spacing(1)} + 3em), ${palette.background.default} calc(${spacing(1)} + 3em))`,
    fontFamily: ({ typography }) =>
      typography.code3?.fontFamily ??
      typography.code1?.fontFamily ??
      'monospace',
    fontSize: ({ typography }) => typography.code3?.fontSize ?? '0.75rem',
    whiteSpace: 'pre-wrap',
    wordBreak: 'break-word',
    lineHeight: 1.6,
    counterReset: 'line',
  },
  fullViewLine: {
    display: 'block',
    '&::before': {
      counterIncrement: 'line',
      content: 'counter(line)',
      display: 'inline-block',
      width: '2em',
      marginRight: '2em',
      textAlign: 'right',
      color: ({ palette }) => palette.text.secondary,
      userSelect: 'none',
    },
  },
  groupHeader: {
    textAlign: 'left',
    display: 'flex',
    alignItems: 'center',
    borderRadius: 0,
    gap: ({ spacing }) => spacing(0.5),
  },
  errorBadge: {
    color: ({ palette }) => palette.error.main,
    fontWeight: 600,
    display: 'flex',
    alignItems: 'center',
    gap: ({ spacing }) => spacing(0.25),
  },
  // --- Syntax highlighting token styles ---
  syntaxToken_key: {
    color: '#881280',
  },
  syntaxToken_string: {
    color: '#c41a16',
  },
  syntaxToken_number: {
    color: '#1c00cf',
  },
  syntaxToken_boolean: {
    color: '#1c00cf',
  },
  syntaxToken_null: {
    color: '#808080',
  },
  syntaxToken_punctuation: {
    color: ({ palette }) => palette.text.primary,
  },
  groupListItem: {
    borderBottom: '1px solid',
    borderColor: 'divider',
    '&:first-of-type .MuiButton-root': {
      borderRadius: ({ spacing }) => spacing(1, 1, 0, 0),
    },
    '&:last-of-type:not([aria-expanded=true]) .MuiButton-root': {
      borderRadius: ({ spacing }) => spacing(0, 0, 1, 1),
    },
    '&:last-of-type': {
      borderBottomWidth: 0,
    },
  },
} satisfies Record<string, SxProps<Theme>>