'use client'

import Stack from '@mui/material/Stack'
import Box from '@mui/material/Box'
import Typography from '@mui/material/Typography'
import Button from '@mui/material/Button'
import Card from '@mui/material/Card'

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

const OrderErrorState = ({ t }: OrderErrorStateProps) => {
  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'
      }}
    >
      <Stack spacing={3} alignItems='center' sx={{ position: 'relative', zIndex: 1, maxWidth: 500 }}>
        <Box
          sx={{
            width: 100,
            height: 100,
            borderRadius: '50%',
            background: 'linear-gradient(135deg, var(--mui-palette-error-main) 0%, var(--mui-palette-error-dark) 100%)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            boxShadow: '0 8px 24px rgba(var(--mui-palette-error-mainChannel) / 0.3)',
            animation: 'shake 0.5s ease-in-out',
            '@keyframes shake': {
              '0%, 100%': { transform: 'translateX(0)' },
              '25%': { transform: 'translateX(-10px)' },
              '75%': { transform: 'translateX(10px)' }
            }
          }}
        >
          <i className='tabler-alert-circle text-5xl text-white' />
        </Box>

        <Stack spacing={1.5} alignItems='center' textAlign='center'>
          <Typography variant='h5' fontWeight={800} color='error.main'>
            {t('noData')}
          </Typography>
          <Typography variant='body1' color='text.secondary' fontWeight={500}>
            {t('orderNotFoundDescription')}
          </Typography>
        </Stack>

        <Stack direction='row' spacing={2} mt={2}>
          <Button
            variant='contained'
            color='primary'
            startIcon={<i className='tabler-refresh' />}
            onClick={() => window.location.reload()}
            sx={{ fontWeight: 700 }}
          >
            {t('retry')}
          </Button>
          <Button
            variant='outlined'
            color='primary'
            startIcon={<i className='tabler-arrow-left' />}
            onClick={() => window.history.back()}
            sx={{ fontWeight: 700 }}
          >
            {t('goBack')}
          </Button>
        </Stack>
      </Stack>
    </Card>
  )
}

export default OrderErrorState
