web/src/pages/SmartFarming.js

import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { soilHealthAnalyzer } from '../utils/soilHealthAnalyzer';
import { climateImpactAssessment } from '../utils/climateImpactAssessment';
import { realTimeEnvironmentalAPI } from '../utils/realTimeEnvironmentalAPI';

function SmartFarming() {
  const { t } = useTranslation();
  const [selectedCrop, setSelectedCrop] = useState('');
  const [farmSize, setFarmSize] = useState('');
  const [currentPractices, setCurrentPractices] = useState([]);
  const [realTimeData, setRealTimeData] = useState(null);
  const [location, setLocation] = useState({ lat: 40.7128, lon: -74.0060 }); // Default to NYC
  const [isLoadingData, setIsLoadingData] = useState(false);

  // Load real-time environmental data
  useEffect(() => {
    loadRealTimeData();
    
    // Update data every 10 minutes
    const interval = setInterval(loadRealTimeData, 10 * 60 * 1000);
    return () => clearInterval(interval);
  }, [location]);

  const loadRealTimeData = async () => {
    setIsLoadingData(true);
    try {
      const data = await realTimeEnvironmentalAPI.getComprehensiveData(location.lat, location.lon);
      setRealTimeData(data);
    } catch (error) {
      console.error('Failed to load real-time data:', error);
    } finally {
      setIsLoadingData(false);
    }
  };

  // Removed: Get user's location useEffect hook

  const farmingTechniques = t('smartFarming.farmingTechniques', { returnObjects: true });
  const cropRecommendations = t('smartFarming.cropRecommendations', { returnObjects: true });
  const farmingApps = t('smartFarming.farmingApps', { returnObjects: true });
  const sustainabilityPractices = t('smartFarming.sustainabilityPractices', { returnObjects: true });

  const getDifficultyColor = (difficulty) => {
    switch (difficulty) {
      case t('smartFarming.difficulties.beginner'): return '#4CAF50';
      case t('smartFarming.difficulties.intermediate'): return '#FF9800';
      case t('smartFarming.difficulties.advanced'): return '#f44336';
      default: return '#666';
    }
  };

  const getCostColor = (cost) => {
    switch (cost) {
      case t('smartFarming.costs.low'): return '#4CAF50';
      case t('smartFarming.costs.medium'): return '#FF9800';
      case t('smartFarming.costs.high'): return '#f44336';
      default: return '#666';
    }
  };

  return (
    <div className="container">

      {/* Header */}

      <div style={{ textAlign: 'center', marginBottom: '40px' }}>

        <h2 style={{ fontSize: '3.5rem', color: '#2E7D32', marginBottom: '10px' }}>

          {t('smartFarming.title')}

        </h2>

        <p style={{ fontSize: '1.3rem', color: '#666', marginBottom: '15px' }}>

          {t('smartFarming.subtitle')}

        </p>

        <div style={{

          background: 'linear-gradient(135deg, #2E7D32 0%, #4CAF50 100%)',

          color: 'white',

          padding: '15px 30px',

          borderRadius: '25px',

          display: 'inline-block',

          fontSize: '1rem',

          fontWeight: 'bold'

        }}>

          {t('smartFarming.headerBanner')}

        </div>

      </div>



      {/* Real-Time Environmental Data */}

      {realTimeData && (

        <div className="card" style={{ marginBottom: '30px', background: 'linear-gradient(135deg, #E8F5E8 0%, #F1F8E9 100%)' }}>

          <h3 style={{ color: '#2E7D32', marginBottom: '20px' }}>{t('smartFarming.realTime.title')}</h3>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '20px' }}>

            

            {/* Weather Data */}

            <div style={{ background: 'white', padding: '15px', borderRadius: '10px', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }}>

              <h4 style={{ color: '#1976D2', marginBottom: '10px' }}>{t('smartFarming.realTime.weather.title')}</h4>

              <div style={{ fontSize: '0.9rem', lineHeight: '1.6' }}>

                <div><strong>{t('smartFarming.realTime.weather.temperature')}:</strong> {realTimeData.weather.temperature}°C</div>

                <div><strong>{t('smartFarming.realTime.weather.humidity')}:</strong> {realTimeData.weather.humidity}%</div>

                <div><strong>{t('smartFarming.realTime.weather.wind')}:</strong> {realTimeData.weather.windSpeed} m/s</div>

                <div><strong>{t('smartFarming.realTime.weather.uvIndex')}:</strong> {realTimeData.weather.uvIndex}</div>

                <div style={{ fontSize: '0.8rem', color: '#666', marginTop: '5px' }}>

                  {t('smartFarming.realTime.source')}: {realTimeData.weather.source}

                </div>

              </div>

            </div>



            {/* Air Quality */}

            <div style={{ background: 'white', padding: '15px', borderRadius: '10px', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }}>

              <h4 style={{ color: '#FF9800', marginBottom: '10px' }}>{t('smartFarming.realTime.airQuality.title')}</h4>

              <div style={{ fontSize: '0.9rem', lineHeight: '1.6' }}>

                <div><strong>{t('smartFarming.realTime.airQuality.aqi')}:</strong> {realTimeData.airQuality.aqi}</div>

                <div><strong>{t('smartFarming.realTime.airQuality.pm25')}:</strong> {realTimeData.airQuality.pm25} μg/m³</div>

                <div><strong>{t('smartFarming.realTime.airQuality.pm10')}:</strong> {realTimeData.airQuality.pm10} μg/m³</div>

                <div><strong>{t('smartFarming.realTime.airQuality.o3')}:</strong> {realTimeData.airQuality.o3} μg/m³</div>

                <div style={{ fontSize: '0.8rem', color: '#666', marginTop: '5px' }}>

                  {t('smartFarming.realTime.source')}: {realTimeData.airQuality.source}

                </div>

              </div>

            </div>



            {/* Agricultural Conditions */}

            <div style={{ background: 'white', padding: '15px', borderRadius: '10px', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }}>

              <h4 style={{ color: '#4CAF50', marginBottom: '10px' }}>{t('smartFarming.realTime.cropConditions.title')}</h4>

              <div style={{ fontSize: '0.9rem', lineHeight: '1.6' }}>

                <div><strong>{t('smartFarming.realTime.cropConditions.soilMoisture')}:</strong> {realTimeData.agricultural.soilMoisture}%</div>

                <div><strong>{t('smartFarming.realTime.cropConditions.soilTemp')}:</strong> {realTimeData.agricultural.soilTemperature}°C</div>

                <div><strong>{t('smartFarming.realTime.cropConditions.ndvi')}:</strong> {realTimeData.agricultural.ndvi.toFixed(2)}</div>

                <div><strong>{t('smartFarming.realTime.cropConditions.cropStage')}:</strong> {realTimeData.agricultural.cropStage}</div>

                <div style={{ fontSize: '0.8rem', color: '#666', marginTop: '5px' }}>

                  {t('smartFarming.realTime.cropConditions.gdd')}: {realTimeData.agricultural.growingDegreeDays}

                </div>

              </div>

            </div>



            {/* Data Quality Indicator */}

            <div style={{ background: 'white', padding: '15px', borderRadius: '10px', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }}>

              <h4 style={{ color: '#9C27B0', marginBottom: '10px' }}>{t('smartFarming.realTime.dataQuality.title')}</h4>

              <div style={{ fontSize: '0.9rem', lineHeight: '1.6' }}>

                <div><strong>{t('smartFarming.realTime.dataQuality.qualityScore')}:</strong> {realTimeData.dataQuality.score}%</div>

                <div><strong>{t('smartFarming.realTime.dataQuality.level')}:</strong> {realTimeData.dataQuality.level}</div>

                <div style={{ fontSize: '0.8rem', color: '#666', marginTop: '5px' }}>

                  {t('smartFarming.realTime.dataQuality.lastUpdated')}: {new Date(realTimeData.timestamp).toLocaleTimeString()}

                </div>

                {isLoadingData && (

                  <div style={{ color: '#2196F3', fontSize: '0.8rem', marginTop: '5px' }}>

                    {t('smartFarming.realTime.dataQuality.updating')}

                  </div>

                )}

              </div>

            </div>

          </div>

        </div>

      )}



      {/* Farm Assessment */}

      <div className="card" style={{ marginBottom: '30px' }}>

        <h3 style={{ color: '#2E7D32', marginBottom: '20px' }}>{t('smartFarming.assessment.title')}</h3>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '20px' }}>

          <div>

            <label style={{ display: 'block', marginBottom: '10px', fontWeight: 'bold' }}>{t('smartFarming.assessment.primaryCrop')}:</label>

            <select

              value={selectedCrop}

              onChange={(e) => setSelectedCrop(e.target.value)}

              style={{

                width: '100%',

                padding: '12px',

                fontSize: '1rem',

                borderRadius: '8px',

                border: '2px solid #4CAF50'

              }}

            >

              <option value="">{t('smartFarming.assessment.selectCrop')}</option>

              <option value="Corn">{t('smartFarming.crops.corn')}</option>

              <option value="Wheat">{t('smartFarming.crops.wheat')}</option>

              <option value="Soybeans">{t('smartFarming.crops.soybeans')}</option>

              <option value="Vegetables">{t('smartFarming.crops.vegetables')}</option>

              <option value="Rice">{t('smartFarming.crops.rice')}</option>

              <option value="Cotton">{t('smartFarming.crops.cotton')}</option>

            </select>

          </div>

          <div>

            <label style={{ display: 'block', marginBottom: '10px', fontWeight: 'bold' }}>{t('smartFarming.assessment.farmSize')}:</label>

            <select

              value={farmSize}

              onChange={(e) => setFarmSize(e.target.value)}

              style={{

                width: '100%',

                padding: '12px',

                fontSize: '1rem',

                borderRadius: '8px',

                border: '2px solid #4CAF50'

              }}

            >

              <option value="">{t('smartFarming.assessment.selectFarmSize')}</option>

              <option value="Small">{t('smartFarming.farmSizes.small')}</option>

              <option value="Medium">{t('smartFarming.farmSizes.medium')}</option>

              <option value="Large">{t('smartFarming.farmSizes.large')}</option>

            </select>

          </div>

        </div>



        {selectedCrop && cropRecommendations[selectedCrop] && (

          <div style={{ marginTop: '20px', padding: '20px', background: '#e8f5e8', borderRadius: '12px' }}>

            <h4 style={{ color: '#2E7D32', marginBottom: '15px' }}>

              {t('smartFarming.assessment.recommendationsTitle', { crop: t(`smartFarming.crops.${selectedCrop.toLowerCase()}`) })}

            </h4>

            <div style={{ marginBottom: '15px' }}>

              <strong>{t('smartFarming.assessment.recommendedTechniques')}:</strong>

              <ul style={{ marginTop: '5px' }}>

                {cropRecommendations[selectedCrop].techniques.map((technique, index) => (

                  <li key={index}>{technique}</li>

                ))}

              </ul>

            </div>

            <div style={{ marginBottom: '15px' }}>

              <strong>{t('smartFarming.assessment.seasonalTips')}:</strong>

              <ul style={{ marginTop: '5px' }}>

                {cropRecommendations[selectedCrop].seasonalTips.map((tip, index) => (

                  <li key={index}>{tip}</li>

                ))}

              </ul>

            </div>

            <div style={{ marginBottom: '15px' }}>

              <strong>{t('smartFarming.assessment.sustainabilityFocus')}:</strong> {cropRecommendations[selectedCrop].sustainability}

            </div>

            

            {/* Accuracy Disclaimer */}

            <div style={{

              background: 'linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%)',

              padding: '15px',

              borderRadius: '8px',

              border: '2px solid #FF9800',

              marginTop: '15px'

            }}>

              <h5 style={{ color: '#F57C00', marginBottom: '10px' }}>{t('smartFarming.assessment.accuracy.title')}</h5>

              <p style={{ fontSize: '0.9rem', marginBottom: '10px', lineHeight: '1.5' }}>

                {t('smartFarming.assessment.accuracy.description')}

              </p>

              <ul style={{ fontSize: '0.9rem', paddingLeft: '20px', margin: 0 }}>

                <li>{t('smartFarming.assessment.accuracy.factors.climate')}</li>

                <li>{t('smartFarming.assessment.accuracy.factors.farmSize')}</li>

                <li>{t('smartFarming.assessment.accuracy.factors.regulations')}</li>

                <li>{t('smartFarming.assessment.accuracy.factors.cropVarieties')}</li>

              </ul>

              <p style={{ fontSize: '0.8rem', color: '#666', marginTop: '10px', margin: 0 }}>

                <strong>{t('smartFarming.assessment.accuracy.consult')}</strong>

              </p>

            </div>

          </div>

        )}

      </div>



      {/* Farming Techniques */}

      <div style={{ marginBottom: '40px' }}>

        <h3 style={{ color: '#2E7D32', marginBottom: '20px', textAlign: 'center' }}>

          {t('smartFarming.techniques.title')}

        </h3>

        <div className="grid grid-2">

          {farmingTechniques.map(technique => (

            <div key={technique.id} className="card">

              <div style={{ display: 'flex', alignItems: 'center', marginBottom: '15px' }}>

                <div style={{ fontSize: '2.5rem', marginRight: '15px' }}>{technique.icon}</div>

                <div>

                  <h4 style={{ margin: '0 0 5px 0', color: '#2E7D32' }}>{technique.name}</h4>

                  <div style={{ fontSize: '0.8rem', color: '#FF9800', fontWeight: 'bold' }}>

                    {technique.category}

                  </div>

                </div>

              </div>



              <p style={{ marginBottom: '15px', lineHeight: '1.6' }}>

                {technique.description}

              </p>



              <div style={{ marginBottom: '15px' }}>

                <h5 style={{ color: '#2E7D32', marginBottom: '8px' }}>{t('smartFarming.techniques.benefits')}:</h5>

                <ul style={{ margin: 0, paddingLeft: '20px', fontSize: '0.9rem' }}>

                  {technique.benefits.map((benefit, index) => (

                    <li key={index}>{benefit}</li>

                  ))}

                </ul>

              </div>



              <div style={{ marginBottom: '15px' }}>

                <h5 style={{ color: '#2E7D32', marginBottom: '8px' }}>{t('smartFarming.techniques.implementation')}:</h5>

                <ul style={{ margin: 0, paddingLeft: '20px', fontSize: '0.9rem' }}>

                  {technique.implementation.map((step, index) => (

                    <li key={index}>{step}</li>

                  ))}

                </ul>

              </div>



              <div style={{ display: 'flex', gap: '10px', marginBottom: '15px', fontSize: '0.8rem' }}>

                <div style={{

                  padding: '4px 8px',

                  borderRadius: '12px',

                  background: getCostColor(technique.cost),

                  color: 'white'

                }}>

                  {t('smartFarming.techniques.cost')}: {technique.cost}

                </div>

                <div style={{

                  padding: '4px 8px',

                  borderRadius: '12px',

                  background: getDifficultyColor(technique.difficulty),

                  color: 'white'

                }}>

                  {technique.difficulty}

                </div>

                <div style={{

                  padding: '4px 8px',

                  borderRadius: '12px',

                  background: '#2196F3',

                  color: 'white'

                }}>

                  {t('smartFarming.techniques.roi')}: {technique.roi}

                </div>

              </div>

            </div>

          ))}

        </div>

      </div>



      {/* Farming Apps */}

      <div style={{ marginBottom: '40px' }}>

        <h3 style={{ color: '#2E7D32', marginBottom: '20px', textAlign: 'center' }}>

          {t('smartFarming.apps.title')}

        </h3>

        <div className="grid grid-3">

          {farmingApps.map((app, index) => (

            <div key={index} className="card" style={{ textAlign: 'center' }}>

              <h4 style={{ color: '#2E7D32', marginBottom: '10px' }}>{app.name}</h4>

              <div style={{

                fontSize: '0.8rem',

                color: '#FF9800',

                fontWeight: 'bold',

                marginBottom: '10px'

              }}>

                {app.category}

              </div>

              <p style={{ fontSize: '0.9rem', marginBottom: '15px', lineHeight: '1.4' }}>

                {app.description}

              </p>

              <div style={{ marginBottom: '15px' }}>

                <strong style={{ fontSize: '0.8rem' }}>{t('smartFarming.apps.features')}:</strong>

                <ul style={{ fontSize: '0.8rem', textAlign: 'left', marginTop: '5px' }}>

                  {app.features.map((feature, idx) => (

                    <li key={idx}>{feature}</li>

                  ))}

                </ul>

              </div>

              <div style={{ marginBottom: '15px' }}>

                <span style={{ fontSize: '0.8rem', color: '#666' }}>{t('smartFarming.apps.rating')}: </span>

                <span style={{ color: '#FF9800', fontWeight: 'bold' }}>

                  {'⭐'.repeat(Math.floor(app.rating))} {app.rating}

                </span>

              </div>

              <a

                href={app.link}

                target="_blank"

                rel="noopener noreferrer"

                style={{

                  display: 'inline-block',

                  padding: '8px 16px',

                  background: '#4CAF50',

                  color: 'white',

                  textDecoration: 'none',

                  borderRadius: '20px',

                  fontSize: '0.8rem',

                  fontWeight: 'bold'

                }}

              >

                {t('smartFarming.apps.getApp')}

              </a>

            </div>

          ))}

        </div>

      </div>



      {/* Sustainability Practices */}

      <div style={{ marginBottom: '40px' }}>

        <h3 style={{ color: '#2E7D32', marginBottom: '20px', textAlign: 'center' }}>

          {t('smartFarming.sustainability.title')}

        </h3>

        <div className="grid grid-2">

          {sustainabilityPractices.map((item, index) => (

            <div key={index} className="card">

              <h4 style={{ color: '#2E7D32', marginBottom: '10px' }}>{item.practice}</h4>

              <p style={{ marginBottom: '15px', lineHeight: '1.6' }}>

                {item.description}

              </p>

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '15px', fontSize: '0.9rem' }}>

                <div style={{ background: '#e8f5e8', padding: '10px', borderRadius: '8px' }}>

                  <strong style={{ color: '#2E7D32' }}>{t('smartFarming.sustainability.environmentalImpact')}:</strong><br />

                  {item.impact}

                </div>

                <div style={{ background: '#fff3e0', padding: '10px', borderRadius: '8px' }}>

                  <strong style={{ color: '#F57C00' }}>{t('smartFarming.sustainability.financialIncentives')}:</strong><br />

                  {item.incentives}

                </div>

              </div>

            </div>

          ))}

        </div>

      </div>



      {/* Success Stories */}

      <div style={{ marginBottom: '40px' }}>

        <h3 style={{ color: '#2E7D32', marginBottom: '20px', textAlign: 'center' }}>

          {t('smartFarming.successStories.title')}

        </h3>

        <div className="grid grid-3">

          <div style={{ textAlign: 'center' }}>

            <div style={{ fontSize: '2rem', fontWeight: 'bold', color: '#2E7D32' }}>40%</div>

            <div style={{ fontSize: '0.9rem', color: '#666' }}>{t('smartFarming.successStories.yieldIncrease')}</div>

            <div style={{ fontSize: '0.8rem', color: '#666', marginTop: '5px' }}>

              {t('smartFarming.successStories.yieldIncreaseStory')}

            </div>

          </div>

          <div style={{ textAlign: 'center' }}>

            <div style={{ fontSize: '2rem', fontWeight: 'bold', color: '#2E7D32' }}>60%</div>

            <div style={{ fontSize: '0.9rem', color: '#666' }}>{t('smartFarming.successStories.waterSavings')}</div>

            <div style={{ fontSize: '0.8rem', color: '#666', marginTop: '5px' }}>

              {t('smartFarming.successStories.waterSavingsStory')}

            </div>

          </div>

          <div style={{ textAlign: 'center' }}>

            <div style={{ fontSize: '2rem', fontWeight: 'bold', color: '#2E7D32' }}>$50K</div>

            <div style={{ fontSize: '0.9rem', color: '#666' }}>{t('smartFarming.successStories.annualSavings')}</div>

            <div style={{ fontSize: '0.8rem', color: '#666', marginTop: '5px' }}>

              {t('smartFarming.successStories.annualSavingsStory')}

            </div>

          </div>

        </div>

      </div>

    </div>
  );
}

export default SmartFarming;