App.tsx

import React, { useState, useEffect } from 'react';
import { View, TouchableOpacity, Text, ScrollView, ActivityIndicator, Alert } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import Toast from 'react-native-toast-message';
import { toastConfig } from './src/components/ToastConfig';
import { setupDeepLinkListener } from './src/utils/deepLinkHandler';
import { initializeNotifications, setupNotificationListeners, sendLowStockAlert } from './src/utils/notifications';
import { warningHaptic } from './src/utils/haptics';
import PantryHomePage from './src/screens/PantryHomePage';
import GroceryListPage from './src/screens/GroceryListPage';
import AccountPage from './src/screens/AccountPage';
import SignInScreen from './src/screens/SignInScreen';
import SignUpScreen from './src/screens/SignUpScreen';
import ForgotPasswordScreen from './src/screens/ForgotPasswordScreen';
import EmailVerificationScreen from './src/screens/EmailVerificationScreen';
import ProfileSetupScreen from './src/screens/ProfileSetupScreen';
import { AuthProvider, useAuth } from './src/contexts/AuthContext';
import { useCurrentUser } from './src/hooks/useCurrentUser';
import styles from './src/styles/homeStyles';
import { usePantryData } from './src/hooks/usePantryData';
import { useGroceryItems } from './src/hooks/useGroceryItems';
import { DEFAULT_CATEGORIES, Category } from './src/config/categories';
import { GroceryItem, CreateGroceryItemInput } from './src/types/grocery';

