import React, { useState, useCallback, useMemo } from 'react';
import { View, TouchableOpacity, Alert, RefreshControl } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import { tw, MyButton, MyText, SearchBar, MyFlatList, useMarkDataFetchers, MyTouchableOpacity, BottomDropdown } from 'common-ui';
import useManualRefresh from 'common-ui/hooks/useManualRefresh';
import { trpc } from '@/src/trpc-client';
import { useRouter } from 'expo-router';
import { useInfiniteQuery } from '@tanstack/react-query';

const ReservedCouponItem = ({ item }: { item: any }) => {
  const getStatus = () => {
    if (item.isRedeemed) return 'redeemed';
    if (item.validTill && new Date(item.validTill) <= new Date()) return 'expired';
    return 'active';
  };

  const status = getStatus();

  const getBorderColor = () => {
    if (status === 'active') return 'border-green-500';
    if (status === 'expired') return 'border-yellow-500';
    return 'border-blue-500';
  };

  const getBgColor = () => {
    if (status === 'active') return 'bg-green-100';
    if (status === 'expired') return 'bg-yellow-100';
    return 'bg-blue-100';
  };

  const getTextColor = () => {
    if (status === 'active') return 'text-green-600';
    if (status === 'expired') return 'text-yellow-600';
    return 'text-blue-600';
  };

  const getIconColor = () => {
    if (status === 'active') return '#10b981';
    if (status === 'expired') return '#f59e0b';
    return '#3b82f6';
  };

  return (
    <View style={tw`bg-white p-4 mb-4 rounded-2xl shadow-lg border-l-4 ${getBorderColor()}`}>
      <View style={tw`flex-row items-center mb-3`}>
        <View style={tw`w-10 h-10 rounded-full ${getBgColor()} items-center justify-center mr-3`}>
          <MaterialCommunityIcons
            name={item.discountPercent ? "percent" : "currency-inr"}
            size={20}
            color={getIconColor()}
          />
        </View>
        <View style={tw`flex-1`}>
          <MyText style={tw`text-lg font-bold text-gray-800`}>{item.secretCode}</MyText>
          <MyText style={tw`text-sm text-gray-500`}>Coupon: {item.couponCode}</MyText>
        </View>
        <View style={tw`px-2 py-1 rounded-full ${getBgColor()}`}>
          <MyText style={tw`text-xs font-semibold ${getTextColor()}`}>
            {status === 'active' ? 'Active' : status === 'expired' ? 'Expired' : 'Redeemed'}
          </MyText>
        </View>
      </View>

      <View style={tw`bg-gray-50 p-3 rounded-lg mb-3`}>
        <MyText style={tw`text-base font-semibold mb-1 text-gray-800`}>
          Discount: {item.discountPercent ? `${item.discountPercent}% off` : item.flatDiscount ? `₹${item.flatDiscount} off` : 'N/A'}
        </MyText>
        <View style={tw`flex-row justify-between`}>
          <MyText style={tw`text-sm text-gray-600`}>Min Order: {item.minOrder ? `₹${item.minOrder}` : 'None'}</MyText>
          <MyText style={tw`text-sm text-gray-600`}>Max: {item.maxValue ? `₹${item.maxValue}` : 'None'}</MyText>
        </View>
        <MyText style={tw`text-sm text-gray-600 mt-1`}>
          Valid Till: {item.validTill ? new Date(item.validTill).toLocaleDateString() : 'No expiry'}
        </MyText>
      </View>

      {item.isRedeemed && item.redeemedUser && (
        <View style={tw`mb-3`}>
          <MyText style={tw`text-sm text-gray-700`}>
            <MaterialCommunityIcons name="account-check" size={14} color="#6b7280" /> Redeemed by: {item.redeemedUser.name || 'Unknown'} ({item.redeemedUser.mobile})
          </MyText>
          <MyText style={tw`text-sm text-gray-600`}>
            Redeemed on: {item.redeemedAt ? new Date(item.redeemedAt).toLocaleDateString() : 'N/A'}
          </MyText>
        </View>
      )}

      <View style={tw`flex-row justify-between items-center mt-3`}>
        <MyText style={tw`text-sm text-gray-700`}>
          <MaterialCommunityIcons name="account" size={14} color="#6b7280" /> Created by: {item.creator?.name || 'Unknown'}
        </MyText>
      </View>
    </View>
  );
};

