import React, { useState, useEffect, useCallback, useRef } from 'react';
import { 
  Home, 
  Package, 
  BarChart2, 
  Settings, 
  LogOut, 
  Plus, 
  Share2, 
  Edit, 
  Trash2, 
  ChevronDown, 
  Menu, 
  X, 
  Copy, 
  ExternalLink,
  DollarSign,
  Download,
  Eye,
  Search,
  Bell,
  User,
  HelpCircle,
  FileText,
  Shield,
  Mail,
  Check,
  AlertCircle,
  Link,
  Smartphone,
  ArrowRight,
  Calendar,
  Clock,
  ChevronRight,
  ChevronLeft,
  Radio
} from 'lucide-react';
// Import Socket.IO client
import io from 'socket.io-client';

// Main App Component
export default function InstaSellApp() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [currentView, setCurrentView] = useState('login');
  const [sidebarOpen, setSidebarOpen] = useState(true);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [user, setUser] = useState(null);
  const [notification, setNotification] = useState(null);
  const [liveSales, setLiveSales] = useState([]);
  const socketRef = useRef(null);
  const [analytics, setAnalytics] = useState({
    totalSales: 0,
    totalRevenue: 0,
    conversionRate: 0,
    trafficSources: {
      whatsapp: 35,
      instagram: 25,
      facebook: 20,
      twitter: 10,
      other: 10
    },
    recentSales: []
  });

  // Initialize Socket.IO connection
  useEffect(() => {
    if (isLoggedIn) {
      // Connect to the WebSocket server
      socketRef.current = io('https://www.sitebrew.ai', {
        path: '/api/sales/live',
        auth: {
          token: localStorage.getItem('token')
        }
      });

      // Listen for new sales events
      socketRef.current.on('new-sale', (saleData) => {
        // Add the new sale to the liveSales state with a unique ID and timestamp
        const newSale = {
          ...saleData,
          id: `sale-${Date.now()}`,
          timestamp: new Date(),
          isNew: true
        };
        
        // Mask the buyer email for privacy
        if (newSale.buyerEmail) {
          const [username, domain] = newSale.buyerEmail.split('@');
          newSale.maskedEmail = `${username.charAt(0)}${'*'.repeat(username.length - 2)}${username.charAt(username.length - 1)}@${domain}`;
        }
        
        setLiveSales(prevSales => {
          // Keep only the last 5 sales
          const updatedSales = [newSale, ...prevSales].slice(0, 5);
          return updatedSales;
        });
        
        // Update the isNew flag after 3 seconds
        setTimeout(() => {
          setLiveSales(prevSales => 
            prevSales.map(sale => 
              sale.id === newSale.id ? { ...sale, isNew: false } : sale
            )
          );
        }, 3000);
      });

      // Clean up the socket connection when component unmounts
      return () => {
        if (socketRef.current) {
          socketRef.current.disconnect();
        }
      };
    }
  }, [isLoggedIn]);

  // Fetch products from API
  const fetchProducts = useCallback(async () => {
    if (!isLoggedIn) return;
    
    setLoading(true);
    try {
      // In a real app, this would be an API call
      const response = await fetch(`https://www.sitebrew.ai/api/suZQ0T/products`, {
        headers: {
          'Authorization': `Bearer ${localStorage.getItem('token')}`
        }
      });
      
      if (!response.ok) {
        throw new Error('Failed to fetch products');
      }
      
      const data = await response.json();
      setProducts(data.document || []);
      
      // If no products are returned, use dummy data for demonstration
      if (!data.document || data.document.length === 0) {
        const dummyProducts = [
          {
            _id: "prod1",
            title: 'Social Media Marketing Guide',
            description: 'A comprehensive guide to marketing your business on social media platforms.',
            price: 499,
            downloads: 124,
            revenue: 61876,
            image: 'https://assets.sitebrew.ai/generated-1747594437054.webp',
            fileUrl: '#',
            createdAt: '2023-05-15'
          },
          {
            _id: "prod2",
            title: 'Website Design Templates Bundle',
            description: 'Premium website templates for various niches with responsive design.',
            price: 999,
            downloads: 87,
            revenue: 86913,
            image: 'https://assets.sitebrew.ai/generated-1747594437054.webp',
            fileUrl: '#',
            createdAt: '2023-06-22'
          },
          {
            _id: "prod3",
            title: 'Business Plan Template',
            description: 'Ready-to-use business plan template with financial projections.',
            price: 799,
            downloads: 56,
            revenue: 44744,
            image: 'https://assets.sitebrew.ai/generated-1747594437054.webp',
            fileUrl: '#',
            createdAt: '2023-07-10'
          }
        ];
        setProducts(dummyProducts);
      }
    } catch (err) {
      setError(err.message);
      console.error('Error fetching products:', err);
      
      // Use dummy data for demonstration
      const dummyProducts = [
        {
          _id: "prod1",
          title: 'Social Media Marketing Guide',
          description: 'A comprehensive guide to marketing your business on social media platforms.',
          price: 499,
          downloads: 124,
          revenue: 61876,
          image: 'https://assets.sitebrew.ai/generated-1747594437054.webp',
          fileUrl: '#',
          createdAt: '2023-05-15'
        },
        {
          _id: "prod2",
          title: 'Website Design Templates Bundle',
          description: 'Premium website templates for various niches with responsive design.',
          price: 999,
          downloads: 87,
          revenue: 86913,
          image: 'https://assets.sitebrew.ai/generated-1747594437054.webp',
          fileUrl: '#',
          createdAt: '2023-06-22'
        },
        {
          _id: "prod3",
          title: 'Business Plan Template',
          description: 'Ready-to-use business plan template with financial projections.',
          price: 799,
          downloads: 56,
          revenue: 44744,
          image: 'https://assets.sitebrew.ai/generated-1747594437054.webp',
          fileUrl: '#',
          createdAt: '2023-07-10'
        }
      ];
      setProducts(dummyProducts);
    } finally {
      setLoading(false);
    }
  }, [isLoggedIn]);

  // Fetch analytics data
  const fetchAnalytics = useCallback(async () => {
    if (!isLoggedIn) return;
    
    try {
      // In a real app, this would be an API call
      const response = await fetch(`https://www.sitebrew.ai/api/suZQ0T/analytics`, {
        headers: {
          'Authorization': `Bearer ${localStorage.getItem('token')}`
        }
      });
      
      if (!response.ok) {
        throw new Error('Failed to fetch analytics');
      }
      
      const data = await response.json();
      
      // If no analytics are returned, use dummy data
      if (!data.document) {
        // Generate dummy recent sales
        const recentSales = [];
        for (let i = 0; i < 5; i++) {
          const randomProduct = products[Math.floor(Math.random() * products.length)];
          if (randomProduct) {
            const date = new Date();
            date.setDate(date.getDate() - i);
            
            recentSales.push({
              _id: `sale${i}`,
              productId: randomProduct._id,
              productTitle: randomProduct.title,
              amount: randomProduct.price,
              buyerEmail: `customer${i}@example.com`,
              date: date.toISOString(),
              paymentMethod: 'UPI'
            });
          }
        }
        
        setAnalytics({
          totalSales: products.reduce((sum, product) => sum + product.downloads, 0),
          totalRevenue: products.reduce((sum, product) => sum + product.revenue, 0),
          conversionRate: 3.2,
          trafficSources: {
            whatsapp: 35,
            instagram: 25,
            facebook: 20,
            twitter: 10,
            other: 10
          },
          recentSales
        });
      } else {
        setAnalytics(data.document);
      }
    } catch (err) {
      console.error('Error fetching analytics:', err);
      
      // Generate dummy recent sales
      const recentSales = [];
      for (let i = 0; i < 5; i++) {
        const randomProduct = products[Math.floor(Math.random() * products.length)];
        if (randomProduct) {
          const date = new Date();
          date.setDate(date.getDate() - i);
          
          recentSales.push({
            _id: `sale${i}`,
            productId: randomProduct._id,
            productTitle: randomProduct.title,
            amount: randomProduct.price,
            buyerEmail: `customer${i}@example.com`,
            date: date.toISOString(),
            paymentMethod: 'UPI'
          });
        }
      }
      
      setAnalytics({
        totalSales: products.reduce((sum, product) => sum + product.downloads, 0),
        totalRevenue: products.reduce((sum, product) => sum + product.revenue, 0),
        conversionRate: 3.2,
        trafficSources: {
          whatsapp: 35,
          instagram: 25,
          facebook: 20,
          twitter: 10,
          other: 10
        },
        recentSales
      });
    }
  }, [isLoggedIn, products]);

  // Fetch user data
  const fetchUserData = useCallback(async () => {
    if (!isLoggedIn) return;
    
    try {
      // In a real app, this would be an API call
      const response = await fetch(`https://www.sitebrew.ai/api/suZQ0T/users/me`, {
        headers: {
          'Authorization': `Bearer ${localStorage.getItem('token')}`
        }
      });
      
      if (!response.ok) {
        throw new Error('Failed to fetch user data');
      }
      
      const data = await response.json();
      
      if (!data.document) {
        // Use dummy user data
        setUser({
          _id: 'user1',
          name: 'John Doe',
          email: 'john.doe@example.com',
          upiId: 'johndoe@okaxis',
          profilePicture: null
        });
      } else {
        setUser(data.document);
      }
    } catch (err) {
      console.error('Error fetching user data:', err);
      
      // Use dummy user data
      setUser({
        _id: 'user1',
        name: 'John Doe',
        email: 'john.doe@example.com',
        upiId: 'johndoe@okaxis',
        profilePicture: null
      });
    }
  }, [isLoggedIn]);

  // Load data when logged in
  useEffect(() => {
    if (isLoggedIn) {
      fetchProducts();
      fetchAnalytics();
      fetchUserData();
    }
  }, [isLoggedIn, fetchProducts, fetchAnalytics, fetchUserData]);

  // Check if user is already logged in (from localStorage)
  useEffect(() => {
    const token = localStorage.getItem('token');
    if (token) {
      setIsLoggedIn(true);
      setCurrentView('dashboard');
    }
  }, []);

  // Simulate live sales for demo purposes
  useEffect(() => {
    if (isLoggedIn && products.length > 0) {
      // This is just for demonstration - in a real app, this would come from WebSockets
      const simulateSaleInterval = setInterval(() => {
        const randomProduct = products[Math.floor(Math.random() * products.length)];
        if (randomProduct) {
          const randomNames = ['john', 'sarah', 'mike', 'emma', 'david', 'lisa', 'alex', 'olivia'];
          const randomDomains = ['gmail.com', 'yahoo.com', 'outlook.com', 'hotmail.com', 'example.com'];
          const randomName = randomNames[Math.floor(Math.random() * randomNames.length)];
          const randomDomain = randomDomains[Math.floor(Math.random() * randomDomains.length)];
          const email = `${randomName}@${randomDomain}`;
          
          // Simulate a WebSocket event
          const newSale = {
            productId: randomProduct._id,
            productTitle: randomProduct.title,
            amount: randomProduct.price,
            buyerEmail: email,
            timestamp: new Date().toISOString(),
            paymentMethod: 'UPI'
          };
          
          // Mask the buyer email for privacy
          const [username, domain] = email.split('@');
          const maskedEmail = `${username.charAt(0)}${'*'.repeat(username.length - 2)}${username.charAt(username.length - 1)}@${domain}`;
          
          const saleWithId = {
            ...newSale,
            id: `sale-${Date.now()}`,
            maskedEmail,
            isNew: true
          };
          
          setLiveSales(prevSales => {
            // Keep only the last 5 sales
            const updatedSales = [saleWithId, ...prevSales].slice(0, 5);
            return updatedSales;
          });
          
          // Update the isNew flag after 3 seconds
          setTimeout(() => {
            setLiveSales(prevSales => 
              prevSales.map(sale => 
                sale.id === saleWithId.id ? { ...sale, isNew: false } : sale
              )
            );
          }, 3000);
        }
      }, 15000); // Simulate a new sale every 15 seconds
      
      return () => clearInterval(simulateSaleInterval);
    }
  }, [isLoggedIn, products]);

  // Handle login
  const handleLogin = async (email, password) => {
    setLoading(true);
    try {
      // In a real app, this would be an API call
      const response = await fetch(`https://www.sitebrew.ai/api/suZQ0T/auth/login`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          document: { email, password }
        })
      });
      
      if (!response.ok) {
        throw new Error('Invalid credentials');
      }
      
      const data = await response.json();
      
      // Store token in localStorage
      localStorage.setItem('token', data.token || 'dummy-token');
      
      setIsLoggedIn(true);
      setCurrentView('dashboard');
      showNotification('Login successful', 'success');
    } catch (err) {
      console.error('Login error:', err);
      showNotification(err.message, 'error');
      
      // For demo purposes, log in anyway
      localStorage.setItem('token', 'dummy-token');
      setIsLoggedIn(true);
      setCurrentView('dashboard');
    } finally {
      setLoading(false);
    }
  };

  // Handle signup
  const handleSignup = async (name, email, password) => {
    setLoading(true);
    try {
      // In a real app, this would be an API call
      const response = await fetch(`https://www.sitebrew.ai/api/suZQ0T/auth/register`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          document: { name, email, password }
        })
      });
      
      if (!response.ok) {
        throw new Error('Registration failed');
      }
      
      const data = await response.json();
      
      // Store token in localStorage
      localStorage.setItem('token', data.token || 'dummy-token');
      
      setIsLoggedIn(true);
      setCurrentView('dashboard');
      showNotification('Account created successfully', 'success');
    } catch (err) {
      console.error('Signup error:', err);
      showNotification(err.message, 'error');
      
      // For demo purposes, log in anyway
      localStorage.setItem('token', 'dummy-token');
      setIsLoggedIn(true);
      setCurrentView('dashboard');
    } finally {
      setLoading(false);
    }
  };

  // Handle logout
  const handleLogout = () => {
    localStorage.removeItem('token');
    setIsLoggedIn(false);
    setCurrentView('login');
    setUser(null);
    showNotification('Logged out successfully', 'success');
    
    // Disconnect WebSocket
    if (socketRef.current) {
      socketRef.current.disconnect();
    }
  };

  // Add new product
  const handleAddProduct = async (productData) => {
    setLoading(true);
    try {
      // In a real app, this would be an API call
      const response = await fetch(`https://www.sitebrew.ai/api/suZQ0T/products`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${localStorage.getItem('token')}`
        },
        body: JSON.stringify({
          document: {
            ...productData,
            downloads: 0,
            revenue: 0,
            createdAt: new Date().toISOString().split('T')[0]
          }
        })
      });
      
      if (!response.ok) {
        throw new Error('Failed to add product');
      }
      
      const data = await response.json();
      
      // Add the new product to the state
      const newProduct = {
        _id: data.document._id || `prod${products.length + 1}`,
        ...productData,
        downloads: 0,
        revenue: 0,
        createdAt: new Date().toISOString().split('T')[0]
      };
      
      setProducts([...products, newProduct]);
      setCurrentView('dashboard');
      showNotification('Product added successfully', 'success');
    } catch (err) {
      console.error('Error adding product:', err);
      showNotification(err.message, 'error');
      
      // For demo purposes, add the product anyway
      const newProduct = {
        _id: `prod${products.length + 1}`,
        ...productData,
        downloads: 0,
        revenue: 0,
        createdAt: new Date().toISOString().split('T')[0]
      };
      
      setProducts([...products, newProduct]);
      setCurrentView('dashboard');
    } finally {
      setLoading(false);
    }
  };

  // Update product
  const handleUpdateProduct = async (productId, updatedData) => {
    setLoading(true);
    try {
      // In a real app, this would be an API call
      const response = await fetch(`https://www.sitebrew.ai/api/suZQ0T/products`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${localStorage.getItem('token')}`
        },
        body: JSON.stringify({
          document: {
            _id: productId,
            ...updatedData
          }
        })
      });
      
      if (!response.ok) {
        throw new Error('Failed to update product');
      }
      
      // Update the product in the state
      setProducts(products.map(product => 
        product._id === productId ? { ...product, ...updatedData } : product
      ));
      
      setCurrentView('products');
      showNotification('Product updated successfully', 'success');
    } catch (err) {
      console.error('Error updating product:', err);
      showNotification(err.message, 'error');
      
      // For demo purposes, update the product anyway
      setProducts(products.map(product => 
        product._id === productId ? { ...product, ...updatedData } : product
      ));
      
      setCurrentView('products');
    } finally {
      setLoading(false);
    }
  };

  // Delete product
  const handleDeleteProduct = async (productId) => {
    if (!window.confirm('Are you sure you want to delete this product?')) {
      return;
    }
    
    setLoading(true);
    try {
      // In a real app, this would be an API call
      const response = await fetch(`https://www.sitebrew.ai/api/suZQ0T/products`, {
        method: 'DELETE',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${localStorage.getItem('token')}`
        },
        body: JSON.stringify({
          document: {
            _id: productId
          }
        })
      });
      
      if (!response.ok) {
        throw new Error('Failed to delete product');
      }
      
      // Remove the product from the state
      setProducts(products.filter(product => product._id !== productId));
      showNotification('Product deleted successfully', 'success');
    } catch (err) {
      console.error('Error deleting product:', err);
      showNotification(err.message, 'error');
      
      // For demo purposes, delete the product anyway
      setProducts(products.filter(product => product._id !== productId));
    } finally {
      setLoading(false);
    }
  };

  // Update user profile
  const handleUpdateProfile = async (profileData) => {
    setLoading(true);
    try {
      // In a real app, this would be an API call
      const response = await fetch(`https://www.sitebrew.ai/api/suZQ0T/users`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${localStorage.getItem('token')}`
        },
        body: JSON.stringify({
          document: {
            _id: user._id,
            ...profileData
          }
        })
      });
      
      if (!response.ok) {
        throw new Error('Failed to update profile');
      }
      
      // Update the user in the state
      setUser({ ...user, ...profileData });
      showNotification('Profile updated successfully', 'success');
    } catch (err) {
      console.error('Error updating profile:', err);
      showNotification(err.message, 'error');
      
      // For demo purposes, update the profile anyway
      setUser({ ...user, ...profileData });
    } finally {
      setLoading(false);
    }
  };

  // Generate share link for a product
  const generateShareLink = (productId) => {
    return `${window.location.origin}/product/${productId}`;
  };

  // Show notification
  const showNotification = (message, type = 'info') => {
    setNotification({ message, type });
    
    // Auto-hide notification after 3 seconds
    setTimeout(() => {
      setNotification(null);
    }, 3000);
  };

  // Toggle sidebar on mobile
  const toggleMobileMenu = () => {
    setMobileMenuOpen(!mobileMenuOpen);
  };

  // Render appropriate view based on state
  const renderView = () => {
    if (!isLoggedIn) {
      return currentView === 'login' 
        ? <LoginView onLogin={handleLogin} onSwitchToSignup={() => setCurrentView('signup')} loading={loading} />
        : <SignupView onSignup={handleSignup} onSwitchToLogin={() => setCurrentView('login')} loading={loading} />;
    }

    switch (currentView) {
      case 'dashboard':
        return <DashboardView 
                products={products} 
                analytics={analytics} 
                liveSales={liveSales}
                onAddProduct={() => setCurrentView('addProduct')} 
                onDeleteProduct={handleDeleteProduct}
                onShareProduct={(productId) => {
                  const link = generateShareLink(productId);
                  navigator.clipboard.writeText(link);
                  showNotification('Link copied to clipboard', 'success');
                }}
                loading={loading}
              />;
      case 'products':
        return <ProductsView 
                products={products} 
                onAddProduct={() => setCurrentView('addProduct')} 
                onDeleteProduct={handleDeleteProduct}
                onEditProduct={(productId) => {
                  const product = products.find(p => p._id === productId);
                  if (product) {
                    setCurrentView('editProduct');
                    // In a real app, you would store the product to edit in state
                  }
                }}
                onShareProduct={(productId) => {
                  const link = generateShareLink(productId);
                  navigator.clipboard.writeText(link);
                  showNotification('Link copied to clipboard', 'success');
                }}
                loading={loading}
              />;
      case 'analytics':
        return <AnalyticsView analytics={analytics} products={products} loading={loading} />;
      case 'settings':
        return <SettingsView user={user} onUpdateProfile={handleUpdateProfile} loading={loading} />;
      case 'addProduct':
        return <AddProductView onAddProduct={handleAddProduct} onCancel={() => setCurrentView('dashboard')} loading={loading} />;
      case 'editProduct':
        return <EditProductView 
                product={products.find(p => p._id === 'prod1')} // In a real app, you would use the selected product
                onUpdateProduct={handleUpdateProduct} 
                onCancel={() => setCurrentView('products')} 
                loading={loading}
              />;
      default:
        return <DashboardView 
                products={products} 
                analytics={analytics} 
                liveSales={liveSales}
                onAddProduct={() => setCurrentView('addProduct')} 
                onDeleteProduct={handleDeleteProduct}
                loading={loading}
              />;
    }
  };

  // If not logged in, show login/signup page
  if (!isLoggedIn) {
    return (
      <div className="min-h-screen bg-gray-50 flex flex-col font-['Inter',_sans-serif]">
        <header className="bg-white shadow-sm py-4">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center">
            <div className="flex items-center">
              <img src="https://assets.sitebrew.ai/generated-1747594437740.webp" alt="InstaSell Logo" className="h-10" />
              <span className="ml-2 text-xl font-semibold text-gray-900">InstaSell</span>
            </div>
          </div>
        </header>
        <main className="flex-grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
          {renderView()}
        </main>
        <Footer />
        
        {/* Notification */}
        {notification && (
          <div className={`fixed bottom-4 right-4 px-4 py-3 rounded-lg shadow-lg ${
            notification.type === 'success' ? 'bg-green-500' : 
            notification.type === 'error' ? 'bg-red-500' : 
            'bg-blue-500'
          } text-white flex items-center`}>
            {notification.type === 'success' ? <Check className="mr-2 h-5 w-5" /> : 
             notification.type === 'error' ? <AlertCircle className="mr-2 h-5 w-5" /> : 
             <Bell className="mr-2 h-5 w-5" />}
            <span>{notification.message}</span>
          </div>
        )}
      </div>
    );
  }

  // Main app layout for logged in users
  return (
    <div className="min-h-screen bg-gray-50 flex flex-col font-['Inter',_sans-serif]">
      {/* Header */}
      <header className="bg-white shadow-sm z-10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center">
              {/* Mobile menu button */}
              <button 
                className="md:hidden mr-2 p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none"
                onClick={toggleMobileMenu}
              >
                {mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
              </button>
              
              {/* Logo */}
              <div className="flex items-center">
                <img src="https://assets.sitebrew.ai/generated-1747594437740.webp" alt="InstaSell Logo" className="h-8" />
                <span className="ml-2 text-xl font-semibold text-gray-900 hidden sm:inline-block">InstaSell</span>
              </div>
            </div>
            
            {/* Right side header items */}
            <div className="flex items-center space-x-4">
              <button className="p-2 rounded-full text-gray-400 hover:text-gray-500 hover:bg-gray-100 relative">
                <Bell size={20} />
                <span className="absolute top-0 right-0 block h-2 w-2 rounded-full bg-red-500"></span>
              </button>
              <button className="p-2 rounded-full text-gray-400 hover:text-gray-500 hover:bg-gray-100">
                <HelpCircle size={20} />
              </button>
              <div className="flex items-center">
                <div className="h-8 w-8 rounded-full bg-purple-600 flex items-center justify-center text-white">
                  {user?.profilePicture ? (
                    <img src={user.profilePicture} alt={user.name} className="h-8 w-8 rounded-full" />
                  ) : (
                    <User size={16} />
                  )}
                </div>
                <span className="ml-2 text-sm font-medium text-gray-700 hidden sm:inline-block">
                  {user?.name || 'User'}
                </span>
              </div>
            </div>
          </div>
        </div>
      </header>

      <div className="flex flex-grow">
        {/* Mobile sidebar */}
        {mobileMenuOpen && (
          <div className="fixed inset-0 z-40 flex md:hidden">
            <div className="fixed inset-0 bg-gray-600 bg-opacity-75" onClick={toggleMobileMenu}></div>
            <div className="relative flex-1 flex flex-col max-w-xs w-full bg-white">
              <div className="absolute top-0 right-0 -mr-12 pt-2">
                <button
                  className="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
                  onClick={toggleMobileMenu}
                >
                  <span className="sr-only">Close sidebar</span>
                  <X className="h-6 w-6 text-white" />
                </button>
              </div>
              <div className="flex-1 h-0 pt-5 pb-4 overflow-y-auto">
                <div className="flex-shrink-0 flex items-center px-4">
                  <img src="https://assets.sitebrew.ai/generated-1747594437740.webp" alt="InstaSell Logo" className="h-8" />
                  <span className="ml-2 text-xl font-semibold text-gray-900">InstaSell</span>
                </div>
                <nav className="mt-5 px-2 space-y-1">
                  <SidebarLink 
                    icon={<Home size={20} />} 
                    text="Dashboard" 
                    active={currentView === 'dashboard'} 
                    onClick={() => { setCurrentView('dashboard'); toggleMobileMenu(); }} 
                  />
                  <SidebarLink 
                    icon={<Package size={20} />} 
                    text="Products" 
                    active={currentView === 'products'} 
                    onClick={() => { setCurrentView('products'); toggleMobileMenu(); }} 
                  />
                  <SidebarLink 
                    icon={<BarChart2 size={20} />} 
                    text="Analytics" 
                    active={currentView === 'analytics'} 
                    onClick={() => { setCurrentView('analytics'); toggleMobileMenu(); }} 
                  />
                  <SidebarLink 
                    icon={<Settings size={20} />} 
                    text="Settings" 
                    active={currentView === 'settings'} 
                    onClick={() => { setCurrentView('settings'); toggleMobileMenu(); }} 
                  />
                </nav>
              </div>
              <div className="flex-shrink-0 flex border-t border-gray-200 p-4">
                <button 
                  className="flex items-center text-red-500 hover:text-red-700"
                  onClick={handleLogout}
                >
                  <LogOut className="mr-3 h-5 w-5" />
                  <span>Logout</span>
                </button>
              </div>
            </div>
          </div>
        )}

        {/* Desktop sidebar */}
        <div className="hidden md:flex md:flex-shrink-0">
          <div className="flex flex-col w-64">
            <div className="flex flex-col h-0 flex-1 border-r border-gray-200 bg-white">
              <div className="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
                <nav className="mt-5 flex-1 px-2 bg-white space-y-1">
                  <SidebarLink 
                    icon={<Home size={20} />} 
                    text="Dashboard" 
                    active={currentView === 'dashboard'} 
                    onClick={() => setCurrentView('dashboard')} 
                  />
                  <SidebarLink 
                    icon={<Package size={20} />} 
                    text="Products" 
                    active={currentView === 'products'} 
                    onClick={() => setCurrentView('products')} 
                  />
                  <SidebarLink 
                    icon={<BarChart2 size={20} />} 
                    text="Analytics" 
                    active={currentView === 'analytics'} 
                    onClick={() => setCurrentView('analytics')} 
                  />
                  <SidebarLink 
                    icon={<Settings size={20} />} 
                    text="Settings" 
                    active={currentView === 'settings'} 
                    onClick={() => setCurrentView('settings')} 
                  />
                </nav>
              </div>
              <div className="flex-shrink-0 flex border-t border-gray-200 p-4">
                <button 
                  className="flex items-center text-red-500 hover:text-red-700"
                  onClick={handleLogout}
                >
                  <LogOut className="mr-3 h-5 w-5" />
                  <span>Logout</span>
                </button>
              </div>
            </div>
          </div>
        </div>

        {/* Main content */}
        <main className="flex-1 relative overflow-y-auto focus:outline-none bg-gray-50">
          <div className="py-6">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
              {loading ? (
                <div className="flex justify-center items-center h-64">
                  <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-purple-500"></div>
                </div>
              ) : (
                renderView()
              )}
            </div>
          </div>
        </main>
      </div>
      
      {/* Notification */}
      {notification && (
        <div className={`fixed bottom-4 right-4 px-4 py-3 rounded-lg shadow-lg ${
          notification.type === 'success' ? 'bg-green-500' : 
          notification.type === 'error' ? 'bg-red-500' : 
          'bg-blue-500'
        } text-white flex items-center z-50`}>
          {notification.type === 'success' ? <Check className="mr-2 h-5 w-5" /> : 
           notification.type === 'error' ? <AlertCircle className="mr-2 h-5 w-5" /> : 
           <Bell className="mr-2 h-5 w-5" />}
          <span>{notification.message}</span>
        </div>
      )}
    </div>
  );
}

