app.js

// StreetBridge Application - Firebase v12 Modular SDK Implementation
// Import Firebase modules using CDN
import { initializeApp } from 'https://www.gstatic.com/firebasejs/12.0.0/firebase-app.js';
import { 
  getAuth, 
  signInWithEmailAndPassword, 
  createUserWithEmailAndPassword, 
  signOut, 
  onAuthStateChanged,
  browserLocalPersistence,
  setPersistence
} from 'https://www.gstatic.com/firebasejs/12.0.0/firebase-auth.js';
import { 
  getFirestore, 
  collection, 
  doc, 
  addDoc, 
  setDoc,
  updateDoc, 
  deleteDoc, 
  getDoc, 
  getDocs, 
  query, 
  where, 
  orderBy, 
  onSnapshot, 
  serverTimestamp 
} from 'https://www.gstatic.com/firebasejs/12.0.0/firebase-firestore.js';

// Firebase Configuration
const firebaseConfig = {
  apiKey: "AIzaSyD0bpIMwlWtejOnNLpE6oiWIIJrFzQyibE",
  authDomain: "streetbridge-f7691.firebaseapp.com",
  projectId: "streetbridge-f7691",
  storageBucket: "streetbridge-f7691.firebasestorage.app",
  messagingSenderId: "519880397736",
  appId: "1:519880397736:web:54fa60ce7843a5e551c39d",
  measurementId: "G-B6012C4B3M"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);

// Set authentication persistence
setPersistence(auth, browserLocalPersistence);

// Application State
let currentUser = null;
let currentUserRole = null;
let currentChat = null;
let orderCart = [];
let unsubscribeChat = null;
let currentInvoiceData = null;

// Sample data for initialization
const SAMPLE_ITEMS =              [
  {
    name: 'Fresh Tomatoes',
    description: 'Fresh red tomatoes per kg',
    price: 30,
    category: 'Vegetables',
    stock: 100,
    available: true
  },
  {
    name: 'Red Onions',
    description: 'Premium red onions per kg',
    price: 25,
    category: 'Vegetables',
    stock: 80,
    available: true
  },
  {
    name: 'Fresh Apples',
    description: 'Premium fresh apples per kg',
    price: 80,
    category: 'Fruits',
    stock: 60,
    available: true
  },
  {
    name: 'Paper Cups (100pc)',
    description: 'Disposable paper cups pack',
    price: 75,
    category: 'Packaging',
    stock: 50,
    available: true
  },
  {
    name: 'Gas Cylinder (5kg)',
    description: 'Cooking gas cylinder',
    price: 750,
    category: 'Gas Cylinders',
    stock: 25,
    available: true
  }
];

// Categories
const CATEGORIES = [
  "Vegetables",
  "Fruits", 
  "Packaging",
  "Gas Cylinders",
  "Paper Products",
  "Cleaning Supplies"
];

// Utility Functions
const $ = (id) => document.getElementById(id);

const showLoading = (show = true) => {
  const overlay = $('loading-overlay');
  if (overlay) overlay.classList.toggle('hidden', !show);
};

const showToast = (message, type = 'success') => {
  const toast = $('toast');
  const messageEl = $('toast-message');
  if (toast && messageEl) {
    messageEl.textContent = message;
    toast.className = `toast ${type}`;
    toast.classList.remove('hidden');
    setTimeout(() => toast.classList.add('hidden'), 5000);
  }
};

const formatCurrency = (amount) => `₹${Number(amount).toLocaleString('en-IN')}`;

const formatDate = (date) => {
  if (!date) return 'N/A';
  const dateObj = date.toDate ? date.toDate() : new Date(date);
  return dateObj.toLocaleDateString('en-IN', {
    year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit'
  });
};

const generateOrderNumber = () => 'SB' + Date.now().toString().slice(-8);

// UI Functions - Define early to avoid hoisting issues
const switchAuthTab = (tabId) => {
  console.log('Switching auth tab to:', tabId);
  
  // Remove active class from all tabs and forms
  document.querySelectorAll('.auth-tab').forEach(tab => tab.classList.remove('active'));
  document.querySelectorAll('.auth-form').forEach(form => form.classList.remove('active'));
  
  // Add active class to clicked tab
  const tabButton = document.querySelector(`[data-tab="${tabId}"]`);
  if (tabButton) {
    tabButton.classList.add('active');
    console.log('Tab button activated:', tabButton);
  }
  
  // Show corresponding form
  const tabContent = document.getElementById(`${tabId}-form`);
  if (tabContent) {
    tabContent.classList.add('active');
    console.log('Tab content shown:', tabContent);
  }
};

const switchTab = (tabId) => {
  console.log('Switching dashboard tab to:', tabId, 'for role:', currentUserRole);
  
  if (currentUserRole === 'vendor') {
    document.querySelectorAll('#vendor-dashboard .nav-tab').forEach(tab => tab.classList.remove('active'));
    document.querySelectorAll('#vendor-dashboard .tab-content').forEach(content => content.classList.remove('active'));
    
    const tabButton = document.querySelector(`#vendor-dashboard [data-tab="${tabId}"]`);
    const tabContent = document.getElementById(tabId);
    
    if (tabButton) tabButton.classList.add('active');
    if (tabContent) tabContent.classList.add('active');
  }
  
  if (currentUserRole === 'supplier') {
    document.querySelectorAll('#supplier-dashboard .nav-tab').forEach(tab => tab.classList.remove('active'));
    document.querySelectorAll('#supplier-dashboard .tab-content').forEach(content => content.classList.remove('active'));
    
    const tabButton = document.querySelector(`#supplier-dashboard [data-tab="${tabId}"]`);
    const tabContent = document.getElementById(tabId);
    
    if (tabButton) tabButton.classList.add('active');
    if (tabContent) tabContent.classList.add('active');
  }
};

// Authentication Functions
const setupAuthStateListener = () => {
  onAuthStateChanged(auth, async (user) => {
    console.log('Auth state changed:', user ? 'User logged in' : 'User logged out');
    showLoading(true);
    
    if (user) {
      currentUser = user;
      try {
        const userDoc = await getDoc(doc(db, 'users', user.uid));
        
        if (userDoc.exists()) {
          const userData = userDoc.data();
          currentUserRole = userData.role;
          console.log('User role:', currentUserRole);
          
          $('landing-page').classList.add('hidden');
          
          if (currentUserRole === 'vendor') {
            $('vendor-dashboard').classList.remove('hidden');
            const userNameEl = $('user-name');
            if (userNameEl) userNameEl.textContent = userData.name || user.email;
            await initializeVendorDashboard();
          } else if (currentUserRole === 'supplier') {
            $('supplier-dashboard').classList.remove('hidden');
            const supplierUserNameEl = $('supplier-user-name');
            if (supplierUserNameEl) supplierUserNameEl.textContent = userData.name || user.email;
            await initializeSupplierDashboard();
          }
        } else {
          console.error('User profile not found');
          await signOut(auth);
        }
      } catch (error) {
        console.error('Error getting user profile:', error);
        showToast('Error loading user profile', 'error');
        await signOut(auth);
      }
    } else {
      currentUser = null;
      currentUserRole = null;
      $('landing-page').classList.remove('hidden');
      $('vendor-dashboard').classList.add('hidden');
      $('supplier-dashboard').classList.add('hidden');
    }
    
    showLoading(false);
  });
};

