import { useState } from 'react'
import Box from '@mui/material/Box'
import Button from '@mui/material/Button'
import Typography from '@mui/material/Typography'
import { orderStatusLabelRu } from '@/shared/lib/order-status-labels'
import { PaymentDialog } from './PaymentDialog'

type Props = {
  status: string
  paymentMethod: string | null
  totalCents: number
  isPayPending: boolean
  payError: unknown
  onPay: (params: { detail: string; receiptFile: File | null }) => void
}

export function OrderPaymentSection({ status, paymentMethod, isPayPending, payError, onPay }: Props) {
  const payOnPickup = (paymentMethod ?? 'online') === 'on_pickup'
  const [payModalOpen, setPayModalOpen] = useState(false)

  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 === 'DELIVERY_FEE_ADJUSTMENT' && (
        <Typography color="text.secondary" variant="body2" sx={{ mb: 1 }}>
          Точную стоимость доставки уточняет администратор. Оплата станет доступна после перехода заказа в статус «
          {orderStatusLabelRu('PENDING_PAYMENT')}».
        </Typography>
      )}
      {status === 'PENDING_PAYMENT' && (
        <>
          <Typography color="text.secondary" variant="body2" sx={{ mb: 1 }}>
            После перевода подтвердите оплату — откроется форма для комментария и фото чека. Заказ получит статус «
            {orderStatusLabelRu('PAYMENT_VERIFICATION')}».
          </Typography>
          <Button variant="contained" onClick={() => setPayModalOpen(true)}>
            Оплатить
          </Button>
        </>
      )}
      {status === 'PAYMENT_VERIFICATION' && (
        <Typography color="info.main" variant="body2">
          Оплата отправлена на проверку. Мы проверим поступление и обновим статус.
        </Typography>
      )}
      {!['DELIVERY_FEE_ADJUSTMENT', 'PENDING_PAYMENT', 'PAYMENT_VERIFICATION'].includes(status) && (
        <Typography color="text.secondary" variant="body2">
          На этом этапе действий по оплате в этом блоке не требуется.
        </Typography>
      )}

      <PaymentDialog
        open={payModalOpen}
        isPending={isPayPending}
        error={payError}
        onClose={() => setPayModalOpen(false)}
        onSubmit={(params) => {
          onPay(params)
          setPayModalOpen(false)
        }}
      />
    </Box>
  )
}