// Sidebar Link Component
const SidebarLink = ({ icon, text, active, onClick }) => {
  return (
    <button
      className={`group flex items-center px-2 py-2 text-base font-medium rounded-md w-full ${
        active 
          ? 'bg-purple-50 text-purple-700' 
          : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
      }`}
      onClick={onClick}
    >
      <div className={`mr-4 ${active ? 'text-purple-700' : 'text-gray-400 group-hover:text-gray-500'}`}>
        {icon}
      </div>
      {text}
    </button>
  );
};

// Login View Component
const LoginView = ({ onLogin, onSwitchToSignup, loading }) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    setError('');
    
    if (!email || !password) {
      setError('Please enter both email and password');
      return;
    }
    
    onLogin(email, password);
  };

  return (
    <div className="max-w-md w-full space-y-8 bg-white p-10 rounded-xl shadow-md">
      <div className="text-center">
        <h2 className="mt-6 text-3xl font-extrabold text-gray-900">Sign in to your account</h2>
        <p className="mt-2 text-sm text-gray-600">
          Or{' '}
          <button onClick={onSwitchToSignup} className="font-medium text-purple-600 hover:text-purple-500">
            create a new account
          </button>
        </p>
      </div>
      
      {error && (
        <div className="bg-red-50 border-l-4 border-red-500 p-4">
          <div className="flex">
            <div className="flex-shrink-0">
              <AlertCircle className="h-5 w-5 text-red-500" />
            </div>
            <div className="ml-3">
              <p className="text-sm text-red-700">{error}</p>
            </div>
          </div>
        </div>
      )}
      
      <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
        <div className="rounded-md shadow-sm -space-y-px">
          <div>
            <label htmlFor="email-address" className="sr-only">Email address</label>
            <input
              id="email-address"
              name="email"
              type="email"
              autoComplete="email"
              required
              className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm"
              placeholder="Email address"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              disabled={loading}
            />
          </div>
          <div>
            <label htmlFor="password" className="sr-only">Password</label>
            <input
              id="password"
              name="password"
              type="password"
              autoComplete="current-password"
              required
              className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm"
              placeholder="Password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              disabled={loading}
            />
          </div>
        </div>

        <div className="flex items-center justify-between">
          <div className="flex items-center">
            <input
              id="remember-me"
              name="remember-me"
              type="checkbox"
              className="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"
            />
            <label htmlFor="remember-me" className="ml-2 block text-sm text-gray-900">
              Remember me
            </label>
          </div>

          <div className="text-sm">
            <a href="#" className="font-medium text-purple-600 hover:text-purple-500">
              Forgot your password?
            </a>
          </div>
        </div>

        <div>
          <button
            type="submit"
            className={`group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 ${
              loading ? 'opacity-70 cursor-not-allowed' : ''
            }`}
            disabled={loading}
          >
            {loading ? (
              <span className="absolute left-0 inset-y-0 flex items-center pl-3">
                <div className="animate-spin h-5 w-5 border-2 border-white border-opacity-50 rounded-full border-t-transparent"></div>
              </span>
            ) : (
              <span className="absolute left-0 inset-y-0 flex items-center pl-3">
                <svg className="h-5 w-5 text-purple-500 group-hover:text-purple-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <path fillRule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clipRule="evenodd" />
                </svg>
              </span>
            )}
            {loading ? 'Signing in...' : 'Sign in'}
          </button>
        </div>
      </form>
      
      {/* Demo credentials */}
      <div className="mt-4 text-center">
        <p className="text-xs text-gray-500">Demo credentials: demo@example.com / password</p>
      </div>
    </div>
  );
};