const handleLogin = async (email, password) => {
  console.log('Attempting login for:', email);
  try {
    showLoading(true);
    await signInWithEmailAndPassword(auth, email, password);
    showToast('Login successful!', 'success');
  } catch (error) {
    console.error('Login error:', error);
    let errorMessage = 'Login failed';
    
    const errorMessages = {
      'auth/invalid-login-credentials': 'Invalid email or password. Please try again.',
      'auth/user-not-found': 'Invalid email or password. Please try again.',
      'auth/wrong-password': 'Invalid email or password. Please try again.',
      'auth/invalid-email': 'Please enter a valid email address.',
      'auth/too-many-requests': 'Too many failed attempts. Please try again later.',
      'auth/network-request-failed': 'Network error. Please check your connection.',
      'auth/user-disabled': 'This account has been disabled.'
    };
    
    errorMessage = errorMessages[error.code] || error.message;
    showToast(errorMessage, 'error');
  } finally {
    showLoading(false);
  }
};

const handleSignup = async (email, password, name, role, businessType = '') => {
  console.log('Attempting signup for:', email, 'as', role);
  try {
    showLoading(true);
    
    const userCredential = await createUserWithEmailAndPassword(auth, email, password);
    const user = userCredential.user;
    
    const userData = {
      uid: user.uid,
      email: email,
      name: name,
      role: role,
      createdAt: serverTimestamp(),
      lastLogin: serverTimestamp()
    };
    
    if (role === 'vendor') {
      userData.businessType = businessType;
    } else if (role === 'supplier') {
      userData.category = businessType;
    }
    
    await setDoc(doc(db, 'users', user.uid), userData);
    
    // Initialize sample items for suppliers
    if (role === 'supplier') {
      await initializeSampleItems(user.uid);
    }
    
    showToast('Account created successfully!', 'success');
  } catch (error) {
    console.error('Signup error:', error);
    let errorMessage = 'Account creation failed';
    
    const errorMessages = {
      'auth/email-already-in-use': 'This email is already registered.',
      'auth/weak-password': 'Password should be at least 6 characters.',
      'auth/invalid-email': 'Please enter a valid email address.',
      'auth/network-request-failed': 'Network error. Please check your connection.'
    };
    
    errorMessage = errorMessages[error.code] || error.message;
    showToast(errorMessage, 'error');
  } finally {
    showLoading(false);
  }
};

const initializeSampleItems = async (supplierId) => {
  try {
    for (const item of SAMPLE_ITEMS) {
      await addDoc(collection(db, 'items'), {
        ...item,
        supplierId: supplierId,
        createdAt: serverTimestamp()
      });
    }
    console.log('Sample items initialized successfully');
  } catch (error) {
    console.error('Error initializing sample items:', error);
  }
};

// Vendor Dashboard Functions
const initializeVendorDashboard = async () => {
  console.log('Initializing vendor dashboard');
  await loadAllItems();
  await loadVendorOrders();
  setupVendorChat();
  setupSearchAndFilter();
};

const loadAllItems = async () => {
  try {
    const itemsGrid = $('suppliers-grid');
    if (!itemsGrid) return;
    
    itemsGrid.innerHTML = '<div class="skeleton skeleton-text"></div>'.repeat(6);
    
    const itemsSnapshot = await getDocs(query(
      collection(db, 'items'), 
      where('available', '==', true)
    ));
    
    if (itemsSnapshot.empty) {
      itemsGrid.innerHTML = `
        <div class="empty-state">
          <div class="empty-state-icon">📦</div>
          <h3>No Items Available</h3>
          <p>No suppliers have added items yet. Check back later!</p>
        </div>
      `;
      return;
    }
    
    // Group items by supplier
    const supplierItems = {};
    const supplierIds = new Set();
    
    itemsSnapshot.docs.forEach(docSnapshot => {
      const itemData = { id: docSnapshot.id, ...docSnapshot.data() };
      const supplierId = itemData.supplierId;
      
      if (!supplierItems[supplierId]) {
        supplierItems[supplierId] = [];
      }
      supplierItems[supplierId].push(itemData);
      supplierIds.add(supplierId);
    });
    
    // Get supplier details
    const suppliers = [];
    for (const supplierId of supplierIds) {
      try {
        const supplierDoc = await getDoc(doc(db, 'users', supplierId));
        if (supplierDoc.exists()) {
          const supplierData = supplierDoc.data();
          suppliers.push({
            id: supplierId,
            ...supplierData,
            items: supplierItems[supplierId] || []
          });
        }
      } catch (error) {
        console.error('Error loading supplier:', supplierId, error);
      }
    }
    
    renderItemsGrid(suppliers);
    
  } catch (error) {
    console.error('Error loading items:', error);
    showToast('Error loading items', 'error');
    
    const itemsGrid = $('suppliers-grid');
    if (itemsGrid) {
      itemsGrid.innerHTML = `
        <div class="empty-state">
          <div class="empty-state-icon">⚠️</div>
          <h3>Unable to Load Items</h3>
          <p>There was an error loading items. Please refresh the page or try again later.</p>
        </div>
      `;
    }
  }
};

const renderItemsGrid = (suppliers) => {
  const itemsGrid = $('suppliers-grid');
  if (!itemsGrid) return;
  
  if (suppliers.length === 0) {
    itemsGrid.innerHTML = `
      <div class="empty-state">
        <div class="empty-state-icon">🏪</div>
        <h3>No Suppliers Found</h3>
        <p>No suppliers with available items at the moment.</p>
      </div>
    `;
    return;
  }
  
  itemsGrid.innerHTML = suppliers.map(supplier => `
    <div class="supplier-card" data-supplier-id="${supplier.id}">
      <div class="supplier-header">
        <div class="supplier-info">
          <h3>${supplier.name || 'Unknown Supplier'}</h3>
          <div class="supplier-category">${supplier.category || 'General Supplier'}</div>
          <div class="supplier-contact">${supplier.email || ''}</div>
        </div>
      </div>
      <div class="supplier-products">
        <h4>Available Items (${supplier.items.length})</h4>
        <div class="product-list">
          ${supplier.items.slice(0, 5).map(item => `
            <div class="product-item" data-product-id="${item.id}" data-category="${item.category || ''}">
              <div class="product-name">${item.name}</div>
              <div class="product-price">${formatCurrency(item.price || 0)}</div>
              <div class="product-actions">
                <input type="number" class="quantity-input" min="1" max="${item.stock || 999}" value="1" data-product-id="${item.id}">
                <button class="add-to-cart" data-supplier-id="${supplier.id}" data-item-id="${item.id}" data-item-name="${item.name}" data-item-price="${item.price || 0}" data-item-stock="${item.stock || 999}">
                  Add
                </button>
              </div>
            </div>
          `).join('')}
          ${supplier.items.length > 5 ? `
            <div class="product-item">
              <span class="product-name">+ ${supplier.items.length - 5} more items</span>
              <button class="btn btn--outline btn--sm view-all-items" data-supplier-id="${supplier.id}" data-supplier-name="${supplier.name || 'Supplier'}">
                View All
              </button>
            </div>
          ` : ''}
        </div>
      </div>
      <div class="supplier-actions">
        <button class="btn btn--outline btn--sm start-chat-btn" data-supplier-id="${supplier.id}" data-supplier-name="${supplier.name || 'Supplier'}">
          💬 Chat
        </button>
        <button class="btn btn--primary btn--sm view-all-items" data-supplier-id="${supplier.id}" data-supplier-name="${supplier.name || 'Supplier'}">
          🛒 Order Items
        </button>
      </div>
    </div>
  `).join('');
  
  // Add event listeners for dynamic buttons
  setupDynamicEventListeners();
};

