import React, { useEffect, useState, useCallback } from 'react';
import {
  View,
  Text,
  ScrollView,
  ActivityIndicator,
  TouchableOpacity,
  Modal,
  TextInput,
  Alert,
} from 'react-native';
import { useRoute, useNavigation } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';
import { RouteProp } from '@react-navigation/native';
import { Header, OrderStatusTimeline, ProductRatingModal } from '@components';
import { useAppTheme } from '@theme';
import { getStyles } from './orderDetailsScreen.styles';
import { RootState, useAppDispatch, useAppSelector } from '@store';
import { getOrderByIdThunk } from '../checkoutPaymentScreen';
import { formatDate, formatTime } from '@utils/helper';
import { submitReview } from './thunk';
import { giveRatingPayload, OrderItem, TicketCategory } from '@interfaces';
import { AppStackParamList } from '@navigation';
import { useCustomerSupport } from '../../../hooks/useCustomerSupport';

type OrderDetailsRouteProp = RouteProp<AppStackParamList, 'OrderDetailsScreen'>;
type OrderDetailsNavProp = StackNavigationProp<AppStackParamList>;

export const OrderDetailsScreen: React.FC = () => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);
  const route = useRoute<OrderDetailsRouteProp>();
  const navigation = useNavigation<OrderDetailsNavProp>();
  const dispatch = useAppDispatch();

  const orderId = route.params?.orderId;

  const { orderDetails, orderDetailsLoading, orderDetailsError } =
    useAppSelector((state: RootState) => state.paymentMethods);

  // ── Rating modal state ────────────────────────────────────────────────────
  const [ratingModalItem, setRatingModalItem] = useState<OrderItem | null>(
    null,
  );
  /** Tracks which productIds have already been rated this session */
  const [ratedProductIds, setRatedProductIds] = useState<Set<string>>(
    new Set(),
  );

  const isDelivered = orderDetails?.status === 'DELIVERED';

  // ── Support / Need Help modal state ───────────────────────────────────────
  const [helpModalVisible, setHelpModalVisible] = useState(false);
  const [categorySelectVisible, setCategorySelectVisible] = useState(false);
  const [helpCategory, setHelpCategory] = useState<TicketCategory>('ORDER');
  const [helpDescription, setHelpDescription] = useState('');
  const [submittingTicket, setSubmittingTicket] = useState(false);

  const { createTicket } = useCustomerSupport();

  const handleHelpSubmit = async () => {
    if (!orderDetails) return;
    if (!helpDescription.trim()) {
      Alert.alert('Error', 'Please describe the issue in detail.');
      return;
    }

    setSubmittingTicket(true);
    try {
      const orderShortId = orderDetails.orderNumber?.split('-').pop() || orderDetails.id;
      const newTicket = await createTicket({
        category: helpCategory,
        priority: 'MEDIUM',
        subject: `Issue with Order #${orderShortId}`,
        description: helpDescription.trim(),
        orderId: orderDetails.id,
      });
      setHelpModalVisible(false);
      setHelpDescription('');
      Alert.alert('Success', 'Support ticket created successfully!');
      navigation.navigate('SupportChatScreen', { ticketId: newTicket.id });
    } catch (error) {
      Alert.alert('Error', 'Failed to create support ticket. Please try again.');
    } finally {
      setSubmittingTicket(false);
    }
  };

  useEffect(() => {
    if (orderId) {
      dispatch(getOrderByIdThunk(orderId));
    }
  }, [dispatch, orderId]);

  const handleRatingSubmit = useCallback(
    (payload: giveRatingPayload) => {
      if (!ratingModalItem) return;
      // Dispatch the API call: POST /products/:productId/ratings
      dispatch(
        submitReview({
          id: ratingModalItem.productId,
          payload: {
            rating: payload.rating,
            comment: payload.comment,
            images: payload.images,
            orderId: orderDetails?.id ?? '',
          },
        }),
      )
        .unwrap()
        .then(() => {
          setRatedProductIds(prev =>
            new Set(prev).add(ratingModalItem.productId),
          );
        });
    },
    [dispatch, ratingModalItem, orderDetails?.id],
  );

  const handleModalClose = useCallback(() => {
    setRatingModalItem(null);
  }, []);

  // ── Loading ───────────────────────────────────────────────────────────────
  if (orderDetailsLoading) {
    return (
      <View style={styles.container}>
        <Header title="Order Details" onBack={() => navigation.goBack()} />
        <View style={styles.loadingContainer}>
          <ActivityIndicator size="large" color={colors.primary} />
          <Text style={styles.loadingText}>Fetching order details...</Text>
        </View>
      </View>
    );
  }

  if (orderDetailsError || !orderDetails) {
    return (
      <View style={styles.container}>
        <Header title="Order Details" onBack={() => navigation.goBack()} />
        <View style={styles.errorContainer}>
          <Text style={styles.errorText}>
            {orderDetailsError || 'Could not load order details.'}
          </Text>
        </View>
      </View>
    );
  }

  const orderDate = orderDetails.createdAt
    ? `${formatDate(orderDetails.createdAt)} at ${formatTime(
      orderDetails.createdAt,
    )}`
    : '';

  return (
    <View style={styles.container}>
      <Header title="Order Details" onBack={() => navigation.goBack()} />
      <ScrollView contentContainerStyle={styles.content}>
        {/* Top Info Section */}
        <View style={styles.section}>
          <View style={styles.headerRow}>
            <Text style={styles.orderNumber}>
              Order {orderDetails.orderNumber?.split('-').pop() || ''}
            </Text>
            <View style={styles.statusBadge}>
              <Text style={styles.statusText}>{orderDetails.status}</Text>
            </View>
          </View>
          <Text style={styles.dateText}>Placed on {orderDate}</Text>
          <Text style={styles.dateText}>
            Payment: {orderDetails.paymentMethod}
          </Text>

          {/* Merchant Info */}
          <View style={styles.merchantRow}>
            <View style={styles.merchantIcon}>
              <Text>🏪</Text>
            </View>
            <Text style={styles.merchantName}>
              {orderDetails.merchant?.name || 'Store'}
            </Text>
          </View>

          {/* Need Help Button */}
          <TouchableOpacity
            style={styles.orderNeedHelpBtn}
            onPress={() => setHelpModalVisible(true)}
            activeOpacity={0.7}
          >
            <Text style={styles.orderNeedHelpText}>❓ Need help with this order?</Text>
          </TouchableOpacity>
        </View>

        {/* Order Status Timeline Section */}
        <View style={styles.timelineSection}>
          <Text style={styles.sectionTitle}>Order Status</Text>
          <OrderStatusTimeline
            tracking={orderDetails.tracking}
            currentStatus={orderDetails.status}
            deliveryPartner={orderDetails?.delivery?.deliveryPartner?.user}
          />
        </View>

        {/* Order Items Section */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Order Items</Text>

          {/* Rate all hint — shown only when delivered */}
          {isDelivered && (
            <View style={styles.rateHintBanner}>
              <Text style={styles.rateHintEmoji}>⭐</Text>
              <Text style={styles.rateHintText}>
                Tap any item below to rate it
              </Text>
            </View>
          )}

          {orderDetails.orderItems?.map((item, index) => {
            const isRated = ratedProductIds.has(item.productId);
            return (
              <TouchableOpacity
                key={item.id || index}
                style={[styles.itemRow, isDelivered && styles.itemRowTappable]}
                activeOpacity={isDelivered ? 0.65 : 1}
                onPress={() => {
                  if (isDelivered) {
                    setRatingModalItem(item);
                  }
                }}
                disabled={!isDelivered}
              >
                <View style={styles.itemInfo}>
                  <View style={styles.itemQuantityBadge}>
                    <Text style={styles.itemQuantityText}>
                      {item.quantity}x
                    </Text>
                  </View>
                  <View style={{ flex: 1 }}>
                    <Text style={styles.itemName}>{item.name}</Text>
                    {/* Rating status pill — only shown when DELIVERED */}
                    {isDelivered && (
                      <View style={styles.ratingPillRow}>
                        {isRated ? (
                          <View style={styles.ratedPill}>
                            <Text style={styles.ratedPillText}>✓ Rated</Text>
                          </View>
                        ) : (
                          <View style={styles.ratePill}>
                            <Text style={styles.ratePillText}>
                              ⭐ Rate this
                            </Text>
                          </View>
                        )}
                      </View>
                    )}
                  </View>
                </View>
                <Text style={styles.itemPrice}>₹{item.totalAmount}</Text>
              </TouchableOpacity>
            );
          })}
        </View>

        {/* Bill Summary Section */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Bill Summary</Text>
          <View style={styles.billRow}>
            <Text style={styles.billLabel}>Item Total</Text>
            <Text style={styles.billValue}>₹{orderDetails.subtotal}</Text>
          </View>
          <View style={styles.billRow}>
            <Text style={styles.billLabel}>Delivery Fee</Text>
            <Text style={styles.billValue}>₹{orderDetails.deliveryFee}</Text>
          </View>
          <View style={styles.billRow}>
            <Text style={styles.billLabel}>Platform Fee</Text>
            <Text style={styles.billValue}>₹{orderDetails.platformFee}</Text>
          </View>
          <View style={styles.billRow}>
            <Text style={styles.billLabel}>Taxes</Text>
            <Text style={styles.billValue}>₹{orderDetails.taxAmount}</Text>
          </View>

          <View style={styles.billDivider} />

          <View style={styles.billRow}>
            <Text style={styles.billTotalLabel}>Grand Total</Text>
            <Text style={styles.billTotalValue}>
              ₹{orderDetails.totalAmount}
            </Text>
          </View>
        </View>

        {/* Delivery Address Section */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Delivery Details</Text>
          <Text style={styles.addressType}>
            {orderDetails.dropAddress?.label || 'Home'}
          </Text>
          <Text style={styles.addressText}>
            {orderDetails.dropAddress?.houseNumber
              ? `${orderDetails.dropAddress.houseNumber}, `
              : ''}
            {orderDetails.dropAddress?.addressLine1}
          </Text>
          <Text style={styles.addressText}>
            {orderDetails.dropAddress?.landmark
              ? `Landmark: ${orderDetails.dropAddress.landmark}`
              : ''}
          </Text>
          <Text style={styles.addressText}>
            Phone: {orderDetails.dropAddress?.phone}
          </Text>
        </View>

        {/* Payment Info */}
        {orderDetails.payments && orderDetails.payments.length > 0 && (
          <View style={styles.section}>
            <Text style={styles.sectionTitle}>Payment Details</Text>
            <View style={styles.paymentRow}>
              <Text style={styles.paymentIcon}>💳</Text>
              <Text style={styles.paymentText}>
                Paid via {orderDetails.payments[0].method} (
                {orderDetails.payments[0].status})
              </Text>
            </View>
          </View>
        )}
      </ScrollView>

      {/* Product Rating Modal */}
      <ProductRatingModal
        visible={ratingModalItem !== null}
        productId={ratingModalItem?.productId ?? ''}
        productName={ratingModalItem?.name ?? ''}
        orderId={orderDetails?.id}
        quantity={ratingModalItem?.quantity}
        onSubmit={handleRatingSubmit}
        onClose={handleModalClose}
      />

      {/* Need Help / Ticket Creation Modal */}
      <Modal
        visible={helpModalVisible}
        transparent
        animationType="slide"
        onRequestClose={() => setHelpModalVisible(false)}
      >
        <View style={styles.modalOverlay}>
          <View style={styles.modalContent}>
            <Text style={styles.modalTitle}>Report Issue with Order</Text>

            <ScrollView showsVerticalScrollIndicator={false}>
              <Text style={styles.label}>Category</Text>
              <TouchableOpacity
                style={styles.categorySelect}
                onPress={() => setCategorySelectVisible(true)}
              >
                <Text style={styles.categorySelectText}>
                  {helpCategory.replace('_', ' ')}
                </Text>
                <Text style={{ color: colors.textSecondary }}>▼</Text>
              </TouchableOpacity>

              <Text style={styles.label}>Order ID</Text>
              <TextInput
                style={[styles.input, { opacity: 0.6 }]}
                value={orderDetails.orderNumber || orderDetails.id}
                editable={false}
              />

              <Text style={styles.label}>Details</Text>
              <TextInput
                style={[styles.input, styles.textArea]}
                value={helpDescription}
                onChangeText={setHelpDescription}
                placeholder="What seems to be the problem with this order?"
                placeholderTextColor={colors.textSecondary}
                multiline
                numberOfLines={4}
              />

              <View style={styles.modalActions}>
                <TouchableOpacity
                  style={[styles.modalBtn, styles.cancelBtn]}
                  onPress={() => setHelpModalVisible(false)}
                  disabled={submittingTicket}
                >
                  <Text style={styles.cancelBtnText}>Cancel</Text>
                </TouchableOpacity>
                <TouchableOpacity
                  style={[styles.modalBtn, styles.submitBtn]}
                  onPress={handleHelpSubmit}
                  disabled={submittingTicket}
                >
                  {submittingTicket ? (
                    <ActivityIndicator size="small" color="#FFFFFF" />
                  ) : (
                    <Text style={styles.submitBtnText}>Submit</Text>
                  )}
                </TouchableOpacity>
              </View>
            </ScrollView>
          </View>
        </View>
      </Modal>

      {/* Help Category Select Modal */}
      <Modal
        visible={categorySelectVisible}
        transparent
        animationType="fade"
        onRequestClose={() => setCategorySelectVisible(false)}
      >
        <View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'center', padding: 24 }}>
          <View style={{ backgroundColor: colors.cardBg, borderRadius: 12, padding: 16 }}>
            <Text style={{ fontSize: 18, fontWeight: 'bold', color: colors.text, marginBottom: 12, textAlign: 'center' }}>
              Select Issue Category
            </Text>
            {[
              { value: 'ORDER', label: 'Order' },
              { value: 'PAYMENT', label: 'Payment' },
              { value: 'PAYOUT', label: 'Payout' },
              { value: 'TECHNICAL_ISSUE', label: 'Technical Issue' },
              { value: 'ACCOUNT', label: 'Account' },
              { value: 'OTHER', label: 'Other' },
            ].map((item) => (
              <TouchableOpacity
                key={item.value}
                style={{ paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: colors.border }}
                onPress={() => {
                  setHelpCategory(item.value as TicketCategory);
                  setCategorySelectVisible(false);
                }}
              >
                <Text style={{ fontSize: 16, color: colors.text }}>{item.label}</Text>
              </TouchableOpacity>
            ))}
            <TouchableOpacity
              style={{ marginTop: 16, paddingVertical: 12, alignItems: 'center' }}
              onPress={() => setCategorySelectVisible(false)}
            >
              <Text style={{ color: colors.primary, fontWeight: 'bold' }}>Close</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    </View>
  );
};

export default OrderDetailsScreen;