import React, { useState, useEffect, useCallback } from "react";
import {
  View,
  Alert,
  ActivityIndicator,
  Dimensions,
  StyleSheet,
} from "react-native";
import { TouchableOpacity } from "react-native-gesture-handler";
import { Image } from "expo-image";
import DraggableFlatList, {
  ScaleDecorator,
} from "react-native-draggable-flatlist";
import {
  AppContainer,
  MyText,
  tw,
  MyTouchableOpacity,
} from "common-ui";
import { useRouter } from "expo-router";
import { trpc } from "../../../src/trpc-client";
import MaterialIcons from "@expo/vector-icons/MaterialIcons";
import { useQueryClient } from "@tanstack/react-query";

const { width: screenWidth } = Dimensions.get("window");
// Item takes full width minus padding
const itemWidth = screenWidth - 48; // 24px padding each side
const itemHeight = 80;

interface Product {
  id: number;
  name: string;
  images: string[];
  isOutOfStock: boolean;
}

interface ProductItemProps {
  item: Product;
  drag: () => void;
  isActive: boolean;
}

const ProductItem: React.FC<ProductItemProps> = ({
  item,
  drag,
  isActive,
}) => {
  return (
    <ScaleDecorator>
      <TouchableOpacity
        onLongPress={drag}
        activeOpacity={1}
        style={[
          styles.item,
          isActive && styles.activeItem,
          item.isOutOfStock && styles.outOfStock,
        ]}
      >
        {/* Drag Handle */}
        <View style={styles.dragHandle}>
          <MaterialIcons
            name="drag-indicator"
            size={24}
            color={isActive ? "#3b82f6" : "#9ca3af"}
          />
        </View>

        {/* Product Image */}
        {item.images?.[0] ? (
          <Image
            source={{ uri: item.images[0] }}
            style={styles.image}
            resizeMode="cover"
          />
        ) : (
          <View style={styles.placeholderImage}>
            <MaterialIcons name="image" size={24} color="#9ca3af" />
          </View>
        )}

        {/* Product Info */}
        <View style={styles.info}>
          <MyText style={styles.name} numberOfLines={1}>
            {item.name.length > 30 ? item.name.substring(0, 30) + '...' : item.name}
          </MyText>
          
          {item.isOutOfStock && (
            <MaterialIcons name="remove-circle" size={16} color="#dc2626" />
          )}
        </View>
      </TouchableOpacity>
    </ScaleDecorator>
  );
};