const setupDynamicEventListeners = () => {
  // Add to cart buttons
  document.querySelectorAll('.add-to-cart').forEach(button => {
    button.addEventListener('click', (e) => {
      const supplierId = e.target.dataset.supplierId;
      const itemId = e.target.dataset.itemId;
      const itemName = e.target.dataset.itemName;
      const itemPrice = parseFloat(e.target.dataset.itemPrice);
      const itemStock = parseInt(e.target.dataset.itemStock);
      addToCart(supplierId, itemId, itemName, itemPrice, itemStock);
    });
  });
  
  // View all items buttons
  document.querySelectorAll('.view-all-items').forEach(button => {
    button.addEventListener('click', (e) => {
      const supplierId = e.target.dataset.supplierId;
      const supplierName = e.target.dataset.supplierName;
      viewAllSupplierItems(supplierId, supplierName);
    });
  });
  
  // Start chat buttons
  document.querySelectorAll('.start-chat-btn').forEach(button => {
    button.addEventListener('click', (e) => {
      const supplierId = e.target.dataset.supplierId;
      const supplierName = e.target.dataset.supplierName;
      startChat(supplierId, supplierName);
    });
  });
};

const setupSearchAndFilter = () => {
  const searchInput = $('supplier-search');
  const categoryFilter = $('category-filter');
  
  if (searchInput) {
    searchInput.addEventListener('input', filterItems);
  }
  
  if (categoryFilter) {
    categoryFilter.addEventListener('change', filterItems);
  }
};

const filterItems = () => {
  const searchTerm = $('supplier-search')?.value.toLowerCase() || '';
  const selectedCategory = $('category-filter')?.value || '';
  
  const supplierCards = document.querySelectorAll('.supplier-card');
  
  supplierCards.forEach(card => {
    const supplierName = card.querySelector('.supplier-info h3')?.textContent.toLowerCase() || '';
    const productItems = card.querySelectorAll('.product-item');
    
    let hasMatchingItems = false;
    
    productItems.forEach(product => {
      const productName = product.querySelector('.product-name')?.textContent.toLowerCase() || '';
      const productCategory = product.dataset.category || '';
      
      const matchesSearch = !searchTerm || productName.includes(searchTerm) || supplierName.includes(searchTerm);
      const matchesCategory = !selectedCategory || productCategory === selectedCategory;
      
      if (matchesSearch && matchesCategory) {
        product.style.display = 'flex';
        hasMatchingItems = true;
      } else {
        product.style.display = 'none';
      }
    });
    
    card.style.display = hasMatchingItems ? 'block' : 'none';
  });
};

const addToCart = (supplierId, itemId, itemName, price, stock) => {
  const quantityInput = document.querySelector(`input[data-product-id="${itemId}"]`);
  const quantity = parseInt(quantityInput?.value) || 1;
  
  if (quantity > stock) {
    showToast(`Only ${stock} items available in stock`, 'warning');
    if (quantityInput) quantityInput.value = stock;
    return;
  }
  
  let supplierCart = orderCart.find(item => item.supplierId === supplierId);
  if (!supplierCart) {
    supplierCart = { supplierId: supplierId, items: [] };
    orderCart.push(supplierCart);
  }
  
  const existingItem = supplierCart.items.find(p => p.itemId === itemId);
  if (existingItem) {
    const newQuantity = existingItem.quantity + quantity;
    if (newQuantity > stock) {
      showToast(`Cannot add more. Stock limit: ${stock}`, 'warning');
      return;
    }
    existingItem.quantity = newQuantity;
  } else {
    supplierCart.items.push({
      itemId: itemId,
      name: itemName,
      price: price,
      quantity: quantity,
      stock: stock
    });
  }
  
  if (quantityInput) quantityInput.value = 1;
  showToast(`Added ${quantity} ${itemName} to cart`, 'success');
};

const viewAllSupplierItems = async (supplierId, supplierName) => {
  try {
    const itemsSnapshot = await getDocs(query(
      collection(db, 'items'),
      where('supplierId', '==', supplierId),
      where('available', '==', true)
    ));
    
    const items = itemsSnapshot.docs.map(doc => ({
      id: doc.id,
      ...doc.data()
    }));
    
    showOrderModal(supplierId, supplierName, items);
  } catch (error) {
    console.error('Error loading supplier items:', error);
    showToast('Error loading items', 'error');
  }
};

const showOrderModal = async (supplierId, supplierName, items = []) => {
  const modal = $('order-modal');
  const supplierInfo = $('order-supplier-info');
  const orderItems = $('order-items');
  
  if (!modal || !supplierInfo || !orderItems) return;
  
  try {
    const supplierDoc = await getDoc(doc(db, 'users', supplierId));
    const supplierData = supplierDoc.exists() ? supplierDoc.data() : {};
    
    supplierInfo.innerHTML = `
      <h4>${supplierName}</h4>
      <p><strong>Category:</strong> ${supplierData.category || 'General'}</p>
      <p><strong>Contact:</strong> ${supplierData.email || 'N/A'}</p>
    `;
    
    if (items.length === 0) {
      const itemsSnapshot = await getDocs(query(
        collection(db, 'items'),
        where('supplierId', '==', supplierId),
        where('available', '==', true)
      ));
      
      items = itemsSnapshot.docs.map(doc => ({
        id: doc.id,
        ...doc.data()
      }));
    }
    
    const supplierCart = orderCart.find(item => item.supplierId === supplierId);
    
    orderItems.innerHTML = `
      <h5>Available Items:</h5>
      <div class="order-items-grid">
        ${items.map(item => {
          const cartItem = supplierCart?.items.find(p => p.itemId === item.id);
          const quantity = cartItem?.quantity || 0;
          
          return `
            <div class="order-item-card">
              <div class="item-info">
                <div class="item-name">${item.name}</div>
                <div class="item-description">${item.description || ''}</div>
                <div class="item-price">${formatCurrency(item.price || 0)}</div>
                <div class="item-stock">Stock: ${item.stock || 0}</div>
              </div>
              <div class="item-quantity-controls">
                <label>Quantity:</label>
                <input type="number" class="quantity-input order-quantity-input" min="0" max="${item.stock || 999}" value="${quantity}" 
                       data-supplier-id="${supplierId}" data-item-id="${item.id}" data-item-name="${item.name}" data-item-price="${item.price || 0}" data-item-stock="${item.stock || 999}">
              </div>
            </div>
          `;
        }).join('')}
      </div>
    `;
    
    // Add event listeners for quantity inputs
    document.querySelectorAll('.order-quantity-input').forEach(input => {
      input.addEventListener('change', (e) => {
        const supplierId = e.target.dataset.supplierId;
        const itemId = e.target.dataset.itemId;
        const itemName = e.target.dataset.itemName;
        const itemPrice = parseFloat(e.target.dataset.itemPrice);
        const itemStock = parseInt(e.target.dataset.itemStock);
        const quantity = e.target.value;
        updateOrderQuantity(supplierId, itemId, itemName, itemPrice, itemStock, quantity);
      });
    });
    
    updateOrderTotal();
    modal.classList.remove('hidden');
    
  } catch (error) {
    console.error('Error loading supplier details:', error);
    showToast('Error loading supplier details', 'error');
  }
};