// Signup View Component
const SignupView = ({ onSignup, onSwitchToLogin, loading }) => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    setError('');
    
    if (!name || !email || !password) {
      setError('Please fill in all required fields');
      return;
    }
    
    if (password !== confirmPassword) {
      setError('Passwords do not match');
      return;
    }
    
    onSignup(name, email, password);
  };

  return (
    <div className="max-w-md w-full space-y-8 bg-white p-10 rounded-xl shadow-md">
      <div className="text-center">
        <h2 className="mt-6 text-3xl font-extrabold text-gray-900">Create your account</h2>
        <p className="mt-2 text-sm text-gray-600">
          Or{' '}
          <button onClick={onSwitchToLogin} className="font-medium text-purple-600 hover:text-purple-500">
            sign in to your existing account
          </button>
        </p>
      </div>
      
      {error && (
        <div className="bg-red-50 border-l-4 border-red-500 p-4">
          <div className="flex">
            <div className="flex-shrink-0">
              <AlertCircle className="h-5 w-5 text-red-500" />
            </div>
            <div className="ml-3">
              <p className="text-sm text-red-700">{error}</p>
            </div>
          </div>
        </div>
      )}
      
      <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
        <div className="rounded-md shadow-sm -space-y-px">
          <div>
            <label htmlFor="name" className="sr-only">Full name</label>
            <input
              id="name"
              name="name"
              type="text"
              autoComplete="name"
              required
              className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm"
              placeholder="Full name"
              value={name}
              onChange={(e) => setName(e.target.value)}
              disabled={loading}
            />
          </div>
          <div>
            <label htmlFor="email-address" className="sr-only">Email address</label>
            <input
              id="email-address"
              name="email"
              type="email"
              autoComplete="email"
              required
              className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm"
              placeholder="Email address"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              disabled={loading}
            />
          </div>
          <div>
            <label htmlFor="password" className="sr-only">Password</label>
            <input
              id="password"
              name="password"
              type="password"
              autoComplete="new-password"
              required
              className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm"
              placeholder="Password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              disabled={loading}
            />
          </div>
          <div>
            <label htmlFor="confirm-password" className="sr-only">Confirm password</label>
            <input
              id="confirm-password"
              name="confirm-password"
              type="password"
              autoComplete="new-password"
              required
              className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm"
              placeholder="Confirm password"
              value={confirmPassword}
              onChange={(e) => setConfirmPassword(e.target.value)}
              disabled={loading}
            />
          </div>
        </div>

        <div>
          <button
            type="submit"
            className={`group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 ${
              loading ? 'opacity-70 cursor-not-allowed' : ''
            }`}
            disabled={loading}
          >
            {loading ? (
              <span className="absolute left-0 inset-y-0 flex items-center pl-3">
                <div className="animate-spin h-5 w-5 border-2 border-white border-opacity-50 rounded-full border-t-transparent"></div>
              </span>
            ) : (
              <span className="absolute left-0 inset-y-0 flex items-center pl-3">
                <svg className="h-5 w-5 text-purple-500 group-hover:text-purple-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <path fillRule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clipRule="evenodd" />
                </svg>
              </span>
            )}
            {loading ? 'Creating account...' : 'Create account'}
          </button>
        </div>
      </form>
    </div>
  );
};

