import React, { useState, useEffect } from 'react';
import { Cloud, Sun, CloudRain, Snowflake, Wind, Droplets, Heart, BookOpen, Save, Star, Zap, Calendar } from 'lucide-react';

const WeatherPet = () => {
  const [location, setLocation] = useState('');
  const [weather, setWeather] = useState(null);
  const [hourly, setHourly] = useState([]);
  const [loading, setLoading] = useState(false);
  const [petMood, setPetMood] = useState('happy');
  const [petAnimation, setPetAnimation] = useState(0);
  const [screen, setScreen] = useState('main');
  const [notes, setNotes] = useState('');
  const [savedForecasts, setSavedForecasts] = useState([]);
  const [tempUnit, setTempUnit] = useState('F');
  const [windUnit, setWindUnit] = useState('mph');
  const [stats, setStats] = useState({
    checkStreak: 0,
    lastCheckDate: null,
    sunnyDays: 0,
    rainyDays: 0,
    snowyDays: 0,
    totalChecks: 0
  });

  // Meteor shower data
  const meteorShowers = [
    { name: "Quadrantids", peak: "Jan 3-4", period: "Dec 28 - Jan 12" },
    { name: "Lyrids", peak: "Apr 22-23", period: "Apr 16-25" },
    { name: "Eta Aquarids", peak: "May 6-7", period: "Apr 19 - May 28" },
    { name: "Perseids", peak: "Aug 12-13", period: "Jul 17 - Aug 24" },
    { name: "Orionids", peak: "Oct 21-22", period: "Oct 2 - Nov 7" },
    { name: "Leonids", peak: "Nov 17-18", period: "Nov 6-30" },
    { name: "Geminids", peak: "Dec 13-14", period: "Dec 4-20" }
  ];

  useEffect(() => {
    loadSavedForecasts();
    loadStats();
  }, []);

  const loadStats = async () => {
    try {
      const result = await window.storage.get('weatherpet:stats');
      if (result) {
        setStats(JSON.parse(result.value));
      }
    } catch (error) {
      console.log('No stats yet');
    }
  };

  const saveStats = async (newStats) => {
    try {
      await window.storage.set('weatherpet:stats', JSON.stringify(newStats));
      setStats(newStats);
    } catch (error) {
      console.error('Could not save stats');
    }
  };

  const updateStats = (weatherCondition) => {
    const today = new Date().toDateString();
    let newStats = { ...stats };
    
    // Update streak
    if (stats.lastCheckDate === today) {
      // Already checked today, don't update streak
    } else if (stats.lastCheckDate === new Date(Date.now() - 86400000).toDateString()) {
      // Checked yesterday, increase streak
      newStats.checkStreak += 1;
    } else {
      // Streak broken
      newStats.checkStreak = 1;
    }
    
    newStats.lastCheckDate = today;
    newStats.totalChecks += 1;
    
    // Update weather type counters
    const condition = weatherCondition.toLowerCase();
    if (condition.includes('sunny') || condition.includes('clear')) {
      newStats.sunnyDays += 1;
    } else if (condition.includes('rain')) {
      newStats.rainyDays += 1;
    } else if (condition.includes('snow')) {
      newStats.snowyDays += 1;
    }
    
    saveStats(newStats);
  };

  const loadSavedForecasts = async () => {
    try {
      const keys = await window.storage.list('forecast:');
      if (keys && keys.keys) {
        const forecasts = [];
        for (const key of keys.keys) {
          const result = await window.storage.get(key);
          if (result) {
            forecasts.push(JSON.parse(result.value));
          }
        }
        setSavedForecasts(forecasts.sort((a, b) => b.timestamp - a.timestamp));
      }
    } catch (error) {
      console.log('No saved forecasts yet');
    }
  };

  useEffect(() => {
    const interval = setInterval(() => {
      setPetAnimation(prev => (prev + 1) % 2);
    }, 500);
    return () => clearInterval(interval);
  }, []);

  useEffect(() => {
    if (!weather) return;
    
    const temp = tempUnit === 'F' ? weather.temp : weather.tempC;
    const condition = weather.condition.toLowerCase();
    
    if (condition.includes('rain')) setPetMood('rainy');
    else if (condition.includes('snow')) setPetMood('snowy');
    else if (condition.includes('cloud')) setPetMood('cloudy');
    else if ((tempUnit === 'F' && temp > 80) || (tempUnit === 'C' && temp > 27)) setPetMood('hot');
    else if ((tempUnit === 'F' && temp < 32) || (tempUnit === 'C' && temp < 0)) setPetMood('cold');
    else setPetMood('happy');
  }, [weather, tempUnit]);

  const convertTemp = (f) => Math.round((f - 32) * 5 / 9);
  const mphToKmh = (mph) => Math.round(mph * 1.60934);
  const mphToKnots = (mph) => Math.round(mph * 0.868976);

  const fetchWeather = async () => {
    if (!location) return;
    
    setLoading(true);
    try {
      // First, geocode the location
      const geoResponse = await fetch(`https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(location)}&count=1&language=en&format=json`);
      const geoData = await geoResponse.json();
      
      if (!geoData.results || geoData.results.length === 0) {
        alert('Location not found! Try a different city name.');
        setLoading(false);
        return;
      }
      
      const { latitude, longitude, name, country } = geoData.results[0];
      
      // Fetch current weather and hourly forecast
      const weatherResponse = await fetch(
        `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&current=temperature_2m,relative_humidity_2m,apparent_temperature,precipitation,weather_code,cloud_cover,wind_speed_10m,visibility&hourly=temperature_2m,weather_code&temperature_unit=fahrenheit&wind_speed_unit=mph&timezone=auto&forecast_days=1`
      );
      const weatherData = await weatherResponse.json();
      
      // Convert weather code to condition text
      const getConditionFromCode = (code) => {
        if (code === 0) return 'Clear';
        if (code <= 3) return 'Partly Cloudy';
        if (code <= 48) return 'Foggy';
        if (code <= 67) return 'Rainy';
        if (code <= 77) return 'Snowy';
        if (code <= 82) return 'Showers';
        if (code <= 86) return 'Snow Showers';
        if (code <= 99) return 'Thunderstorm';
        return 'Unknown';
      };
      
      const currentCondition = getConditionFromCode(weatherData.current.weather_code);
      
      const weather = {
        location: `${name}, ${country}`,
        temp: Math.round(weatherData.current.temperature_2m),
        tempC: Math.round((weatherData.current.temperature_2m - 32) * 5 / 9),
        condition: currentCondition,
        humidity: weatherData.current.relative_humidity_2m,
        windMph: Math.round(weatherData.current.wind_speed_10m),
        windKmh: Math.round(weatherData.current.wind_speed_10m * 1.60934),
        feelsLike: Math.round(weatherData.current.apparent_temperature),
        feelsLikeC: Math.round((weatherData.current.apparent_temperature - 32) * 5 / 9),
        icon: weatherData.current.weather_code,
        cloudCover: weatherData.current.cloud_cover,
        visibility: Math.round(weatherData.current.visibility / 1609.34) // meters to miles
      };
      
      setWeather(weather);
      updateStats(currentCondition);
      
      // Process hourly data
      const now = new Date();
      const currentHour = now.getHours();
      const hourlyForecasts = [];
      
      for (let i = 0; i < 24; i++) {
        const tempF = weatherData.hourly.temperature_2m[i];
        hourlyForecasts.push({
          time: i,
          temp: Math.round(tempF),
          tempC: Math.round((tempF - 32) * 5 / 9),
          condition: getConditionFromCode(weatherData.hourly.weather_code[i]),
          icon: weatherData.hourly.weather_code[i]
        });
      }
      
      setHourly(hourlyForecasts);
      
    } catch (error) {
      console.error('Weather fetch error:', error);
      alert('Unable to fetch weather data. Please check your internet connection and try again!');
    }
    setLoading(false);
  };

  const saveCurrentForecast = async () => {
    if (!weather) return;
    
    const forecast = {
      timestamp: Date.now(),
      date: new Date().toLocaleDateString(),
      weather,
      hourly,
      notes
    };
    
    try {
      await window.storage.set(`forecast:${forecast.timestamp}`, JSON.stringify(forecast));
      await loadSavedForecasts();
      alert('Weather forecast saved! 💾');
    } catch (error) {
      console.error('Save error:', error);
      alert('Could not save forecast');
    }
  };

  const deleteForecast = async (timestamp) => {
    try {
      await window.storage.delete(`forecast:${timestamp}`);
      await loadSavedForecasts();
    } catch (error) {
      console.error('Delete error:', error);
    }
  };

  const isGoodStargazing = () => {
    if (!weather) return false;
    return weather.cloudCover < 30 && weather.visibility > 6;
  };

  const getUpcomingMeteorShowers = () => {
    const today = new Date();
    const month = today.getMonth();
    const day = today.getDate();
    
    return meteorShowers.filter(shower => {
      const peakMonth = new Date(shower.peak + ", 2025").getMonth();
      const peakDay = new Date(shower.peak + ", 2025").getDate();
      
      const daysUntil = (peakMonth - month) * 30 + (peakDay - day);
      return daysUntil >= -7 && daysUntil <= 30;
    });
  };

  const getWeatherIcon = (condition) => {
    const c = condition?.toLowerCase() || '';
    if (c.includes('rain')) return <CloudRain className="w-5 h-5" />;
    if (c.includes('snow')) return <Snowflake className="w-5 h-5" />;
    if (c.includes('cloud')) return <Cloud className="w-5 h-5" />;
    return <Sun className="w-5 h-5" />;
  };

  const renderPet = () => {
    const faces = {
      happy: ['(◕‿◕)', '(◕ω◕)'],
      rainy: ['(◕︵◕)', '(◕~◕)'],
      snowy: ['(◕o◕)', '(◕▽◕)'],
      cloudy: ['(◕_◕)', '(◕‿◕)'],
      hot: ['(>_<)', '(◕△◕)'],
      cold: ['(◕︿◕)', '(◕~◕)']
    };
    
    return faces[petMood][petAnimation];
  };

  const getPetMessage = () => {
    const messages = {
      happy: "Perfect weather! ☀️",
      rainy: "Cozy rain day! 🌧️",
      snowy: "Snow day! ⛄",
      cloudy: "Nice & peaceful! ☁️",
      hot: "Stay cool! 🔥",
      cold: "Bundle up! ❄️"
    };
    return messages[petMood] || "Check weather!";
  };

  const renderMainScreen = () => (
    <>
      {/* Pet Display */}
      <div className="text-center mb-3">
        <div className="text-5xl mb-1">{renderPet()}</div>
        <div className="text-xs text-green-900 font-bold">{getPetMessage()}</div>
        <div className="flex justify-center gap-1 mt-1">
          <Heart className="w-3 h-3 text-red-600 fill-red-600" />
          <Heart className="w-3 h-3 text-red-600 fill-red-600" />
          <Heart className="w-3 h-3 text-red-600 fill-red-600" />
        </div>
      </div>

      {/* Location Input */}
      <div className="mb-2">
        <input
          type="text"
          value={location}
          onChange={(e) => setLocation(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && fetchWeather()}
          placeholder="Enter city..."
          className="w-full px-3 py-2 rounded-lg bg-white bg-opacity-60 text-green-900 text-sm border-2 border-green-700 focus:border-green-900 outline-none placeholder-green-700"
        />
      </div>

      {/* Action Buttons */}
      <div className="grid grid-cols-4 gap-1 mb-3">
        <button 
          onClick={fetchWeather}
          disabled={loading}
          className="bg-green-700 text-white py-1.5 rounded text-xs font-bold hover:bg-green-800 disabled:opacity-50"
        >
          {loading ? '...' : 'GET'}
        </button>
        <button 
          onClick={saveCurrentForecast}
          disabled={!weather}
          className="bg-green-700 text-white py-1.5 rounded text-xs font-bold hover:bg-green-800 disabled:opacity-50"
        >
          <Save className="w-3 h-3 mx-auto" />
        </button>
        <button 
          onClick={() => setScreen('stats')}
          className="bg-green-700 text-white py-1.5 rounded text-xs font-bold hover:bg-green-800"
        >
          <Zap className="w-3 h-3 mx-auto" />
        </button>
        <button 
          onClick={() => setScreen('saved')}
          className="bg-green-700 text-white py-1.5 rounded text-xs font-bold hover:bg-green-800"
        >
          <BookOpen className="w-3 h-3 mx-auto" />
        </button>
      </div>

      {/* Weather Display */}
      {weather ? (
        <div className="bg-white bg-opacity-40 rounded-lg p-3 text-green-900">
          <div className="text-center mb-2">
            <div className="text-lg font-bold">{weather.location}</div>
            <div className="flex items-center justify-center gap-2 my-1">
              {getWeatherIcon(weather.condition)}
              <span className="text-3xl font-bold">
                {tempUnit === 'F' ? weather.temp : weather.tempC}°{tempUnit}
              </span>
            </div>
            <div className="text-xs">{weather.condition}</div>
            <div className="text-xs text-green-700">
              Feels: {tempUnit === 'F' ? weather.feelsLike : weather.feelsLikeC}°{tempUnit}
            </div>
          </div>
          
          <div className="grid grid-cols-3 gap-1 text-xs text-center mb-2">
            <div className="bg-white bg-opacity-50 rounded p-1.5">
              <Droplets className="w-3 h-3 mx-auto mb-0.5" />
              <div className="font-bold">{weather.humidity}%</div>
            </div>
            <div className="bg-white bg-opacity-50 rounded p-1.5">
              <Wind className="w-3 h-3 mx-auto mb-0.5" />
              <div className="font-bold">
                {windUnit === 'mph' && `${weather.windMph}mph`}
                {windUnit === 'kmh' && `${weather.windKmh}km/h`}
                {windUnit === 'knots' && `${mphToKnots(weather.windMph)}kn`}
              </div>
            </div>
            <div className="bg-white bg-opacity-50 rounded p-1.5">
              <Star className="w-3 h-3 mx-auto mb-0.5" />
              <div className="font-bold">{isGoodStargazing() ? 'YES' : 'NO'}</div>
            </div>
          </div>

          {/* Stargazing Alert */}
          {isGoodStargazing() && (
            <div className="bg-purple-900 bg-opacity-80 text-yellow-300 text-xs rounded p-2 mb-2 text-center">
              ⭐ Great stargazing tonight! Clear skies! ⭐
            </div>
          )}

          {/* Hourly Scroll */}
          <div className="overflow-x-auto">
            <div className="flex gap-1 pb-1">
              {hourly.map((hour, idx) => (
                <div key={idx} className="bg-white bg-opacity-60 rounded p-1.5 min-w-12 text-center">
                  <div className="text-xs font-bold">{hour.time}h</div>
                  <div className="my-0.5">{getWeatherIcon(hour.condition)}</div>
                  <div className="text-xs font-bold">
                    {tempUnit === 'F' ? hour.temp : hour.tempC}°
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      ) : (
        <div className="text-center text-green-900 py-8">
          <div className="text-3xl mb-2">🌍</div>
          <div className="text-xs">Enter a location!</div>
        </div>
      )}

      {/* Notes */}
      <div className="mt-3">
        <div className="text-green-900 text-xs font-bold mb-1">📝 Notes</div>
        <textarea
          value={notes}
          onChange={(e) => setNotes(e.target.value)}
          placeholder="Weather notes..."
          className="w-full px-2 py-1.5 rounded-lg bg-white bg-opacity-60 text-green-900 text-xs border-2 border-green-700 focus:border-green-900 outline-none resize-none"
          rows="2"
        />
      </div>

      {/* Unit Toggles */}
      <div className="flex gap-2 mt-2 text-xs">
        <button
          onClick={() => setTempUnit(tempUnit === 'F' ? 'C' : 'F')}
          className="flex-1 bg-green-700 text-white py-1 rounded font-bold hover:bg-green-800"
        >
          {tempUnit}°
        </button>
        <button
          onClick={() => {
            const units = ['mph', 'kmh', 'knots'];
            const idx = units.indexOf(windUnit);
            setWindUnit(units[(idx + 1) % 3]);
          }}
          className="flex-1 bg-green-700 text-white py-1 rounded font-bold hover:bg-green-800"
        >
          {windUnit === 'mph' && 'MPH'}
          {windUnit === 'kmh' && 'KM/H'}
          {windUnit === 'knots' && 'KNOTS'}
        </button>
      </div>
    </>
  );

  const renderStatsScreen = () => (
    <>
      <div className="flex justify-between items-center mb-3">
        <button onClick={() => setScreen('main')} className="text-green-900 text-xs font-bold">← BACK</button>
        <div className="text-lg font-bold text-green-900">📊 STATS</div>
        <div className="w-12"></div>
      </div>

      {/* Stats Grid */}
      <div className="grid grid-cols-2 gap-2 mb-3">
        <div className="bg-white bg-opacity-60 rounded-lg p-3 text-center">
          <div className="text-2xl mb-1">🔥</div>
          <div className="text-2xl font-bold text-green-900">{stats.checkStreak}</div>
          <div className="text-xs text-green-800">Day Streak</div>
        </div>
        <div className="bg-white bg-opacity-60 rounded-lg p-3 text-center">
          <div className="text-2xl mb-1">☀️</div>
          <div className="text-2xl font-bold text-green-900">{stats.sunnyDays}</div>
          <div className="text-xs text-green-800">Sunny Days</div>
        </div>
        <div className="bg-white bg-opacity-60 rounded-lg p-3 text-center">
          <div className="text-2xl mb-1">🌧️</div>
          <div className="text-2xl font-bold text-green-900">{stats.rainyDays}</div>
          <div className="text-xs text-green-800">Rainy Days</div>
        </div>
        <div className="bg-white bg-opacity-60 rounded-lg p-3 text-center">
          <div className="text-2xl mb-1">❄️</div>
          <div className="text-2xl font-bold text-green-900">{stats.snowyDays}</div>
          <div className="text-xs text-green-800">Snowy Days</div>
        </div>
      </div>

      <div className="bg-white bg-opacity-60 rounded-lg p-3 text-center mb-3">
        <div className="text-xl mb-1">📍</div>
        <div className="text-3xl font-bold text-green-900">{stats.totalChecks}</div>
        <div className="text-xs text-green-800">Total Checks</div>
      </div>

      {/* Meteor Showers */}
      <div className="bg-purple-900 bg-opacity-80 rounded-lg p-3">
        <div className="text-yellow-300 font-bold text-sm mb-2 flex items-center gap-1">
          <Star className="w-4 h-4" /> Meteor Showers
        </div>
        {getUpcomingMeteorShowers().length > 0 ? (
          <div className="space-y-1">
            {getUpcomingMeteorShowers().map((shower, idx) => (
              <div key={idx} className="text-xs text-yellow-100">
                <div className="font-bold">{shower.name}</div>
                <div className="text-yellow-300">Peak: {shower.peak}</div>
              </div>
            ))}
          </div>
        ) : (
          <div className="text-xs text-yellow-200">No upcoming showers in the next 30 days</div>
        )}
      </div>
    </>
  );

  const renderSavedScreen = () => (
    <>
      <div className="flex justify-between items-center mb-3">
        <button onClick={() => setScreen('main')} className="text-green-900 text-xs font-bold">← BACK</button>
        <div className="text-lg font-bold text-green-900">💾 SAVED</div>
        <div className="w-12"></div>
      </div>

      {savedForecasts.length === 0 ? (
        <div className="text-center text-green-900 py-8">
          <div className="text-3xl mb-2">📁</div>
          <div className="text-xs">No saved forecasts yet!</div>
        </div>
      ) : (
        <div className="space-y-2 max-h-96 overflow-y-auto">
          {savedForecasts.map((forecast) => (
            <div key={forecast.timestamp} className="bg-white bg-opacity-60 rounded-lg p-2">
              <div className="flex justify-between items-start mb-1">
                <div className="flex-1">
                  <div className="text-green-900 font-bold text-xs">{forecast.date}</div>
                  <div className="text-green-900 text-sm font-bold">{forecast.weather.location}</div>
                  <div className="text-green-800 text-xs">
                    {forecast.weather.temp}°F ({forecast.weather.tempC}°C) - {forecast.weather.condition}
                  </div>
                </div>
                <button 
                  onClick={() => deleteForecast(forecast.timestamp)}
                  className="px-2 py-0.5 bg-red-600 text-white rounded text-xs font-bold hover:bg-red-700"
                >
                  DEL
                </button>
              </div>
              {forecast.notes && (
                <div className="text-xs text-green-900 bg-white bg-opacity-50 rounded p-1 mt-1">
                  📝 {forecast.notes}
                </div>
              )}
            </div>
          ))}
        </div>
      )}
    </>
  );

  return (
    <div className="min-h-screen bg-gradient-to-b from-purple-400 via-pink-400 to-yellow-300 p-4">
      <div className="max-w-md mx-auto">
        <div className="bg-gray-800 rounded-3xl p-4 border-8 border-gray-900 shadow-2xl">
          {/* Header */}
          <div className="text-center mb-3">
            <h1 className="text-2xl font-bold text-yellow-300">WEATHERPET™</h1>
            <div className="text-xs text-gray-400">90s Edition • v2.0</div>
          </div>

          {/* Screen */}
          <div className="bg-green-200 rounded-2xl p-4 border-4 border-green-900 min-h-96">
            {screen === 'main' && renderMainScreen()}
            {screen === 'stats' && renderStatsScreen()}
            {screen === 'saved' && renderSavedScreen()}
          </div>

          {/* Footer */}
          <div className="text-center mt-3 text-xs text-gray-500">
            ⚡ WeatherPet Tech ⚡
          </div>
        </div>
      </div>
    </div>
  );
};

export default WeatherPet;