const updateOrderQuantity = (supplierId, itemId, itemName, price, stock, quantity) => {
  quantity = parseInt(quantity) || 0;
  
  if (quantity > stock) {
    showToast(`Only ${stock} items available`, 'warning');
    const input = document.querySelector(`input[data-item-id="${itemId}"]`);
    if (input) input.value = stock;
    quantity = stock;
  }
  
  let supplierCart = orderCart.find(item => item.supplierId === supplierId);
  
  if (!supplierCart && quantity > 0) {
    supplierCart = { supplierId: supplierId, items: [] };
    orderCart.push(supplierCart);
  }
  
  if (supplierCart) {
    const existingItem = supplierCart.items.find(p => p.itemId === itemId);
    
    if (quantity > 0) {
      if (existingItem) {
        existingItem.quantity = quantity;
      } else {
        supplierCart.items.push({
          itemId: itemId,
          name: itemName,
          price: price,
          quantity: quantity,
          stock: stock
        });
      }
    } else if (existingItem) {
      supplierCart.items = supplierCart.items.filter(p => p.itemId !== itemId);
    }
    
    if (supplierCart.items.length === 0) {
      orderCart = orderCart.filter(item => item.supplierId !== supplierId);
    }
  }
  
  updateOrderTotal();
};

const updateOrderTotal = () => {
  const supplierCart = orderCart.find(item => item.items && item.items.length > 0);
  if (!supplierCart) {
    $('order-subtotal').textContent = formatCurrency(0);
    $('order-tax').textContent = formatCurrency(0);
    $('order-total-amount').textContent = formatCurrency(0);
    return;
  }
  
  const subtotal = supplierCart.items.reduce((sum, item) => 
    sum + ((item.price || 0) * (item.quantity || 0)), 0
  );
  
  const tax = subtotal * 0.10;
  const total = subtotal + tax;
  
  $('order-subtotal').textContent = formatCurrency(subtotal);
  $('order-tax').textContent = formatCurrency(tax);
  $('order-total-amount').textContent = formatCurrency(total);
};

const confirmOrder = async () => {
  try {
    showLoading(true);
    
    const activeSupplierCart = orderCart.find(item => item.items && item.items.length > 0);
    if (!activeSupplierCart) {
      showToast('Please add items to your order', 'warning');
      showLoading(false);
      return;
    }
    
    const subtotal = activeSupplierCart.items.reduce((sum, item) => 
      sum + ((item.price || 0) * (item.quantity || 0)), 0
    );
    
    const tax = subtotal * 0.10;
    const total = subtotal + tax;
    
    const orderData = {
      vendorId: currentUser.uid,
      supplierId: activeSupplierCart.supplierId,
      items: activeSupplierCart.items,
      subtotal: subtotal,
      tax: tax,
      total: total,
      status: 'pending',
      createdAt: serverTimestamp(),
      orderNumber: generateOrderNumber()
    };
    
    const docRef = await addDoc(collection(db, 'orders'), orderData);
    
    // Update stock levels
    for (const item of activeSupplierCart.items) {
      try {
        const itemDoc = await getDoc(doc(db, 'items', item.itemId));
        if (itemDoc.exists()) {
          const currentStock = itemDoc.data().stock || 0;
          await updateDoc(doc(db, 'items', item.itemId), {
            stock: Math.max(0, currentStock - (item.quantity || 0))
          });
        }
      } catch (error) {
        console.error('Error updating stock for item:', item.itemId, error);
      }
    }
    
    // Clear cart for this supplier
    orderCart = orderCart.filter(item => item.supplierId !== activeSupplierCart.supplierId);
    
    $('order-modal').classList.add('hidden');
    showToast('Order placed successfully!', 'success');
    
    await loadVendorOrders();
    await loadAllItems();
    
    // Show invoice option
    setTimeout(() => {
      if (confirm('Order placed successfully! Would you like to download the invoice?')) {
        generateInvoicePDF(docRef.id, { ...orderData, id: docRef.id });
      }
    }, 1000);
    
  } catch (error) {
    console.error('Error placing order:', error);
    showToast('Error placing order', 'error');
  } finally {
    showLoading(false);
  }
};

