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;