import React, { useState, useEffect, useMemo } from "react";
import {
  View,
  TouchableOpacity,
  FlatList,
  Image,
  Alert,
  ActivityIndicator,
  TextInput,
} from "react-native";
import { useRouter } from "expo-router";
import {
  AppContainer,
  MyText,
  tw,
  BottomDialog,
  BottomDropdown,
  Checkbox,
} from "common-ui";
import { trpc } from "@/src/trpc-client";
import MaterialIcons from "@expo/vector-icons/MaterialIcons";
import { Entypo } from "@expo/vector-icons";

interface SkuItemProps {
  sku: any;
  productName: string;
  hasChanges: (skuId: number) => boolean;
  pendingChanges: Record<string, any>;
  setPendingChanges: React.Dispatch<React.SetStateAction<Record<string, any>>>;
  openEditDialog: (sku: any, productName: string) => void;
}

const SkuItemComponent: React.FC<SkuItemProps> = ({
  sku,
  productName,
  hasChanges,
  pendingChanges,
  setPendingChanges,
  openEditDialog,
}) => {
  const changed = hasChanges(sku.id);
  const change = pendingChanges[sku.id] || {};
  const displayPrice = change.price !== undefined ? change.price : sku.price;
  const displayMarketPrice = change.marketPrice !== undefined ? change.marketPrice : sku.marketPrice;
  const displayFlashPrice = change.flashPrice !== undefined ? change.flashPrice : sku.flashPrice;
  const displayProductQuantity = change.productQuantity !== undefined ? change.productQuantity : sku.productQuantity;

  return (
    <View style={tw`bg-white p-4 mb-3 rounded-xl border border-gray-200 shadow-sm`}>
      <View style={tw`absolute top-2 right-2`}>
        <View
          style={[
            tw`w-4 h-4 rounded-full items-center justify-center`,
            changed ? tw`bg-green-500` : tw`bg-gray-300`,
          ]}
        >
          {changed && <MaterialIcons name="check" size={10} color="white" />}
        </View>
      </View>

      <View style={tw`flex-row items-center mb-2`}>
        <Image
          source={{
            uri: sku.images?.[0] || "https://via.placeholder.com/32x32?text=No+Image"
          }}
          style={tw`w-10 h-10 rounded-lg mr-3`}
          resizeMode="cover"
        />

        <View style={tw`flex-1 flex-row items-center`}>
          <View style={tw`flex-1`}>
            <MyText style={tw`text-base font-medium text-gray-800`} numberOfLines={1}>
              {productName.length > 20 ? productName.substring(0, 20) + '...' : productName}
            </MyText>
            <MyText style={tw`text-xs text-gray-500`} numberOfLines={1}>
              {sku.displayName || sku.name || ''}
            </MyText>
          </View>
          <View style={tw`flex-row items-center ml-2`}>
            <Checkbox
              checked={change.isFlashAvailable ?? sku.isFlashAvailable ?? false}
              onPress={() => {
                const currentValue = change.isFlashAvailable ?? sku.isFlashAvailable ?? false;
                setPendingChanges(prev => ({
                  ...prev,
                  [sku.id]: {
                    ...prev[sku.id],
                    isFlashAvailable: !currentValue,
                  },
                }));
              }}
              style={tw`mr-1`}
            />
            <MyText style={tw`text-sm text-gray-600`}>Flash</MyText>
          </View>
        </View>
      </View>

      <View style={tw`flex-row items-center justify-between`}>
        <View style={tw`items-center`}>
          <MyText style={tw`text-xs text-gray-500 mb-1`}>Our Price</MyText>
          <View style={tw`flex-row items-center`}>
            <MyText style={tw`text-sm font-bold text-green-600`}>₹{displayPrice}</MyText>
            <TouchableOpacity onPress={() => openEditDialog(sku, productName)} style={tw`ml-1`}>
              <MaterialIcons name="edit" size={14} color="#6b7280" />
            </TouchableOpacity>
          </View>
        </View>

        <View style={tw`items-center`}>
          <MyText style={tw`text-xs text-gray-500 mb-1`}>Market Price</MyText>
          <View style={tw`flex-row items-center`}>
            <MyText style={tw`text-sm text-gray-600`}>{displayMarketPrice ? `₹${displayMarketPrice}` : "N/A"}</MyText>
            <TouchableOpacity onPress={() => openEditDialog(sku, productName)} style={tw`ml-1`}>
              <MaterialIcons name="edit" size={14} color="#6b7280" />
            </TouchableOpacity>
          </View>
        </View>

        <View style={tw`items-center`}>
          <MyText style={tw`text-xs text-gray-500 mb-1`}>Flash Price</MyText>
          <View style={tw`flex-row items-center`}>
            <MyText style={tw`text-sm text-orange-600`}>{displayFlashPrice ? `₹${displayFlashPrice}` : "N/A"}</MyText>
            <TouchableOpacity onPress={() => openEditDialog(sku, productName)} style={tw`ml-1`}>
              <MaterialIcons name="edit" size={14} color="#6b7280" />
            </TouchableOpacity>
          </View>
        </View>

        <View style={tw`items-center`}>
          <MyText style={tw`text-xs text-gray-500 mb-1`}>Size</MyText>
          <View style={tw`flex-row items-center`}>
            <MyText style={tw`text-sm text-blue-600`}>{displayProductQuantity ? `${displayProductQuantity}${sku.unit?.shortNotation || ''}` : "N/A"}</MyText>
            <TouchableOpacity onPress={() => openEditDialog(sku, productName)} style={tw`ml-1`}>
              <MaterialIcons name="edit" size={14} color="#6b7280" />
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </View>
  );
};