const loadVendorOrders = async () => {
  try {
    const ordersList = $('vendor-orders-list');
    if (!ordersList) return;
    
    ordersList.innerHTML = '<div class="skeleton skeleton-text"></div>'.repeat(3);
    
    const ordersSnapshot = await getDocs(query(
      collection(db, 'orders'),
      where('vendorId', '==', currentUser.uid)
    ));
    
    if (ordersSnapshot.empty) {
      ordersList.innerHTML = `
        <div class="empty-state">
          <div class="empty-state-icon">📋</div>
          <h3>No Orders Yet</h3>
          <p>Your orders will appear here once you place them with suppliers.</p>
        </div>
      `;
      return;
    }
    
    const orders = [];
    for (const docSnapshot of ordersSnapshot.docs) {
      const orderData = docSnapshot.data();
      try {
        const supplierDoc = await getDoc(doc(db, 'users', orderData.supplierId));
        const supplierName = supplierDoc.exists() ? supplierDoc.data().name : 'Unknown Supplier';
        
        orders.push({
          id: docSnapshot.id,
          ...orderData,
          supplierName
        });
      } catch (error) {
        console.error('Error loading supplier for order:', docSnapshot.id, error);
        orders.push({
          id: docSnapshot.id,
          ...orderData,
          supplierName: 'Unknown Supplier'
        });
      }
    }
    
    // Sort orders by creation date (newest first)
    orders.sort((a, b) => {
      const dateA = a.createdAt?.toDate ? a.createdAt.toDate() : new Date(0);
      const dateB = b.createdAt?.toDate ? b.createdAt.toDate() : new Date(0);
      return dateB - dateA;
    });
    
    ordersList.innerHTML = orders.map(order => `
      <div class="order-card">
        <div class="order-header">
          <div class="order-info">
            <h4>Order #${order.orderNumber || 'N/A'}</h4>
            <div class="order-date">${formatDate(order.createdAt)}</div>
            <div class="supplier-name"><strong>Supplier:</strong> ${order.supplierName}</div>
          </div>
          <div class="order-status ${order.status || 'pending'}">${(order.status || 'pending').toUpperCase()}</div>
        </div>
        <div class="order-items">
          <h5>Items Ordered:</h5>
          ${(order.items || []).map(item => `
            <div class="order-item">
              <div class="item-details">
                <div class="item-name">${item.name || 'Unknown Item'}</div>
                <div class="item-quantity">Qty: ${item.quantity || 0}</div>
              </div>
              <div class="item-total">${formatCurrency((item.price || 0) * (item.quantity || 0))}</div>
            </div>
          `).join('')}
        </div>
        <div class="order-total">
          <div class="total-row">
            <span>Subtotal:</span>
            <span>${formatCurrency(order.subtotal || 0)}</span>
          </div>
          <div class="total-row">
            <span>Tax (10%):</span>
            <span>${formatCurrency(order.tax || 0)}</span>
          </div>
          <div class="total-row total-final">
            <span>Total:</span>
            <span>${formatCurrency(order.total || 0)}</span>
          </div>
        </div>
        <div class="order-actions">
          <button class="btn invoice-download-btn invoice-btn" data-order-id="${order.id}" data-order-data='${JSON.stringify(order)}'>
            📄 Download Invoice
          </button>
          <button class="btn btn--outline btn--sm start-chat-btn" data-supplier-id="${order.supplierId}" data-supplier-name="${order.supplierName}">
            💬 Contact Supplier
          </button>
        </div>
      </div>
    `).join('');
    
    // Add event listeners for invoice buttons
    document.querySelectorAll('.invoice-btn').forEach(button => {
      button.addEventListener('click', (e) => {
        const orderId = e.target.dataset.orderId;
        const orderData = JSON.parse(e.target.dataset.orderData);
        generateInvoicePDF(orderId, orderData);
      });
    });
    
  } catch (error) {
    console.error('Error loading vendor orders:', error);
    showToast('Error loading orders', 'error');
  }
};

// Supplier Dashboard Functions
const initializeSupplierDashboard = async () => {
  console.log('Initializing supplier dashboard');
  await loadSupplierItems();
  await loadSupplierOrders();
  setupSupplierChat();
  setupSupplierFilters();
};

const setupSupplierFilters = () => {
  const categoryFilter = $('supplier-category-filter');
  if (categoryFilter) {
    categoryFilter.addEventListener('change', filterSupplierItems);
  }
};

const filterSupplierItems = () => {
  const selectedCategory = $('supplier-category-filter')?.value || '';
  const itemCards = document.querySelectorAll('.product-card');
  
  itemCards.forEach(card => {
    const category = card.dataset.category || '';
    if (!selectedCategory || category === selectedCategory) {
      card.style.display = 'block';
    } else {
      card.style.display = 'none';
    }
  });
};

const loadSupplierItems = async () => {
  try {
    const itemsGrid = $('products-grid');
    if (!itemsGrid || !currentUser) return;
    
    itemsGrid.innerHTML = '<div class="skeleton skeleton-text"></div>'.repeat(6);
    
    const itemsSnapshot = await getDocs(query(
      collection(db, 'items'),
      where('supplierId', '==', currentUser.uid)
    ));
    
    if (itemsSnapshot.empty) {
      itemsGrid.innerHTML = `
        <div class="empty-state">
          <div class="empty-state-icon">📦</div>
          <h3>No Items Added</h3>
          <p>Start by adding your first item to the catalog.</p>
          <button class="btn btn--primary" id="add-first-item-btn">➕ Add First Item</button>
        </div>
      `;
      
      // Add event listener to the add first item button
      const addFirstItemBtn = $('add-first-item-btn');
      if (addFirstItemBtn) {
        addFirstItemBtn.addEventListener('click', () => showItemModal());
      }
      
      return;
    }
    
    const items = itemsSnapshot.docs.map(doc => ({
      id: doc.id,
      ...doc.data()
    }));
    
    // Sort items by creation date (newest first)
    items.sort((a, b) => {
      const dateA = a.createdAt?.toDate ? a.createdAt.toDate() : new Date(0);
      const dateB = b.createdAt?.toDate ? b.createdAt.toDate() : new Date(0);
      return dateB - dateA;
    });
    
    itemsGrid.innerHTML = items.map(item => `
      <div class="product-card" data-category="${item.category || ''}">
        <div class="product-header">
          <h3>${item.name || 'Unnamed Item'}</h3>
          <div class="product-status ${item.available ? 'available' : 'unavailable'}">
            ${item.available ? 'Available' : 'Unavailable'}
          </div>
        </div>
        <div class="product-details">
          ${item.description ? `<div class="product-description">${item.description}</div>` : ''}
          <div class="product-price-info">${formatCurrency(item.price || 0)}</div>
          <div class="product-stock-info">Stock: ${item.stock || 0} items</div>
          <div class="product-category-info">${item.category || 'Uncategorized'}</div>
        </div>
        <div class="product-actions">
          <button class="btn btn--outline btn--sm edit-item-btn" data-item-id="${item.id}">
            ✏️ Edit
          </button>
          <button class="btn btn--outline btn--sm toggle-availability-btn" data-item-id="${item.id}" data-available="${item.available}">
            ${item.available ? '🚫 Disable' : '✅ Enable'}
          </button>
          <button class="btn btn--outline btn--sm delete-item-btn" data-item-id="${item.id}">
            🗑️ Delete
          </button>
        </div>
      </div>
    `).join('');
    
    // Add event listeners for product actions
    setupProductActionListeners();
    
  } catch (error) {
    console.error('Error loading supplier items:', error);
    showToast('Error loading items', 'error');
    
    const itemsGrid = $('products-grid');
    if (itemsGrid) {
      itemsGrid.innerHTML = `
        <div class="empty-state">
          <div class="empty-state-icon">⚠️</div>
          <h3>Error Loading Items</h3>
          <p>There was an error loading your items. Please try refreshing the page.</p>
          <button class="btn btn--primary" onclick="loadSupplierItems()">🔄 Retry</button>
        </div>
      `;
    }
  }
};

