web/src/pages/Track.js

import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { ecoSpireIntegration } from '../utils/ecoSpireIntegration';
import { calculateCarbonFootprint, generateSampleCarbonData } from '../utils/carbonFootprintTracker';
import { analyzeAirQuality } from '../utils/airQualityAnalysis';
import { systemHealthChecker } from '../utils/systemHealth';
import { testSuite } from '../utils/testSuite';

function Track() {
  const { t } = useTranslation();
  const [activities, setActivities] = useState([]);
  const [newActivity, setNewActivity] = useState({ type: 'transport', description: '', co2: 0 });
  const [goals, setGoals] = useState({ daily: 10, weekly: 70, monthly: 300 });
  const [carbonFootprint, setCarbonFootprint] = useState(null);
  const [airQuality, setAirQuality] = useState(null);
  const [systemHealth, setSystemHealth] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [activeTab, setActiveTab] = useState('tracker');

  useEffect(() => {
    const savedActivities = localStorage.getItem('ecospire-activities');
    const savedGoals = localStorage.getItem('ecospire-goals');

    if (savedActivities) {
      setActivities(JSON.parse(savedActivities));
    }
    if (savedGoals) {
      setGoals(JSON.parse(savedGoals));
    }

    // Initialize system
    initializeSystem();
  }, []);

  useEffect(() => {
    localStorage.setItem('ecospire-activities', JSON.stringify(activities));
  }, [activities]);

  const initializeSystem = async () => {
    try {
      // Initialize EcoSpire Integration Hub
      await ecoSpireIntegration.initializeTools();
      
      // Get system health
      const health = await systemHealthChecker.performHealthCheck();
      setSystemHealth(health);
      
      // Load sample carbon footprint data
      const sampleData = generateSampleCarbonData();
      const footprint = await calculateCarbonFootprint(sampleData);
      setCarbonFootprint(footprint);
      
      // Get air quality data
      const airData = await analyzeAirQuality(null, 'Urban Area');
      setAirQuality(airData);
      
    } catch (error) {
      console.error('System initialization failed:', error);
    }
  };

  const addActivity = () => {
    if (newActivity.description) {
      const activityWithTimestamp = {
        ...newActivity,
        id: Date.now(),
        timestamp: Date.now()
      };
      setActivities([...activities, activityWithTimestamp]);
      setNewActivity({ type: 'transport', description: '', co2: 0 });
    }
  };

  const deleteActivity = (id) => {
    setActivities(activities.filter(activity => activity.id !== id));
  };

  const totalCO2 = activities.reduce((sum, activity) => sum + activity.co2, 0);

  const runSystemTest = async () => {
    setIsLoading(true);
    try {
      const testResults = await testSuite.runAllTests();
      alert(t('track.systemTestResults', { passed: testResults.summary.passed, failed: testResults.summary.failed, warnings: testResults.summary.warnings, successRate: testResults.summary.successRate }));
    } catch (error) {
      alert(t('track.systemTestFailed', { message: error.message }));
    } finally {
      setIsLoading(false);
    }
  };

  const runPerformanceAnalysis = async () => {
    setIsLoading(true);
    try {
      const report = await ecoSpireIntegration.runSystemTest();
      console.log('Performance Analysis:', report);
      alert(t('track.performanceAnalysisComplete', { overallStatus: report.overallStatus, toolCount: Object.keys(report.toolStatus).length, successRate: report.performanceMetrics.successRate.toFixed(1) }));
    } catch (error) {
      alert(t('track.performanceAnalysisFailed', { message: error.message }));
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="container">
      <div style={{ textAlign: 'center', marginBottom: '40px' }}>
        <h2 style={{ fontSize: '3rem', color: '#2E7D32', marginBottom: '10px' }}>
          {t('track.title')}
        </h2>
        <p style={{ fontSize: '1.2rem', color: '#666' }}>
          {t('track.subtitle')}
        </p>
        
        {/* System Status */}
        {systemHealth && (
          <div style={{
            display: 'inline-block',
            background: systemHealth.overall === 'healthy' ? '#e8f5e8' : '#fff3e0',
            color: systemHealth.overall === 'healthy' ? '#2E7D32' : '#F57C00',
            padding: '8px 16px',
            borderRadius: '20px',
            fontSize: '0.9rem',
            fontWeight: 'bold',
            marginTop: '10px'
          }}>
            {t('track.systemStatus', { status: systemHealth.overall.toUpperCase(), score: systemHealth.overallScore })}
          </div>
        )}
      </div>

      {/* Navigation Tabs */}
      <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '30px' }}>
        {[
          { id: 'tracker', label: t('track.tabs.tracker'), icon: '📊' },
          { id: 'dashboard', label: t('track.tabs.dashboard'), icon: '🌍' },
          { id: 'system', label: t('track.tabs.system'), icon: '⚙️' }
        ].map(tab => (
          <button
            key={tab.id}
            onClick={() => setActiveTab(tab.id)}
            style={{
              padding: '12px 24px',
              margin: '0 5px',
              border: 'none',
              borderRadius: '25px',
              background: activeTab === tab.id ? '#2E7D32' : '#f5f5f5',
              color: activeTab === tab.id ? 'white' : '#666',
              cursor: 'pointer',
              fontWeight: 'bold',
              fontSize: '0.9rem'
            }}
          >
            {tab.label}
          </button>
        ))}
      </div>

      {/* Carbon Tracker Tab */}
      {activeTab === 'tracker' && (
        <>
          <div className="grid grid-2" style={{ marginBottom: '30px' }}>
            <div className="card">
              <h3>{t('track.addNewActivity')}</h3>
              <div style={{ marginBottom: '15px' }}>
                <select
                  value={newActivity.type}
                  onChange={(e) => setNewActivity({ ...newActivity, type: e.target.value })}
                  style={{ width: '100%', padding: '10px', marginBottom: '10px', borderRadius: '5px', border: '1px solid #ddd' }}
                >
                  <option value="transport">{t('track.activityTypes.transport')}</option>
                  <option value="energy">{t('track.activityTypes.energy')}</option>
                  <option value="food">{t('track.activityTypes.food')}</option>
                  <option value="waste">{t('track.activityTypes.waste')}</option>
                </select>
                <input
                  type="text"
                  placeholder={t('track.activityDescriptionPlaceholder')}
                  value={newActivity.description}
                  onChange={(e) => setNewActivity({ ...newActivity, description: e.target.value })}
                  style={{ width: '100%', padding: '10px', marginBottom: '10px', borderRadius: '5px', border: '1px solid #ddd' }}
                />
                <input
                  type="number"
                  placeholder={t('track.co2ImpactPlaceholder')}
                  value={newActivity.co2}
                  onChange={(e) => setNewActivity({ ...newActivity, co2: parseFloat(e.target.value) || 0 })}
                  style={{ width: '100%', padding: '10px', marginBottom: '15px', borderRadius: '5px', border: '1px solid #ddd' }}
                />
                <button onClick={addActivity} className="btn btn-primary" style={{ width: '100%' }}>
                  {t('track.addActivityButton')}
                </button>
              </div>
            </div>

            <div className="card">
              <h3>{t('track.todaysImpact')}</h3>
              <div style={{ textAlign: 'center', padding: '20px' }}>
                <div style={{ fontSize: '3rem', color: totalCO2 > 10 ? '#f44336' : '#4CAF50' }}>
                  {totalCO2.toFixed(1)}
                </div>
                <div style={{ color: '#666', marginBottom: '20px' }}>{t('track.kgCo2Today')}</div>
                <div style={{ fontSize: '0.9rem', color: '#666' }}>
                  {t('track.treeEquivalent', { count: (totalCO2 / 22).toFixed(1) })}
                </div>
              </div>
            </div>
          </div>
        </>
      )}

      {/* Environmental Dashboard Tab */}
      {activeTab === 'dashboard' && (
        <div className="grid grid-2" style={{ marginBottom: '30px' }}>
          {/* Carbon Footprint Analysis */}
          {carbonFootprint && (
            <div className="card">
              <h3>{t('track.carbonFootprintAnalysis')}</h3>
              <div style={{ textAlign: 'center', marginBottom: '20px' }}>
                <div style={{ fontSize: '2.5rem', color: '#2E7D32', marginBottom: '10px' }}>
                  {carbonFootprint.total.toFixed(1)}
                </div>
                <div style={{ color: '#666', marginBottom: '15px' }}>{t('track.kgCo2eDaily')}</div>
                <div style={{
                  background: carbonFootprint.comparison.category === 'Excellent' ? '#e8f5e8' : 
                            carbonFootprint.comparison.category === 'Good' ? '#fff3e0' : '#ffebee',
                  color: carbonFootprint.comparison.category === 'Excellent' ? '#2E7D32' : 
                        carbonFootprint.comparison.category === 'Good' ? '#F57C00' : '#f44336',
                  padding: '8px 16px',
                  borderRadius: '20px',
                  fontSize: '0.9rem',
                  fontWeight: 'bold'
                }}>
                  {carbonFootprint.comparison.category}
                </div>
              </div>
              
              <div style={{ fontSize: '0.9rem' }}>
                <div style={{ marginBottom: '10px' }}>
                  <strong>{t('track.annualProjection')}:</strong> {carbonFootprint.comparison.annualProjection} kg CO₂e
                </div>
                <div style={{ marginBottom: '10px' }}>
                  <strong>{t('track.vsGlobalAverage')}:</strong> {carbonFootprint.comparison.vsGlobalAverage.value}% {carbonFootprint.comparison.vsGlobalAverage.message}
                </div>
                <div>
                  <strong>{t('track.confidence')}:</strong> {carbonFootprint.confidence}%
                </div>
              </div>
            </div>
          )}

          {/* Air Quality Status */}
          {airQuality && (
            <div className="card">
              <h3>{t('track.airQualityStatus')}</h3>
              <div style={{ textAlign: 'center', marginBottom: '20px' }}>
                <div style={{ 
                  fontSize: '2.5rem', 
                  color: airQuality.color,
                  marginBottom: '10px' 
                }}>
                  {airQuality.overallAQI}
                </div>
                <div style={{ color: '#666', marginBottom: '15px' }}>{t('track.aqiIndex')}</div>
                <div style={{
                  background: airQuality.color + '20',
                  color: airQuality.color,
                  padding: '8px 16px',
                  borderRadius: '20px',
                  fontSize: '0.9rem',
                  fontWeight: 'bold'
                }}>
                  {airQuality.category}
                </div>
              </div>
              
              <div style={{ fontSize: '0.9rem' }}>
                <div style={{ marginBottom: '10px' }}>
                  <strong>{t('track.dominantPollutant')}:</strong> {airQuality.dominantPollutant?.toUpperCase()}
                </div>
                <div style={{ marginBottom: '10px' }}>
                  <strong>{t('track.healthAdvice')}:</strong> {airQuality.healthRecommendations?.general}
                </div>
                <div>
                  <strong>{t('track.confidence')}:</strong> {airQuality.confidence}%
                </div>
              </div>
            </div>
          )}

          {/* System Performance */}
          <div className="card">
            <h3>{t('track.systemPerformance')}</h3>
            <div style={{ textAlign: 'center', marginBottom: '20px' }}>
              <div style={{ fontSize: '2.5rem', color: '#2196F3', marginBottom: '10px' }}>
                {systemHealth?.overallScore || 0}%
              </div>
              <div style={{ color: '#666', marginBottom: '15px' }}>{t('track.systemHealth')}</div>
              <div style={{
                background: systemHealth?.overall === 'healthy' ? '#e8f5e8' : '#fff3e0',
                color: systemHealth?.overall === 'healthy' ? '#2E7D32' : '#F57C00',
                padding: '8px 16px',
                borderRadius: '20px',
                fontSize: '0.9rem',
                fontWeight: 'bold'
              }}>
                {systemHealth?.overall?.toUpperCase() || t('track.unknown')}
              </div>
            </div>
            
            <div style={{ fontSize: '0.9rem' }}>
              <div style={{ marginBottom: '10px' }}>
                <strong>{t('track.components')}:</strong> {Object.keys(systemHealth?.components || {}).length}
              </div>
              <div style={{ marginBottom: '10px' }}>
                <strong>{t('track.errors')}:</strong> {systemHealth?.errors?.length || 0}
              </div>
              <div>
                <strong>{t('track.warnings')}:</strong> {systemHealth?.warnings?.length || 0}
              </div>
            </div>
          </div>

          {/* Quick Actions */}
          <div className="card">
            <h3>{t('track.quickActions')}</h3>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
              <button
                onClick={runSystemTest}
                disabled={isLoading}
                style={{
                  padding: '12px',
                  background: '#2196F3',
                  color: 'white',
                  border: 'none',
                  borderRadius: '8px',
                  cursor: isLoading ? 'not-allowed' : 'pointer',
                  fontWeight: 'bold'
                }}
              >
                {isLoading ? t('track.running') : t('track.runSystemTest')}
              </button>
              
              <button
                onClick={runPerformanceAnalysis}
                disabled={isLoading}
                style={{
                  padding: '12px',
                  background: '#FF9800',
                  color: 'white',
                  border: 'none',
                  borderRadius: '8px',
                  cursor: isLoading ? 'not-allowed' : 'pointer',
                  fontWeight: 'bold'
                }}
              >
                {isLoading ? t('track.analyzing') : t('track.performanceAnalysis')}
              </button>
              
              <button
                onClick={initializeSystem}
                disabled={isLoading}
                style={{
                  padding: '12px',
                  background: '#4CAF50',
                  color: 'white',
                  border: 'none',
                  borderRadius: '8px',
                  cursor: isLoading ? 'not-allowed' : 'pointer',
                  fontWeight: 'bold'
                }}
              >
                {isLoading ? t('track.refreshing') : t('track.refreshData')}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* System Control Tab */}
      {activeTab === 'system' && (
        <div className="grid grid-1" style={{ marginBottom: '30px' }}>
          <div className="card">
            <h3>{t('track.systemControlPanel')}</h3>
            
            {/* Tool Status */}
            <div style={{ marginBottom: '30px' }}>
              <h4 style={{ color: '#2E7D32', marginBottom: '15px' }}>{t('track.analysisToolsStatus')}</h4>
              <div className="grid grid-3" style={{ gap: '15px' }}>
                {[
                  { name: t('track.tools.waterQuality'), icon: '💧', status: 'active', accuracy: '89.3%' },
                  { name: t('track.tools.biodiversity'), icon: '🦜', status: 'active', accuracy: '82.1%' },
                  { name: t('track.tools.airQuality'), icon: '🌬️', status: 'active', accuracy: '85.0%' },
                  { name: t('track.tools.carbonTracker'), icon: '🌱', status: 'active', accuracy: '90.0%' },
                  { name: t('track.tools.soilHealth'), icon: '🌱', status: 'active', accuracy: '78.5%' },
                  { name: t('track.tools.climateImpact'), icon: '🌡️', status: 'active', accuracy: '85.7%' }
                ].map(tool => (
                  <div key={tool.name} style={{
                    padding: '15px',
                    background: '#f8f9fa',
                    borderRadius: '8px',
                    textAlign: 'center',
                    border: '2px solid #4CAF50'
                  }}>
                    <div style={{ fontSize: '2rem', marginBottom: '10px' }}>{tool.icon}</div>
                    <div style={{ fontWeight: 'bold', marginBottom: '5px' }}>{tool.name}</div>
                    <div style={{ 
                      color: '#4CAF50', 
                      fontSize: '0.8rem',
                      background: '#e8f5e8',
                      padding: '4px 8px',
                      borderRadius: '12px',
                      marginBottom: '5px'
                    }}>
                      {t(`track.toolStatus.${tool.status}`)}
                    </div>
                    <div style={{ fontSize: '0.8rem', color: '#666' }}>
                      {t('track.accuracy', { value: tool.accuracy })}
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* System Metrics */}
            <div style={{ marginBottom: '30px' }}>
              <h4 style={{ color: '#2E7D32', marginBottom: '15px' }}>{t('track.systemMetrics')}</h4>
              <div className="grid grid-4" style={{ gap: '15px' }}>
                <div style={{ textAlign: 'center', padding: '15px', background: '#e3f2fd', borderRadius: '8px' }}>
                  <div style={{ fontSize: '2rem', color: '#1976d2', marginBottom: '5px' }}>6</div>
                  <div style={{ fontSize: '0.9rem', fontWeight: 'bold' }}>{t('track.activeTools')}</div>
                </div>
                <div style={{ textAlign: 'center', padding: '15px', background: '#e8f5e8', borderRadius: '8px' }}>
                  <div style={{ fontSize: '2rem', color: '#2E7D32', marginBottom: '5px' }}>95%</div>
                  <div style={{ fontSize: '0.9rem', fontWeight: 'bold' }}>{t('track.uptime')}</div>
                </div>
                <div style={{ textAlign: 'center', padding: '15px', background: '#fff3e0', borderRadius: '8px' }}>
                  <div style={{ fontSize: '2rem', color: '#F57C00', marginBottom: '5px' }}>2.1s</div>
                  <div style={{ fontSize: '0.9rem', fontWeight: 'bold' }}>{t('track.avgResponse')}</div>
                </div>
                <div style={{ textAlign: 'center', padding: '15px', background: '#fce4ec', borderRadius: '8px' }}>
                  <div style={{ fontSize: '2rem', color: '#C2185B', marginBottom: '5px' }}>0</div>
                  <div style={{ fontSize: '0.9rem', fontWeight: 'bold' }}>{t('track.criticalErrors')}</div>
                </div>
              </div>
            </div>

            {/* Advanced Controls */}
            <div>
              <h4 style={{ color: '#2E7D32', marginBottom: '15px' }}>{t('track.advancedControls')}</h4>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '15px' }}>
                <button
                  onClick={() => alert(t('track.cacheCleared'))}
                  style={{
                    padding: '15px',
                    background: '#FF5722',
                    color: 'white',
                    border: 'none',
                    borderRadius: '8px',
                    cursor: 'pointer',
                    fontWeight: 'bold'
                  }}
                >
                  {t('track.clearCache')}
                </button>
                
                <button
                  onClick={() => alert(t('track.systemOptimized'))}
                  style={{
                    padding: '15px',
                    background: '#9C27B0',
                    color: 'white',
                    border: 'none',
                    borderRadius: '8px',
                    cursor: 'pointer',
                    fontWeight: 'bold'
                  }}
                >
                  {t('track.optimizePerformance')}
                </button>
                
                <button
                  onClick={() => alert(t('track.backupCreated'))}
                  style={{
                    padding: '15px',
                    background: '#607D8B',
                    color: 'white',
                    border: 'none',
                    borderRadius: '8px',
                    cursor: 'pointer',
                    fontWeight: 'bold'
                  }}
                >
                  {t('track.backupData')}
                </button>
                
                <button
                  onClick={() => alert(t('track.systemReset'))}
                  style={{
                    padding: '15px',
                    background: '#795548',
                    color: 'white',
                    border: 'none',
                    borderRadius: '8px',
                    cursor: 'pointer',
                    fontWeight: 'bold'
                  }}
                >
                  {t('track.resetSystem')}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Recent Activities - Only show in tracker tab */}
      {activeTab === 'tracker' && (
        <div className="card">
          <h3>{t('track.recentActivities')}</h3>
          {activities.length === 0 ? (
            <p style={{ textAlign: 'center', color: '#666', padding: '40px' }}>
              {t('track.noActivities')}
            </p>
          ) : (
            <div style={{ maxHeight: '400px', overflowY: 'auto' }}>
              {activities
                .sort((a, b) => (b.timestamp || 0) - (a.timestamp || 0))
                .map(activity => (
                  <div key={activity.id} style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    padding: '15px',
                    borderBottom: '1px solid #eee',
                    marginBottom: '5px',
                    borderRadius: '8px',
                    background: '#fafafa'
                  }}>
                    <div style={{ flex: 1 }}>
                      <div style={{ display: 'flex', alignItems: 'center', marginBottom: '5px' }}>
                        <span style={{ marginRight: '10px', fontSize: '1.2rem' }}>
                          {activity.type === 'transport' ? '🚗' : activity.type === 'energy' ? '⚡' : activity.type === 'food' ? '🍽️' : '🗑️'}
                        </span>
                        <strong>{activity.description}</strong>
                      </div>
                      <div style={{ fontSize: '0.8rem', color: '#666' }}>
                        {activity.timestamp ? new Date(activity.timestamp).toLocaleString() : t('track.today')}
                      </div>
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: '15px' }}>
                      <div style={{ color: '#2E7D32', fontWeight: 'bold', fontSize: '1.1rem' }}>
                        {t('track.kgCo2', { value: activity.co2 })}
                      </div>
                      <button
                        onClick={() => deleteActivity(activity.id)}
                        style={{
                          background: '#f44336',
                          color: 'white',
                          border: 'none',
                          borderRadius: '4px',
                          padding: '5px 8px',
                          cursor: 'pointer',
                          fontSize: '0.8rem'
                        }}
                      >
                        ✕
                      </button>
                    </div>
                  </div>
                ))}
            </div>
          )}
        </div>
      )}

      {/* Footer */}
      <div style={{ 
        textAlign: 'center', 
        marginTop: '40px', 
        padding: '20px', 
        background: '#f8f9fa', 
        borderRadius: '12px',
        color: '#666'
      }}>
        <div style={{ fontSize: '1.1rem', fontWeight: 'bold', marginBottom: '10px' }}>
          {t('track.footer.title')}
        </div>
        <div style={{ fontSize: '0.9rem' }}>
          {t('track.footer.subtitle')}
        </div>
        <div style={{ fontSize: '0.8rem', marginTop: '10px' }}>
          {t('track.footer.status', { date: new Date().toLocaleString() })}
        </div>
      </div>
    </div>
  );
}

export default Track;