import { Box, Card, CardContent, Skeleton } from '@mui/material'

function SkeletonCard() {
  return (
    <Card>
      <CardContent sx={{ p: 2.5 }}>
        <Skeleton variant="text" width="60%" height={20} />
        <Skeleton variant="text" width="40%" height={40} sx={{ mt: 1 }} />
      </CardContent>
    </Card>
  )
}

function SkeletonLargeCard() {
  return (
    <Card>
      <CardContent sx={{ p: 2.5 }}>
        <Skeleton variant="text" width="50%" height={28} sx={{ mb: 2 }} />
        <Skeleton variant="rectangular" height={120} sx={{ borderRadius: 1, mb: 1 }} />
        <Skeleton variant="rectangular" height={80} sx={{ borderRadius: 1 }} />
      </CardContent>
    </Card>
  )
}

export function DashboardSkeleton() {
  return (
    <Box sx={{ p: 3, display: 'flex', flexDirection: 'column', gap: 3 }}>
      {/* Header skeleton */}
      <Box sx={{ pb: 2 }}>
        <Skeleton variant="text" width={240} height={32} />
        <Skeleton variant="text" width={360} height={20} sx={{ mt: 0.5 }} />
      </Box>

      {/* KPI grid skeleton */}
      <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 2 }}>
        {Array.from({ length: 6 }).map((_, i) => (
          <SkeletonCard key={i} />
        ))}
      </Box>

      {/* Row 2 */}
      <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 3 }}>
        <SkeletonLargeCard />
        <SkeletonLargeCard />
      </Box>

      {/* Row 3 */}
      <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 3 }}>
        <SkeletonLargeCard />
        <SkeletonLargeCard />
      </Box>

      {/* Quick actions skeleton */}
      <Card>
        <CardContent sx={{ p: 2.5 }}>
          <Skeleton variant="text" width="30%" height={28} sx={{ mb: 2 }} />
          <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1.5 }}>
            {Array.from({ length: 6 }).map((_, i) => (
              <Skeleton key={i} variant="rectangular" height={36} sx={{ borderRadius: 1 }} />
            ))}
          </Box>
        </CardContent>
      </Card>
    </Box>
  )
}