const setupProductActionListeners = () => {
  // Edit item buttons
  document.querySelectorAll('.edit-item-btn').forEach(button => {
    button.addEventListener('click', (e) => {
      const itemId = e.target.dataset.itemId;
      editItem(itemId);
    });
  });
  
  // Toggle availability buttons
  document.querySelectorAll('.toggle-availability-btn').forEach(button => {
    button.addEventListener('click', (e) => {
      const itemId = e.target.dataset.itemId;
      const currentAvailable = e.target.dataset.available === 'true';
      toggleItemAvailability(itemId, !currentAvailable);
    });
  });
  
  // Delete item buttons
  document.querySelectorAll('.delete-item-btn').forEach(button => {
    button.addEventListener('click', (e) => {
      const itemId = e.target.dataset.itemId;
      deleteItem(itemId);
    });
  });
};

const loadSupplierOrders = async () => {
  try {
    const ordersList = $('supplier-orders-list');
    if (!ordersList || !currentUser) return;
    
    ordersList.innerHTML = '<div class="skeleton skeleton-text"></div>'.repeat(3);
    
    const ordersSnapshot = await getDocs(query(
      collection(db, 'orders'),
      where('supplierId', '==', currentUser.uid)
    ));
    
    if (ordersSnapshot.empty) {
      ordersList.innerHTML = `
        <div class="empty-state">
          <div class="empty-state-icon">📋</div>
          <h3>No Orders Received</h3>
          <p>Orders from vendors will appear here once they place them.</p>
        </div>
      `;
      return;
    }
    
    const orders = [];
    for (const docSnapshot of ordersSnapshot.docs) {
      const orderData = docSnapshot.data();
      try {
        const vendorDoc = await getDoc(doc(db, 'users', orderData.vendorId));
        const vendorName = vendorDoc.exists() ? vendorDoc.data().name : 'Unknown Vendor';
        
        orders.push({
          id: docSnapshot.id,
          ...orderData,
          vendorName
        });
      } catch (error) {
        console.error('Error loading vendor for order:', docSnapshot.id, error);
        orders.push({
          id: docSnapshot.id,
          ...orderData,
          vendorName: 'Unknown Vendor'
        });
      }
    }
    
    // Sort orders by creation date (newest first)
    orders.sort((a, b) => {
      const dateA = a.createdAt?.toDate ? a.createdAt.toDate() : new Date(0);
      const dateB = b.createdAt?.toDate ? b.createdAt.toDate() : new Date(0);
      return dateB - dateA;
    });
    
    ordersList.innerHTML = orders.map(order => `
      <div class="order-card">
        <div class="order-header">
          <div class="order-info">
            <h4>Order #${order.orderNumber || 'N/A'}</h4>
            <div class="order-date">${formatDate(order.createdAt)}</div>
            <div class="vendor-name"><strong>From:</strong> ${order.vendorName}</div>
          </div>
          <div class="order-status ${order.status || 'pending'}">${(order.status || 'pending').toUpperCase()}</div>
        </div>
        <div class="order-items">
          <h5>Items Ordered:</h5>
          ${(order.items || []).map(item => `
            <div class="order-item">
              <div class="item-details">
                <div class="item-name">${item.name || 'Unknown Item'}</div>
                <div class="item-quantity">Qty: ${item.quantity || 0}</div>
              </div>
              <div class="item-total">${formatCurrency((item.price || 0) * (item.quantity || 0))}</div>
            </div>
          `).join('')}
        </div>
        <div class="order-total">
          <div class="total-row total-final">
            <span>Total Amount:</span>
            <span>${formatCurrency(order.total || 0)}</span>
          </div>
        </div>
        <div class="order-actions">
          ${(order.status || 'pending') === 'pending' ? `
            <button class="btn btn--primary btn--sm update-order-status-btn" data-order-id="${order.id}" data-status="confirmed">
              ✅ Confirm Order
            </button>
          ` : ''}
          ${(order.status || 'pending') === 'confirmed' ? `
            <button class="btn btn--primary btn--sm update-order-status-btn" data-order-id="${order.id}" data-status="delivered">
              📦 Mark Delivered
            </button>
          ` : ''}
          <button class="btn btn--outline btn--sm start-supplier-chat-btn" data-vendor-id="${order.vendorId}" data-vendor-name="${order.vendorName}">
            💬 Contact Vendor
          </button>
        </div>
      </div>
    `).join('');
    
    // Add event listeners for order actions
    document.querySelectorAll('.update-order-status-btn').forEach(button => {
      button.addEventListener('click', (e) => {
        const orderId = e.target.dataset.orderId;
        const newStatus = e.target.dataset.status;
        updateOrderStatus(orderId, newStatus);
      });
    });
    
    document.querySelectorAll('.start-supplier-chat-btn').forEach(button => {
      button.addEventListener('click', (e) => {
        const vendorId = e.target.dataset.vendorId;
        const vendorName = e.target.dataset.vendorName;
        startSupplierChat(vendorId, vendorName);
      });
    });
    
  } catch (error) {
    console.error('Error loading supplier orders:', error);
    showToast('Error loading orders', 'error');
  }
};

const updateOrderStatus = async (orderId, newStatus) => {
  try {
    await updateDoc(doc(db, 'orders', orderId), {
      status: newStatus,
      updatedAt: serverTimestamp()
    });
    
    showToast(`Order status updated to ${newStatus}`, 'success');
    await loadSupplierOrders();
  } catch (error) {
    console.error('Error updating order status:', error);
    showToast('Error updating order status', 'error');
  }
};

// Item Management Functions
const showItemModal = (itemId = null) => {
  const modal = $('product-modal');
  const title = $('product-modal-title');
  const form = $('product-form');
  
  if (!modal || !title || !form) return;
  
  if (itemId) {
    title.textContent = 'Edit Item';
    loadItemForEdit(itemId);
  } else {
    title.textContent = 'Add New Item';
    form.reset();
    $('product-stock').value = 100;
    $('product-available').checked = true;
  }
  
  modal.classList.remove('hidden');
};

const loadItemForEdit = async (itemId) => {
  try {
    const itemDoc = await getDoc(doc(db, 'items', itemId));
    if (itemDoc.exists()) {
      const item = itemDoc.data();
      
      $('product-name').value = item.name || '';
      $('product-description').value = item.description || '';
      $('product-price').value = item.price || '';
      $('product-category').value = item.category || '';
      $('product-stock').value = item.stock || 0;
      $('product-available').checked = item.available || false;
      
      $('product-form').dataset.itemId = itemId;
    }
  } catch (error) {
    console.error('Error loading item for edit:', error);
    showToast('Error loading item details', 'error');
  }
};

