'use client'

import Stack from '@mui/material/Stack'
import Box from '@mui/material/Box'
import Typography from '@mui/material/Typography'
import Card from '@mui/material/Card'
import CircularProgress from '@mui/material/CircularProgress'
import { useLocale } from 'next-intl'

interface OrderLoadingStateProps {
  t: (key: string) => string
}

const OrderLoadingState = ({ t }: OrderLoadingStateProps) => {
  const locale = useLocale()
  return (
    <Card
      sx={{
        p: 6,
        minHeight: '60vh',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        background:
          'linear-gradient(135deg, rgba(var(--mui-palette-primary-mainChannel) / 0.03) 0%, rgba(var(--mui-palette-primary-mainChannel) / 0.01) 100%)',
        position: 'relative',
        overflow: 'hidden',
        '&::before': {
          content: '""',
          position: 'absolute',
          top: -100,
          insetInlineStart: -100,
          width: 300,
          height: 300,
          borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(var(--mui-palette-primary-mainChannel) / 0.1) 0%, transparent 70%)',
          animation: 'float 6s ease-in-out infinite'
        },
        '&::after': {
          content: '""',
          position: 'absolute',
          bottom: -100,
          insetInlineEnd: -100,
          width: 250,
          height: 250,
          borderRadius: '50%',
          background:
            'radial-gradient(circle, rgba(var(--mui-palette-secondary-mainChannel) / 0.08) 0%, transparent 70%)',
          animation: 'float 8s ease-in-out infinite reverse'
        },
        '@keyframes float': {
          '0%, 100%': { transform: 'translate(0, 0) scale(1)' },
          '50%': { transform: 'translate(20px, 20px) scale(1.1)' }
        }
      }}
    >
      <Stack spacing={4} alignItems='center' sx={{ position: 'relative', zIndex: 1 }}>
        <Box
          sx={{
            position: 'relative',
            width: 120,
            height: 120,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center'
          }}
        >
          <Box
            sx={{
              position: 'absolute',
              width: 120,
              height: 120,
              borderRadius: '50%',
              border: '3px solid',
              borderColor: 'primary.lighter',
              animation: 'rotate 3s linear infinite'
            }}
          />
          <Box
            sx={{
              position: 'absolute',
              width: 90,
              height: 90,
              borderRadius: '50%',
              border: '3px dashed',
              borderColor: 'primary.light',
              animation: 'rotate 2s linear infinite reverse'
            }}
          />
          <Box
            sx={{
              width: 60,
              height: 60,
              borderRadius: '50%',
              background:
                'linear-gradient(135deg, var(--mui-palette-primary-main) 0%, var(--mui-palette-primary-dark) 100%)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              boxShadow: '0 8px 24px rgba(var(--mui-palette-primary-mainChannel) / 0.4)',
              animation: 'pulse 2s ease-in-out infinite',
              zIndex: 2
            }}
          >
            <i className='tabler-file-invoice text-3xl text-white' />
          </Box>
          <CircularProgress
            size={120}
            thickness={2}
            sx={{
              position: 'absolute',
              color: 'primary.main',
              '& .MuiCircularProgress-circle': {
                strokeLinecap: 'round'
              }
            }}
          />
          <style>
            {`
              @keyframes rotate {
                from { transform: rotate(0deg); }
                to { transform: rotate(360deg); }
              }
              @keyframes pulse {
                0%, 100% { transform: scale(1); }
                50% { transform: scale(1.05); }
              }
            `}
          </style>
        </Box>

        <Stack spacing={1} alignItems='center'>
          <Typography variant='h5' fontWeight={700} color='primary.main'>
            {locale === 'ar' ? 'تحميل الطلب' : 'Loading Order'}
          </Typography>
          <Typography variant='body2' color='text.secondary' fontWeight={500}>
            {t('fetchingOrderDetails')}
          </Typography>
        </Stack>

        <Stack direction='row' spacing={1}>
          {[0, 1, 2].map(i => (
            <Box
              key={i}
              sx={{
                width: 8,
                height: 8,
                borderRadius: '50%',
                bgcolor: 'primary.main',
                animation: 'bounce 1.4s ease-in-out infinite',
                animationDelay: `${i * 0.16}s`,
                '@keyframes bounce': {
                  '0%, 80%, 100%': { transform: 'scale(0.8)', opacity: 0.5 },
                  '40%': { transform: 'scale(1.2)', opacity: 1 }
                }
              }}
            />
          ))}
        </Stack>
      </Stack>
    </Card>
  )
}

export default OrderLoadingState
