Upload Community.js

web/src/pages/Community.js

@@ -0,0 +1,1265 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { authManager } from '../utils/auth';
+import { imageHandler } from '../utils/imageHandler';
+
+const Community = ({ onNavigate }) => {
+  const [posts, setPosts] = useState([]);
+  const [newPost, setNewPost] = useState('');
+  const [currentUser, setCurrentUser] = useState(null);
+  const [activeTab, setActiveTab] = useState('feed');
+  const [leaderboard, setLeaderboard] = useState([]);
+  const [communityStats, setCommunityStats] = useState({});
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedImage, setSelectedImage] = useState(null);
+  const [selectedLocation, setSelectedLocation] = useState('');
+  const [postType, setPostType] = useState('general');
+  const fileInputRef = useRef(null);
+
+  useEffect(() => {
+    loadCommunityData();
+    const user = authManager.getCurrentUser();
+    setCurrentUser(user);
+  }, []);
+
+  const loadCommunityData = () => {
+    // Load community posts from localStorage or generate demo data
+    const savedPosts = localStorage.getItem('ecospire_community_posts');
+    if (savedPosts) {
+      setPosts(JSON.parse(savedPosts));
+    } else {
+      generateInitialPosts();
+    }
+
+    // Load leaderboard
+    setLeaderboard(authManager.getLeaderboard());
+
+    // Generate community stats
+    setCommunityStats({
+      totalMembers: 12847 + Math.floor(Math.random() * 100),
+      waterTests: 45231 + Math.floor(Math.random() * 50),
+      speciesIdentified: 28956 + Math.floor(Math.random() * 20),
+      co2Saved: 156789 + Math.floor(Math.random() * 100),
+      activeToday: 1247 + Math.floor(Math.random() * 50),
+      postsToday: 89 + Math.floor(Math.random() * 10)
+    });
+  };
+
+  const generateInitialPosts = () => {
+    const initialPosts = [
+      {
+        id: 1,
+        author: 'EcoExplorer',
+        avatar: '🌱',
+        timestamp: Date.now() - 2 * 60 * 60 * 1000, // 2 hours ago
+        content: 'Just completed my first water quality test using AquaLens! The results were fascinating - found some concerning nitrate levels in our local stream. Time to take action! 💧',
+        likes: 12,
+        comments: [
+          { author: 'WaterGuardian', content: 'Great work! Have you contacted local authorities about the nitrate levels?', timestamp: Date.now() - 1 * 60 * 60 * 1000 },
+          { author: 'EcoNewbie', content: 'How accurate is AquaLens? Thinking of trying it myself!', timestamp: Date.now() - 30 * 60 * 1000 }
+        ],
+        type: 'water_test',
+        location: 'Riverside Park Stream',
+        image: {
+          url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgZmlsbD0iIzg3Q0VFQiIvPjx0ZXh0IHg9IjIwMCIgeT0iMTUwIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTgiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5KnIFdhdGVyIFRlc3QgU3RyaXA8L3RleHQ+PC9zdmc+',
+          name: 'water_test_strip.jpg',
+          size: 245760
+        },
+        data: { ph: 7.2, nitrates: 15, chlorine: 2.1 }
+      },
+      {
+        id: 2,
+        author: 'BirdWatcher92',
+        avatar: '🦜',
+        timestamp: Date.now() - 4 * 60 * 60 * 1000, // 4 hours ago
+        content: 'BiodiversityEar identified 15 different bird species in my morning recording! Including a rare warbler that hasn\'t been spotted in our area for years. Nature is amazing! 🎵',
+        likes: 24,
+        comments: [
+          { author: 'NatureExpert', content: 'Which warbler species? That\'s incredible!', timestamp: Date.now() - 2 * 60 * 60 * 1000 },
+          { author: 'BioStudent', content: 'Can you share the recording? Would love to hear it!', timestamp: Date.now() - 1 * 60 * 60 * 1000 }
+        ],
+        type: 'biodiversity_scan',
+        location: 'Central City Park',
+        image: {
+          url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9InNreSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0eWxlPSJzdG9wLWNvbG9yOiM4N0NFRUIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOiM5OERCOEMiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgZmlsbD0idXJsKCNza3kpIi8+PGNpcmNsZSBjeD0iMzIwIiBjeT0iNjAiIHI9IjMwIiBmaWxsPSIjRkZENzAwIi8+PHJlY3QgeD0iMCIgeT0iMjAwIiB3aWR0aD0iNDAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iIzIyOEIyMiIvPjx0ZXh0IHg9IjIwMCIgeT0iMTUwIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTYiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn6acIEJpcmQgV2F0Y2hpbmcgU3BvdDwvdGV4dD48L3N2Zz4=',
+          name: 'bird_watching_spot.jpg',
+          size: 189440
+        },
+        data: { speciesCount: 15, rareSpecies: 'Yellow Warbler' }
+      },
+      {
+        id: 3,
+        author: 'GreenThumb',
+        avatar: '🌿',
+        timestamp: Date.now() - 24 * 60 * 60 * 1000, // 1 day ago
+        content: 'FloraShield helped me identify an invasive plant species in my garden before it could spread. Early detection is key to protecting our local ecosystem! 🛡️',
+        likes: 18,
+        comments: [
+          { author: 'GardenExpert', content: 'Which species was it? Always good to share for others to watch out for!', timestamp: Date.now() - 20 * 60 * 60 * 1000 }
+        ],
+        type: 'plant_identification',
+        location: 'Home Garden',
+        image: {
+          url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgZmlsbD0iIzIyOEIyMiIvPjxwYXRoIGQ9Ik0xMDAsMjUwIEwxNTAsMTUwIEwyMDAsMjAwIEwyNTAsMTAwIEwzMDAsMTgwIiBzdHJva2U9IiM5OERCOEMiIHN0cm9rZS13aWR0aD0iOCIgZmlsbD0ibm9uZSIvPjxjaXJjbGUgY3g9IjE1MCIgY3k9IjE1MCIgcj0iMTUiIGZpbGw9IiNGRkQ3MDAiLz48Y2lyY2xlIGN4PSIyNTAiIGN5PSIxMDAiIHI9IjEyIiBmaWxsPSIjRkY2MzQ3Ii8+PHRleHQgeD0iMjAwIiB5PSIyODAiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPvCfjL8gSW52YXNpdmUgUGxhbnQgRGV0ZWN0ZWQ8L3RleHQ+PC9zdmc+',
+          name: 'invasive_plant.jpg',
+          size: 156780
+        },
+        data: { species: 'Japanese Knotweed', confidence: 92 }
+      },
+      {
+        id: 4,
+        author: 'CarbonCrusher',
+        avatar: '🌳',
+        timestamp: Date.now() - 6 * 60 * 60 * 1000, // 6 hours ago
+        content: 'Completed my monthly carbon footprint analysis. Managed to reduce my emissions by 23% this month through better transport choices and energy efficiency! 🚲⚡',
+        likes: 31,
+        comments: [
+          { author: 'EcoCommuter', content: 'Amazing! What transport changes did you make?', timestamp: Date.now() - 3 * 60 * 60 * 1000 }
+        ],
+        type: 'carbon_reduction',
+        data: { reduction: 23, co2Saved: 45 }
+      }
+    ];
+
+    setPosts(initialPosts);
+    localStorage.setItem('ecospire_community_posts', JSON.stringify(initialPosts));
+  };
+
+  const handleImageSelect = async (e) => {
+    const file = e.target.files[0];
+    if (!file) return;
+
+    try {
+      setIsLoading(true);
+      const processedImage = await imageHandler.processImage(file, {
+        compress: true,
+        maxWidth: 800,
+        quality: 0.8
+      });
+
+      setSelectedImage({
+        file: file,
+        preview: processedImage.preview,
+        name: processedImage.original.name,
+        size: processedImage.processed.size,
+        processedData: processedImage
+      });
+    } catch (error) {
+      alert(`Image processing failed: ${error.message}`);
+      console.error('Image processing error:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const removeImage = () => {
+    setSelectedImage(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  const getCurrentLocation = () => {
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition(
+        (position) => {
+          const { latitude, longitude } = position.coords;
+          // Simulate reverse geocoding
+          const locations = [
+            'Central Park, New York',
+            'Golden Gate Park, San Francisco',
+            'Hyde Park, London',
+            'Vondelpark, Amsterdam',
+            'Retiro Park, Madrid'
+          ];
+          const randomLocation = locations[Math.floor(Math.random() * locations.length)];
+          setSelectedLocation(randomLocation);
+        },
+        (error) => {
+          console.error('Geolocation error:', error);
+          setSelectedLocation('Location unavailable');
+        }
+      );
+    } else {
+      setSelectedLocation('Geolocation not supported');
+    }
+  };
+
+  const handlePostSubmit = async (e) => {
+    e.preventDefault();
+    if (!newPost.trim()) return;
+
+    if (!currentUser || currentUser.isGuest) {
+      alert('Please create an account to post in the community!');
+      onNavigate && onNavigate('Login');
+      return;
+    }
+
+    setIsLoading(true);
+
+    // Process and store image
+    let imageData = null;
+    if (selectedImage) {
+      const imageId = `post_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+      
+      // Store image using imageHandler
+      const stored = imageHandler.storeImage(selectedImage.processedData, imageId);
+      
+      if (stored) {
+        imageData = {
+          id: imageId,
+          url: selectedImage.preview,
+          name: selectedImage.name,
+          size: selectedImage.size,
+          type: selectedImage.file.type
+        };
+      } else {
+        // Fallback to direct preview if storage fails
+        imageData = {
+          url: selectedImage.preview,
+          name: selectedImage.name,
+          size: selectedImage.size,
+          type: selectedImage.file.type
+        };
+      }
+    }
+
+    const post = {
+      id: Date.now(),
+      author: currentUser.name,
+      avatar: currentUser.avatar,
+      timestamp: Date.now(),
+      content: newPost,
+      likes: 0,
+      comments: [],
+      type: postType,
+      location: selectedLocation || null,
+      image: imageData,
+      data: generatePostData(postType)
+    };
+
+    const updatedPosts = [post, ...posts];
+    setPosts(updatedPosts);
+    localStorage.setItem('ecospire_community_posts', JSON.stringify(updatedPosts));
+
+    // Log activity with enhanced points for media posts
+    const points = selectedImage ? 25 : 15;
+    await authManager.logActivity('Posted in community', {
+      type: 'community_post',
+      content: newPost.substring(0, 50) + '...',
+      hasImage: !!selectedImage,
+      postType: postType,
+      points: points
+    });
+
+    // Reset form
+    setNewPost('');
+    setSelectedImage(null);
+    setSelectedLocation('');
+    setPostType('general');
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+    
+    setIsLoading(false);
+  };
+
+  const generatePostData = (type) => {
+    switch (type) {
+      case 'water_test':
+        return {
+          ph: (6.5 + Math.random() * 2).toFixed(1),
+          nitrates: Math.floor(Math.random() * 20),
+          chlorine: (Math.random() * 3).toFixed(1)
+        };
+      case 'biodiversity_scan':
+        return {
+          speciesCount: Math.floor(Math.random() * 20) + 5,
+          rareSpecies: ['Rare Warbler', 'Endangered Butterfly'][Math.floor(Math.random() * 2)]
+        };
+      case 'carbon_reduction':
+        return {
+          co2Saved: Math.floor(Math.random() * 50) + 10,
+          reduction: Math.floor(Math.random() * 30) + 10
+        };
+      case 'plant_identification':
+        return {
+          species: 'Unknown Plant Species',
+          confidence: Math.floor(Math.random() * 30) + 70
+        };
+      default:
+        return {};
+    }
+  };
+
+  const handleLike = async (postId) => {
+    if (!currentUser || currentUser.isGuest) {
+      alert('Please create an account to interact with posts!');
+      return;
+    }
+
+    const updatedPosts = posts.map(post => {
+      if (post.id === postId) {
+        return { ...post, likes: post.likes + 1 };
+      }
+      return post;
+    });
+
+    setPosts(updatedPosts);
+    localStorage.setItem('ecospire_community_posts', JSON.stringify(updatedPosts));
+
+    // Log activity
+    await authManager.logActivity('Liked community post', {
+      type: 'community_interaction',
+      action: 'like',
+      points: 2
+    });
+  };
+
+  const handleComment = async (postId, comment) => {
+    if (!currentUser || currentUser.isGuest) {
+      alert('Please create an account to comment!');
+      return;
+    }
+
+    if (!comment.trim()) return;
+
+    const newComment = {
+      author: currentUser.name,
+      content: comment,
+      timestamp: Date.now()
+    };
+
+    const updatedPosts = posts.map(post => {
+      if (post.id === postId) {
+        return { ...post, comments: [...post.comments, newComment] };
+      }
+      return post;
+    });
+
+    setPosts(updatedPosts);
+    localStorage.setItem('ecospire_community_posts', JSON.stringify(updatedPosts));
+
+    // Log activity
+    await authManager.logActivity('Commented on post', {
+      type: 'community_interaction',
+      action: 'comment',
+      points: 5
+    });
+  };
+
+  const formatTimeAgo = (timestamp) => {
+    const now = Date.now();
+    const diff = now - timestamp;
+    const minutes = Math.floor(diff / (1000 * 60));
+    const hours = Math.floor(diff / (1000 * 60 * 60));
+    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+
+    if (minutes < 60) return `${minutes} minutes ago`;
+    if (hours < 24) return `${hours} hours ago`;
+    return `${days} days ago`;
+  };
+
+  const getPostTypeIcon = (type) => {
+    const icons = {
+      water_test: '💧',
+      biodiversity_scan: '🦜',
+      plant_identification: '🌿',
+      carbon_reduction: '🌳',
+      general: '💬'
+    };
+    return icons[type] || '💬';
+  };
+
+  return (
+    <div className="community-page" style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
+      {/* Header */}
+      <div style={{
+        background: 'linear-gradient(135deg, #3498db 0%, #2980b9 100%)',
+        borderRadius: '12px',
+        padding: '30px',
+        color: 'white',
+        marginBottom: '30px',
+        textAlign: 'center'
+      }}>
+        <h1 style={{ margin: '0 0 10px 0', fontSize: '2.5rem' }}>👥 GreenPlus by GXS Community</h1>
+        <p style={{ margin: '0 0 20px 0', fontSize: '1.1rem', opacity: 0.9 }}>
+          Connect with environmental champions worldwide
+        </p>
+        
+        {/* User Status */}
+        {currentUser && (
+          <div style={{
+            background: 'rgba(255,255,255,0.2)',
+            borderRadius: '8px',
+            padding: '15px',
+            display: 'inline-block'
+          }}>
+            <span style={{ fontSize: '1.5rem', marginRight: '10px' }}>{currentUser.avatar}</span>
+            <span style={{ fontSize: '1.1rem', fontWeight: 'bold' }}>
+              Welcome, {currentUser.name}!
+            </span>
+            {currentUser.isGuest && (
+              <span style={{ fontSize: '0.9rem', opacity: 0.8, marginLeft: '10px' }}>
+                (Guest Mode - <button 
+                  onClick={() => onNavigate && onNavigate('Login')}
+                  style={{ background: 'none', border: 'none', color: 'white', textDecoration: 'underline', cursor: 'pointer' }}
+                >
+                  Create Account
+                </button>)
+              </span>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Navigation Tabs */}
+      <div style={{
+        display: 'flex',
+        gap: '10px',
+        marginBottom: '30px',
+        justifyContent: 'center'
+      }}>
+        {[
+          { id: 'feed', name: 'Community Feed', icon: '📱' },
+          { id: 'leaderboard', name: 'Leaderboard', icon: '🏆' },
+          { id: 'stats', name: 'Community Stats', icon: '📊' }
+        ].map(tab => (
+          <button
+            key={tab.id}
+            onClick={() => setActiveTab(tab.id)}
+            style={{
+              padding: '12px 24px',
+              borderRadius: '25px',
+              border: 'none',
+              background: activeTab === tab.id ? '#3498db' : '#ecf0f1',
+              color: activeTab === tab.id ? 'white' : '#2c3e50',
+              cursor: 'pointer',
+              fontWeight: '600',
+              fontSize: '14px',
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px'
+            }}
+          >
+            <span>{tab.icon}</span>
+            {tab.name}
+          </button>
+        ))}
+      </div>
+
+      {/* Community Feed Tab */}
+      {activeTab === 'feed' && (
+        <>
+          {/* Create Post */}
+          <div style={{
+            background: 'white',
+            borderRadius: '12px',
+            padding: '20px',
+            boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
+            marginBottom: '30px'
+          }}>
+            <h3 style={{ margin: '0 0 15px 0', color: '#2c3e50' }}>Share Your Environmental Impact</h3>
+            
+            {/* Post Type Selector */}
+            <div style={{ marginBottom: '15px' }}>
+              <label style={{ display: 'block', marginBottom: '8px', fontWeight: '500', color: '#2c3e50' }}>
+                Post Type:
+              </label>
+              <select
+                value={postType}
+                onChange={(e) => setPostType(e.target.value)}
+                disabled={!currentUser || currentUser.isGuest}
+                style={{
+                  padding: '8px 12px',
+                  border: '2px solid #e1e8ed',
+                  borderRadius: '8px',
+                  fontSize: '14px',
+                  background: (!currentUser || currentUser.isGuest) ? '#f8f9fa' : 'white',
+                  cursor: (!currentUser || currentUser.isGuest) ? 'not-allowed' : 'pointer'
+                }}
+              >
+                <option value="general">💬 General Discussion</option>
+                <option value="water_test">💧 Water Quality Test</option>
+                <option value="biodiversity_scan">🦜 Biodiversity Discovery</option>
+                <option value="plant_identification">🌿 Plant Identification</option>
+                <option value="carbon_reduction">🌳 Carbon Reduction</option>
+              </select>
+            </div>
+
+            <form onSubmit={handlePostSubmit}>
+              <textarea
+                value={newPost}
+                onChange={(e) => setNewPost(e.target.value)}
+                placeholder={currentUser && !currentUser.isGuest 
+                  ? "Share your latest environmental discovery, test results, or eco-friendly action..."
+                  : "Create an account to share your environmental discoveries with the community!"
+                }
+                disabled={!currentUser || currentUser.isGuest}
+                style={{
+                  width: '100%',
+                  minHeight: '100px',
+                  padding: '15px',
+                  border: '2px solid #e1e8ed',
+                  borderRadius: '8px',
+                  fontSize: '16px',
+                  resize: 'vertical',
+                  boxSizing: 'border-box',
+                  fontFamily: 'inherit',
+                  background: (!currentUser || currentUser.isGuest) ? '#f8f9fa' : 'white'
+                }}
+              />
+
+              {/* Image Preview */}
+              {selectedImage && (
+                <div style={{
+                  marginTop: '15px',
+                  padding: '15px',
+                  border: '2px dashed #3498db',
+                  borderRadius: '8px',
+                  background: '#f8f9fa'
+                }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '15px' }}>
+                    <img
+                      src={selectedImage.preview}
+                      alt="Preview"
+                      style={{
+                        width: '80px',
+                        height: '80px',
+                        objectFit: 'cover',
+                        borderRadius: '8px',
+                        border: '2px solid #3498db'
+                      }}
+                    />
+                    <div style={{ flex: 1 }}>
+                      <div style={{ fontWeight: '500', color: '#2c3e50', marginBottom: '4px' }}>
+                        {selectedImage.name}
+                      </div>
+                      <div style={{ fontSize: '0.85rem', color: '#7f8c8d', marginBottom: '4px' }}>
+                        Original: {imageHandler.formatFileSize(selectedImage.file.size)}
+                        {selectedImage.size !== selectedImage.file.size && (
+                          <span style={{ color: '#27ae60', marginLeft: '8px' }}>
+                            → Compressed: {imageHandler.formatFileSize(selectedImage.size)}
+                          </span>
+                        )}
+                      </div>
+                      <div style={{ fontSize: '0.8rem', color: '#3498db' }}>
+                        ✅ Ready to upload
+                      </div>
+                    </div>
+                    <button
+                      type="button"
+                      onClick={removeImage}
+                      style={{
+                        background: '#e74c3c',
+                        color: 'white',
+                        border: 'none',
+                        borderRadius: '50%',
+                        width: '30px',
+                        height: '30px',
+                        cursor: 'pointer',
+                        fontSize: '16px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center'
+                      }}
+                      title="Remove image"
+                    >
+                      ×
+                    </button>
+                  </div>
+                </div>
+              )}
+
+              {/* Location Display */}
+              {selectedLocation && (
+                <div style={{
+                  marginTop: '10px',
+                  padding: '10px',
+                  background: '#e8f4fd',
+                  borderRadius: '8px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '8px'
+                }}>
+                  <span>📍</span>
+                  <span style={{ color: '#2c3e50' }}>{selectedLocation}</span>
+                  <button
+                    type="button"
+                    onClick={() => setSelectedLocation('')}
+                    style={{
+                      background: 'none',
+                      border: 'none',
+                      color: '#7f8c8d',
+                      cursor: 'pointer',
+                      marginLeft: 'auto'
+                    }}
+                  >
+                    ×
+                  </button>
+                </div>
+              )}
+
+              <div style={{ 
+                display: 'flex', 
+                justifyContent: 'space-between', 
+                alignItems: 'center',
+                marginTop: '15px'
+              }}>
+                <div style={{ display: 'flex', gap: '10px' }}>
+                  <input
+                    type="file"
+                    ref={fileInputRef}
+                    onChange={handleImageSelect}
+                    accept="image/*"
+                    style={{ display: 'none' }}
+                  />
+                  <button 
+                    type="button" 
+                    onClick={() => fileInputRef.current?.click()}
+                    disabled={!currentUser || currentUser.isGuest}
+                    style={{
+                      padding: '8px 15px',
+                      background: selectedImage ? '#27ae60' : '#ecf0f1',
+                      color: selectedImage ? 'white' : '#2c3e50',
+                      border: 'none',
+                      borderRadius: '20px',
+                      cursor: (!currentUser || currentUser.isGuest) ? 'not-allowed' : 'pointer',
+                      fontSize: '14px',
+                      opacity: (!currentUser || currentUser.isGuest) ? 0.5 : 1,
+                      fontWeight: selectedImage ? '500' : 'normal'
+                    }}
+                  >
+                    📸 {selectedImage ? 'Image Added' : 'Add Photo'}
+                  </button>
+                  <button 
+                    type="button" 
+                    onClick={getCurrentLocation}
+                    disabled={!currentUser || currentUser.isGuest}
+                    style={{
+                      padding: '8px 15px',
+                      background: selectedLocation ? '#27ae60' : '#ecf0f1',
+                      color: selectedLocation ? 'white' : '#2c3e50',
+                      border: 'none',
+                      borderRadius: '20px',
+                      cursor: (!currentUser || currentUser.isGuest) ? 'not-allowed' : 'pointer',
+                      fontSize: '14px',
+                      opacity: (!currentUser || currentUser.isGuest) ? 0.5 : 1,
+                      fontWeight: selectedLocation ? '500' : 'normal'
+                    }}
+                  >
+                    📍 {selectedLocation ? 'Location Added' : 'Add Location'}
+                  </button>
+                </div>
+                <button 
+                  type="submit" 
+                  disabled={isLoading || !currentUser || currentUser.isGuest || !newPost.trim()}
+                  style={{
+                    padding: '10px 20px',
+                    background: (isLoading || !currentUser || currentUser.isGuest || !newPost.trim()) ? '#95a5a6' : '#3498db',
+                    color: 'white',
+                    border: 'none',
+                    borderRadius: '20px',
+                    cursor: (isLoading || !currentUser || currentUser.isGuest || !newPost.trim()) ? 'not-allowed' : 'pointer',
+                    fontSize: '16px',
+                    fontWeight: '500'
+                  }}
+                >
+                  {isLoading ? '⏳ Posting...' : 'Share Post'}
+                </button>
+              </div>
+            </form>
+          </div>
+
+          {/* Community Posts */}
+          <h2 style={{ marginBottom: '20px', color: '#2c3e50' }}>📱 Recent Community Activity</h2>
+          
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+            {posts.map(post => (
+              <CommunityPost 
+                key={post.id} 
+                post={post} 
+                currentUser={currentUser}
+                onLike={handleLike}
+                onComment={handleComment}
+                formatTimeAgo={formatTimeAgo}
+                getPostTypeIcon={getPostTypeIcon}
+              />
+            ))}
+            
+            {posts.length === 0 && (
+              <div style={{
+                background: 'white',
+                borderRadius: '12px',
+                padding: '40px',
+                textAlign: 'center',
+                boxShadow: '0 2px 10px rgba(0,0,0,0.1)'
+              }}>
+                <div style={{ fontSize: '3rem', marginBottom: '15px' }}>🌱</div>
+                <h3 style={{ color: '#2c3e50', marginBottom: '10px' }}>No posts yet!</h3>
+                <p style={{ color: '#7f8c8d' }}>Be the first to share your environmental discoveries with the community.</p>
+              </div>
+            )}
+          </div>
+        </>
+      )}
+
+      {/* Leaderboard Tab */}
+      {activeTab === 'leaderboard' && (
+        <div style={{
+          background: 'white',
+          borderRadius: '12px',
+          padding: '30px',
+          boxShadow: '0 2px 10px rgba(0,0,0,0.1)'
+        }}>
+          <h2 style={{ margin: '0 0 25px 0', color: '#2c3e50', textAlign: 'center' }}>🏆 Community Leaderboard</h2>
+          
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
+            {leaderboard.map((user, index) => (
+              <div key={index} style={{
+                display: 'flex',
+                alignItems: 'center',
+                padding: '15px',
+                background: user.isCurrentUser ? '#e8f4fd' : '#f8f9fa',
+                borderRadius: '12px',
+                border: user.isCurrentUser ? '2px solid #3498db' : '1px solid #e1e8ed'
+              }}>
+                <div style={{
+                  width: '40px',
+                  height: '40px',
+                  borderRadius: '50%',
+                  background: index < 3 ? '#f39c12' : '#95a5a6',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  color: 'white',
+                  fontWeight: 'bold',
+                  marginRight: '15px'
+                }}>
+                  {index + 1}
+                </div>
+                
+                <div style={{
+                  width: '50px',
+                  height: '50px',
+                  borderRadius: '50%',
+                  background: '#f8f9fa',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  fontSize: '1.5rem',
+                  marginRight: '15px'
+                }}>
+                  {user.avatar}
+                </div>
+                
+                <div style={{ flex: 1 }}>
+                  <h4 style={{ margin: '0 0 5px 0', color: '#2c3e50' }}>
+                    {user.name} {user.isCurrentUser && '(You)'}
+                  </h4>
+                  <p style={{ margin: 0, color: '#7f8c8d', fontSize: '0.9rem' }}>
+                    Level {user.level} • {user.points.toLocaleString()} points
+                  </p>
+                </div>
+                
+                {index < 3 && (
+                  <div style={{ fontSize: '1.5rem' }}>
+                    {index === 0 ? '🥇' : index === 1 ? '🥈' : '🥉'}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Community Stats Tab */}
+      {activeTab === 'stats' && (
+        <div>
+          <h2 style={{ marginBottom: '25px', color: '#2c3e50', textAlign: 'center' }}>📊 Community Statistics</h2>
+          
+          <div style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
+            gap: '20px',
+            marginBottom: '30px'
+          }}>
+            <div style={{
+              background: 'white',
+              padding: '25px',
+              borderRadius: '12px',
+              boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
+              textAlign: 'center'
+            }}>
+              <div style={{ fontSize: '2.5rem', marginBottom: '15px' }}>🌍</div>
+              <h3 style={{ margin: '0 0 8px 0', color: '#27ae60', fontSize: '2rem' }}>
+                {communityStats.totalMembers?.toLocaleString()}
+              </h3>
+              <p style={{ margin: 0, color: '#7f8c8d', fontWeight: '600' }}>Total Members</p>
+              <p style={{ margin: '5px 0 0 0', color: '#27ae60', fontSize: '0.9rem' }}>
+                +{communityStats.activeToday} active today
+              </p>
+            </div>
+            
+            <div style={{
+              background: 'white',
+              padding: '25px',
+              borderRadius: '12px',
+              boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
+              textAlign: 'center'
+            }}>
+              <div style={{ fontSize: '2.5rem', marginBottom: '15px' }}>💧</div>
+              <h3 style={{ margin: '0 0 8px 0', color: '#3498db', fontSize: '2rem' }}>
+                {communityStats.waterTests?.toLocaleString()}
+              </h3>
+              <p style={{ margin: 0, color: '#7f8c8d', fontWeight: '600' }}>Water Tests Shared</p>
+              <p style={{ margin: '5px 0 0 0', color: '#3498db', fontSize: '0.9rem' }}>
+                Protecting water quality worldwide
+              </p>
+            </div>
+            
+            <div style={{
+              background: 'white',
+              padding: '25px',
+              borderRadius: '12px',
+              boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
+              textAlign: 'center'
+            }}>
+              <div style={{ fontSize: '2.5rem', marginBottom: '15px' }}>🦜</div>
+              <h3 style={{ margin: '0 0 8px 0', color: '#e67e22', fontSize: '2rem' }}>
+                {communityStats.speciesIdentified?.toLocaleString()}
+              </h3>
+              <p style={{ margin: 0, color: '#7f8c8d', fontWeight: '600' }}>Species Identified</p>
+              <p style={{ margin: '5px 0 0 0', color: '#e67e22', fontSize: '0.9rem' }}>
+                Biodiversity monitoring network
+              </p>
+            </div>
+            
+            <div style={{
+              background: 'white',
+              padding: '25px',
+              borderRadius: '12px',
+              boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
+              textAlign: 'center'
+            }}>
+              <div style={{ fontSize: '2.5rem', marginBottom: '15px' }}>🌿</div>
+              <h3 style={{ margin: '0 0 8px 0', color: '#27ae60', fontSize: '2rem' }}>
+                {communityStats.co2Saved?.toLocaleString()}
+              </h3>
+              <p style={{ margin: 0, color: '#7f8c8d', fontWeight: '600' }}>kg CO₂ Saved</p>
+              <p style={{ margin: '5px 0 0 0', color: '#27ae60', fontSize: '0.9rem' }}>
+                Collective climate action
+              </p>
+            </div>
+          </div>
+
+          {/* Additional Stats */}
+          <div style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
+            gap: '20px'
+          }}>
+            <div style={{
+              background: 'white',
+              borderRadius: '12px',
+              padding: '25px',
+              boxShadow: '0 2px 10px rgba(0,0,0,0.1)'
+            }}>
+              <h3 style={{ margin: '0 0 20px 0', color: '#2c3e50' }}>📈 Today's Activity</h3>
+              <div style={{
+                display: 'grid',
+                gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',
+                gap: '15px'
+              }}>
+                <div style={{ textAlign: 'center' }}>
+                  <div style={{ fontSize: '1.6rem', color: '#3498db', fontWeight: 'bold' }}>
+                    {communityStats.postsToday}
+                  </div>
+                  <div style={{ color: '#7f8c8d', fontSize: '0.9rem' }}>New Posts</div>
+                </div>
+                <div style={{ textAlign: 'center' }}>
+                  <div style={{ fontSize: '1.6rem', color: '#27ae60', fontWeight: 'bold' }}>
+                    {communityStats.activeToday}
+                  </div>
+                  <div style={{ color: '#7f8c8d', fontSize: '0.9rem' }}>Active Users</div>
+                </div>
+                <div style={{ textAlign: 'center' }}>
+                  <div style={{ fontSize: '1.6rem', color: '#e67e22', fontWeight: 'bold' }}>
+                    {Math.floor(communityStats.waterTests / 30)}
+                  </div>
+                  <div style={{ color: '#7f8c8d', fontSize: '0.9rem' }}>Tests Today</div>
+                </div>
+              </div>
+            </div>
+
+            <div style={{
+              background: 'white',
+              borderRadius: '12px',
+              padding: '25px',
+              boxShadow: '0 2px 10px rgba(0,0,0,0.1)'
+            }}>
+              <h3 style={{ margin: '0 0 20px 0', color: '#2c3e50' }}>💾 Community Storage</h3>
+              <div style={{
+                display: 'grid',
+                gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',
+                gap: '15px'
+              }}>
+                <div style={{ textAlign: 'center' }}>
+                  <div style={{ fontSize: '1.6rem', color: '#9b59b6', fontWeight: 'bold' }}>
+                    {imageHandler.getStorageInfo().imageCount}
+                  </div>
+                  <div style={{ color: '#7f8c8d', fontSize: '0.9rem' }}>Images Stored</div>
+                </div>
+                <div style={{ textAlign: 'center' }}>
+                  <div style={{ fontSize: '1.2rem', color: '#34495e', fontWeight: 'bold' }}>
+                    {imageHandler.getStorageInfo().formattedStorageUsed}
+                  </div>
+                  <div style={{ color: '#7f8c8d', fontSize: '0.9rem' }}>Storage Used</div>
+                </div>
+                <div style={{ textAlign: 'center' }}>
+                  <button
+                    onClick={() => {
+                      const cleaned = imageHandler.cleanupOldImages();
+                      alert(`Cleaned up ${cleaned} old images`);
+                      // Refresh stats
+                      setCommunityStats({...communityStats});
+                    }}
+                    style={{
+                      background: '#95a5a6',
+                      color: 'white',
+                      border: 'none',
+                      borderRadius: '6px',
+                      padding: '8px 12px',
+                      fontSize: '0.8rem',
+                      cursor: 'pointer'
+                    }}
+                  >
+                    🧹 Cleanup
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+    </div>
+  );
+};
+
+// Community Post Component
+const CommunityPost = ({ post, currentUser, onLike, onComment, formatTimeAgo, getPostTypeIcon }) => {
+  const [showComments, setShowComments] = useState(false);
+  const [newComment, setNewComment] = useState('');
+
+  const handleCommentSubmit = (e) => {
+    e.preventDefault();
+    if (newComment.trim()) {
+      onComment(post.id, newComment);
+      setNewComment('');
+    }
+  };
+
+  return (
+    <div style={{
+      background: 'white',
+      borderRadius: '12px',
+      padding: '20px',
+      boxShadow: '0 2px 10px rgba(0,0,0,0.1)'
+    }}>
+      {/* Post Header */}
+      <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        marginBottom: '15px'
+      }}>
+        <div style={{
+          width: '45px',
+          height: '45px',
+          borderRadius: '50%',
+          background: '#f8f9fa',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontSize: '1.3rem',
+          marginRight: '12px'
+        }}>
+          {post.avatar}
+        </div>
+        <div style={{ flex: 1 }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <h4 style={{ margin: '0', color: '#2c3e50' }}>{post.author}</h4>
+            <span style={{ fontSize: '1rem' }}>{getPostTypeIcon(post.type)}</span>
+          </div>
+          <p style={{ margin: '2px 0 0 0', fontSize: '0.9rem', color: '#7f8c8d' }}>
+            {formatTimeAgo(post.timestamp)}
+            {post.location && <span> • 📍 {post.location}</span>}
+          </p>
+        </div>
+      </div>
+
+      {/* Post Content */}
+      <p style={{ 
+        margin: '0 0 15px 0', 
+        lineHeight: '1.6',
+        color: '#2c3e50',
+        fontSize: '1rem'
+      }}>
+        {post.content}
+      </p>
+
+      {/* Post Image */}
+      {post.image && (
+        <div style={{
+          marginBottom: '15px',
+          borderRadius: '12px',
+          overflow: 'hidden',
+          border: '1px solid #e1e8ed'
+        }}>
+          <img
+            src={post.image.url}
+            alt="Post content"
+            style={{
+              width: '100%',
+              maxHeight: '400px',
+              objectFit: 'cover',
+              display: 'block'
+            }}
+          />
+        </div>
+      )}
+
+      {/* Post Data (if available) */}
+      {post.data && Object.keys(post.data).length > 0 && (
+        <div style={{
+          background: '#f8f9fa',
+          padding: '15px',
+          borderRadius: '8px',
+          marginBottom: '15px',
+          fontSize: '0.9rem',
+          border: '1px solid #e1e8ed'
+        }}>
+          {post.type === 'water_test' && post.data.ph && (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+              <div style={{ fontWeight: 'bold', color: '#3498db', marginBottom: '5px' }}>
+                💧 Water Test Results
+              </div>
+              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))', gap: '10px' }}>
+                <div style={{ background: 'white', padding: '8px', borderRadius: '6px', textAlign: 'center' }}>
+                  <div style={{ fontWeight: 'bold', color: '#2c3e50' }}>pH Level</div>
+                  <div style={{ color: '#3498db', fontSize: '1.1rem' }}>{post.data.ph}</div>
+                </div>
+                <div style={{ background: 'white', padding: '8px', borderRadius: '6px', textAlign: 'center' }}>
+                  <div style={{ fontWeight: 'bold', color: '#2c3e50' }}>Nitrates</div>
+                  <div style={{ color: '#e67e22', fontSize: '1.1rem' }}>{post.data.nitrates}ppm</div>
+                </div>
+                {post.data.chlorine && (
+                  <div style={{ background: 'white', padding: '8px', borderRadius: '6px', textAlign: 'center' }}>
+                    <div style={{ fontWeight: 'bold', color: '#2c3e50' }}>Chlorine</div>
+                    <div style={{ color: '#27ae60', fontSize: '1.1rem' }}>{post.data.chlorine}ppm</div>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+          {post.type === 'biodiversity_scan' && post.data.speciesCount && (
+            <div>
+              <div style={{ fontWeight: 'bold', color: '#e67e22', marginBottom: '8px' }}>
+                🦜 Biodiversity Scan Results
+              </div>
+              <div style={{ display: 'flex', gap: '15px', alignItems: 'center' }}>
+                <div style={{ background: 'white', padding: '8px 12px', borderRadius: '6px' }}>
+                  <strong>{post.data.speciesCount}</strong> species identified
+                </div>
+                {post.data.rareSpecies && (
+                  <div style={{ background: '#fff3cd', padding: '8px 12px', borderRadius: '6px', color: '#856404' }}>
+                    ⭐ Rare: {post.data.rareSpecies}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+          {post.type === 'carbon_reduction' && post.data.co2Saved && (
+            <div>
+              <div style={{ fontWeight: 'bold', color: '#27ae60', marginBottom: '8px' }}>
+                🌳 Carbon Impact Results
+              </div>
+              <div style={{ display: 'flex', gap: '15px', alignItems: 'center' }}>
+                <div style={{ background: 'white', padding: '8px 12px', borderRadius: '6px' }}>
+                  <strong>{post.data.co2Saved}kg</strong> CO₂ saved
+                </div>
+                <div style={{ background: 'white', padding: '8px 12px', borderRadius: '6px' }}>
+                  <strong>{post.data.reduction}%</strong> reduction
+                </div>
+              </div>
+            </div>
+          )}
+          {post.type === 'plant_identification' && post.data.species && (
+            <div>
+              <div style={{ fontWeight: 'bold', color: '#27ae60', marginBottom: '8px' }}>
+                🌿 Plant Identification
+              </div>
+              <div style={{ display: 'flex', gap: '15px', alignItems: 'center' }}>
+                <div style={{ background: 'white', padding: '8px 12px', borderRadius: '6px' }}>
+                  Species: <strong>{post.data.species}</strong>
+                </div>
+                {post.data.confidence && (
+                  <div style={{ background: 'white', padding: '8px 12px', borderRadius: '6px' }}>
+                    Confidence: <strong>{post.data.confidence}%</strong>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Post Actions */}
+      <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '20px',
+        paddingTop: '15px',
+        borderTop: '1px solid #ecf0f1'
+      }}>
+        <button 
+          onClick={() => onLike(post.id)}
+          disabled={!currentUser || currentUser.isGuest}
+          style={{
+            background: 'none',
+            border: 'none',
+            cursor: (!currentUser || currentUser.isGuest) ? 'not-allowed' : 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '5px',
+            color: '#7f8c8d',
+            fontSize: '14px',
+            opacity: (!currentUser || currentUser.isGuest) ? 0.5 : 1
+          }}
+        >
+          ❤️ {post.likes} Likes
+        </button>
+        <button 
+          onClick={() => setShowComments(!showComments)}
+          style={{
+            background: 'none',
+            border: 'none',
+            cursor: 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '5px',
+            color: '#7f8c8d',
+            fontSize: '14px'
+          }}
+        >
+          💬 {post.comments.length} Comments
+        </button>
+        <button style={{
+          background: 'none',
+          border: 'none',
+          cursor: 'pointer',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '5px',
+          color: '#7f8c8d',
+          fontSize: '14px'
+        }}>
+          🔄 Share
+        </button>
+      </div>
+
+      {/* Comments Section */}
+      {showComments && (
+        <div style={{
+          marginTop: '15px',
+          paddingTop: '15px',
+          borderTop: '1px solid #ecf0f1'
+        }}>
+          {/* Existing Comments */}
+          {post.comments.map((comment, index) => (
+            <div key={index} style={{
+              display: 'flex',
+              gap: '10px',
+              marginBottom: '12px',
+              padding: '10px',
+              background: '#f8f9fa',
+              borderRadius: '8px'
+            }}>
+              <div style={{
+                width: '30px',
+                height: '30px',
+                borderRadius: '50%',
+                background: '#e9ecef',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontSize: '0.8rem'
+              }}>
+                👤
+              </div>
+              <div style={{ flex: 1 }}>
+                <div style={{ fontWeight: 'bold', fontSize: '0.9rem', marginBottom: '2px' }}>
+                  {comment.author}
+                </div>
+                <div style={{ fontSize: '0.9rem', color: '#2c3e50' }}>
+                  {comment.content}
+                </div>
+                <div style={{ fontSize: '0.8rem', color: '#7f8c8d', marginTop: '2px' }}>
+                  {formatTimeAgo(comment.timestamp)}
+                </div>
+              </div>
+            </div>
+          ))}
+
+          {/* Add Comment Form */}
+          {currentUser && !currentUser.isGuest ? (
+            <form onSubmit={handleCommentSubmit} style={{ marginTop: '10px' }}>
+              <div style={{ display: 'flex', gap: '10px' }}>
+                <input
+                  type="text"
+                  value={newComment}
+                  onChange={(e) => setNewComment(e.target.value)}
+                  placeholder="Write a comment..."
+                  style={{
+                    flex: 1,
+                    padding: '8px 12px',
+                    border: '1px solid #e1e8ed',
+                    borderRadius: '20px',
+                    fontSize: '14px'
+                  }}
+                />
+                <button
+                  type="submit"
+                  disabled={!newComment.trim()}
+                  style={{
+                    padding: '8px 16px',
+                    background: newComment.trim() ? '#3498db' : '#95a5a6',
+                    color: 'white',
+                    border: 'none',
+                    borderRadius: '20px',
+                    cursor: newComment.trim() ? 'pointer' : 'not-allowed',
+                    fontSize: '14px'
+                  }}
+                >
+                  Post
+                </button>
+              </div>
+            </form>
+          ) : (
+            <div style={{
+              textAlign: 'center',
+              padding: '10px',
+              color: '#7f8c8d',
+              fontSize: '0.9rem'
+            }}>
+              <a href="#" onClick={(e) => { e.preventDefault(); /* Navigate to login */ }} style={{ color: '#3498db' }}>
+                Create an account
+              </a> to join the conversation
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Community;