const saveItem = async () => {
  try {
    showLoading(true);
    
    const form = $('product-form');
    const itemId = form.dataset.itemId;
    
    const name = $('product-name').value.trim();
    const description = $('product-description').value.trim();
    const price = parseFloat($('product-price').value);
    const category = $('product-category').value;
    const stock = parseInt($('product-stock').value) || 0;
    const available = $('product-available').checked;
    
    if (!name || !category || price <= 0) {
      showToast('Please fill all required fields with valid values', 'error');
      showLoading(false);
      return;
    }
    
    const itemData = {
      name: name,
      description: description,
      price: price,
      category: category,
      stock: stock,
      available: available,
      supplierId: currentUser.uid
    };
    
    if (itemId) {
      await updateDoc(doc(db, 'items', itemId), {
        ...itemData,
        updatedAt: serverTimestamp()
      });
      showToast('Item updated successfully!', 'success');
    } else {
      await addDoc(collection(db, 'items'), {
        ...itemData,
        createdAt: serverTimestamp()
      });
      showToast('Item added successfully!', 'success');
    }
    
    $('product-modal').classList.add('hidden');
    form.reset();
    delete form.dataset.itemId;
    
    await loadSupplierItems();
    
  } catch (error) {
    console.error('Error saving item:', error);
    showToast('Error saving item: ' + error.message, 'error');
  } finally {
    showLoading(false);
  }
};

const editItem = (itemId) => {
  showItemModal(itemId);
};

const toggleItemAvailability = async (itemId, available) => {
  try {
    await updateDoc(doc(db, 'items', itemId), {
      available: available,
      updatedAt: serverTimestamp()
    });
    
    showToast(`Item ${available ? 'enabled' : 'disabled'} successfully!`, 'success');
    await loadSupplierItems();
  } catch (error) {
    console.error('Error updating item availability:', error);
    showToast('Error updating item', 'error');
  }
};

const deleteItem = async (itemId) => {
  if (!confirm('Are you sure you want to delete this item? This action cannot be undone.')) return;
  
  try {
    await deleteDoc(doc(db, 'items', itemId));
    showToast('Item deleted successfully!', 'success');
    await loadSupplierItems();
  } catch (error) {
    console.error('Error deleting item:', error);
    showToast('Error deleting item', 'error');
  }
};

// Chat Functions (Basic Implementation)
const setupVendorChat = () => {
  const chatList = $('chat-list');
  if (chatList) {
    chatList.innerHTML = `
      <div class="empty-state">
        <div class="empty-state-icon">💬</div>
        <h4>Chat Coming Soon</h4>
        <p>Real-time chat with suppliers will be available soon.</p>
      </div>
    `;
  }
};

const setupSupplierChat = () => {
  const chatList = $('supplier-chat-list');
  if (chatList) {
    chatList.innerHTML = `
      <div class="empty-state">
        <div class="empty-state-icon">💬</div>
        <h4>Chat Coming Soon</h4>
        <p>Real-time chat with vendors will be available soon.</p>
      </div>
    `;
  }
};

const startChat = async (otherUserId, otherUserName) => {
  showToast(`Chat feature coming soon! Contact ${otherUserName} at their email for now.`, 'info');
};

const startSupplierChat = async (otherUserId, otherUserName) => {
  showToast(`Chat feature coming soon! Contact ${otherUserName} at their email for now.`, 'info');
};

// Enhanced PDF Invoice Generation
const generateInvoicePDF = async (orderId, orderData) => {
  try {
    showLoading(true);
    
    let order = orderData;
    if (typeof orderData === 'string') {
      order = JSON.parse(orderData);
    }
    
    const supplierDoc = await getDoc(doc(db, 'users', order.supplierId));
    const supplierData = supplierDoc.exists() ? supplierDoc.data() : {};
    
    const vendorDoc = await getDoc(doc(db, 'users', order.vendorId));
    const vendorData = vendorDoc.exists() ? vendorDoc.data() : {};
    
    currentInvoiceData = { order, supplierData, vendorData };
    showInvoicePreview();
    
  } catch (error) {
    console.error('Error generating PDF:', error);
    showToast('Error generating invoice', 'error');
    showLoading(false);
  }
};

const showInvoicePreview = () => {
  const modal = $('invoice-modal');
  const content = $('invoice-content');
  
  if (!modal || !content || !currentInvoiceData) return;
  
  const { order, supplierData, vendorData } = currentInvoiceData;
  
  content.innerHTML = `
    <div class="invoice-content">
      <div class="invoice-header">
        <h1 class="invoice-title">🌉 SmartBridge</h1>
        <p class="invoice-subtitle">Street Food Vendor - Supplier Network</p>
        <h2>INVOICE</h2>
      </div>
      
      <div class="invoice-info">
        <div class="invoice-section">
          <h4>Bill To:</h4>
          <p><strong>${vendorData?.name || 'Vendor'}</strong></p>
          <p>${vendorData?.email || 'N/A'}</p>
          <p>${vendorData?.businessType || ''}</p>
        </div>
        <div class="invoice-section">
          <h4>From:</h4>
          <p><strong>${supplierData?.name || 'Supplier'}</strong></p>
          <p>${supplierData?.email || 'N/A'}</p>
          <p>Category: ${supplierData?.category || 'General'}</p>
        </div>
      </div>
      
      <div class="invoice-info">
        <div class="invoice-section">
          <p><strong>Invoice #:</strong> ${order.orderNumber || 'N/A'}</p>
          <p><strong>Order Date:</strong> ${formatDate(order.createdAt)}</p>
        </div>
        <div class="invoice-section" style="text-align: right;">
          <p><strong>Status:</strong> <span style="color: var(--color-primary);">${(order.status || 'pending').toUpperCase()}</span></p>
        </div>
      </div>
      
      <table class="invoice-table">
        <thead>
          <tr>
            <th>Item</th>
            <th style="text-align: center;">Quantity</th>
            <th style="text-align: right;">Unit Price</th>
            <th style="text-align: right;">Total</th>
          </tr>
        </thead>
        <tbody>
          ${(order.items || []).map(item => `
            <tr>
              <td>${item.name || 'Unknown Item'}</td>
              <td style="text-align: center;">${item.quantity || 0}</td>
              <td style="text-align: right;">${formatCurrency(item.price || 0)}</td>
              <td style="text-align: right;">${formatCurrency((item.price || 0) * (item.quantity || 0))}</td>
            </tr>
          `).join('')}
        </tbody>
      </table>
      
      <div class="invoice-totals">
        <table>
          <tr>
            <td><strong>Subtotal:</strong></td>
            <td style="text-align: right;">${formatCurrency(order.subtotal || 0)}</td>
          </tr>
          <tr>
            <td><strong>Tax (10%):</strong></td>
            <td style="text-align: right;">${formatCurrency(order.tax || 0)}</td>
          </tr>
          <tr class="invoice-final-total">
            <td><strong>Total:</strong></td>
            <td style="text-align: right; color: var(--color-primary);"><strong>${formatCurrency(order.total || 0)}</strong></td>
          </tr>
        </table>
      </div>
      
      <div class="invoice-footer">
        <p>Thank you for using StreetBridge!</p>
        <p>Connecting Street Food Vendors with Quality Suppliers</p>
      </div>
    </div>
  `;
  
  modal.classList.remove('hidden');
  showLoading(false);
};