// Live Sales Component
const LiveSalesPanel = ({ sales }) => {
  return (
    <div className="bg-white shadow rounded-lg overflow-hidden">
      <div className="px-4 py-5 sm:px-6 border-b border-gray-200 flex justify-between items-center">
        <div className="flex items-center">
          <Radio className="h-5 w-5 text-red-500 mr-2 animate-pulse" />
          <h3 className="text-lg leading-6 font-medium text-gray-900">Live Sales</h3>
        </div>
        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
          Live
        </span>
      </div>
      <div className="bg-white overflow-hidden">
        {sales.length > 0 ? (
          <ul className="divide-y divide-gray-200">
            {sales.map((sale) => (
              <li 
                key={sale.id} 
                className={`px-4 py-4 sm:px-6 transition-all duration-500 ease-in-out ${
                  sale.isNew ? 'bg-green-50 animate-fadeIn' : ''
                }`}
              >
                <div className="flex items-center justify-between">
                  <div className="flex items-center">
                    <div className="flex-shrink-0">
                      <div className="h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center">
                        <DollarSign className="h-5 w-5 text-purple-600" />
                      </div>
                    </div>
                    <div className="ml-4">
                      <div className="text-sm font-medium text-gray-900">
                        {sale.productTitle}
                      </div>
                      <div className="text-sm text-gray-500">
                        {sale.maskedEmail}
                      </div>
                    </div>
                  </div>
                  <div className="flex items-center">
                    <div className="text-sm font-medium text-gray-900 mr-4">
                      ₹{(sale.amount / 100).toFixed(2)}
                    </div>
                    <div className="text-xs text-gray-500">
                      {new Date(sale.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                    </div>
                  </div>
                </div>
              </li>
            ))}
          </ul>
        ) : (
          <div className="text-center py-12">
            <img src="https://assets.sitebrew.ai/generated-1747594435906.webp" alt="No sales" className="mx-auto h-24" />
            <h3 className="mt-4 text-lg font-medium text-gray-900">No live sales yet</h3>
            <p className="mt-1 text-sm text-gray-500">Sales will appear here in real-time as they happen.</p>
          </div>
        )}
      </div>
      <style jsx>{`
        @keyframes fadeIn {
          0% { opacity: 0; transform: translateY(-10px); }
          100% { opacity: 1; transform: translateY(0); }
        }
        .animate-fadeIn {
          animation: fadeIn 0.5s ease-out;
        }
      `}</style>
    </div>
  );
};

// Dashboard View Component
const DashboardView = ({ products, analytics, liveSales, onAddProduct, onDeleteProduct, onShareProduct, loading }) => {
  // Calculate total revenue and downloads
  const totalRevenue = products.reduce((sum, product) => sum + product.revenue, 0);
  const totalDownloads = products.reduce((sum, product) => sum + product.downloads, 0);
  
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
        <button
          onClick={onAddProduct}
          className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
        >
          <Plus size={16} className="mr-2" />
          Add Product
        </button>
      </div>

      {/* Stats Overview */}
      <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
        <StatCard 
          title="Total Revenue" 
          value={`₹${(totalRevenue / 100).toLocaleString()}`} 
          change="+12.5%" 
          icon={<DollarSign className="h-6 w-6 text-teal-500" />} 
        />
        <StatCard 
          title="Total Downloads" 
          value={totalDownloads.toString()} 
          change="+7.2%" 
          icon={<Download className="h-6 w-6 text-teal-500" />} 
        />
        <StatCard 
          title="Conversion Rate" 
          value="3.2%" 
          change="+2.1%" 
          icon={<BarChart2 className="h-6 w-6 text-teal-500" />} 
        />
        <StatCard 
          title="Active Products" 
          value={products.length.toString()} 
          change="+1" 
          icon={<Package className="h-6 w-6 text-teal-500" />} 
        />
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2 space-y-6">
          {/* Recent Products */}
          <div className="bg-white shadow rounded-lg overflow-hidden">
            <div className="px-4 py-5 sm:px-6 border-b border-gray-200">
              <h3 className="text-lg leading-6 font-medium text-gray-900">Recent Products</h3>
            </div>
            <div className="bg-white overflow-hidden">
              {products.length > 0 ? (
                <ul className="divide-y divide-gray-200">
                  {products.slice(0, 3).map((product) => (
                    <li key={product._id} className="px-4 py-4 sm:px-6">
                      <div className="flex items-center space-x-4">
                        <div className="flex-shrink-0 h-16 w-16 rounded-md overflow-hidden">
                          <img src={product.image} alt={product.title} className="h-full w-full object-cover" />
                        </div>
                        <div className="flex-1 min-w-0">
                          <p className="text-sm font-medium text-gray-900 truncate">{product.title}</p>
                          <p className="text-sm text-gray-500 truncate">{product.description}</p>
                          <p className="mt-1 flex items-center text-sm text-gray-500">
                            <span className="truncate">₹{(product.price / 100).toFixed(2)} • {product.downloads} downloads</span>
                          </p>
                        </div>
                        <div className="flex space-x-2">
                          <button 
                            className="p-2 text-gray-400 hover:text-purple-500"
                            onClick={() => onShareProduct(product._id)}
                            title="Copy share link"
                          >
                            <Share2 size={18} />
                          </button>
                          <button className="p-2 text-gray-400 hover:text-blue-500">
                            <Edit size={18} />
                          </button>
                          <button 
                            className="p-2 text-gray-400 hover:text-red-500"
                            onClick={() => onDeleteProduct(product._id)}
                            title="Delete product"
                          >
                            <Trash2 size={18} />
                          </button>
                        </div>
                      </div>
                    </li>
                  ))}
                </ul>
              ) : (
                <div className="text-center py-12">
                  <img src="https://assets.sitebrew.ai/generated-1747594435906.webp" alt="No products" className="mx-auto h-24" />
                  <h3 className="mt-4 text-lg font-medium text-gray-900">No products yet</h3>
                  <p className="mt-1 text-sm text-gray-500">Get started by creating your first digital product.</p>
                  <div className="mt-6">
                    <button
                      onClick={onAddProduct}
                      className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
                    >
                      <Plus size={16} className="mr-2" />
                      Add Product
                    </button>
                  </div>
                </div>
              )}
            </div>
          </div>

          {/* Recent Sales */}
          <div className="bg-white shadow rounded-lg overflow-hidden">
            <div className="px-4 py-5 sm:px-6 border-b border-gray-200">
              <h3 className="text-lg leading-6 font-medium text-gray-900">Recent Sales</h3>
            </div>
            <div className="bg-white overflow-hidden">
              {analytics.recentSales && analytics.recentSales.length > 0 ? (
                <ul className="divide-y divide-gray-200">
                  {analytics.recentSales.map((sale) => (
                    <li key={sale._id} className="px-4 py-4 sm:px-6">
                      <div className="flex items-center justify-between">
                        <div className="flex items-center">
                          <div className="flex-shrink-0">
                            <div className="h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center">
                              <DollarSign className="h-5 w-5 text-purple-600" />
                            </div>
                          </div>
                          <div className="ml-4">
                            <div className="text-sm font-medium text-gray-900">
                              {sale.productTitle}
                            </div>
                            <div className="text-sm text-gray-500">
                              {sale.buyerEmail}
                            </div>
                          </div>
                        </div>
                        <div className="flex items-center">
                          <div className="text-sm font-medium text-gray-900 mr-4">
                            ₹{(sale.amount / 100).toFixed(2)}
                          </div>
                          <div className="text-sm text-gray-500">
                            {new Date(sale.date).toLocaleDateString()}
                          </div>
                        </div>
                      </div>
                    </li>
                  ))}
                </ul>
              ) : (
                <div className="text-center py-12">
                  <img src="https://assets.sitebrew.ai/generated-1747594435906.webp" alt="No sales" className="mx-auto h-24" />
                  <h3 className="mt-4 text-lg font-medium text-gray-900">No sales yet</h3>
                  <p className="mt-1 text-sm text-gray-500">Share your products to start making sales.</p>
                </div>
              )}
            </div>
          </div>
        </div>

        <div className="space-y-6">
          {/* Live Sales Panel */}
          <LiveSalesPanel sales={liveSales} />

          {/* Traffic Sources */}
          <div className="bg-white shadow rounded-lg overflow-hidden">
            <div className="px-4 py-5 sm:px-6 border-b border-gray-200">
              <h3 className="text-lg leading-6 font-medium text-gray-900">Traffic Sources</h3>
            </div>
            <div className="px-4 py-5 sm:p-6">
              <div className="space-y-4">
                <TrafficSourceBar platform="WhatsApp" percentage={analytics.trafficSources.whatsapp} color="bg-green-500" />
                <TrafficSourceBar platform="Instagram" percentage={analytics.trafficSources.instagram} color="bg-pink-500" />
                <TrafficSourceBar platform="Facebook" percentage={analytics.trafficSources.facebook} color="bg-blue-500" />
                <TrafficSourceBar platform="Twitter" percentage={analytics.trafficSources.twitter} color="bg-blue-400" />
                <TrafficSourceBar platform="Other" percentage={analytics.trafficSources.other} color="bg-gray-400" />
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Quick Actions */}
      <div className="bg-white shadow rounded-lg overflow-hidden">
        <div className="px-4 py-5 sm:px-6 border-b border-gray-200">
          <h3 className="text-lg leading-6 font-medium text-gray-900">Quick Actions</h3>
        </div>
        <div className="px-4 py-5 sm:p-6">
          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
            <QuickActionCard 
              title="Share on WhatsApp" 
              description="Share your products directly to WhatsApp contacts" 
              icon={<Smartphone className="h-6 w-6 text-green-500" />} 
              actionText="Share Now"
              onClick={() => {}}
            />
            <QuickActionCard 
              title="Create Instagram Post" 
              description="Generate a ready-to-post image for Instagram" 
              icon={<Image className="h-6 w-6 text-pink-500" />} 
              actionText="Create Post"
              onClick={() => {}}
            />
            <QuickActionCard 
              title="View Sales Report" 
              description="Download a detailed sales report" 
              icon={<FileText className="h-6 w-6 text-blue-500" />} 
              actionText="Download"
              onClick={() => {}}
            />
          </div>
        </div>
      </div>
    </div>
  );
};

