shop-server/client/src/features/order-payment/ui/OrderPaymentSection.tsx

import Box from '@mui/material/Box'
import Button from '@mui/material/Button'
import Typography from '@mui/material/Typography'
import { ORDER_STATUS_MAP } from '@/shared/lib/order-status-data'

type Props = {
  status: string
  deliveryFeeLocked: boolean
  paymentMethod: string | null
  totalCents: number
  isPayPending: boolean
  payError: unknown
  onPay: () => void
}

export function OrderPaymentSection({ status, deliveryFeeLocked, paymentMethod, isPayPending, onPay }: Props) {
  const payOnPickup = (paymentMethod ?? 'online') === 'on_pickup'

  if (payOnPickup) {
    return (
      <Box sx={{ border: 1, borderColor: 'divider', borderRadius: 2, p: 2, bgcolor: 'background.paper' }}>
        <Typography variant="h6" gutterBottom>
          Оплата
        </Typography>
        <Typography color="text.secondary" variant="body2">
          Оплата при получении на точке самовывоза (наличные или карта — по договорённости).
        </Typography>
      </Box>
    )
  }

  return (
    <Box sx={{ border: 1, borderColor: 'divider', borderRadius: 2, p: 2, bgcolor: 'background.paper' }}>
      <Typography variant="h6" gutterBottom>
        Оплата
      </Typography>
      {status === 'PENDING_PAYMENT' && deliveryFeeLocked === false && (
        <Typography color="text.secondary" variant="body2" sx={{ mb: 1 }}>
          Точную стоимость доставки уточняет администратор. Оплата станет доступна после утверждения стоимости.
        </Typography>
      )}
      {status === 'PENDING_PAYMENT' && deliveryFeeLocked === true && (
        <>
          <Typography color="text.secondary" variant="body2" sx={{ mb: 1 }}>
            Вы будете перенаправлены на защищённую платёжную страницу ЮKassa. После оплаты заказ получит статус «
            {ORDER_STATUS_MAP['PAID'] ?? 'PAID'}».
          </Typography>
          <Button variant="contained" onClick={onPay} disabled={isPayPending}>
            {isPayPending ? 'Создание платежа…' : 'Оплатить'}
          </Button>
        </>
      )}
      {status === 'PAID' && (
        <Typography color="success.main" variant="body1">
          Оплачено. Спасибо!
        </Typography>
      )}
      {status !== 'PENDING_PAYMENT' && status !== 'PAID' && (
        <Typography color="text.secondary" variant="body2">
          На этом этапе действий по оплате не требуется.
        </Typography>
      )}
    </Box>
  )
}