import React, { useState, useEffect } from 'react';
import { Sun, Cloud, CloudRain, CloudSnow, CloudLightning, CloudDrizzle, Wind, Droplets, Thermometer, RefreshCw, Clock } from 'lucide-react';

export default function WeatherApp() {
  const [weatherData, setWeatherData] = useState(null);
  const [forecast, setForecast] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [lastUpdated, setLastUpdated] = useState(null);

  const fetchWeather = async () => {
    setLoading(true);
    setError(null);
    
    try {
      // In a real app, you would use your own API key and proper error handling
      // This is a mock implementation for demonstration purposes
      
      // Simulate API call delay
      await new Promise(resolve => setTimeout(resolve, 1000));
      
      // Mock data for Kampala
      const mockCurrentWeather = {
        main: {
          temp: 23,
          feels_like: 24,
          humidity: 65,
          pressure: 1012
        },
        weather: [
          {
            main: 'Clouds',
            description: 'scattered clouds',
            icon: '03d'
          }
        ],
        wind: {
          speed: 3.6,
          deg: 220
        },
        sys: {
          sunrise: 1617507000,
          sunset: 1617550200
        },
        dt: Date.now() / 1000
      };
      
      // Mock forecast data
      const mockForecast = [
        { day: 'Tomorrow', temp: 24, condition: 'Sunny', icon: 'Sun' },
        { day: 'Wednesday', temp: 25, condition: 'Partly Cloudy', icon: 'Cloud' },
        { day: 'Thursday', temp: 23, condition: 'Rain Showers', icon: 'CloudRain' },
        { day: 'Friday', temp: 22, condition: 'Thunderstorms', icon: 'CloudLightning' },
        { day: 'Saturday', temp: 24, condition: 'Partly Cloudy', icon: 'Cloud' }
      ];
      
      setWeatherData(mockCurrentWeather);
      setForecast(mockForecast);
      setLastUpdated(new Date());
    } catch (err) {
      setError('Failed to fetch weather data. Please try again.');
      console.error('Error fetching weather data:', err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchWeather();
    // In a real app, you might want to set up a refresh interval
    const interval = setInterval(fetchWeather, 30 * 60 * 1000); // Refresh every 30 minutes
    return () => clearInterval(interval);
  }, []);

  // Helper function to get the appropriate weather icon
  const getWeatherIcon = (iconCode) => {
    if (!iconCode) return <Cloud className="h-16 w-16 text-gray-600" />;
    
    const iconMap = {
      '01d': <Sun className="h-16 w-16 text-yellow-500" />,
      '01n': <Sun className="h-16 w-16 text-gray-400" />,
      '02d': <Cloud className="h-16 w-16 text-gray-400" />,
      '02n': <Cloud className="h-16 w-16 text-gray-600" />,
      '03d': <Cloud className="h-16 w-16 text-gray-400" />,
      '03n': <Cloud className="h-16 w-16 text-gray-600" />,
      '04d': <Cloud className="h-16 w-16 text-gray-500" />,
      '04n': <Cloud className="h-16 w-16 text-gray-700" />,
      '09d': <CloudDrizzle className="h-16 w-16 text-blue-400" />,
      '09n': <CloudDrizzle className="h-16 w-16 text-blue-600" />,
      '10d': <CloudRain className="h-16 w-16 text-blue-500" />,
      '10n': <CloudRain className="h-16 w-16 text-blue-700" />,
      '11d': <CloudLightning className="h-16 w-16 text-yellow-600" />,
      '11n': <CloudLightning className="h-16 w-16 text-yellow-400" />,
      '13d': <CloudSnow className="h-16 w-16 text-blue-200" />,
      '13n': <CloudSnow className="h-16 w-16 text-blue-100" />,
      '50d': <Wind className="h-16 w-16 text-gray-300" />,
      '50n': <Wind className="h-16 w-16 text-gray-500" />
    };
    
    return iconMap[iconCode] || <Cloud className="h-16 w-16 text-gray-500" />;
  };

  // Helper function for forecast icons
  const getForecastIcon = (iconName, size = 8) => {
    const iconMap = {
      'Sun': <Sun className={`h-${size} w-${size} text-yellow-500`} />,
      'Cloud': <Cloud className={`h-${size} w-${size} text-gray-400`} />,
      'CloudRain': <CloudRain className={`h-${size} w-${size} text-blue-500`} />,
      'CloudLightning': <CloudLightning className={`h-${size} w-${size} text-yellow-600`} />,
      'CloudSnow': <CloudSnow className={`h-${size} w-${size} text-blue-200`} />,
      'CloudDrizzle': <CloudDrizzle className={`h-${size} w-${size} text-blue-400`} />,
      'Wind': <Wind className={`h-${size} w-${size} text-gray-400`} />
    };
    
    return iconMap[iconName] || <Cloud className={`h-${size} w-${size} text-gray-500`} />;
  };

  // Format time from timestamp
  const formatTime = (timestamp) => {
    if (!timestamp) return '';
    const date = new Date(timestamp * 1000);
    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-[#e0f7fa] to-[#b2ebf2] font-inter p-4 md:p-8">
      <div className="max-w-3xl mx-auto">
        {/* Header */}
        <header className="flex justify-between items-center mb-6">
          <div>
            <h1 className="text-2xl md:text-3xl font-bold text-[#106e7d]">Kampala, Uganda</h1>
            {lastUpdated && (
              <div className="flex items-center text-sm text-gray-600 mt-1">
                <Clock className="h-4 w-4 mr-1" />
                <span>Updated: {lastUpdated.toLocaleTimeString()}</span>
              </div>
            )}
          </div>
          <button 
            onClick={fetchWeather} 
            disabled={loading}
            className="p-2 rounded-full bg-[#ff7e67] text-white hover:bg-[#ff6b52] transition-colors disabled:opacity-50"
          >
            <RefreshCw className={`h-5 w-5 ${loading ? 'animate-spin' : ''}`} />
          </button>
        </header>

        {/* Error Message */}
        {error && (
          <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-6">
            <p>{error}</p>
          </div>
        )}

        {/* Main Weather Card */}
        {loading ? (
          <div className="bg-white bg-opacity-80 rounded-xl shadow-lg p-6 mb-6 flex justify-center items-center h-64">
            <div className="animate-pulse flex flex-col items-center">
              <div className="h-16 w-16 bg-gray-300 rounded-full mb-4"></div>
              <div className="h-8 w-32 bg-gray-300 rounded mb-2"></div>
              <div className="h-4 w-48 bg-gray-300 rounded"></div>
            </div>
          </div>
        ) : weatherData ? (
          <div className="bg-white bg-opacity-80 rounded-xl shadow-lg p-6 mb-6">
            <div className="flex flex-col md:flex-row items-center md:items-start justify-between">
              <div className="flex flex-col items-center md:items-start mb-4 md:mb-0">
                {getWeatherIcon(weatherData.weather[0].icon)}
                <h2 className="text-4xl md:text-5xl font-bold mt-2">{Math.round(weatherData.main.temp)}°C</h2>
                <p className="text-gray-600 capitalize">{weatherData.weather[0].description}</p>
                <p className="text-sm text-gray-500">Feels like {Math.round(weatherData.main.feels_like)}°C</p>
              </div>
              
              <div className="grid grid-cols-2 gap-4 mt-4 md:mt-0">
                <div className="flex items-center">
                  <Droplets className="h-5 w-5 text-blue-500 mr-2" />
                  <div>
                    <p className="text-sm text-gray-500">Humidity</p>
                    <p className="font-semibold">{weatherData.main.humidity}%</p>
                  </div>
                </div>
                <div className="flex items-center">
                  <Wind className="h-5 w-5 text-gray-500 mr-2" />
                  <div>
                    <p className="text-sm text-gray-500">Wind</p>
                    <p className="font-semibold">{weatherData.wind.speed} m/s</p>
                  </div>
                </div>
                <div className="flex items-center">
                  <Thermometer className="h-5 w-5 text-red-500 mr-2" />
                  <div>
                    <p className="text-sm text-gray-500">Pressure</p>
                    <p className="font-semibold">{weatherData.main.pressure} hPa</p>
                  </div>
                </div>
                <div className="flex items-center">
                  <Sun className="h-5 w-5 text-yellow-500 mr-2" />
                  <div>
                    <p className="text-sm text-gray-500">Sunrise/Sunset</p>
                    <p className="font-semibold text-xs">
                      {formatTime(weatherData.sys.sunrise)} / {formatTime(weatherData.sys.sunset)}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        ) : null}

        {/* 5-Day Forecast */}
        <h3 className="text-xl font-semibold text-[#106e7d] mb-3">5-Day Forecast</h3>
        <div className="overflow-x-auto pb-2">
          <div className="flex space-x-4 min-w-max">
            {loading ? (
              Array(5).fill().map((_, i) => (
                <div key={i} className="bg-white bg-opacity-80 rounded-lg shadow p-4 w-32 animate-pulse">
                  <div className="h-4 bg-gray-300 rounded mb-2 w-16"></div>
                  <div className="h-8 w-8 bg-gray-300 rounded-full mb-2 mx-auto"></div>
                  <div className="h-6 bg-gray-300 rounded mb-1 w-12 mx-auto"></div>
                  <div className="h-4 bg-gray-300 rounded w-20 mx-auto"></div>
                </div>
              ))
            ) : (
              forecast.map((day, index) => (
                <div key={index} className="bg-white bg-opacity-80 rounded-lg shadow p-4 w-32 flex flex-col items-center">
                  <p className="font-medium text-[#106e7d] mb-2">{day.day}</p>
                  {getForecastIcon(day.icon)}
                  <p className="text-xl font-bold mt-2">{day.temp}°C</p>
                  <p className="text-sm text-gray-600">{day.condition}</p>
                </div>
              ))
            )}
          </div>
        </div>

        {/* Footer */}
        <footer className="mt-8 text-center text-sm text-gray-500">
          <p>Kampala Weather App • Data updates every 30 minutes</p>
        </footer>
      </div>
    </div>
  );
}