import React, { useState } from 'react'
import type { OrderDialogBaseProps } from '@packages/shared'
import { p as P, BottomDialog, pInput as PInput } from 'web-components'
import { trpc } from '@/lib/trpc-client'
import { XCircle } from 'lucide-react'

interface CancelOrderDialogProps extends OrderDialogBaseProps {
  onSuccess?: () => void
}

export default function CancelOrderDialog({ orderId, open, onClose, onSuccess }: CancelOrderDialogProps) {
  const [cancelReason, setCancelReason] = useState('')
  const cancelOrderMutation = trpc.admin.order.cancelOrder.useMutation()

  const handleCancel = () => {
    if (!cancelReason.trim()) {
      window.alert('Error: Please enter a cancellation reason')
      return
    }

    const confirmed = window.confirm(
      'Cancel Order? Are you sure you want to cancel this order? This action cannot be undone.'
    )
    if (!confirmed) return

    cancelOrderMutation.mutate(
      { orderId, reason: cancelReason },
      {
        onSuccess: () => {
          onClose()
          setCancelReason('')
          onSuccess?.()
        },
        onError: (error: any) => {
          window.alert(`Error: ${error.message || 'Failed to cancel order'}`)
        },
      }
    )
  }

  return (
    <BottomDialog open={open} onClose={onClose}>
      <div className="p-6">
        <div className="items-center mb-6 flex flex-col">
          <div className="w-12 h-12 bg-red-100 rounded-full items-center justify-center mb-3 flex">
            <XCircle className="h-6 w-6 text-red-600" />
          </div>
          <P className="text-xl font-bold text-gray-900 text-center">
            Cancel Order
          </P>
          <P className="text-gray-500 text-center mt-2 text-sm leading-5">
            This will cancel the order and mark it as cancelled by admin. A refund record will be created.
          </P>
        </div>

        <PInput
          topLabel="Cancellation Reason *"
          value={cancelReason}
          onChange={(e) => setCancelReason(e.target.value)}
          placeholder="Enter reason for cancellation..."
          multiline
          className="h-24"
        />

        <div className="flex flex-row gap-3 mt-6">
          <button
            type="button"
            onClick={onClose}
            className="flex-1 bg-gray-100 py-3.5 rounded-xl items-center text-gray-700 font-bold"
          >
            Keep Order
          </button>
          <button
            type="button"
            onClick={handleCancel}
            disabled={cancelOrderMutation.isPending || !cancelReason.trim()}
            className={`flex-1 bg-red-500 py-3.5 rounded-xl items-center shadow-sm text-white font-bold disabled:opacity-50 ${cancelOrderMutation.isPending ? 'opacity-50' : ''}`}
          >
            {cancelOrderMutation.isPending ? 'Cancelling...' : 'Cancel Order'}
          </button>
        </div>
      </div>
    </BottomDialog>
  )
}