interface PendingChange {
  price?: number;
  marketPrice?: number | null;
  flashPrice?: number | null;
  productQuantity?: number | null;
  isFlashAvailable?: boolean;
}

interface EditDialogState {
  open: boolean;
  sku: any;
  productName: string;
  tempPrice: string;
  tempMarketPrice: string;
  tempFlashPrice: string;
  tempProductQuantity: string;
}

export default function PricesOverview() {
  const router = useRouter();
  const [selectedStores, setSelectedStores] = useState<string[]>([]);
  const [pendingChanges, setPendingChanges] = useState<Record<number, PendingChange>>({});
  const [editDialog, setEditDialog] = useState<EditDialogState>({
    open: false,
    sku: null,
    productName: "",
    tempPrice: "",
    tempMarketPrice: "",
    tempFlashPrice: "",
    tempProductQuantity: "",
  });
  const [showMenu, setShowMenu] = useState(false);

  const { data: productsData, isLoading: productsLoading, refetch: refetchProducts } =
    trpc.admin.product.getProducts.useQuery();
  const { data: storesData, isLoading: storesLoading } =
    trpc.admin.store.getStores.useQuery();

  const updatePricesMutation = trpc.admin.product.updateProductPrices.useMutation();

  const stores = storesData?.stores || [];
  const allProducts = productsData?.products || [];

  const sortedStores = useMemo(() =>
    [...stores].sort((a, b) => a.name.localeCompare(b.name)),
    [stores]
  );

  const storeOptions = useMemo(() =>
    sortedStores.map(store => ({
      label: store.name,
      value: store.id.toString(),
    })),
    [sortedStores]
  );

  useEffect(() => {
    if (stores.length > 0 && selectedStores.length === 0) {
      setSelectedStores(stores.map(s => s.id.toString()));
    }
  }, [stores, selectedStores]);

  const allSkus = useMemo(() => {
    const skus: any[] = [];
    for (const product of allProducts) {
      if (product.skus && product.skus.length > 0) {
        for (const sku of product.skus) {
          skus.push({ ...sku, _productName: product.name, _storeId: product.storeId });
        }
      }
    }
    return skus;
  }, [allProducts]);

  const filteredSkus = useMemo(() => {
    if (selectedStores.length === 0) return allSkus;
    return allSkus.filter(sku =>
      sku._storeId && selectedStores.includes(sku._storeId.toString())
    );
  }, [allSkus, selectedStores]);

  const hasChanges = (skuId: number) => !!pendingChanges[skuId];

  const openEditDialog = (sku: any, productName: string) => {
    const change = pendingChanges[sku.id] || {};
    setEditDialog({
      open: true,
      sku,
      productName,
      tempPrice: (change.price ?? sku.price)?.toString() || "",
      tempMarketPrice: (change.marketPrice ?? sku.marketPrice)?.toString() || "",
      tempFlashPrice: (change.flashPrice ?? sku.flashPrice)?.toString() || "",
      tempProductQuantity: (change.productQuantity ?? sku.productQuantity)?.toString() || "",
    });
  };

  const saveEditDialog = () => {
    const price = parseFloat(editDialog.tempPrice);
    const marketPrice = editDialog.tempMarketPrice ? parseFloat(editDialog.tempMarketPrice) : null;
    const flashPrice = editDialog.tempFlashPrice ? parseFloat(editDialog.tempFlashPrice) : null;
    const productQuantity = editDialog.tempProductQuantity ? parseFloat(editDialog.tempProductQuantity) : null;

    if (isNaN(price) || price <= 0) {
      Alert.alert("Error", "Please enter a valid price");
      return;
    }

    if (editDialog.tempMarketPrice && (isNaN(marketPrice!) || marketPrice! <= 0)) {
      Alert.alert("Error", "Please enter a valid market price");
      return;
    }

    if (editDialog.tempFlashPrice && (isNaN(flashPrice!) || flashPrice! <= 0)) {
      Alert.alert("Error", "Please enter a valid flash price");
      return;
    }

    if (editDialog.tempProductQuantity && (isNaN(productQuantity!) || productQuantity! <= 0)) {
      Alert.alert("Error", "Please enter a valid size");
      return;
    }

    setPendingChanges(prev => ({
      ...prev,
      [editDialog.sku.id]: {
        price: price !== parseFloat(editDialog.sku.price) ? price : undefined,
        marketPrice: marketPrice !== parseFloat(editDialog.sku.marketPrice || '0') ? marketPrice : undefined,
        flashPrice: flashPrice !== parseFloat(editDialog.sku.flashPrice || '0') ? flashPrice : undefined,
        productQuantity: productQuantity !== (editDialog.sku.productQuantity || 1) ? productQuantity : undefined,
      },
    }));

    setEditDialog({ open: false, sku: null, productName: "", tempPrice: "", tempMarketPrice: "", tempFlashPrice: "", tempProductQuantity: "" });
  };

  const handleSave = () => {
    const updates = Object.entries(pendingChanges).map(([skuId, change]) => {
      const sku = allSkus.find(s => s.id === parseInt(skuId));
      const update: any = { productId: sku?.productId };
      if (change.price !== undefined) update.price = change.price;
      if (change.marketPrice !== undefined) update.marketPrice = change.marketPrice;
      if (change.flashPrice !== undefined) update.flashPrice = change.flashPrice;
      if (change.productQuantity !== undefined) update.productQuantity = change.productQuantity;
      if (change.isFlashAvailable !== undefined) update.isFlashAvailable = change.isFlashAvailable;
      return update;
    });

    updatePricesMutation.mutate(
      { updates },
      {
        onSuccess: () => {
          setPendingChanges({});
          refetchProducts();
          Alert.alert("Success", "Prices updated successfully");
        },
        onError: (error: any) => {
          Alert.alert("Error", `Failed to update prices: ${error.message || "Unknown error"}`);
        },
      }
    );
  };

  const changeCount = Object.keys(pendingChanges).length;

  return (
    <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`}>
        <View style={tw`flex-1 mr-4`}>
          <BottomDropdown
            label="Filter by Stores"
            options={storeOptions}
            value={selectedStores}
            onValueChange={(value) => setSelectedStores(value as string[])}
            multiple={true}
            placeholder="Select stores"
          />
        </View>
        <TouchableOpacity
          style={[
            tw`px-4 py-2 rounded-lg flex-row items-center mr-3`,
            changeCount > 0 && !updatePricesMutation.isPending ? tw`bg-blue-600` : tw`bg-gray-300`,
          ]}
          onPress={handleSave}
          disabled={changeCount === 0 || updatePricesMutation.isPending}
        >
          {updatePricesMutation.isPending ? (
            <ActivityIndicator size="small" color={changeCount > 0 ? "white" : "#6b7280"} style={tw`mr-2`} />
          ) : (
            <MaterialIcons
              name="save"
              size={20}
              color={changeCount > 0 ? "white" : "#6b7280"}
              style={tw`mr-2`}
            />
          )}
          <MyText
            style={[
              tw`font-medium`,
              changeCount > 0 ? tw`text-white` : tw`text-gray-500`,
            ]}
          >
            Save ({changeCount})
          </MyText>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => setShowMenu(true)}
          style={tw`p-2 -mr-2`}
        >
          <Entypo name="dots-three-vertical" size={16} color="#9CA3AF" />
        </TouchableOpacity>
      </View>

      {productsLoading || storesLoading ? (
        <View style={tw`flex-1 justify-center items-center`}>
          <ActivityIndicator size="large" color="#3b82f6" />
          <MyText style={tw`text-gray-500 mt-4`}>Loading...</MyText>
        </View>
      ) : (
        <FlatList
          data={filteredSkus}
          renderItem={({ item }) => (
            <SkuItemComponent
              sku={item}
              productName={item._productName}
              hasChanges={hasChanges}
              pendingChanges={pendingChanges}
              setPendingChanges={setPendingChanges}
              openEditDialog={openEditDialog}
            />
          )}
          keyExtractor={(item) => item.id.toString()}
          contentContainerStyle={tw`p-4`}
          showsVerticalScrollIndicator={false}
        />
      )}

      <BottomDialog open={editDialog.open} onClose={() => setEditDialog({ ...editDialog, open: false, tempFlashPrice: "", tempMarketPrice: "", tempPrice: "", tempProductQuantity: "" })}>
        <View style={tw`p-4`}>
          <MyText style={tw`text-lg font-bold mb-1`}>{editDialog.productName}</MyText>
          <MyText style={tw`text-sm text-gray-500 mb-4`}>{editDialog.sku?.displayName || editDialog.sku?.name || ''}</MyText>

          <View style={tw`mb-4`}>
            <MyText style={tw`text-sm font-medium mb-1`}>Our Price</MyText>
            <TextInput
              style={tw`border border-gray-300 rounded-md px-3 py-2`}
              value={editDialog.tempPrice}
              onChangeText={(text) => setEditDialog({ ...editDialog, tempPrice: text })}
              keyboardType="numeric"
              placeholder="Enter price"
            />
          </View>

          <View style={tw`mb-4`}>
            <MyText style={tw`text-sm font-medium mb-1`}>Market Price (Optional)</MyText>
            <TextInput
              style={tw`border border-gray-300 rounded-md px-3 py-2`}
              value={editDialog.tempMarketPrice}
              onChangeText={(text) => setEditDialog({ ...editDialog, tempMarketPrice: text })}
              keyboardType="numeric"
              placeholder="Enter market price"
            />
          </View>

          <View style={tw`mb-4`}>
            <MyText style={tw`text-sm font-medium mb-1`}>Flash Price (Optional)</MyText>
            <TextInput
              style={tw`border border-gray-300 rounded-md px-3 py-2`}
              value={editDialog.tempFlashPrice}
              onChangeText={(text) => setEditDialog({ ...editDialog, tempFlashPrice: text })}
              keyboardType="numeric"
              placeholder="Enter flash price"
            />
          </View>

          <View style={tw`mb-4`}>
            <MyText style={tw`text-sm font-medium mb-1`}>Size</MyText>
            <TextInput
              style={tw`border border-gray-300 rounded-md px-3 py-2`}
              value={editDialog.tempProductQuantity}
              onChangeText={(text) => setEditDialog({ ...editDialog, tempProductQuantity: text })}
              keyboardType="decimal-pad"
              placeholder="Enter size"
            />
          </View>

          <TouchableOpacity
            style={tw`bg-blue-600 py-3 rounded-md items-center`}
            onPress={saveEditDialog}
          >
            <MyText style={tw`text-white font-medium`}>Update Price</MyText>
          </TouchableOpacity>
        </View>
      </BottomDialog>

      <BottomDialog open={showMenu} onClose={() => setShowMenu(false)}>
        <View style={tw`p-6`}>
          <MyText style={tw`text-lg font-bold text-gray-800 mb-6`}>
            Options
          </MyText>
          <TouchableOpacity
            style={tw`flex-row items-center p-4 bg-gray-50 rounded-lg`}
            onPress={() => {
              router.push('/rebalance-orders' as any);
              setShowMenu(false);
            }}
          >
            <Entypo name="shuffle" size={20} color="#6B7280" />
            <MyText style={tw`text-gray-800 font-medium ml-3`}>
              Re-Balance Orders
            </MyText>
          </TouchableOpacity>
        </View>
      </BottomDialog>
    </View>
  );
}