import React, { useState } from 'react';
import { View, TouchableOpacity } from 'react-native';
import { MyText, tw, BottomDialog, MyTextInput } from 'common-ui';
import { trpc } from '@/src/trpc-client';
import MaterialIcons from '@expo/vector-icons/MaterialIcons';
import { Alert } from 'react-native';

interface CancelOrderDialogProps {
  orderId: number;
  open: boolean;
  onClose: () => void;
  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()) {
      Alert.alert('Error', 'Please enter a cancellation reason');
      return;
    }

    Alert.alert(
      'Cancel Order',
      'Are you sure you want to cancel this order? This action cannot be undone.',
      [
        { text: 'No', style: 'cancel' },
        {
          text: 'Yes, Cancel',
          style: 'destructive',
          onPress: () => {
            cancelOrderMutation.mutate(
              { orderId, reason: cancelReason },
              {
                onSuccess: () => {
                  onClose();
                  setCancelReason('');
                  onSuccess?.();
                },
                onError: (error: any) => {
                  Alert.alert('Error', error.message || 'Failed to cancel order');
                },
              }
            );
          },
        },
      ]
    );
  };

  return (
    <BottomDialog open={open} onClose={onClose}>
      <View style={tw`p-6`}>
        <View style={tw`items-center mb-6`}>
          <View style={tw`w-12 h-12 bg-red-100 rounded-full items-center justify-center mb-3`}>
            <MaterialIcons name="cancel" size={24} color="#DC2626" />
          </View>
          <MyText style={tw`text-xl font-bold text-gray-900 text-center`}>
            Cancel Order
          </MyText>
          <MyText style={tw`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.
          </MyText>
        </View>

        <MyTextInput
          topLabel="Cancellation Reason *"
          value={cancelReason}
          onChangeText={setCancelReason}
          placeholder="Enter reason for cancellation..."
          multiline
          style={tw`h-24`}
        />

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