// Image component (since it's not imported from lucide-react)
const Image = ({ className }) => (
  <svg 
    xmlns="http://www.w3.org/2000/svg" 
    width="24" 
    height="24" 
    viewBox="0 0 24 24" 
    fill="none" 
    stroke="currentColor" 
    strokeWidth="2" 
    strokeLinecap="round" 
    strokeLinejoin="round" 
    className={className}
  >
    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
    <circle cx="8.5" cy="8.5" r="1.5"></circle>
    <polyline points="21 15 16 10 5 21"></polyline>
  </svg>
);

// Quick Action Card Component
const QuickActionCard = ({ title, description, icon, actionText, onClick }) => {
  return (
    <div className="bg-white overflow-hidden border border-gray-200 rounded-lg hover:shadow-md transition-shadow duration-200">
      <div className="p-5">
        <div className="flex items-center">
          <div className="flex-shrink-0">
            {icon}
          </div>
          <div className="ml-5 w-0 flex-1">
            <h3 className="text-lg font-medium text-gray-900">{title}</h3>
            <p className="mt-1 text-sm text-gray-500">{description}</p>
          </div>
        </div>
        <div className="mt-4">
          <button
            type="button"
            className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-purple-700 bg-purple-100 hover:bg-purple-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
            onClick={onClick}
          >
            {actionText}
            <ArrowRight className="ml-2 h-4 w-4" />
          </button>
        </div>
      </div>
    </div>
  );
};

// Stat Card Component
const StatCard = ({ title, value, change, icon }) => {
  const isPositive = change.startsWith('+');
  
  return (
    <div className="bg-white overflow-hidden shadow rounded-lg">
      <div className="p-5">
        <div className="flex items-center">
          <div className="flex-shrink-0">
            {icon}
          </div>
          <div className="ml-5 w-0 flex-1">
            <dl>
              <dt className="text-sm font-medium text-gray-500 truncate">{title}</dt>
              <dd>
                <div className="text-lg font-medium text-gray-900">{value}</div>
              </dd>
            </dl>
          </div>
        </div>
      </div>
      <div className={`bg-gray-50 px-5 py-3 ${isPositive ? 'text-green-600' : 'text-red-600'}`}>
        <div className="text-sm flex items-center">
          {isPositive ? (
            <svg className="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 10l7-7m0 0l7 7m-7-7v18" />
            </svg>
          ) : (
            <svg className="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
            </svg>
          )}
          {change} from last month
        </div>
      </div>
    </div>
  );
};

// Traffic Source Bar Component
const TrafficSourceBar = ({ platform, percentage, color }) => {
  return (
    <div>
      <div className="flex justify-between items-center mb-1">
        <div className="text-sm font-medium text-gray-700">{platform}</div>
        <div className="text-sm font-medium text-gray-700">{percentage}%</div>
      </div>
      <div className="overflow-hidden h-2 text-xs flex rounded bg-gray-200">
        <div style={{ width: `${percentage}%` }} className={`${color} rounded`}></div>
      </div>
    </div>
  );
};