export default function ReservedCoupons() {
  const router = useRouter();
  const [refreshing, setRefreshing] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');
  const [statusFilters, setStatusFilters] = useState<string[]>([]);

  const {
    data,
    fetchNextPage,
    hasNextPage,
    isLoading,
    isFetchingNextPage,
    refetch,
  } = trpc.admin.coupon.getReservedCoupons.useInfiniteQuery(
    { limit: 50 },
    {
      getNextPageParam: (lastPage) => lastPage.nextCursor,
    }
  );

  const coupons = data?.pages.flatMap(page => page.coupons) || [];

  const getStatus = (coupon: any) => {
    if (coupon.isRedeemed) return 'redeemed';
    if (coupon.validTill && new Date(coupon.validTill) <= new Date()) return 'expired';
    return 'active';
  };

  const filteredCoupons = useMemo(() => {
    let filtered = coupons.filter(coupon =>
      coupon.secretCode.toLowerCase().includes(searchQuery.toLowerCase()) ||
      coupon.couponCode.toLowerCase().includes(searchQuery.toLowerCase())
    );
    if (statusFilters.length > 0) {
      filtered = filtered.filter(coupon => statusFilters.includes(getStatus(coupon)));
    }
    return filtered;
  }, [coupons, searchQuery, statusFilters]);

  const handleRefresh = useCallback(async () => {
    setRefreshing(true);
    await refetch();
    setRefreshing(false);
  }, [refetch]);

  useManualRefresh(() => refetch());

  useMarkDataFetchers(() => {
    refetch();
  });

  if (isLoading) {
    return (
      <View style={tw`flex-1 justify-center items-center bg-white`}>
        <View style={tw`w-16 h-16 bg-blue-100 rounded-full items-center justify-center mb-4`}>
          <MaterialCommunityIcons name="loading" size={32} color="#3b82f6" />
        </View>
        <MyText style={tw`text-lg font-semibold text-gray-600`}>Loading Reserved Coupons...</MyText>
      </View>
    );
  }

  return (
    <View style={tw`flex-1 bg-white`}>
      <View style={tw`flex-row items-center px-4 py-2`}>
        <View style={tw`flex-1 mr-2`}>
          <SearchBar
            value={searchQuery}
            onChangeText={setSearchQuery}
            placeholder="Search reserved coupons..."
          />
        </View>
        <BottomDropdown
          label="Filter by Status"
          value={statusFilters}
          options={[
            { label: 'Active', value: 'active' },
            { label: 'Expired', value: 'expired' },
            { label: 'Redeemed', value: 'redeemed' },
          ]}
          onValueChange={(value) => setStatusFilters(value as string[])}
          multiple={true}
          triggerComponent={({ onPress }) => (
            <TouchableOpacity onPress={onPress} style={tw`p-2`}>
              <MaterialCommunityIcons name="filter-variant" size={24} color="#6b7280" />
            </TouchableOpacity>
          )}
        />
      </View>
      <MyFlatList
        data={filteredCoupons}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => <ReservedCouponItem item={item} />}
        refreshControl={
          <RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />
        }
        contentContainerStyle={tw`px-4 pb-4`}
        onEndReached={() => {
          if (hasNextPage && !isFetchingNextPage) {
            fetchNextPage();
          }
        }}
        onEndReachedThreshold={0.5}
        ListEmptyComponent={
          searchQuery ? (
            <View style={tw`flex-1 justify-center items-center py-20`}>
              <View style={tw`w-20 h-20 bg-gray-100 rounded-full items-center justify-center mb-4`}>
                <MaterialCommunityIcons name="magnify" size={40} color="#9ca3af" />
              </View>
              <MyText style={tw`text-xl font-semibold text-gray-600 mb-2`}>No Results</MyText>
              <MyText style={tw`text-gray-500 text-center mb-4`}>No reserved coupons match &ldquo;{searchQuery}&rdquo;</MyText>
              <MyButton onPress={() => setSearchQuery('')} style={tw`bg-gray-500`}>
                <MyText style={tw`text-white font-semibold`}>Clear Search</MyText>
              </MyButton>
            </View>
          ) : (
            <View style={tw`flex-1 justify-center items-center py-20`}>
              <View style={tw`w-20 h-20 bg-gray-100 rounded-full items-center justify-center mb-4`}>
                <MaterialCommunityIcons name="ticket-percent-outline" size={40} color="#9ca3af" />
              </View>
              <MyText style={tw`text-xl font-semibold text-gray-600 mb-2`}>No Reserved Coupons Yet</MyText>
              <MyText style={tw`text-gray-500 text-center mb-4`}>Create your first reserved coupon to start offering secret discounts</MyText>
              <MyButton onPress={() => router.push('/(drawer)/create-coupon')} style={tw`bg-blue-500`}>
                <View style={tw`flex-row items-center`}>
                  <MaterialCommunityIcons name="plus" size={16} color="white" />
                  <MyText style={tw`text-white font-semibold ml-1`}>Create Reserved Coupon</MyText>
                </View>
              </MyButton>
            </View>
          )
        }
      />

      {/* FAB for Add New Reserved Coupon */}
      <MyTouchableOpacity
        onPress={() => router.push('/(drawer)/create-coupon')}
        activeOpacity={0.95}
        style={{ position: 'absolute', bottom: 32, right: 24, zIndex: 100 }}
      >
        <LinearGradient
          colors={['#F83758', '#E91E63']}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 1 }}
          style={tw`w-16 h-16 rounded-[24px] items-center justify-center shadow-lg shadow-pink300`}
        >
          <MaterialCommunityIcons name="plus" size={32} color="white" />
        </LinearGradient>
      </MyTouchableOpacity>
    </View>
  );
}