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

const OUTER_SIZE = 160
const HOLE_SIZE = 96

const styles = {
  root: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    minHeight: 200,
    py: 1,
    gap: ({ spacing }) => spacing(2),
  },
  donut: {
    position: 'relative',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  ring: {
    width: OUTER_SIZE,
    height: OUTER_SIZE,
  },
  hole: {
    position: 'absolute',
    zIndex: 1,
    width: HOLE_SIZE,
    height: HOLE_SIZE,
    borderRadius: '50%',
    bgcolor: 'background.paper',
  },
  label: {
    position: 'absolute',
    zIndex: 2,
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    gap: ({ spacing }) => spacing(0.5),
  },
  legend: {
    display: 'flex',
    alignItems: 'center',
    gap: ({ spacing }) => spacing(2),
  },
  legendItem: {
    display: 'flex',
    alignItems: 'center',
    gap: ({ spacing }) => spacing(1.5),
  },
} satisfies Record<string, SxProps<Theme>>

export interface PieSkeletonProps {
  count?: number
}

/**
 * Loading state for the Pie widget. Mirrors the donut silhouette — a ring
 * (gray circle with a background-coloured hole punched out), a stacked
 * value/name stub in the centre, and a centered legend stub below — so the
 * skeleton reads as "a donut chart" rather than a solid disc.
 *
 * Single donut only: multi-series pie loads as a horizontal bar chart, so
 * rendering one ring stays honest regardless of `count`.
 */
export function PieSkeleton({ count }: PieSkeletonProps) {
  // `count` is accepted for API compatibility but intentionally unused: the
  // skeleton always renders a single donut, since multi-series pie loads as a
  // horizontal bar chart rather than multiple donuts.
  void count
  return (
    <Box sx={styles.root}>
      <Box sx={styles.donut}>
        <Skeleton variant='circular' sx={styles.ring} />
        <Box sx={styles.hole} />
        <Box sx={styles.label}>
          <Skeleton width={56} height={18} />
          <Skeleton width={36} height={8} />
        </Box>
      </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>
  )
}