import React from 'react';
import { Box, Paper, Skeleton } from '@mui/material';

/** Skeleton for a stat card: label, large value, and circular icon. */
export const StatSkeleton: React.FC = () => (
  <Box display="flex" alignItems="center">
    <Box sx={{ flex: 1.618 }}>
      <Skeleton animation="wave" width="40%" height={14} sx={{ mb: 1 }} />
      <Skeleton animation="wave" width="60%" height={32} />
    </Box>
    <Box sx={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
      <Skeleton animation="wave" variant="circular" width={56} height={56} />
    </Box>
  </Box>
);

/** Skeleton for a row of chips. */
export const ChipListSkeleton: React.FC = () => (
  <Box display="flex" gap={1} flexWrap="wrap">
    <Skeleton animation="wave" variant="rounded" width={80} height={24} />
    <Skeleton animation="wave" variant="rounded" width={100} height={24} />
    <Skeleton animation="wave" variant="rounded" width={60} height={24} />
    <Skeleton animation="wave" variant="rounded" width={90} height={24} />
  </Box>
);

export interface ItemListSkeletonProps {
  count?: number;
}

/** Skeleton for a list of items with avatar and two text lines. */
export const ItemListSkeleton: React.FC<ItemListSkeletonProps> = ({ count = 5 }) => (
  <Box>
    {Array.from({ length: count }, (_, i) => (
      <Box key={i} display="flex" alignItems="center" gap={1.5} sx={{ py: 1 }}>
        <Skeleton animation="wave" variant="circular" width={10} height={10} />
        <Skeleton animation="wave" width="70%" height={16} />
        <Skeleton animation="wave" width="40%" height={16} />
      </Box>
    ))}
  </Box>
);

/** Skeleton for a quick-action form. */
export const FormSkeleton: React.FC = () => (
  <Box display="flex" flexDirection="column" gap={1.5}>
    <Skeleton animation="wave" variant="rounded" height={40} />
    <Skeleton animation="wave" variant="rounded" height={40} />
    <Skeleton animation="wave" variant="rounded" height={36} width="30%" sx={{ alignSelf: 'flex-end' }} />
  </Box>
);

export interface TableSkeletonProps {
  rows?: number;
  columns?: number;
}

/** Skeleton for a data table with header and body rows. */
export const TableSkeleton: React.FC<TableSkeletonProps> = ({ rows = 5, columns = 4 }) => (
  <Box>
    <Box display="flex" gap={2} sx={{ mb: 1.5 }}>
      {Array.from({ length: columns }, (_, i) => (
        <Skeleton key={i} animation="wave" width={`${100 / columns}%`} height={14} />
      ))}
    </Box>
    {Array.from({ length: rows }, (_, r) => (
      <Box key={r} display="flex" gap={2} sx={{ py: 0.75 }}>
        {Array.from({ length: columns }, (_, c) => (
          <Skeleton key={c} animation="wave" width={`${100 / columns}%`} height={18} />
        ))}
      </Box>
    ))}
  </Box>
);

export interface InfoGridSkeletonProps {
  rows?: number;
}

/** Skeleton for a label-value info grid. */
export const InfoGridSkeleton: React.FC<InfoGridSkeletonProps> = ({ rows = 4 }) => (
  <Box>
    {Array.from({ length: rows }, (_, i) => (
      <Box key={i} display="flex" gap={2} sx={{ py: 1 }}>
        <Skeleton animation="wave" width="30%" height={16} />
        <Skeleton animation="wave" width="60%" height={16} />
      </Box>
    ))}
  </Box>
);

export interface SummaryCardsSkeletonProps {
  count?: number;
}

/** Skeleton for a grid of summary stat cards. */
export const SummaryCardsSkeleton: React.FC<SummaryCardsSkeletonProps> = ({ count = 4 }) => (
  <Box display="grid" gridTemplateColumns="repeat(auto-fill, minmax(140px, 1fr))" gap={2}>
    {Array.from({ length: count }, (_, i) => (
      <Paper key={i} variant="outlined" sx={{ p: 2 }}>
        <Skeleton animation="wave" width="50%" height={14} sx={{ mb: 1 }} />
        <Skeleton animation="wave" width="70%" height={24} />
      </Paper>
    ))}
  </Box>
);