export default function AllItemsOrder() {
  const router = useRouter();
  const queryClient = useQueryClient();
  const [products, setProducts] = useState<Product[]>([]);
  const [hasChanges, setHasChanges] = useState(false);

  // Get current order from constants
  const { data: constants, isLoading: isLoadingConstants, error: constantsError } = trpc.admin.const.getConstants.useQuery();
  const { data: allProducts, isLoading: isLoadingProducts, error: productsError } = trpc.common.product.getAllProductsSummary.useQuery({});
  const updateConstants = trpc.admin.const.updateConstants.useMutation();

  // Initialize products from constants
  useEffect(() => {
    if (allProducts?.products) {
      const allItemsOrderConstant = constants?.find(c => c.key === 'allItemsOrder');
      
      let orderedIds: number[] = [];
      
      if (allItemsOrderConstant) {
        const value = allItemsOrderConstant.value;
        
        if (Array.isArray(value)) {
          orderedIds = value.map((id: any) => parseInt(id));
        } else if (typeof value === 'string') {
          orderedIds = value.split(',').map((id: string) => parseInt(id.trim())).filter(id => !isNaN(id));
        }
      }

      // Create product map for quick lookup
      const productMap = new Map(allProducts.products.map(p => [p.id, p]));
      
      // Sort products based on order, products not in order go to end
      const sortedProducts: Product[] = [];
      
      // First add products in the specified order
      for (const id of orderedIds) {
        const product = productMap.get(id);
        if (product) {
          sortedProducts.push({
            id: product.id,
            name: product.name,
            images: product.images || [],
            isOutOfStock: product.isOutOfStock || false,
          });
          productMap.delete(id);
        }
      }
      
      // Then add remaining products (not in order yet)
      for (const product of productMap.values()) {
        sortedProducts.push({
          id: product.id,
          name: product.name,
          images: product.images || [],
          isOutOfStock: product.isOutOfStock || false,
        });
      }

      setProducts(sortedProducts);
    }
  }, [constants, allProducts]);

  const handleDragEnd = useCallback(({ data }: { data: Product[] }) => {
    setProducts(data);
    setHasChanges(true);
  }, []);

  const renderItem = useCallback(({ item, drag, isActive }: { item: Product; drag: () => void; isActive: boolean }) => {
    return (
      <ProductItem
        item={item}
        drag={drag}
        isActive={isActive}
      />
    );
  }, []);

  const handleSave = () => {
    const productIds = products.map(p => p.id);

    updateConstants.mutate(
      {
        constants: [{
          key: 'allItemsOrder',
          value: productIds
        }]
      },
      {
        onSuccess: () => {
          setHasChanges(false);
          Alert.alert('Success', 'All items order updated successfully!');
          queryClient.invalidateQueries({ queryKey: ['const.getConstants'] });
        },
        onError: (error) => {
          Alert.alert('Error', 'Failed to update items order. Please try again.');
          console.error('Update all items order error:', error);
        }
      }
    );
  };

  // Show loading state while data is being fetched
  if (isLoadingConstants || isLoadingProducts) {
    return (
      <AppContainer>
        <View style={tw`flex-1 bg-gray-50`}>
          <View style={tw`bg-white px-4 py-4 border-b border-gray-200 flex-row items-center justify-between`}>
            <TouchableOpacity
              onPress={() => router.back()}
              style={tw`p-2 -ml-4`}
            >
              <MaterialIcons name="chevron-left" size={24} color="#374151" />
            </TouchableOpacity>
            <MyText style={tw`text-xl font-bold text-gray-900`}>All Items Order</MyText>
            <View style={tw`w-16`} />
          </View>
          <View style={tw`flex-1 justify-center items-center p-8`}>
            <ActivityIndicator size="large" color="#3b82f6" />
            <MyText style={tw`text-gray-500 mt-4 text-center`}>
              {isLoadingConstants ? 'Loading order...' : 'Loading products...'}
            </MyText>
          </View>
        </View>
      </AppContainer>
    );
  }

  // Show error state if queries failed
  if (constantsError || productsError) {
    return (
      <AppContainer>
        <View style={tw`flex-1 bg-gray-50`}>
          <View style={tw`bg-white px-4 py-4 border-b border-gray-200 flex-row items-center justify-between`}>
            <TouchableOpacity
              onPress={() => router.back()}
              style={tw`p-2 -ml-4`}
            >
              <MaterialIcons name="chevron-left" size={24} color="#374151" />
            </TouchableOpacity>
            <MyText style={tw`text-xl font-bold text-gray-900`}>All Items Order</MyText>
            <View style={tw`w-16`} />
          </View>
          <View style={tw`flex-1 justify-center items-center p-8`}>
            <MaterialIcons name="error-outline" size={64} color="#ef4444" />
            <MyText style={tw`text-gray-900 text-lg font-bold mt-4`}>Error</MyText>
            <MyText style={tw`text-gray-500 mt-2 text-center`}>
              {constantsError ? 'Failed to load order' : 'Failed to load products'}
            </MyText>
            <TouchableOpacity
              onPress={() => router.back()}
              style={tw`mt-6 bg-blue-600 px-6 py-3 rounded-full`}
            >
              <MyText style={tw`text-white font-semibold`}>Go Back</MyText>
            </TouchableOpacity>
          </View>
        </View>
      </AppContainer>
    );
  }

  return (
    <View style={tw`flex-1 bg-gray-50`}>
      {/* Header */}
      <View style={tw`bg-white px-4 py-4 border-b border-gray-200 flex-row items-center justify-between`}>
        <MyTouchableOpacity
          onPress={() => router.back()}
          style={tw`p-2 -ml-4`}
        >
          <MaterialIcons name="chevron-left" size={24} color="#374151" />
        </MyTouchableOpacity>

        <MyText style={tw`text-xl font-bold text-gray-900`}>All Items Order</MyText>

        <MyTouchableOpacity
          onPress={handleSave}
          disabled={!hasChanges || updateConstants.isPending}
          style={tw`px-4 py-2 rounded-lg ${
            hasChanges && !updateConstants.isPending
              ? 'bg-blue-600'
              : 'bg-gray-300'
          }`}
        >
          <MyText style={tw`${
            hasChanges && !updateConstants.isPending
              ? 'text-white'
              : 'text-gray-500'
          } font-semibold`}>
            {updateConstants.isPending ? 'Saving...' : 'Save'}
          </MyText>
        </MyTouchableOpacity>
      </View>

      {/* Content */}
      {products.length === 0 ? (
        <View style={tw`flex-1 justify-center items-center p-8`}>
          <MaterialIcons name="inventory" size={64} color="#e5e7eb" />
          <MyText style={tw`text-gray-500 mt-4 text-center text-lg`}>
            No products available
          </MyText>
        </View>
      ) : (
        <View style={tw`flex-1`}>
          <View style={tw`bg-blue-50 px-4 py-2 mb-2 mt-2 mx-4 rounded-lg`}>
            <MyText style={tw`text-blue-700 text-xs text-center`}>
              Long press and drag to reorder • {products.length} items
            </MyText>
          </View>

          <View style={tw`flex-1 px-3`}>
            <DraggableFlatList
              data={products}
              renderItem={renderItem}
              keyExtractor={(item) => item.id.toString()}
              onDragEnd={handleDragEnd}
              showsVerticalScrollIndicator={true}
              contentContainerStyle={{ paddingBottom: 20 }}
              containerStyle={tw`flex-1`}
              keyboardShouldPersistTaps="handled"
              // Enable auto-scroll during drag
              activationDistance={10}
            />
          </View>
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  item: {
    width: itemWidth,
    height: 60,
    backgroundColor: 'white',
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#e5e7eb',
    padding: 10,
    flexDirection: 'row',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
    elevation: 2,
    marginVertical: 4,
  },
  activeItem: {
    shadowColor: '#3b82f6',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 8,
    elevation: 8,
    borderColor: '#3b82f6',
    transform: [{ scale: 1.02 }],
  },
  outOfStock: {
    opacity: 0.6,
  },
  dragHandle: {
    marginRight: 8,
    padding: 2,
  },
  image: {
    width: 30,
    height: 30,
    borderRadius: 6,
    marginRight: 10,
  },
  placeholderImage: {
    width: 30,
    height: 30,
    borderRadius: 6,
    backgroundColor: '#f3f4f6',
    marginRight: 10,
    alignItems: 'center',
    justifyContent: 'center',
  },
  info: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  name: {
    fontSize: 13,
    color: '#111827',
    fontWeight: '500',
    flex: 1,
    marginRight: 4,
  },
  orderNumber: {
    fontSize: 11,
    color: '#9ca3af',
    marginLeft: 8,
  },
});