// Main app component with auth wrapper
function AppContent() {
  const { session, loading: authLoading, resendVerificationEmail } = useAuth();
  const { household, roommate: currentRoommate, currentUser, isLoading: userLoading, refresh: refreshUser } = useCurrentUser();
  const [activeTab, setActiveTab] = useState<'pantry' | 'grocery' | 'account'>('pantry');
  const [categories, setCategories] = useState<Category[]>(DEFAULT_CATEGORIES);
  const [authScreen, setAuthScreen] = useState<'signin' | 'signup' | 'forgot' | 'verify' | 'profile-setup'>('signin');
  const [verificationEmail, setVerificationEmail] = useState<string>('');
  const [needsProfileSetup, setNeedsProfileSetup] = useState(false);

  const householdId = household?.id || '';
  const { isLoading, error } = usePantryData(householdId);
  const { items: groceryItems, addItem: addGroceryItem } = useGroceryItems(householdId);

  // Check if user needs to complete profile setup
  useEffect(() => {
    if (session && currentUser && !userLoading) {
      // Check if user has a proper name (not just email prefix)
      const hasCompletedProfile = currentUser.name &&
        currentUser.name !== session.user.email?.split('@')[0];

      if (!hasCompletedProfile) {
        setNeedsProfileSetup(true);
      } else {
        setNeedsProfileSetup(false);
      }
    }
  }, [session, currentUser, userLoading]);

  // Set up deep link listener for email verification and password reset
  useEffect(() => {
    const cleanup = setupDeepLinkListener(
      // On email verified
      () => {
        Alert.alert(
          'Email Verified!',
          'Your email has been verified. You can now sign in.',
          [{ text: 'OK', onPress: () => setAuthScreen('signin') }]
        );
      },
      // On password reset required
      () => {
        // Handle password reset flow - user will be automatically signed in
        Alert.alert(
          'Password Reset',
          'You can now set a new password in your account settings.'
        );
      }
    );

    return cleanup;
  }, []);

  // Initialize notifications when user is signed in
  useEffect(() => {
    if (session) {
      initializeNotifications();
    }
  }, [session]);

  // Show auth loading screen
  if (authLoading) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff' }}>
        <ActivityIndicator size="large" color="#000000" />
        <Text style={{ marginTop: 16, fontSize: 16, color: '#666' }}>
          Loading...
        </Text>
      </View>
    );
  }

  // Show auth screens if not logged in
  if (!session) {
    return (
      <>
        {authScreen === 'signin' && (
          <SignInScreen
            onNavigateToSignUp={() => setAuthScreen('signup')}
            onNavigateToForgotPassword={() => setAuthScreen('forgot')}
            onNavigateToVerify={(email) => {
              setVerificationEmail(email);
              setAuthScreen('verify');
            }}
          />
        )}
        {authScreen === 'signup' && (
          <SignUpScreen
            onNavigateToSignIn={() => setAuthScreen('signin')}
            onNavigateToVerify={(email) => {
              setVerificationEmail(email);
              setAuthScreen('verify');
            }}
          />
        )}
        {authScreen === 'forgot' && (
          <ForgotPasswordScreen onNavigateBack={() => setAuthScreen('signin')} />
        )}
        {authScreen === 'verify' && (
          <EmailVerificationScreen
            email={verificationEmail}
            onNavigateToSignIn={() => setAuthScreen('signin')}
            onResendEmail={() => resendVerificationEmail(verificationEmail)}
          />
        )}
      </>
    );
  }

  // Show profile setup screen if user is logged in but hasn't completed their profile
  if (session && needsProfileSetup && !userLoading) {
    return (
      <ProfileSetupScreen
        onComplete={() => {
          setNeedsProfileSetup(false);
          // Refresh user data to get updated profile
          refreshUser();
        }}
      />
    );
  }

  // Function to delete a category
  const handleDeleteCategory = (categoryId: string) => {
    const categoryToDelete = categories.find(cat => cat.id === categoryId);

    if (!categoryToDelete) return;

    Alert.alert(
      'Delete Category',
      `Are you sure you want to delete "${categoryToDelete.name}"? Items in this category will be moved to "Other".`,
      [
        { text: 'Cancel', style: 'cancel' },
        {
          text: 'Delete',
          style: 'destructive',
          onPress: () => {
            // Remove category from list
            setCategories(categories.filter(cat => cat.id !== categoryId));
          },
        },
      ]
    );
  };

  // Helper function to check if items are duplicates
  const isDuplicateGroceryItem = (
    pantryItem: {
      name: string;
      brand?: string;
      packageSize?: string;
      catalogProductId?: string;
    },
    groceryItem: GroceryItem
  ): boolean => {
    // Level 1: Catalog Product ID match (most reliable)
    if (pantryItem.catalogProductId && groceryItem.catalogProductId) {
      return pantryItem.catalogProductId === groceryItem.catalogProductId;
    }

    // Level 2: Name + Brand + Package Size match
    const nameMatch = pantryItem.name.toLowerCase() === groceryItem.name.toLowerCase();
    const brandMatch = (pantryItem.brand || '').toLowerCase() === (groceryItem.brand || '').toLowerCase();
    const sizeMatch = (pantryItem.packageSize || '').toLowerCase() === (groceryItem.packageSize || '').toLowerCase();

    return nameMatch && brandMatch && sizeMatch;
  };

  // Function to add low-stock item to grocery list
  const addLowStockToGroceryList = async (pantryItem: {
    id: string;
    name: string;
    quantity: number;
    unit: string;
    location: string;
    category?: string;
    brand?: string;
    packageSize?: string;
    catalogProductId?: string;
  }) => {
    // Check if item already exists in grocery list using improved duplicate detection
    const existingItem = groceryItems.find(item => isDuplicateGroceryItem(pantryItem, item));

    if (existingItem) {
      if (existingItem.checked) {
        // Item was already purchased (checked off) but is low again
        // Add a NEW unchecked item so user can buy more
        const newGroceryItem: CreateGroceryItemInput = {
          name: pantryItem.name,
          quantity: pantryItem.quantity,
          unit: pantryItem.unit,
          addedBy: currentRoommate?.name || 'Auto (Low Stock)',
          location: pantryItem.location,
          checked: false,
          isLowStock: true,
          lowStockSource: 'pantry',
          category: pantryItem.category,
          brand: pantryItem.brand,
          packageSize: pantryItem.packageSize,
          catalogProductId: pantryItem.catalogProductId,
        };

        try {
          await addGroceryItem(newGroceryItem);
          await sendLowStockAlert(pantryItem.name);
          warningHaptic();
        } catch (error) {
          console.error('Error adding low stock item to grocery list:', error);
        }
      } else {
        // Item already on list and unchecked - skip to avoid duplicates
        console.log('Item already on grocery list (unchecked):', existingItem.name);
      }
    } else {
      // Not a duplicate - add new item to grocery list
      const newGroceryItem: CreateGroceryItemInput = {
        name: pantryItem.name,
        quantity: pantryItem.quantity,
        unit: pantryItem.unit,
        addedBy: currentRoommate?.name || 'Auto (Low Stock)',
        location: pantryItem.location,
        checked: false,
        isLowStock: true,
        lowStockSource: 'pantry',
        category: pantryItem.category,
        brand: pantryItem.brand,
        packageSize: pantryItem.packageSize,
        catalogProductId: pantryItem.catalogProductId,
      };

      try {
        await addGroceryItem(newGroceryItem);
        await sendLowStockAlert(pantryItem.name);
        warningHaptic();
      } catch (error) {
        console.error('Error adding low stock item to grocery list:', error);
      }
    }
  };

  const tabs = [
    { key: 'pantry', label: 'PANTRY' },
    { key: 'grocery', label: 'SHOPPING' },
    { key: 'account', label: 'ACCOUNT' },
  ] as const;

  // Show loading screen while catalog initializes
  if (isLoading) {
    return (
      <SafeAreaProvider>
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff' }}>
          <ActivityIndicator size="large" color="#007AFF" />
          <Text style={{ marginTop: 16, fontSize: 16, color: '#666' }}>
            Loading catalog...
          </Text>
        </View>
      </SafeAreaProvider>
    );
  }

  // Show error if catalog failed to initialize
  if (error) {
    return (
      <SafeAreaProvider>
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff', padding: 20 }}>
          <Text style={{ fontSize: 24, marginBottom: 12 }}>⚠️</Text>
          <Text style={{ fontSize: 16, color: '#666', textAlign: 'center' }}>
            Failed to load catalog
          </Text>
          <Text style={{ fontSize: 14, color: '#999', marginTop: 8, textAlign: 'center' }}>
            {error}
          </Text>
        </View>
      </SafeAreaProvider>
    );
  }

  return (
    <SafeAreaProvider>
      <View style={{ flex: 1 }}>
        {/* Render Active Screen */}
        {activeTab === 'pantry' && (
          <PantryHomePage
            activeTab={activeTab}
            setActiveTab={setActiveTab}
            onLowStock={addLowStockToGroceryList}
            categories={categories}
            onDeleteCategory={handleDeleteCategory}
          />
        )}
        {activeTab === 'grocery' && (
          <GroceryListPage
            activeTab={activeTab}
            setActiveTab={setActiveTab}
            categories={categories}
            onDeleteCategory={handleDeleteCategory}
          />
        )}
        {activeTab === 'account' && (
          <AccountPage activeTab={activeTab} setActiveTab={setActiveTab} />
        )}

        {/* Bottom Navigation */}
        <View style={styles.bottomNav}>
          <ScrollView
            horizontal
            showsHorizontalScrollIndicator={false}
            contentContainerStyle={styles.navScrollContainer}
          >
            {tabs.map((tab) => (
              <TouchableOpacity
                key={tab.key}
                style={styles.navTab}
                onPress={() => setActiveTab(tab.key)}
                activeOpacity={0.7}
              >
                {activeTab === tab.key && (
                  <View style={styles.navTabIndicator} />
                )}
                <Text
                  style={[
                    styles.navTabText,
                    activeTab === tab.key && styles.navTabTextActive,
                  ]}
                >
                  {tab.label}
                </Text>
              </TouchableOpacity>
            ))}
          </ScrollView>
        </View>
      </View>
    </SafeAreaProvider>
  );
}

// Root App component with AuthProvider
export default function App() {
  return (
    <SafeAreaProvider>
      <AuthProvider>
        <AppContent />
        <Toast config={toastConfig} />
      </AuthProvider>
    </SafeAreaProvider>
  );
}