web/src/components/Analytics.js

import React from 'react';

function Analytics({ activities, goals }) {
  // Calculate various analytics
  const calculateAnalytics = () => {
    if (activities.length === 0) return null;

    const now = new Date();
    const thirtyDaysAgo = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
    const sevenDaysAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);

    // Filter activities by time period
    const last30Days = activities.filter(activity => 
      new Date(activity.timestamp || Date.now()) >= thirtyDaysAgo
    );
    const last7Days = activities.filter(activity => 
      new Date(activity.timestamp || Date.now()) >= sevenDaysAgo
    );

    // Calculate totals by category
    const categoryTotals = activities.reduce((acc, activity) => {
      acc[activity.type] = (acc[activity.type] || 0) + activity.co2;
      return acc;
    }, {});

    // Calculate monthly trend
    const monthlyData = [];
    for (let i = 29; i >= 0; i--) {
      const date = new Date(now.getTime() - i * 24 * 60 * 60 * 1000);
      const dayActivities = activities.filter(activity => {
        const activityDate = new Date(activity.timestamp || Date.now());
        return activityDate.toDateString() === date.toDateString();
      });
      const dayTotal = dayActivities.reduce((sum, activity) => sum + activity.co2, 0);
      monthlyData.push({
        date: date.getDate(),
        co2: dayTotal,
        day: date.toLocaleDateString('en-US', { weekday: 'short' })
      });
    }

    // Calculate averages
    const dailyAverage = last30Days.reduce((sum, activity) => sum + activity.co2, 0) / 30;
    const weeklyAverage = last7Days.reduce((sum, activity) => sum + activity.co2, 0) / 7;

    // Calculate improvement
    const firstHalf = last30Days.slice(0, 15).reduce((sum, activity) => sum + activity.co2, 0) / 15;
    const secondHalf = last30Days.slice(15).reduce((sum, activity) => sum + activity.co2, 0) / 15;
    const improvement = ((firstHalf - secondHalf) / firstHalf) * 100;

    return {
      categoryTotals,
      monthlyData,
      dailyAverage,
      weeklyAverage,
      improvement,
      totalActivities: activities.length,
      totalCO2: activities.reduce((sum, activity) => sum + activity.co2, 0),
      last30DaysCO2: last30Days.reduce((sum, activity) => sum + activity.co2, 0),
      last7DaysCO2: last7Days.reduce((sum, activity) => sum + activity.co2, 0)
    };
  };

  const analytics = calculateAnalytics();

  if (!analytics) {
    return (
      <div className="card">
        <h3>📊 Analytics</h3>
        <p style={{ textAlign: 'center', color: '#666', padding: '40px' }}>
          Start tracking activities to see your analytics!
        </p>
      </div>
    );
  }

  const categoryColors = {
    transport: '#2196F3',
    energy: '#FF9800',
    food: '#4CAF50',
    waste: '#9C27B0'
  };

  const categoryIcons = {
    transport: '🚗',
    energy: '⚡',
    food: '🍽️',
    waste: '🗑️'
  };

  return (
    <div className="card">
      <h3>📊 Your Environmental Analytics</h3>
      
      {/* Key Metrics */}
      <div className="grid grid-4" style={{ marginBottom: '30px' }}>
        <div style={{ textAlign: 'center', padding: '15px', background: '#f8f9fa', borderRadius: '8px' }}>
          <div style={{ fontSize: '2rem', color: '#2E7D32', fontWeight: 'bold' }}>
            {analytics.totalCO2.toFixed(1)}
          </div>
          <div style={{ fontSize: '0.9rem', color: '#666' }}>Total CO₂ (kg)</div>
        </div>
        <div style={{ textAlign: 'center', padding: '15px', background: '#f8f9fa', borderRadius: '8px' }}>
          <div style={{ fontSize: '2rem', color: '#2196F3', fontWeight: 'bold' }}>
            {analytics.dailyAverage.toFixed(1)}
          </div>
          <div style={{ fontSize: '0.9rem', color: '#666' }}>Daily Average</div>
        </div>
        <div style={{ textAlign: 'center', padding: '15px', background: '#f8f9fa', borderRadius: '8px' }}>
          <div style={{ fontSize: '2rem', color: analytics.improvement > 0 ? '#4CAF50' : '#f44336', fontWeight: 'bold' }}>
            {analytics.improvement > 0 ? '-' : '+'}{Math.abs(analytics.improvement).toFixed(1)}%
          </div>
          <div style={{ fontSize: '0.9rem', color: '#666' }}>30-Day Trend</div>
        </div>
        <div style={{ textAlign: 'center', padding: '15px', background: '#f8f9fa', borderRadius: '8px' }}>
          <div style={{ fontSize: '2rem', color: '#FF9800', fontWeight: 'bold' }}>
            {analytics.totalActivities}
          </div>
          <div style={{ fontSize: '0.9rem', color: '#666' }}>Activities Logged</div>
        </div>
      </div>

      {/* Category Breakdown */}
      <div style={{ marginBottom: '30px' }}>
        <h4 style={{ marginBottom: '15px' }}>🎯 Impact by Category</h4>
        <div className="grid grid-2">
          {Object.entries(analytics.categoryTotals).map(([category, total]) => (
            <div key={category} style={{ 
              display: 'flex', 
              alignItems: 'center', 
              padding: '15px',
              border: '1px solid #eee',
              borderRadius: '8px',
              marginBottom: '10px'
            }}>
              <div style={{ 
                fontSize: '2rem', 
                marginRight: '15px',
                width: '50px',
                textAlign: 'center'
              }}>
                {categoryIcons[category]}
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ 
                  display: 'flex', 
                  justifyContent: 'space-between', 
                  alignItems: 'center',
                  marginBottom: '8px'
                }}>
                  <span style={{ fontWeight: 'bold', textTransform: 'capitalize' }}>
                    {category}
                  </span>
                  <span style={{ color: categoryColors[category], fontWeight: 'bold' }}>
                    {total.toFixed(1)} kg CO₂
                  </span>
                </div>
                <div style={{ 
                  width: '100%', 
                  height: '6px', 
                  background: '#eee', 
                  borderRadius: '3px',
                  overflow: 'hidden'
                }}>
                  <div style={{
                    width: `${(total / analytics.totalCO2) * 100}%`,
                    height: '100%',
                    background: categoryColors[category]
                  }}></div>
                </div>
                <div style={{ 
                  fontSize: '0.8rem', 
                  color: '#666', 
                  marginTop: '5px' 
                }}>
                  {((total / analytics.totalCO2) * 100).toFixed(1)}% of total impact
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Environmental Impact Comparison */}
      <div style={{ 
        background: 'linear-gradient(135deg, #e8f5e8 0%, #f1f8e9 100%)',
        padding: '20px',
        borderRadius: '12px'
      }}>
        <h4 style={{ color: '#2E7D32', marginBottom: '15px' }}>🌍 Your Environmental Impact</h4>
        <div className="grid grid-3">
          <div style={{ textAlign: 'center' }}>
            <div style={{ fontSize: '1.5rem', marginBottom: '5px' }}>🌳</div>
            <div style={{ fontWeight: 'bold', color: '#2E7D32' }}>
              {(analytics.totalCO2 / 22).toFixed(1)} trees
            </div>
            <div style={{ fontSize: '0.8rem', color: '#666' }}>needed to offset</div>
          </div>
          <div style={{ textAlign: 'center' }}>
            <div style={{ fontSize: '1.5rem', marginBottom: '5px' }}>🚗</div>
            <div style={{ fontWeight: 'bold', color: '#2E7D32' }}>
              {(analytics.totalCO2 / 0.21).toFixed(0)} km
            </div>
            <div style={{ fontSize: '0.8rem', color: '#666' }}>car driving equivalent</div>
          </div>
          <div style={{ textAlign: 'center' }}>
            <div style={{ fontSize: '1.5rem', marginBottom: '5px' }}>⚡</div>
            <div style={{ fontWeight: 'bold', color: '#2E7D32' }}>
              {(analytics.totalCO2 / 0.5).toFixed(0)} kWh
            </div>
            <div style={{ fontSize: '0.8rem', color: '#666' }}>electricity equivalent</div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Analytics;