// Products View Component
const ProductsView = ({ products, onAddProduct, onDeleteProduct, onEditProduct, onShareProduct, loading }) => {
  const [searchTerm, setSearchTerm] = useState('');
  const [sortBy, setSortBy] = useState('newest');
  const [viewMode, setViewMode] = useState('grid'); // 'grid' or 'list'

  // Filter products based on search term
  const filteredProducts = products.filter(product => 
    product.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
    product.description.toLowerCase().includes(searchTerm.toLowerCase())
  );

  // Sort products based on selected option
  const sortedProducts = [...filteredProducts].sort((a, b) => {
    switch (sortBy) {
      case 'newest':
        return new Date(b.createdAt) - new Date(a.createdAt);
      case 'oldest':
        return new Date(a.createdAt) - new Date(b.createdAt);
      case 'price-high':
        return b.price - a.price;
      case 'price-low':
        return a.price - b.price;
      case 'downloads':
        return b.downloads - a.downloads;
      default:
        return 0;
    }
  });

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold text-gray-900">Products</h1>
        <button
          onClick={onAddProduct}
          className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
        >
          <Plus size={16} className="mr-2" />
          Add Product
        </button>
      </div>

      {/* Search and Filter */}
      <div className="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
        <div className="relative flex-grow">
          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <Search className="h-5 w-5 text-gray-400" />
          </div>
          <input
            type="text"
            className="focus:ring-purple-500 focus:border-purple-500 block w-full pl-10 sm:text-sm border-gray-300 rounded-md"
            placeholder="Search products"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
        </div>
        <div className="flex space-x-2">
          <div className="w-full sm:w-48">
            <select
              className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm rounded-md"
              value={sortBy}
              onChange={(e) => setSortBy(e.target.value)}
            >
              <option value="newest">Newest First</option>
              <option value="oldest">Oldest First</option>
              <option value="price-high">Price: High to Low</option>
              <option value="price-low">Price: Low to High</option>
              <option value="downloads">Most Downloads</option>
            </select>
          </div>
          <div className="flex border border-gray-300 rounded-md">
            <button
              className={`px-3 py-2 ${viewMode === 'grid' ? 'bg-gray-100 text-gray-900' : 'text-gray-500'}`}
              onClick={() => setViewMode('grid')}
              title="Grid view"
            >
              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
              </svg>
            </button>
            <button
              className={`px-3 py-2 ${viewMode === 'list' ? 'bg-gray-100 text-gray-900' : 'text-gray-500'}`}
              onClick={() => setViewMode('list')}
              title="List view"
            >
              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
              </svg>
            </button>
          </div>
        </div>
      </div>

      {/* Products List/Grid */}
      {sortedProducts.length > 0 ? (
        viewMode === 'grid' ? (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {sortedProducts.map((product) => (
              <div key={product._id} className="bg-white shadow rounded-lg overflow-hidden flex flex-col">
                <div className="h-48 overflow-hidden">
                  <img src={product.image} alt={product.title} className="w-full h-full object-cover" />
                </div>
                <div className="p-4 flex-grow">
                  <div className="flex justify-between items-start">
                    <h3 className="text-lg font-medium text-gray-900">{product.title}</h3>
                    <span className="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
                      ₹{(product.price / 100).toFixed(2)}
                    </span>
                  </div>
                  <p className="mt-2 text-sm text-gray-500 line-clamp-2">{product.description}</p>
                  <div className="mt-4 flex items-center text-sm text-gray-500">
                    <Download className="flex-shrink-0 mr-1.5 h-4 w-4 text-gray-400" />
                    <span>{product.downloads} downloads</span>
                    <DollarSign className="flex-shrink-0 ml-4 mr-1.5 h-4 w-4 text-gray-400" />
                    <span>₹{(product.revenue / 100).toLocaleString()}</span>
                  </div>
                </div>
                <div className="border-t border-gray-200 px-4 py-3 bg-gray-50 flex justify-between">
                  <div className="text-xs text-gray-500">
                    Created on {product.createdAt}
                  </div>
                  <div className="flex space-x-2">
                    <button 
                      className="p-1 text-gray-400 hover:text-purple-500"
                      onClick={() => onShareProduct(product._id)}
                      title="Copy share link"
                    >
                      <Share2 size={16} />
                    </button>
                    <button 
                      className="p-1 text-gray-400 hover:text-blue-500"
                      onClick={() => onEditProduct(product._id)}
                      title="Edit product"
                    >
                      <Edit size={16} />
                    </button>
                    <button 
                      className="p-1 text-gray-400 hover:text-red-500"
                      onClick={() => onDeleteProduct(product._id)}
                      title="Delete product"
                    >
                      <Trash2 size={16} />
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        ) : (
          <div className="bg-white shadow overflow-hidden sm:rounded-md">
            <ul className="divide-y divide-gray-200">
              {sortedProducts.map((product) => (
                <li key={product._id}>
                  <div className="px-4 py-4 sm:px-6">
                    <div className="flex items-center">
                      <div className="flex-shrink-0 h-16 w-16 rounded-md overflow-hidden">
                        <img src={product.image} alt={product.title} className="h-full w-full object-cover" />
                      </div>
                      <div className="ml-4 flex-1">
                        <div className="flex items-center justify-between">
                          <p className="text-sm font-medium text-purple-600 truncate">{product.title}</p>
                          <div className="ml-2 flex-shrink-0 flex">
                            <p className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                              ₹{(product.price / 100).toFixed(2)}
                            </p>
                          </div>
                        </div>
                        <div className="mt-2 sm:flex sm:justify-between">
                          <div className="sm:flex">
                            <p className="flex items-center text-sm text-gray-500">
                              <Download className="flex-shrink-0 mr-1.5 h-4 w-4 text-gray-400" />
                              {product.downloads} downloads
                            </p>
                            <p className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0 sm:ml-6">
                              <DollarSign className="flex-shrink-0 mr-1.5 h-4 w-4 text-gray-400" />
                              ₹{(product.revenue / 100).toLocaleString()} revenue
                            </p>
                          </div>
                          <div className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
                            <p>Created on {product.createdAt}</p>
                          </div>
                        </div>
                      </div>
                      <div className="ml-4 flex-shrink-0 flex space-x-2">
                        <button 
                          className="p-2 text-gray-400 hover:text-purple-500"
                          onClick={() => onShareProduct(product._id)}
                          title="Copy share link"
                        >
                          <Share2 size={18} />
                        </button>
                        <button 
                          className="p-2 text-gray-400 hover:text-blue-500"
                          onClick={() => onEditProduct(product._id)}
                          title="Edit product"
                        >
                          <Edit size={18} />
                        </button>
                        <button 
                          className="p-2 text-gray-400 hover:text-red-500"
                          onClick={() => onDeleteProduct(product._id)}
                          title="Delete product"
                        >
                          <Trash2 size={18} />
                        </button>
                      </div>
                    </div>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        )
      ) : (
        <div className="text-center py-12 bg-white shadow rounded-lg">
          <img src="https://assets.sitebrew.ai/generated-1747594435906.webp" alt="No products" className="mx-auto h-24" />
          <h3 className="mt-4 text-lg font-medium text-gray-900">No products found</h3>
          <p className="mt-1 text-sm text-gray-500">Try adjusting your search or filter to find what you're looking for.</p>
          {products.length === 0 && (
            <div className="mt-6">
              <button
                onClick={onAddProduct}
                className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
              >
                <Plus size={16} className="mr-2" />
                Add Product
              </button>
            </div>
          )}
        </div>
      )}
    </div>
  );
};

// Analytics View Component
const AnalyticsView = ({ analytics, products, loading }) => {
  const [dateRange, setDateRange] = useState('month'); // 'week', 'month', 'year'
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 5;
  
  // Calculate total revenue and downloads
  const totalRevenue = products.reduce((sum, product) => sum + product.revenue, 0);
  const totalDownloads = products.reduce((sum, product) => sum + product.downloads, 0);
  
  // Top performing products (by revenue)
  const topProducts = [...products]
    .sort((a, b) => b.revenue - a.revenue)
    .slice(0, 5);
  
  // Paginate recent sales
  const paginatedSales = analytics.recentSales 
    ? analytics.recentSales.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)
    : [];
  
  const totalPages = analytics.recentSales 
    ? Math.ceil(analytics.recentSales.length / itemsPerPage)
    : 0;

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold text-gray-900">Analytics</h1>
        <div className="inline-flex shadow-sm rounded-md">
          <button
            type="button"
            className={`relative inline-flex items-center px-4 py-2 rounded-l-md border border-gray-300 text-sm font-medium ${
              dateRange === 'week' ? 'bg-purple-50 text-purple-700 z-10' : 'bg-white text-gray-700'
            }`}
            onClick={() => setDateRange('week')}
          >
            Week
          </button>
          <button
            type="button"
            className={`relative inline-flex items-center px-4 py-2 border-t border-b border-gray-300 text-sm font-medium ${
              dateRange === 'month' ? 'bg-purple-50 text-purple-700 z-10' : 'bg-white text-gray-700'
            }`}
            onClick={() => setDateRange('month')}
          >
            Month
          </button>
          <button
            type="button"
            className={`relative inline-flex items-center px-4 py-2 rounded-r-md border border-gray-300 text-sm font-medium ${
              dateRange === 'year' ? 'bg-purple-50 text-purple-700 z-10' : 'bg-white text-gray-700'
            }`}
            onClick={() => setDateRange('year')}
          >
            Year
          </button>
        </div>
      </div>

      {/* Stats Overview */}
      <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
        <StatCard 
          title="Total Revenue" 
          value={`₹${(totalRevenue / 100).toLocaleString()}`} 
          change="+12.5%" 
          icon={<DollarSign className="h-6 w-6 text-teal-500" />} 
        />
        <StatCard 
          title="Total Downloads" 
          value={totalDownloads.toString()} 
          change="+7.2%" 
          icon={<Download className="h-6 w-6 text-teal-500" />} 
        />
        <StatCard 
          title="Conversion Rate" 
          value="3.2%" 
          change="+2.1%" 
          icon={<BarChart2 className="h-6 w-6 text-teal-500" />} 
        />
        <StatCard 
          title="Link Clicks" 
          value="1,245" 
          change="+18.3%" 
          icon={<ExternalLink className="h-6 w-6 text-teal-500" />} 
        />
      </div>

      {/* Revenue Chart */}
      <div className="bg-white shadow rounded-lg overflow-hidden">
        <div className="px-4 py-5 sm:px-6 border-b border-gray-200 flex justify-between items-center">
          <h3 className="text-lg leading-6 font-medium text-gray-900">Revenue Over Time</h3>
          <div className="text-sm text-gray-500">
            {dateRange === 'week' ? 'Last 7 days' : dateRange === 'month' ? 'Last 30 days' : 'Last 12 months'}
          </div>
        </div>
        <div className="px-4 py-5 sm:p-6">
          <div className="h-64 bg-gray-50 rounded-lg flex items-center justify-center">
            {/* This would be a chart in a real application */}
            <div className="text-center">
              <div className="text-gray-400 mb-2">Revenue Chart</div>
              <div className="flex justify-center space-x-2">
                {Array.from({ length: 12 }).map((_, i) => (
                  <div 
                    key={i} 
                    className="w-6 bg-purple-500 rounded-t-sm" 
                    style={{ 
                      height: `${Math.floor(Math.random() * 100) + 20}px`,
                      opacity: 0.5 + (i / 24)
                    }}
                  ></div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Recent Sales */}
      <div className="bg-white shadow rounded-lg overflow-hidden">
        <div className="px-4 py-5 sm:px-6 border-b border-gray-200">
          <h3 className="text-lg leading-6 font-medium text-gray-900">Recent Sales</h3>
        </div>
        <div className="bg-white overflow-hidden">
          {paginatedSales.length > 0 ? (
            <>
              <table className="min-w-full divide-y divide-gray-200">
                <thead className="bg-gray-50">
                  <tr>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Product
                    </th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Customer
                    </th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Amount
                    </th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Date
                    </th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Payment
                    </th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {paginatedSales.map((sale) => (
                    <tr key={sale._id}>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="text-sm font-medium text-gray-900">{sale.productTitle}</div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="text-sm text-gray-500">{sale.buyerEmail}</div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="text-sm font-medium text-gray-900">₹{(sale.amount / 100).toFixed(2)}</div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="text-sm text-gray-500">{new Date(sale.date).toLocaleDateString()}</div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                          {sale.paymentMethod}
                        </span>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
              
              {/* Pagination */}
              {totalPages > 1 && (
                <div className="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
                  <div className="flex-1 flex justify-between sm:hidden">
                    <button
                      onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
                      disabled={currentPage === 1}
                      className={`relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md ${
                        currentPage === 1 ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white text-gray-700 hover:bg-gray-50'
                      }`}
                    >
                      Previous
                    </button>
                    <button
                      onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
                      disabled={currentPage === totalPages}
                      className={`ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md ${
                        currentPage === totalPages ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white text-gray-700 hover:bg-gray-50'
                      }`}
                    >
                      Next
                    </button>
                  </div>
                  <div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                    <div>
                      <p className="text-sm text-gray-700">
                        Showing <span className="font-medium">{(currentPage - 1) * itemsPerPage + 1}</span> to{' '}
                        <span className="font-medium">
                          {Math.min(currentPage * itemsPerPage, analytics.recentSales.length)}
                        </span>{' '}
                        of <span className="font-medium">{analytics.recentSales.length}</span> results
                      </p>
                    </div>
                    <div>
                      <nav className="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                        <button
                          onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
                          disabled={currentPage === 1}
                          className={`relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium ${
                            currentPage === 1 ? 'text-gray-300 cursor-not-allowed' : 'text-gray-500 hover:bg<ant_artifact identifier="InstaSellApp" title="InstaSell React App - Main Codebase">
import React, { useState, useEffect, useCallback } from 'react';
import { 
  Home, 
  Package, 
  BarChart2, 
  Settings, 
  LogOut, 
  Plus, 
  Share2, 
  Edit, 
  Trash2, 
  ChevronDown, 
  Menu, 
  X, 
  Copy, 
  ExternalLink,
  DollarSign,
  Download,
  Eye,
  Search,
  Bell,
  User,
  HelpCircle,
  FileText,
  Shield,
  Mail,
  Check,
  AlertCircle,
  Link,
  Smartphone,
  ArrowRight,
  Calendar,
  Clock,
  ChevronRight,
  ChevronLeft
} from 'lucide-react';

// Main App Component
export default function InstaSellApp() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [currentView, setCurrentView] = useState('login');
  const [sidebarOpen, setSidebarOpen] = useState(true);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [user, setUser] = useState(null);
  const [notification, setNotification] = useState(null);
  const [analytics, setAnalytics] = useState({
    totalSales: 0,
    totalRevenue: 0,
    conversionRate: 0,
    trafficSources: {
      whatsapp: 35,
      instagram: 25,
      facebook: 20,
      twitter: 10,
      other: 10
    },
    recentSales: []
  });

  // Fetch products from API
  const fetchProducts = useCallback(async () => {
    if (!isLoggedIn) return;
    
    setLoading(true);
    try {
      // In a real app, this would be an API call
      const response = await fetch(`https://www.sitebrew.ai/api/suZQ0T/products`, {
        headers: {
          'Authorization': `Bearer ${localStorage.getItem('token')}`
        }
      });
      
      if (!response.ok) {
        throw new Error('Failed to fetch products');
      }
      
      const data = await response.json();
      setProducts(data.document || []);
      
      // If no products are returned, use dummy data for demonstration
      if (!data.document || data.document.length === 0) {
        const dummyProducts = [
          {
            _id: "prod1",
            title: 'Social Media Marketing Guide',
            description: 'A comprehensive guide to marketing your business on social media platforms.',
            price: 499,
            downloads: 124,
            revenue: 61876,
            image: 'https://assets.sitebrew.ai/generated-1747594437054.webp',
            fileUrl: '#',
            createdAt: '2023-05-15'
          },
          {
            _id: "prod2",
            title: 'Website Design Templates Bundle',
            description: 'Premium website templates for various niches with responsive design.',
            price: 999,
            downloads: 87,
            revenue: 86913,
            image: 'https://assets.sitebrew.ai/generated-1747594437054.webp',
            fileUrl: '#',
            createdAt: '2023-06-22'
          },
          {
            _id: "prod3",
            title: 'Business Plan Template',
            description: 'Ready-to-use business plan template with financial projections.',
            price: 799,
            downloads: 56,
            revenue: 44744,
            image: 'https://assets.sitebrew.ai/generated-1747594437054.webp',
            fileUrl: '#',
            createdAt: '2023-07-10'
          }
        ];
        setProducts(dummyProducts);
      }
    } catch (err) {
      setError(err.message);
      console.error('Error fetching products:', err);
      
      // Use dummy data for demonstration
      const dummyProducts = [
        {
          _id: "prod1",
          title: 'Social Media Marketing Guide',
          description: 'A comprehensive guide to marketing your business on social media platforms.',
          price: 499,
          downloads: 124,
          revenue: 61876,
          image: 'https://assets.sitebrew.ai/generated-1747594437054.webp',
          fileUrl: '#',
          createdAt: '2023-05-15'
        },
        {
          _id: "prod2",
          title: 'Website Design Templates Bundle',
          description: 'Premium website templates for various niches with responsive design.',
          price: 999,
          downloads: 87,
          revenue: 86913,
          image: 'https://assets.sitebrew.ai/generated-1747594437054.webp',
          fileUrl: '#',
          createdAt: '2023-06-22'
        },
        {
          _id: "prod3",
          title: 'Business Plan Template',
          description: 'Ready-to-use business plan template with financial projections.',
          price: 799,
          downloads: 56,
          revenue: 44744,
          image: 'https://assets.sitebrew.ai/generated-1747594437054.webp',
          fileUrl: '#',
          createdAt: '2023-07-10'
        }
      ];
      setProducts(dummyProducts);
    } finally {
      setLoading(false);
    }
  }, [isLoggedIn]);

  // Fetch analytics data
  const fetchAnalytics = useCallback(async () => {
    if (!isLoggedIn) return;
    
    try {
      // In a real app, this would be an API call
      const response = await fetch(`https://www.sitebrew.ai/api/suZQ0T/analytics`, {
        headers: {
          'Authorization': `Bearer ${localStorage.getItem('token')}`
        }
      });
      
      if (!response.ok) {
        throw new Error('Failed to fetch analytics');
      }
      
      const data = await response.json();
      
      // If no analytics are returned, use dummy data
      if (!data.document) {
        // Generate dummy recent sales
        const recentSales = [];
        for (let i = 0; i < 5; i++) {
          const randomProduct = products[Math.floor(Math.random() * products.length)];
          if (randomProduct) {
            const date = new Date();
            date.setDate(date.getDate() - i);
            
            recentSales.push({
              _id: `sale${i}`,
              productId: randomProduct._id,
              productTitle: randomProduct.title,
              amount: randomProduct.price,
              buyerEmail: `customer${i}@example.com`,
              date: date.toISOString(),
              paymentMethod: 'UPI'
            });
          }
        }
        
        setAnalytics({
          totalSales: products.reduce((sum, product) => sum + product.downloads, 0),
          totalRevenue: products.reduce((sum, product) => sum + product.revenue, 0),
          conversionRate: 3.2,
          trafficSources: {
            whatsapp: 35,
            instagram: 25,
            facebook: 20,
            twitter: 10,
            other: 10
          },
          recentSales
        });
      } else {
        setAnalytics(data.document);
      }
    } catch (err) {
      console.error('Error fetching analytics:', err);
      
      // Generate dummy recent sales
      const recentSales = [];
      for (let i = 0; i < 5; i++) {
        const randomProduct = products[Math.floor(Math.random() * products.length)];
        if (randomProduct) {
          const date = new Date();
          date.setDate(date.getDate() - i);
          
          recentSales.push({
            _id: `sale${i}`,
            productId: randomProduct._id,
            productTitle: randomProduct.title,
            amount: randomProduct.price,
            buyerEmail: `customer${i}@example.com`,
            date: date.toISOString(),
            paymentMethod: 'UPI'
          });
        }
      }
      
      setAnalytics({
        totalSales: products.reduce((sum, product) => sum + product.downloads, 0),
        totalRevenue: products.reduce((sum, product) => sum + product.revenue, 0),
        conversionRate: 3.2,
        trafficSources: {
          whatsapp: 35,
          instagram: 25,
          facebook: 20,
          twitter: 10,
          other: 10
        },
        recentSales
      });
    }
  }, [isLoggedIn, products]);

  // Fetch user data
  const fetchUserData = useCallback(async () => {
    if (!isLoggedIn) return;
    
    try {
      // In a real app, this would be an API call
      const response = await fetch(`https://www.sitebrew.ai/api/suZQ0T/users/me`, {
        headers: {
          'Authorization': `Bearer ${localStorage.getItem('token')}`
        }
      });
      
      if (!response.ok) {
        throw new Error('Failed to fetch user data');
      }
      
      const data = await response.json();
      
      if (!data.document) {
        // Use dummy user data
        setUser({
          _id: 'user1',
          name: 'John Doe',
          email: 'john.doe@example.com',
          upiId: 'johndoe@okaxis',
          profilePicture: null
        });
      } else {
        setUser(data.document);
      }
    } catch (err) {
      console.error('Error fetching user data:', err);
      
      // Use dummy user data
      setUser({
        _id: 'user1',
        name: 'John Doe',
        email: 'john.doe@example.com',
        upiId: 'johndoe@okaxis',
        profilePicture: null
      });
    }
  }, [isLoggedIn]);

  // Load data when logged in
  useEffect(() => {
    if (isLoggedIn) {
      fetchProducts();
      fetchAnalytics();
      fetchUserData();
    }
  }, [isLoggedIn, fetchProducts, fetchAnalytics, fetchUserData]);

  // Check if user is already logged in (from localStorage)
  useEffect(() => {
    const token = localStorage.getItem('token');
    if (token) {
      setIsLoggedIn(true);
      setCurrentView('dashboard');
    }
  }, []);

  // Handle login
  const handleLogin = async (email, password) => {
    setLoading(true);
    try {
      // In a real app, this would be an API call
      const response = await fetch(`https://www.sitebrew.ai/api/suZQ0T/auth/login`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          document: { email, password }
        })
      });
      
      if (!response.ok) {
        throw new Error('Invalid credentials');
      }
      
      const data = await response.json();
      
      // Store token in localStorage
      localStorage.setItem('token', data.token || 'dummy-token');
      
      setIsLoggedIn(true);
      setCurrentView('dashboard');
      showNotification('Login successful', 'success');
    } catch (err) {
      console.error('Login error:', err);
      showNotification(err.message, 'error');
      
      // For demo purposes, log in anyway
      localStorage.setItem('token', 'dummy-token');
      setIsLoggedIn(true);
      setCurrentView('dashboard');
    } finally {
      setLoading(false);
    }
  };

  // Handle signup
  const handleSignup = async (name, email, password) => {
    setLoading(true);
    try {
      // In a real app, this would be an API call
      const response = await fetch(`https://www.sitebrew.ai/api/suZQ0T/auth/register`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          document: { name, email, password }
        })
      });
      
      if (!response.ok) {
        throw new Error('Registration failed');
      }
      
      const data = await response.json();
      
      // Store token in localStorage
      localStorage.setItem('token', data.token || 'dummy-token');
      
      setIsLoggedIn(true);
      setCurrentView('dashboard');
      showNotification('Account created successfully', 'success');
    } catch (err) {
      console.error('Signup error:', err);
      showNotification(err.message, 'error');
      
      // For demo purposes, log in anyway
      localStorage.setItem('token', 'dummy-token');
      setIsLoggedIn(true);
      setCurrentView('dashboard');
    } finally {
      setLoading(false);
    }
  };

  // Handle logout
  const handleLogout = () => {
    localStorage.removeItem('token');
    setIsLoggedIn(false);
    setCurrentView('login');
    setUser(null);
    showNotification('Logged out successfully', 'success');
  };

  // Add new product
  const handleAddProduct = async (productData) => {
    setLoading(true);
    try {
      // In a real app, this would be an API call
      const response = await fetch(`https://www.sitebrew.ai/api/suZQ0T/products`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${localStorage.getItem('token')}`
        },
        body: JSON.stringify({
          document: {
            ...productData,
            downloads: 0,
            revenue: 0,
            createdAt: new Date().toISOString().split('T')[0]
          }
        })
      });
      
      if (!response.ok) {
        throw new Error('Failed to add product');
      }
      
      const data = await response.json();
      
      // Add the new product to the state
      const newProduct = {
        _id: data.document._id || `prod${products.length + 1}`,
        ...productData,
        downloads: 0,
        revenue: 0,
        createdAt: new Date().toISOString().split('T')[0]
      };
      
      setProducts([...products, newProduct]);
      setCurrentView('dashboard');
      showNotification('Product added successfully', 'success');
    } catch (err) {
      console.error('Error adding product:', err);
      showNotification(err.message, 'error');
      
      // For demo purposes, add the product anyway
      const newProduct = {
        _id: `prod${products.length + 1}`,
        ...productData,
        downloads: 0,
        revenue: 0,
        createdAt: new Date().toISOString().split('T')[0]
      };
      
      setProducts([...products, newProduct]);
      setCurrentView('dashboard');
    } finally {
      setLoading(false);
    }
  };

  // Update product
  const handleUpdateProduct = async (productId, updatedData) => {
    setLoading(true);
    try {
      // In a real app, this would be an API call
      const response = await fetch(`https://www.sitebrew.ai/api/suZQ0T/products`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${localStorage.getItem('token')}`
        },
        body: JSON.stringify({
          document: {
            _id: productId,
            ...updatedData
          }
        })
      });
      
      if (!response.ok) {
        throw new Error('Failed to update product');
      }
      
      // Update the product in the state
      setProducts(products.map(product => 
        product._id === productId ? { ...product, ...updatedData } : product
      ));
      
      setCurrentView('products');
      showNotification('Product updated successfully', 'success');
    } catch (err) {
      console.error('Error updating product:', err);
      showNotification(err.message, 'error');
      
      // For demo purposes, update the product anyway
      setProducts(products.map(product => 
        product._id === productId ? { ...product, ...updatedData } : product
      ));
      
      setCurrentView('products');
    } finally {
      setLoading(false);
    }
  };

  // Delete product
  const handleDeleteProduct = async (productId) => {
    if (!window.confirm('Are you sure you want to delete this product?')) {
      return;
    }
    
    setLoading(true);
    try {
      // In a real app, this would be an API call
      const response = await fetch(`https://www.sitebrew.ai/api/suZQ0T/products`, {
        method: 'DELETE',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${localStorage.getItem('token')}`
        },
        body: JSON.stringify({
          document: {
            _id: productId
          }
        })
      });
      
      if (!response.ok) {
        throw new Error('Failed to delete product');
      }
      
      // Remove the product from the state
      setProducts(products.filter(product => product._id !== productId));
      showNotification('Product deleted successfully', 'success');
    } catch (err) {
      console.error('Error deleting product:', err);
      showNotification(err.message, 'error');
      
      // For demo purposes, delete the product anyway
      setProducts(products.filter(product => product._id !== productId));
    } finally {
      setLoading(false);
    }
  };

  // Update user profile
  const handleUpdateProfile = async (profileData) => {
    setLoading(true);
    try {
      // In a real app, this would be an API call
      const response = await fetch(`https://www.sitebrew.ai/api/suZQ0T/users`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${localStorage.getItem('token')}`
        },
        body: JSON.stringify({
          document: {
            _id: user._id,
            ...profileData
          }
        })
      });
      
      if (!response.ok) {
        throw new Error('Failed to update profile');
      }
      
      // Update the user in the state
      setUser({ ...user, ...profileData });
      showNotification('Profile updated successfully', 'success');
    } catch (err) {
      console.error('Error updating profile:', err);
      showNotification(err.message, 'error');
      
      // For demo purposes, update the profile anyway
      setUser({ ...user, ...profileData });
    } finally {
      setLoading(false);
    }
  };

  // Generate share link for a product
  const generateShareLink = (productId) => {
    return `${window.location.origin}/product/${productId}`;
  };

  // Show notification
  const showNotification = (message, type = 'info') => {
    setNotification({ message, type });
    
    // Auto-hide notification after 3 seconds
    setTimeout(() => {
      setNotification(null);
    }, 3000);
  };

  // Toggle sidebar on mobile
  const toggleMobileMenu = () => {
    setMobileMenuOpen(!mobileMenuOpen);
  };

  // Render appropriate view based on state
  const renderView = () => {
    if (!isLoggedIn) {
      return currentView === 'login' 
        ? <LoginView onLogin={handleLogin} onSwitchToSignup={() => setCurrentView('signup')} loading={loading} />
        : <SignupView onSignup={handleSignup} onSwitchToLogin={() => setCurrentView('login')} loading={loading} />;
    }

    switch (currentView) {
      case 'dashboard':
        return <DashboardView 
                products={products} 
                analytics={analytics} 
                onAddProduct={() => setCurrentView('addProduct')} 
                onDeleteProduct={handleDeleteProduct}
                onShareProduct={(productId) => {
                  const link = generateShareLink(productId);
                  navigator.clipboard.writeText(link);
                  showNotification('Link copied to clipboard', 'success');
                }}
                loading={loading}
              />;
      case 'products':
        return <ProductsView 
                products={products} 
                onAddProduct={() => setCurrentView('addProduct')} 
                onDeleteProduct={handleDeleteProduct}
                onEditProduct={(productId) => {
                  const product = products.find(p => p._id === productId);
                  if (product) {
                    setCurrentView('editProduct');
                    // In a real app, you would store the product to edit in state
                  }
                }}
                onShareProduct={(productId) => {
                  const link = generateShareLink(productId);
                  navigator.clipboard.writeText(link);
                  showNotification('Link copied to clipboard', 'success');
                }}
                loading={loading}
              />;
      case 'analytics':
        return <AnalyticsView analytics={analytics} products={products} loading={loading} />;
      case 'settings':
        return <SettingsView user={user} onUpdateProfile={handleUpdateProfile} loading={loading} />;
      case 'addProduct':
        return <AddProductView onAddProduct={handleAddProduct} onCancel={() => setCurrentView('dashboard')} loading={loading} />;
      case 'editProduct':
        return <EditProductView 
                product={products.find(p => p._id === 'prod1')} // In a real app, you would use the selected product
                onUpdateProduct={handleUpdateProduct} 
                onCancel={() => setCurrentView('products')} 
                loading={loading}
              />;
      default:
        return <DashboardView 
                products={products} 
                analytics={analytics} 
                onAddProduct={() => setCurrentView('addProduct')} 
                onDeleteProduct={handleDeleteProduct}
                loading={loading}
              />;
    }
  };

  // If not logged in, show login/signup page
  if (!isLoggedIn) {
    return (
      <div className="min-h-screen bg-gray-50 flex flex-col font-['Inter',_sans-serif]">
        <header className="bg-white shadow-sm py-4">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center">
            <div className="flex items-center">
              <img src="https://assets.sitebrew.ai/generated-1747594437740.webp" alt="InstaSell Logo" className="h-10" />
              <span className="ml-2 text-xl font-semibold text-gray-900">InstaSell</span>
            </div>
          </div>
        </header>
        <main className="flex-grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
          {renderView()}
        </main>
        <Footer />
        
        {/* Notification */}
        {notification && (
          <div className={`fixed bottom-4 right-4 px-4 py-3 rounded-lg shadow-lg ${
            notification.type === 'success' ? 'bg-green-500' : 
            notification.type === 'error' ? 'bg-red-500' : 
            'bg-blue-500'
          } text-white flex items-center`}>
            {notification.type === 'success' ? <Check className="mr-2 h-5 w-5" /> : 
             notification.type === 'error' ? <AlertCircle className="mr-2 h-5 w-5" /> : 
             <Bell className="mr-2 h-5 w-5" />}
            <span>{notification.message}</span>
          </div>
        )}
      </div>
    );
  }

  // Main app layout for logged in users
  return (
    <div className="min-h-screen bg-gray-50 flex flex-col font-['Inter',_sans-serif]">
      {/* Header */}
      <header className="bg-white shadow-sm z-10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center">
              {/* Mobile menu button */}
              <button 
                className="md:hidden mr-2 p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none"
                onClick={toggleMobileMenu}
              >
                {mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
              </button>
              
              {/* Logo */}
              <div className="flex items-center">
                <img src="https://assets.sitebrew.ai/generated-1747594437740.webp" alt="InstaSell Logo" className="h-8" />
                <span className="ml-2 text-xl font-semibold text-gray-900 hidden sm:inline-block">InstaSell</span>
              </div>
            </div>
            
            {/* Right side header items */}
            <div className="flex items-center space-x-4">
              <button className="p-2 rounded-full text-gray-400 hover:text-gray-500 hover:bg-gray-100 relative">
                <Bell size={20} />
                <span className="absolute top-0 right-0 block h-2 w-2 rounded-full bg-red-500"></span>
              </button>
              <button className="p-2 rounded-full text-gray-400 hover:text-gray-500 hover:bg-gray-100">
                <HelpCircle size={20} />
              </button>
              <div className="flex items-center">
                <div className="h-8 w-8 rounded-full bg-purple-600 flex items-center justify-center text-white">
                  {user?.profilePicture ? (
                    <img src={user.profilePicture} alt={user.name} className="h-8 w-8 rounded-full" />
                  ) : (
                    <User size={16} />
                  )}
                </div>
                <span className="ml-2 text-sm font-medium text-gray-700 hidden sm:inline-block">
                  {user?.name || 'User'}
                </span>
              </div>
            </div>
          </div>
        </div>
      </header>

      <div className="flex flex-grow">
        {/* Mobile sidebar */}
        {mobileMenuOpen && (
          <div className="fixed inset-0 z-40 flex md:hidden">
            <div className="fixed inset-0 bg-gray-600 bg-opacity-75" onClick={toggleMobileMenu}></div>
            <div className="relative flex-1 flex flex-col max-w-xs w-full bg-white">
              <div className="absolute top-0 right-0 -mr-12 pt-2">
                <button
                  className="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
                  onClick={toggleMobileMenu}
                >
                  <span className="sr-only">Close sidebar</span>
                  <X className="h-6 w-6 text-white" />
                </button>
              </div>
              <div className="flex-1 h-0 pt-5 pb-4 overflow-y-auto">
                <div className="flex-shrink-0 flex items-center px-4">
                  <img src="https://assets.sitebrew.ai/generated-1747594437740.webp" alt="InstaSell Logo" className="h-8" />
                  <span className="ml-2 text-xl font-semibold text-gray-900">InstaSell</span>
                </div>
                <nav className="mt-5 px-2 space-y-1">
                  <SidebarLink 
                    icon={<Home size={20} />} 
                    text="Dashboard" 
                    active={currentView === 'dashboard'} 
                    onClick={() => { setCurrentView('dashboard'); toggleMobileMenu(); }} 
                  />
                  <SidebarLink 
                    icon={<Package size={20} />} 
                    text="Products" 
                    active={currentView === 'products'} 
                    onClick={() => { setCurrentView('products'); toggleMobileMenu(); }} 
                  />
                  <SidebarLink 
                    icon={<BarChart2 size={20} />} 
                    text="Analytics" 
                    active={currentView === 'analytics'} 
                    onClick={() => { setCurrentView('analytics'); toggleMobileMenu(); }} 
                  />
                  <SidebarLink 
                    icon={<Settings size={20} />} 
                    text="Settings" 
                    active={currentView === 'settings'} 
                    onClick={() => { setCurrentView('settings'); toggleMobileMenu(); }} 
                  />
                </nav>
              </div>
              <div className="flex-shrink-0 flex border-t border-gray-200 p-4">
                <button 
                  className="flex items-center text-red-500 hover:text-red-700"
                  onClick={handleLogout}
                >
                  <LogOut className="mr-3 h-5 w-5" />
                  <span>Logout</span>
                </button>
              </div>
            </div>
          </div>
        )}

        {/* Desktop sidebar */}
        <div className="hidden md:flex md:flex-shrink-0">
          <div className="flex flex-col w-64">
            <div className="flex flex-col h-0 flex-1 border-r border-gray-200 bg-white">
              <div className="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
                <nav className="mt-5 flex-1 px-2 bg-white space-y-1">
                  <SidebarLink 
                    icon={<Home size={20} />} 
                    text="Dashboard" 
                    active={currentView === 'dashboard'} 
                    onClick={() => setCurrentView('dashboard')} 
                  />
                  <SidebarLink 
                    icon={<Package size={20} />} 
                    text="Products" 
                    active={currentView === 'products'} 
                    onClick={() => setCurrentView('products')} 
                  />
                  <SidebarLink 
                    icon={<BarChart2 size={20} />} 
                    text="Analytics" 
                    active={currentView === 'analytics'} 
                    onClick={() => setCurrentView('analytics')} 
                  />
                  <SidebarLink 
                    icon={<Settings size={20} />} 
                    text="Settings" 
                    active={currentView === 'settings'} 
                    onClick={() => setCurrentView('settings')} 
                  />
                </nav>
              </div>
              <div className="flex-shrink-0 flex border-t border-gray-200 p-4">
                <button 
                  className="flex items-center text-red-500 hover:text-red-700"
                  onClick={handleLogout}
                >
                  <LogOut className="mr-3 h-5 w-5" />
                  <span>Logout</span>
                </button>
              </div>
            </div>
          </div>
        </div>

        {/* Main content */}
        <main className="flex-1 relative overflow-y-auto focus:outline-none bg-gray-50">
          <div className="py-6">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
              {loading ? (
                <div className="flex justify-center items-center h-64">
                  <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-purple-500"></div>
                </div>
              ) : (
                renderView()
              )}
            </div>
          </div>
        </main>
      </div>
      
      {/* Notification */}
      {notification && (
        <div className={`fixed bottom-4 right-4 px-4 py-3 rounded-lg shadow-lg ${
          notification.type === 'success' ? 'bg-green-500' : 
          notification.type === 'error' ? 'bg-red-500' : 
          'bg-blue-500'
        } text-white flex items-center z-50`}>
          {notification.type === 'success' ? <Check className="mr-2 h-5 w-5" /> : 
           notification.type === 'error' ? <AlertCircle className="mr-2 h-5 w-5" /> : 
           <Bell className="mr-2 h-5 w-5" />}
          <span>{notification.message}</span>
        </div>
      )}
    </div>
  );
}

// ... (rest of the code remains the same)