'use client'

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

import type { IOrder } from '@/types/data'
import { statusChipMeta, typeChipMeta, paymentChipMeta } from './orderConstants'
import { formatDate } from './orderFormatters'

interface OrderHeaderProps {
  order: IOrder
  t: (key: string) => string
  locale: string
  getOrderStatusLabel: (order: IOrder) => string
  getOrderPaymentLabel: (order: IOrder) => string
  getOrderTypeLabel: (order: IOrder) => string
  onStatusClick: () => void
  onPaymentClick: () => void
  onMoreActionsClick: (event: React.MouseEvent<HTMLElement>) => void
}

const OrderHeader = ({
  order,
  t,
  locale,
  getOrderStatusLabel,
  getOrderPaymentLabel,
  getOrderTypeLabel,
  onStatusClick,
  onPaymentClick,
  onMoreActionsClick
}: OrderHeaderProps) => {
  return (
    <Grid size={{ xs: 12 }}>
      <Card
        sx={{
          background: `linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #3b82f6 100%)`,
          color: 'white',
          position: 'relative',
          overflow: 'hidden',
          boxShadow: '0 8px 32px rgba(30, 58, 138, 0.3)',
          '&::before': {
            content: '""',
            position: 'absolute',
            insetInlineStart: -150,
            top: -150,
            width: 400,
            height: 400,
            borderRadius: '50%',
            background: 'radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%)',
            animation: 'pulse 4s ease-in-out infinite'
          },
          '&::after': {
            content: '""',
            position: 'absolute',
            insetInlineEnd: -100,
            bottom: -100,
            width: 300,
            height: 300,
            borderRadius: '50%',
            background: 'radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%)'
          },
          '@keyframes pulse': {
            '0%, 100%': { transform: 'scale(1)', opacity: 0.15 },
            '50%': { transform: 'scale(1.05)', opacity: 0.2 }
          }
        }}
      >
        <Box sx={{ p: { xs: 3, md: 4 }, position: 'relative', zIndex: 1 }}>
          <Grid container spacing={3} alignItems='center'>
            {/* Left Side - Order Info */}
            <Grid size={{ xs: 12, md: 6 }}>
              <Stack spacing={2.5}>
                {/* Order Number with Icon */}
                <Stack direction='row' spacing={2} alignItems='center'>
                  <Box
                    sx={{
                      width: 56,
                      height: 56,
                      borderRadius: 2.5,
                      bgcolor: 'rgba(255, 255, 255, 0.25)',
                      backdropFilter: 'blur(10px)',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
                      border: '2px solid rgba(255, 255, 255, 0.3)'
                    }}
                  >
                    <i className='tabler-file-invoice text-3xl' />
                  </Box>
                  <Box>
                    <Typography
                      variant='overline'
                      sx={{ opacity: 0.95, fontWeight: 700, letterSpacing: 1 }}
                      color='#fff'
                    >
                      {t('orderNumber')}
                    </Typography>
                    <Typography variant='h4' fontWeight={800} sx={{ lineHeight: 1.2 }} color='#fff'>
                      #{order?.order_number}
                    </Typography>
                  </Box>
                </Stack>

                {/* Status Chips */}
                <Stack direction='row' spacing={2} flexWrap='wrap' gap={2}>
                  {/* Order Status */}
                  <Box
                    sx={{
                      display: 'inline-flex',
                      alignItems: 'center',
                      gap: 1.5,
                      px: 2.5,
                      py: 1.75,
                      borderRadius: 2.5,
                      bgcolor: 'rgba(255, 255, 255, 0.25)',
                      backdropFilter: 'blur(10px)',
                      border: '2px solid rgba(255, 255, 255, 0.4)',
                      boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
                      minWidth: 160
                    }}
                  >
                    <i className={`${statusChipMeta[order?.status].icon} text-2xl`} />
                    <Box>
                      <Typography
                        variant='body2'
                        sx={{
                          fontSize: '0.75rem',
                          fontWeight: 700,
                          display: 'block',
                          lineHeight: 1,
                          letterSpacing: 0.5
                        }}
                        color='#fff'
                      >
                        {t('status')}:
                      </Typography>
                      <Typography
                        variant='body1'
                        fontWeight={800}
                        sx={{ lineHeight: 1.4, mt: 0.5, fontSize: '0.95rem' }}
                        color='#fff'
                      >
                        {getOrderStatusLabel(order)}
                      </Typography>
                    </Box>
                  </Box>

                  {/* Payment Status */}
                  <Box
                    sx={{
                      display: 'inline-flex',
                      alignItems: 'center',
                      gap: 1.5,
                      px: 2.5,
                      py: 1.75,
                      borderRadius: 2.5,
                      bgcolor: 'rgba(255, 255, 255, 0.25)',
                      backdropFilter: 'blur(10px)',
                      border: '2px solid rgba(255, 255, 255, 0.4)',
                      boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
                      minWidth: 160
                    }}
                  >
                    <i className={`${paymentChipMeta[order?.payment_status].icon} text-2xl`} />
                    <Box>
                      <Typography
                        variant='body2'
                        sx={{
                          fontSize: '0.75rem',
                          fontWeight: 700,
                          display: 'block',
                          lineHeight: 1,
                          letterSpacing: 0.5
                        }}
                        color='#fff'
                      >
                        {t('payment')}:
                      </Typography>
                      <Typography
                        variant='body1'
                        fontWeight={800}
                        sx={{ lineHeight: 1.4, mt: 0.5, fontSize: '0.95rem' }}
                        color='#fff'
                      >
                        {getOrderPaymentLabel(order)}
                      </Typography>
                    </Box>
                  </Box>

                  {/* Order Type */}
                  <Box
                    sx={{
                      display: 'inline-flex',
                      alignItems: 'center',
                      gap: 1.5,
                      px: 2.5,
                      py: 1.75,
                      borderRadius: 2.5,
                      bgcolor: 'rgba(255, 255, 255, 0.25)',
                      backdropFilter: 'blur(10px)',
                      border: '2px solid rgba(255, 255, 255, 0.4)',
                      boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
                      minWidth: 160
                    }}
                  >
                    <i className={`${typeChipMeta[order?.order_type].icon} text-2xl`} />
                    <Box>
                      <Typography
                        variant='body2'
                        sx={{
                          fontSize: '0.75rem',
                          fontWeight: 700,
                          display: 'block',
                          lineHeight: 1,
                          letterSpacing: 0.5
                        }}
                        color='#fff'
                      >
                        {t('type')}:
                      </Typography>
                      <Typography
                        variant='body1'
                        fontWeight={800}
                        sx={{ lineHeight: 1.4, mt: 0.5, fontSize: '0.95rem' }}
                        color='#fff'
                      >
                        {getOrderTypeLabel(order)}
                      </Typography>
                    </Box>
                  </Box>
                </Stack>

                {/* Dates */}
                <Stack direction='row' spacing={3} flexWrap='wrap'>
                  <Box
                    sx={{
                      display: 'flex',
                      alignItems: 'center',
                      gap: 1,
                      px: 1.5,
                      py: 0.75,
                      borderRadius: 1.5,
                      bgcolor: 'rgba(255, 255, 255, 0.2)',
                      backdropFilter: 'blur(10px)',
                      border: '1px solid rgba(255, 255, 255, 0.3)'
                    }}
                  >
                    <i className='tabler-calendar-plus text-base' />
                    <Box>
                      <Typography variant='body2' sx={{ opacity: 0.85, fontWeight: 600 }} color='#fff'>
                        {t('sort.created')}
                      </Typography>
                      <Typography variant='body1' fontWeight={600} sx={{ lineHeight: 1.2 }} color='#fff'>
                        {formatDate(order?.created_at, locale)}
                      </Typography>
                    </Box>
                  </Box>
                  <Box
                    sx={{
                      display: 'flex',
                      alignItems: 'center',
                      gap: 1,
                      px: 1.5,
                      py: 0.75,
                      borderRadius: 1.5,
                      bgcolor: 'rgba(255, 255, 255, 0.2)',
                      backdropFilter: 'blur(10px)',
                      border: '1px solid rgba(255, 255, 255, 0.3)'
                    }}
                  >
                    <i className='tabler-calendar-check text-base' />
                    <Box>
                      <Typography variant='body2' sx={{ opacity: 0.85, fontWeight: 600 }} color='#fff'>
                        {t('updated')}
                      </Typography>
                      <Typography variant='body1' fontWeight={600} sx={{ lineHeight: 1.2 }} color='#fff'>
                        {formatDate(order?.updated_at, locale)}
                      </Typography>
                    </Box>
                  </Box>
                </Stack>
              </Stack>
            </Grid>

            {/* Right Side - Actions */}
            <Grid size={{ xs: 12, md: 6 }}>
              <Stack spacing={2}>
                {/* Primary Actions */}
                <Stack
                  direction='row'
                  spacing={2}
                  flexWrap='wrap'
                  justifyContent={{ xs: 'flex-start', md: 'flex-end' }}
                  gap={1.5}
                >
                  <Button
                    variant='contained'
                    size='large'
                    onClick={onStatusClick}
                    sx={{
                      bgcolor: 'white',
                      color: '#1e3a8a',
                      fontWeight: 700,
                      px: 3,
                      boxShadow: '0 4px 12px rgba(0, 0, 0, 0.2)',
                      '&:hover': {
                        bgcolor: '#f1f5f9',
                        transform: 'translateY(-2px)',
                        boxShadow: '0 6px 16px rgba(0, 0, 0, 0.25)'
                      },
                      transition: 'all 0.2s'
                    }}
                    startIcon={<i className='tabler-arrows-shuffle' />}
                  >
                    {t('updateStatus')}
                  </Button>
                  <Button
                    variant='outlined'
                    size='large'
                    onClick={onPaymentClick}
                    sx={{
                      borderWidth: 2,
                      borderColor: 'rgba(255, 255, 255, 0.6)',
                      color: 'white',
                      fontWeight: 700,
                      px: 3,
                      bgcolor: 'rgba(255, 255, 255, 0.15)',
                      backdropFilter: 'blur(10px)',
                      '&:hover': {
                        borderColor: 'white',
                        bgcolor: 'rgba(255, 255, 255, 0.25)',
                        transform: 'translateY(-2px)',
                        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.2)'
                      },
                      transition: 'all 0.2s'
                    }}
                    startIcon={<i className='tabler-credit-card' />}
                  >
                    {t('updatePayment')}
                  </Button>
                </Stack>

                {/* Secondary Actions */}
                <Stack
                  direction='row'
                  spacing={2}
                  flexWrap='wrap'
                  justifyContent={{ xs: 'flex-start', md: 'flex-end' }}
                  gap={1.5}
                >
                  <Button
                    variant='outlined'
                    size='medium'
                    onClick={onMoreActionsClick}
                    sx={{
                      borderWidth: 1.5,
                      borderColor: 'rgba(255, 255, 255, 0.5)',
                      color: 'white',
                      fontWeight: 600,
                      bgcolor: 'rgba(255, 255, 255, 0.12)',
                      backdropFilter: 'blur(10px)',
                      '&:hover': {
                        borderColor: 'rgba(255, 255, 255, 0.7)',
                        bgcolor: 'rgba(255, 255, 255, 0.2)'
                      }
                    }}
                    startIcon={<i className='tabler-dots' />}
                  >
                    {t('moreActions')}
                  </Button>

                  <Tooltip title={t('refreshOrder')}>
                    <Button
                      variant='outlined'
                      size='medium'
                      onClick={() => window.location.reload()}
                      sx={{
                        minWidth: 'auto',
                        px: 2,
                        borderWidth: 1.5,
                        borderColor: 'rgba(255, 255, 255, 0.5)',
                        color: 'white',
                        bgcolor: 'rgba(255, 255, 255, 0.12)',
                        backdropFilter: 'blur(10px)',
                        '&:hover': {
                          borderColor: 'rgba(255, 255, 255, 0.7)',
                          bgcolor: 'rgba(255, 255, 255, 0.2)'
                        }
                      }}
                    >
                      <i className='tabler-refresh' />
                    </Button>
                  </Tooltip>
                </Stack>
              </Stack>
            </Grid>
          </Grid>
        </Box>
      </Card>
    </Grid>
  )
}

export default OrderHeader
