import { Box, Skeleton } from '@mui/material'
import type { SxProps, Theme } from '@mui/material'

const styles = {
  container: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-between',
    gap: ({ spacing }) => spacing(1),
    height: ({ spacing }) => spacing(38),
  },
  graph: {
    position: 'relative',
    flex: '1 1 auto',
    width: '100%',
  },
  segmentA: {
    position: 'absolute',
    left: 0,
    right: '70%',
    top: '60%',
    height: 4,
  },
  segmentB: {
    position: 'absolute',
    left: '25%',
    right: '40%',
    top: '35%',
    height: 4,
  },
  segmentC: {
    position: 'absolute',
    left: '55%',
    right: 0,
    top: '50%',
    height: 4,
  },
  legend: {
    display: 'flex',
    alignItems: 'center',
    gap: ({ spacing }) => spacing(2),
    height: ({ spacing }) => spacing(5),
  },
  legendItem: {
    display: 'flex',
    alignItems: 'center',
    gap: ({ spacing }) => spacing(1.5),
  },
} satisfies Record<string, SxProps<Theme>>

/**
 * Loading state for the Timeseries widget. Mirrors a line chart's
 * silhouette — three thin horizontal segments at staggered offsets to
 * suggest a moving line, plus a 2-dot legend stub. Sibling-consistent
 * with Bar / Histogram / Scatter skeletons (column-flex container with
 * legend strip below).
 */
export function TimeseriesSkeleton() {
  return (
    <Box sx={styles.container}>
      <Box sx={styles.graph}>
        <Skeleton variant='rectangular' sx={styles.segmentA} />
        <Skeleton variant='rectangular' sx={styles.segmentB} />
        <Skeleton variant='rectangular' sx={styles.segmentC} />
      </Box>
      <Box sx={styles.legend}>
        {[0, 1].map((i) => (
          <Box key={`legend-${i}`} sx={styles.legendItem}>
            <Skeleton variant='circular' width={8} height={8} />
            <Skeleton width={48} height={8} />
          </Box>
        ))}
      </Box>
    </Box>
  )
}