const downloadInvoicePDF = async () => {
  try {
    showLoading(true);
    
    if (!currentInvoiceData) {
      showToast('No invoice data available', 'error');
      return;
    }
    
    const element = $('invoice-content');
    if (!element) {
      showToast('Invoice content not found', 'error');
      return;
    }
    
    const opt = {
      margin: 0.5,
      filename: `StreetBridge_Invoice_${currentInvoiceData.order.orderNumber || 'Invoice'}.pdf`,
      image: { type: 'jpeg', quality: 0.98 },
      html2canvas: { 
        scale: 2, 
        useCORS: true,
        backgroundColor: '#ffffff'
      },
      jsPDF: { 
        unit: 'in', 
        format: 'a4', 
        orientation: 'portrait' 
      }
    };
    
    await html2pdf().set(opt).from(element).save();
    
    showToast('Invoice PDF downloaded successfully!', 'success');
    $('invoice-modal').classList.add('hidden');
    
  } catch (error) {
    console.error('Error downloading PDF:', error);
    showToast('Error downloading PDF. Please try again.', 'error');
  } finally {
    showLoading(false);
  }
};

// Event Listeners - Setup all event handlers after DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
  console.log('🌉 StreetBridge Application Starting...');
  
  // Initialize Firebase auth listener
  setupAuthStateListener();
  
  // Auth tab switching - Fixed implementation
  document.querySelectorAll('.auth-tab').forEach(tab => {
    tab.addEventListener('click', (e) => {
      e.preventDefault();
      const tabId = tab.dataset.tab;
      console.log('Auth tab clicked:', tabId);
      switchAuthTab(tabId);
    });
  });
  
  // Role-based business type visibility
  const roleSelect = $('signup-role');
  const businessTypeGroup = $('business-type-group');
  
  if (roleSelect && businessTypeGroup) {
    roleSelect.addEventListener('change', (e) => {
      console.log('Role selected:', e.target.value);
      if (e.target.value === 'vendor') {
        businessTypeGroup.classList.remove('hidden');
        const businessInput = $('signup-business');
        if (businessInput) businessInput.placeholder = 'e.g., Food Stall, Catering Service';
      } else if (e.target.value === 'supplier') {
        businessTypeGroup.classList.remove('hidden');
        const businessInput = $('signup-business');
        if (businessInput) businessInput.placeholder = 'e.g., Vegetables, Packaging, Equipment';
      } else {
        businessTypeGroup.classList.add('hidden');
      }
    });
  }
  
  // Login form submission
  const loginForm = $('login-form-element');
  if (loginForm) {
    loginForm.addEventListener('submit', async (e) => {
      e.preventDefault();
      console.log('Login form submitted');
      const email = $('login-email').value;
      const password = $('login-password').value;
      console.log('Login attempt for:', email);
      await handleLogin(email, password);
    });
  }
  
  // Signup form submission
  const signupForm = $('signup-form-element');
  if (signupForm) {
    signupForm.addEventListener('submit', async (e) => {
      e.preventDefault();
      console.log('Signup form submitted');
      const email = $('signup-email').value;
      const password = $('signup-password').value;
      const name = $('signup-name').value;
      const role = $('signup-role').value;
      const businessType = $('signup-business').value;
      console.log('Signup attempt for:', email, 'as', role);
      await handleSignup(email, password, name, role, businessType);
    });
  }
  
  // Dashboard navigation tabs
  document.querySelectorAll('.nav-tab').forEach(tab => {
    tab.addEventListener('click', (e) => {
      e.preventDefault();
      const tabId = tab.dataset.tab;
      console.log('Dashboard tab clicked:', tabId);
      switchTab(tabId);
    });
  });
  
  // Logout buttons
  const logoutBtn = $('logout-btn');
  if (logoutBtn) {
    logoutBtn.addEventListener('click', async (e) => {
      e.preventDefault();
      console.log('Vendor logout clicked');
      await signOut(auth);
      showToast('Logged out successfully', 'success');
    });
  }
  
  const supplierLogoutBtn = $('supplier-logout-btn');
  if (supplierLogoutBtn) {
    supplierLogoutBtn.addEventListener('click', async (e) => {
      e.preventDefault();
      console.log('Supplier logout clicked');
      await signOut(auth);
      showToast('Logged out successfully', 'success');
    });
  }
  
  // Modal handlers
  const orderModal = $('order-modal');
  const productModal = $('product-modal');
  const invoiceModal = $('invoice-modal');
  
  if (orderModal) {
    const closeOrderModal = $('close-order-modal');
    if (closeOrderModal) {
      closeOrderModal.addEventListener('click', () => {
        orderModal.classList.add('hidden');
      });
    }
    
    const cancelOrder = $('cancel-order');
    if (cancelOrder) {
      cancelOrder.addEventListener('click', () => {
        orderModal.classList.add('hidden');
      });
    }
    
    const confirmOrderBtn = $('confirm-order');
    if (confirmOrderBtn) {
      confirmOrderBtn.addEventListener('click', confirmOrder);
    }
  }
  
  if (productModal) {
    const closeProductModal = $('close-product-modal');
    if (closeProductModal) {
      closeProductModal.addEventListener('click', () => {
        productModal.classList.add('hidden');
        const form = $('product-form');
        if (form) {
          form.reset();
          delete form.dataset.itemId;
        }
      });
    }
    
    const cancelProduct = $('cancel-product');
    if (cancelProduct) {
      cancelProduct.addEventListener('click', () => {
        productModal.classList.add('hidden');
        const form = $('product-form');
        if (form) {
          form.reset();
          delete form.dataset.itemId;
        }
      });
    }
    
    const saveProductBtn = $('save-product');
    if (saveProductBtn) {
      saveProductBtn.addEventListener('click', saveItem);
    }
  }
  
  if (invoiceModal) {
    const closeInvoiceModal = $('close-invoice-modal');
    if (closeInvoiceModal) {
      closeInvoiceModal.addEventListener('click', () => {
        invoiceModal.classList.add('hidden');
      });
    }
    
    const cancelInvoice = $('cancel-invoice');
    if (cancelInvoice) {
      cancelInvoice.addEventListener('click', () => {
        invoiceModal.classList.add('hidden');
      });
    }
    
    const downloadInvoicePdfBtn = $('download-invoice-pdf');
    if (downloadInvoicePdfBtn) {
      downloadInvoicePdfBtn.addEventListener('click', downloadInvoicePDF);
    }
  }
  
  // Add item button
  const addProductBtn = $('add-product-btn');
  if (addProductBtn) {
    addProductBtn.addEventListener('click', () => {
      showItemModal();
    });
  }
  
  // Toast close button
  const toastClose = $('toast-close');
  if (toastClose) {
    toastClose.addEventListener('click', () => {
      const toast = $('toast');
      if (toast) toast.classList.add('hidden');
    });
  }
  
  // Click outside modal to close
  document.addEventListener('click', (e) => {
    if (e.target.classList.contains('modal')) {
      e.target.classList.add('hidden');
    }
  });
  
  console.log('✅ StreetBridge Application Ready!');
  console.log('Event listeners attached successfully');
});