import React from 'react';
import { View, TouchableOpacity, ActivityIndicator } from 'react-native';
import { useRouter } from 'expo-router';
import { tw, MyText } from 'common-ui';
import { MaterialIcons, Ionicons } from '@expo/vector-icons';
import dayjs from 'dayjs';
import { trpc } from '@/src/trpc-client';
import { Image } from 'expo-image';

interface OrderItem {
  productName: string;
  quantity: number;
  price: number;
  amount: number;
  image: string | null;
}

interface Order {
  id: number;
  orderId: string;
  orderDate: string;
  deliveryStatus: string;
  deliveryDate?: string;
  orderStatus: string;
  cancelReason: string | null;
  totalAmount: number;
  deliveryCharge: number;
  paymentMode: string;
  paymentStatus: string;
  refundStatus: string;
  refundAmount: number | null;
  userNotes: string | null;
  items: OrderItem[];
  discountAmount?: number;
  isFlashDelivery: boolean;
  createdAt: string;
}

export default function NextOrderGlimpse() {
  const router = useRouter();

  const { data: ordersData, isLoading: ordersLoading } = trpc.user.order.getOrders.useQuery({
    page: 1,
    pageSize: 50,
  });

  const allOrders: Order[] = ordersData?.data || [];

  const now = dayjs();

  const upcomingOrders = allOrders.filter(order => {
    if (order.orderStatus.toLowerCase() === 'cancelled') return false;
    if (order.deliveryStatus.toLowerCase() === 'success') return false;

    if (order.isFlashDelivery) {
      return true;
    }

    if (order.deliveryDate) {
      return dayjs(order.deliveryDate).isAfter(now);
    }

    return false;
  });

  upcomingOrders.sort((a, b) => {
    if (a.isFlashDelivery && !b.isFlashDelivery) return -1;
    if (!a.isFlashDelivery && b.isFlashDelivery) return 1;

    if (a.isFlashDelivery && b.isFlashDelivery) {
      return dayjs(b.createdAt).diff(dayjs(a.createdAt));
    }

    if (a.deliveryDate && b.deliveryDate) {
      return dayjs(a.deliveryDate).diff(dayjs(b.deliveryDate));
    }

    return 0;
  });

  const nextOrder = upcomingOrders[0] || null;

  if (ordersLoading) {
    return (
      <View style={tw`px-6 mb-4`}>
        <View style={tw`bg-white rounded-2xl p-4 border border-gray-100`}>
          <ActivityIndicator size="small" color="#3B82F6" />
        </View>
      </View>
    );
  }

  if (!nextOrder) {
    return null;
  }

  return (
    <TouchableOpacity
      style={tw`px-6 mb-4`}
      onPress={() => router.push(`/(drawer)/(tabs)/me/my-orders/${nextOrder.id}`)}
    >
      <View style={tw`bg-gradient-to-r from-amber-50 to-orange-50 rounded-2xl p-4 border-2 border-amber-300`}>
        <View style={tw`flex-row items-center justify-between mb-3`}>
          <View style={tw`flex-row items-center`}>
            <View style={tw`w-2 h-2 rounded-full bg-amber-500 mr-2`} />
            <MyText style={tw`text-[10px] font-bold text-amber-600 uppercase tracking-wider`}>Upcoming Order</MyText>
          </View>
          {nextOrder.isFlashDelivery && (
            <View style={tw`px-2 py-0.5 bg-amber-200 rounded-full flex-row items-center`}>
              <MaterialIcons name="bolt" size={10} color="#D97706" style={tw`mr-0.5`} />
              <MyText style={tw`text-[8px] font-black text-amber-700 uppercase`}>FLASH</MyText>
            </View>
          )}
        </View>

        <View style={tw`flex-row justify-between items-start mb-3`}>
          <View>
            <MyText style={tw`text-lg font-extrabold text-gray-900`}>#{nextOrder.orderId}</MyText>
            <MyText style={tw`text-xs text-gray-500 mt-0.5`}>
              {nextOrder.items.length} {nextOrder.items.length === 1 ? 'item' : 'items'} • ₹{nextOrder.totalAmount}
            </MyText>
          </View>
          <View style={tw`bg-white px-2 py-1 rounded-lg border border-amber-200`}>
            <MyText style={tw`text-[10px] font-bold text-amber-700 uppercase`}>{nextOrder.deliveryStatus}</MyText>
          </View>
        </View>

        <View style={tw`flex-row items-center`}>
          <MaterialIcons
            name={nextOrder.isFlashDelivery ? "bolt" : "schedule"}
            size={14}
            color="#D97706"
            style={tw`mr-1.5`}
          />
          <MyText style={tw`text-xs font-medium text-amber-800`}>
            {nextOrder.isFlashDelivery
              ? "30-Min Delivery"
              : dayjs(nextOrder.deliveryDate).format("DD MMM, hh:mm A")
            }
          </MyText>
        </View>

        {nextOrder.items.length > 0 && (
          <View style={tw`flex-row items-center mt-3 pt-3 border-t border-amber-200`}>
            <View style={tw`flex-row`}>
              {nextOrder.items.slice(0, 3).map((item, idx) => (
                <View
                  key={idx}
                  style={[
                    tw`w-8 h-8 rounded-lg bg-white border border-amber-200 items-center justify-center`,
                    { marginLeft: idx > 0 ? -8 : 0 }
                  ]}
                >
                  <Image
                    source={{ uri: item.image || undefined }}
                    style={tw`w-full h-full rounded-lg`}
                  />
                </View>
              ))}
              {nextOrder.items.length > 3 && (
                <View style={tw`w-8 h-8 rounded-lg bg-amber-100 border border-amber-200 items-center justify-center ml-2`}>
                  <MyText style={tw`text-[9px] font-bold text-amber-700`}>+{nextOrder.items.length - 3}</MyText>
                </View>
              )}
            </View>
            <MyText style={tw`text-xs text-amber-700 font-medium ml-2`}>Track Order</MyText>
            <Ionicons name="chevron-forward" size={14} color="#D97706" style={tw`ml-auto`} />
          </View>
        )}
      </View>
    </TouchableOpacity>
  );
}