'use client'

import Grid from '@mui/material/Grid2'
import Card from '@mui/material/Card'
import Stack from '@mui/material/Stack'
import Box from '@mui/material/Box'
import Typography from '@mui/material/Typography'

import type { IOrder } from '@/types/data'

interface OrderNotesSectionProps {
  order: IOrder
  t: (key: string) => string
}

const OrderNotesSection = ({ order, t }: OrderNotesSectionProps) => {
  return (
    <Grid size={{ xs: 12 }}>
      <Card
        sx={{
          p: 3,
          background:
            'linear-gradient(135deg, rgba(var(--mui-palette-primary-mainChannel) / 0.05) 0%, rgba(var(--mui-palette-primary-mainChannel) / 0.01) 100%)',
          border: '1px solid',
          borderColor: 'divider'
        }}
      >
        <Stack direction='row' spacing={2} alignItems='center' mb={3}>
          <Box
            sx={{
              width: 48,
              height: 48,
              borderRadius: 2,
              background:
                'linear-gradient(135deg, var(--mui-palette-primary-main) 0%, var(--mui-palette-primary-dark) 100%)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              boxShadow: '0 4px 12px rgba(var(--mui-palette-primary-mainChannel) / 0.3)'
            }}
          >
            <i className='tabler-notebook text-xl text-white' />
          </Box>
          <Typography variant='h6' fontWeight={700}>
            {t('notes')}
          </Typography>
        </Stack>

        {order?.notes ? (
          <Box
            sx={{
              p: 2.5,
              borderRadius: 2,
              bgcolor: 'background.paper',
              border: '1px solid',
              borderColor: 'divider',
              position: 'relative',
              '&::before': {
                content: '""',
                position: 'absolute',
                top: 0,
                insetInlineStart: 0,
                width: 4,
                height: '100%',
                bgcolor: 'primary.main',
                borderRadius: '4px 0 0 4px'
              }
            }}
          >
            <Stack direction='row' spacing={1.5} alignItems='flex-start'>
              <Box
                sx={{
                  width: 32,
                  height: 32,
                  borderRadius: 1.5,
                  bgcolor: 'primary.lighter',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  flexShrink: 0,
                  mt: 0.5
                }}
              >
                <i className='tabler-message-circle text-lg' style={{ color: 'var(--mui-palette-primary-main)' }} />
              </Box>
              <Typography variant='body1' color='text.primary' sx={{ lineHeight: 1.7, flex: 1 }}>
                {order?.notes}
              </Typography>
            </Stack>
          </Box>
        ) : (
          <Box
            sx={{
              p: 3,
              borderRadius: 2,
              bgcolor: 'action.hover',
              border: '1px dashed',
              borderColor: 'divider',
              textAlign: 'center'
            }}
          >
            <Stack spacing={1} alignItems='center'>
              <Box
                sx={{
                  width: 48,
                  height: 48,
                  borderRadius: '50%',
                  bgcolor: 'action.selected',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center'
                }}
              >
                <i className='tabler-note-off text-2xl' style={{ color: 'var(--mui-palette-text-secondary)' }} />
              </Box>
              <Typography variant='body2' color='text.secondary' fontWeight={600} fontStyle='italic'>
                {t('noNotes')}
              </Typography>
            </Stack>
          </Box>
        )}

        {order?.cancellation_reason && (
          <Box
            sx={{
              mt: 3,
              p: 2.5,
              borderRadius: 2,
              bgcolor: 'error.lighter',
              border: '2px solid',
              borderColor: 'error.main',
              position: 'relative',
              overflow: 'hidden',
              '&::before': {
                content: '""',
                position: 'absolute',
                top: 0,
                insetInlineStart: 0,
                width: 4,
                height: '100%',
                bgcolor: 'error.main'
              }
            }}
          >
            <Stack spacing={1.5}>
              <Stack direction='row' spacing={1.5} alignItems='center'>
                <Box
                  sx={{
                    width: 36,
                    height: 36,
                    borderRadius: 2,
                    bgcolor: 'error.main',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center'
                  }}
                >
                  <i className='tabler-circle-x text-xl text-white' />
                </Box>
                <Typography variant='subtitle1' fontWeight={800} color='error.dark'>
                  {t('cancellationReason')}
                </Typography>
              </Stack>
              <Typography variant='body1' color='error.dark' fontWeight={600} sx={{ lineHeight: 1.7, pl: 6.5 }}>
                {order?.cancellation_reason}
              </Typography>
            </Stack>
          </Box>
        )}
      </Card>
    </Grid>
  )
}

export default OrderNotesSection
