import Box from '@mui/material/Box'
import Stack from '@mui/material/Stack'
import Typography from '@mui/material/Typography'
import { ORDER_STATUS_DATA, type StatusIconName } from '@/shared/lib/order-status-data'

const iconMap: Record<StatusIconName, React.ReactElement> = {
  banknote: (
    <svg
      width="20"
      height="20"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <rect x="2" y="6" width="20" height="12" rx="2" />
      <circle cx="12" cy="12" r="3" />
      <path d="M6 12h.01M18 12h.01" />
    </svg>
  ),
  'check-circle': (
    <svg
      width="20"
      height="20"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
      <polyline points="22 4 12 14.01 9 11.01" />
    </svg>
  ),
  'package-search': (
    <svg
      width="20"
      height="20"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <circle cx="16" cy="12" r="4" />
      <path d="M19 19l-3-3" />
      <path d="M21 10V7a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 7v3" />
      <path d="M3 10l9 5 9-5" />
    </svg>
  ),
  package: (
    <svg
      width="20"
      height="20"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M16.5 9.4l-9-5.19M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
      <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
      <line x1="12" y1="22.08" x2="12" y2="12" />
    </svg>
  ),
  'package-check': (
    <svg
      width="20"
      height="20"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M16.5 9.4l-9-5.19M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
      <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
      <line x1="12" y1="22.08" x2="12" y2="12" />
      <polyline points="9 13 11 15 15 11" />
    </svg>
  ),
  store: (
    <svg
      width="20"
      height="20"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
      <polyline points="9 22 9 12 15 12 15 22" />
    </svg>
  ),
  'x-circle': (
    <svg
      width="20"
      height="20"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <circle cx="12" cy="12" r="10" />
      <path d="M15 9l-6 6M9 9l6 6" />
    </svg>
  ),
}

const colorMap: Record<string, { bg: string; border: string; text: string; dot: string; iconBg: string }> = {
  warning: {
    bg: 'rgba(245, 124, 0, 0.04)',
    border: 'rgba(245, 124, 0, 0.15)',
    text: '#c27a00',
    dot: '#F57C00',
    iconBg: 'rgba(245, 124, 0, 0.1)',
  },
  success: {
    bg: 'rgba(46, 139, 87, 0.04)',
    border: 'rgba(46, 139, 87, 0.15)',
    text: '#1e6e42',
    dot: '#2E8B57',
    iconBg: 'rgba(46, 139, 87, 0.1)',
  },
  info: {
    bg: 'rgba(84, 110, 122, 0.04)',
    border: 'rgba(84, 110, 122, 0.15)',
    text: '#3d5a68',
    dot: '#546E7A',
    iconBg: 'rgba(84, 110, 122, 0.1)',
  },
  error: {
    bg: 'rgba(211, 47, 47, 0.04)',
    border: 'rgba(211, 47, 47, 0.15)',
    text: '#a83232',
    dot: '#D32F2F',
    iconBg: 'rgba(211, 47, 47, 0.1)',
  },
}

export function OrderStatusesSection() {
  return (
    <Box>
      <Box sx={{ mb: 4 }}>
        <Typography
          variant="h5"
          sx={{
            fontWeight: 700,
            letterSpacing: '-0.03em',
            lineHeight: 1.15,
            mb: 1,
          }}
        >
          Статусы заказа
        </Typography>
        <Typography
          sx={{
            fontSize: '0.875rem',
            color: 'text.secondary',
            lineHeight: 1.6,
            maxWidth: '56ch',
          }}
        >
          Текущий статус отображается в личном кабинете. Каждый этап отражает, что происходит с вашим заказом.
        </Typography>
      </Box>

      <Stack spacing={0} sx={{ position: 'relative' }}>
        {ORDER_STATUS_DATA.map((s, index) => {
          const colors = colorMap[s.color] ?? colorMap.info
          const isLast = index === ORDER_STATUS_DATA.length - 1

          return (
            <Box
              key={s.code}
              sx={{
                display: 'flex',
                gap: 3,
                pb: isLast ? 0 : 3,
                position: 'relative',
              }}
            >
              {/* Content column */}
              <Box sx={{ flex: 1, pt: 0.25 }}>
                <Box
                  sx={{
                    display: 'flex',
                    alignItems: 'center',
                    gap: 1.5,
                    mb: 0.75,
                  }}
                >
                  <Box
                    sx={{
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      width: 36,
                      height: 36,
                      borderRadius: '10px',
                      backgroundColor: colors.iconBg,
                      color: colors.text,
                      flexShrink: 0,
                    }}
                  >
                    {iconMap[s.iconName]}
                  </Box>
                  <Typography
                    sx={{
                      fontWeight: 600,
                      fontSize: '0.9rem',
                      color: colors.text,
                      letterSpacing: '-0.01em',
                    }}
                  >
                    {s.label}
                  </Typography>
                </Box>
                <Typography
                  sx={{
                    fontSize: '0.8rem',
                    color: 'text.secondary',
                    lineHeight: 1.65,
                    maxWidth: '60ch',
                    pl: '45px',
                  }}
                >
                  {s.description}
                </Typography>
              </Box>
            </Box>
          )
        })}
      </Stack>
    </Box>
  )
}
