// 날씨 데이터 가져오기 함수
async function getWeatherData(city) {
    const API_KEY = 'your_api_key_here'; // 발급받은 API 키
    const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric&lang=kr`;
    
    try {
        const response = await fetch(url);
        const data = await response.json();
        
        return {
            temp: data.main.temp,
            weather: data.weather[0].main, // Clear, Clouds, Rain 등
            description: data.weather[0].description,
            humidity: data.main.humidity,
            windSpeed: data.wind.speed
        };
    } catch (error) {
        console.error('날씨 데이터 가져오기 실패:', error);
        return null;
    }
}

// 사용 예시
getWeatherData('Seoul').then(weather => {
    console.log(`현재 서울 날씨: ${weather.description}, 온도: ${weather.temp}°C`);
});

// 날씨별 테마 설정
const weatherThemes = {
    Clear: {
        gradient: 'linear-gradient(to bottom, #87CEEB, #E0F6FF)',
        particles: 'clouds',
        textColor: '#2C3E50',
        animation: 'sunny'
    },
    Clouds: {
        gradient: 'linear-gradient(to bottom, #B0BEC5, #CFD8DC)',
        particles: 'clouds-heavy',
        textColor: '#37474F',
        animation: 'cloudy'
    },
    Rain: {
        gradient: 'linear-gradient(to bottom, #546E7A, #37474F)',
        particles: 'rain',
        textColor: '#ECEFF1',
        animation: 'rainy'
    },
    Thunderstorm: {
        gradient: 'linear-gradient(to bottom, #263238, #000000)',
        particles: 'storm',
        textColor: '#FFFFFF',
        animation: 'stormy'
    },
    Snow: {
        gradient: 'linear-gradient(to bottom, #E3F2FD, #FFFFFF)',
        particles: 'snow',
        textColor: '#1565C0',
        animation: 'snowy'
    },
    Mist: {
        gradient: 'linear-gradient(to bottom, #ECEFF1, #FAFAFA)',
        particles: 'fog',
        textColor: '#546E7A',
        animation: 'foggy'
    }
};

// 테마 적용 함수
function applyWeatherTheme(weatherCondition) {
    const theme = weatherThemes[weatherCondition] || weatherThemes.Clear;
    
    document.body.style.background = theme.gradient;
    document.body.style.color = theme.textColor;
    
    // 파티클 효과 시작
    startParticleEffect(theme.particles);
    
    // 애니메이션 클래스 추가
    document.body.className = `weather-${theme.animation}`;
}

// 빗방울 파티클 시스템 예시
class RainParticle {
    constructor(canvas) {
        this.canvas = canvas;
        this.ctx = canvas.getContext('2d');
        this.particles = [];
        this.init();
    }
    
    init() {
        // 100개의 빗방울 생성
        for (let i = 0; i < 100; i++) {
            this.particles.push({
                x: Math.random() * this.canvas.width,
                y: Math.random() * this.canvas.height,
                length: Math.random() * 20 + 10,
                speed: Math.random() * 5 + 5,
                opacity: Math.random() * 0.5 + 0.3
            });
        }
    }
    
    update() {
        this.particles.forEach(particle => {
            particle.y += particle.speed;
            
            // 화면 밖으로 나가면 위로 리셋
            if (particle.y > this.canvas.height) {
                particle.y = -particle.length;
                particle.x = Math.random() * this.canvas.width;
            }
        });
    }
    
    draw() {
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        
        this.particles.forEach(particle => {
            this.ctx.strokeStyle = `rgba(174, 194, 224, ${particle.opacity})`;
            this.ctx.lineWidth = 1;
            this.ctx.beginPath();
            this.ctx.moveTo(particle.x, particle.y);
            this.ctx.lineTo(particle.x, particle.y + particle.length);
            this.ctx.stroke();
        });
    }
    
    animate() {
        this.update();
        this.draw();
        requestAnimationFrame(() => this.animate());
    }
}

// 사용법
const canvas = document.getElementById('weather-canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const rain = new RainParticle(canvas);
rain.animate();

// 반응형 파티클 시스템
function getParticleCount() {
    const width = window.innerWidth;
    
    if (width >= 1200) {
        return 120;
    } else if (width >= 768) {
        return 60;
    } else {
        return 40;
    }
}

// 디바이스 성능 감지
function isLowPerformanceDevice() {
    // 하드웨어 동시성 확인 (CPU 코어 수)
    const cores = navigator.hardwareConcurrency || 2;
    
    // 메모리 확인 (가능한 경우)
    const memory = navigator.deviceMemory || 4;
    
    // 저사양 기준: 2코어 이하 또는 2GB 이하
    return cores <= 2 || memory <= 2;
}

// 적응형 초기화
function initAdaptiveWeatherEffect() {
    const particleCount = getParticleCount();
    const enableComplexEffects = !isLowPerformanceDevice();
    
    if (enableComplexEffects) {
        // 풀 버전 효과
        initFullWeatherEffect(particleCount);
    } else {
        // 경량 버전 효과
        initLightWeatherEffect(Math.floor(particleCount / 2));
    }
}

// CSS 전환 효과
body {
    transition: background 2s ease-in-out, color 1s ease-in-out;
}

// JavaScript로 부드러운 색상 전환
function smoothColorTransition(fromColor, toColor, duration = 2000) {
    const start = Date.now();
    const from = hexToRgb(fromColor);
    const to = hexToRgb(toColor);
    
    function animate() {
        const elapsed = Date.now() - start;
        const progress = Math.min(elapsed / duration, 1);
        
        // Easing 함수 (ease-in-out)
        const eased = progress < 0.5
            ? 2 * progress * progress
            : 1 - Math.pow(-2 * progress + 2, 2) / 2;
        
        const r = Math.round(from.r + (to.r - from.r) * eased);
        const g = Math.round(from.g + (to.g - from.g) * eased);
        const b = Math.round(from.b + (to.b - from.b) * eased);
        
        document.body.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
        
        if (progress < 1) {
            requestAnimationFrame(animate);
        }
    }
    
    animate();
}

function hexToRgb(hex) {
    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}

// 마우스 인터랙션 예시
class MouseWeatherEffect {
    constructor(canvas, weatherType) {
        this.canvas = canvas;
        this.ctx = canvas.getContext('2d');
        this.weatherType = weatherType;
        this.particles = [];
        
        this.canvas.addEventListener('mousemove', (e) => {
            this.createParticle(e.clientX, e.clientY);
        });
        
        this.animate();
    }
    
    createParticle(x, y) {
        const particle = {
            x: x,
            y: y,
            vx: (Math.random() - 0.5) * 2,
            vy: Math.random() * 2 + 1,
            life: 1,
            decay: 0.02
        };
        
        this.particles.push(particle);
        
        // 파티클 개수 제한
        if (this.particles.length > 50) {
            this.particles.shift();
        }
    }
    
    update() {
        this.particles = this.particles.filter(p => {
            p.x += p.vx;
            p.y += p.vy;
            p.life -= p.decay;
            return p.life > 0;
        });
    }
    
    draw() {
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        
        this.particles.forEach(p => {
            this.ctx.save();
            this.ctx.globalAlpha = p.life;
            
            if (this.weatherType === 'Rain') {
                // 물방울 그리기
                this.ctx.fillStyle = '#4A90E2';
                this.ctx.beginPath();
                this.ctx.arc(p.x, p.y, 3, 0, Math.PI * 2);
                this.ctx.fill();
            } else if (this.weatherType === 'Snow') {
                // 눈송이 그리기
                this.ctx.fillStyle = '#FFFFFF';
                this.ctx.font = '16px Arial';
                this.ctx.fillText('❄', p.x, p.y);
            }
            
            this.ctx.restore();
        });
    }
    
    animate() {
        this.update();
        this.draw();
        requestAnimationFrame(() => this.animate());
    }
}

// WebSocket을 활용한 실시간 날씨 동기화
class SharedWeatherExperience {
    constructor(userId, location) {
        this.userId = userId;
        this.location = location;
        this.ws = new WebSocket('wss://your-server.com/weather-sync');
        
        this.ws.onopen = () => {
            this.joinRoom();
        };
        
        this.ws.onmessage = (event) => {
            const data = JSON.parse(event.data);
            this.handleMessage(data);
        };
    }
    
    joinRoom() {
        this.ws.send(JSON.stringify({
            type: 'join',
            userId: this.userId,
            location: this.location
        }));
    }
    
    handleMessage(data) {
        switch(data.type) {
            case 'weather_update':
                // 다른 사용자의 날씨 업데이트
                this.syncWeather(data.weather);
                break;
            case 'user_interaction':
                // 다른 사용자의 인터랙션 (클릭, 마우스 움직임 등)
                this.showUserInteraction(data);
                break;
            case 'user_count':
                // 같은 지역의 현재 사용자 수
                this.updateUserCount(data.count);
                break;
        }
    }
    
    shareInteraction(x, y, type) {
        this.ws.send(JSON.stringify({
            type: 'interaction',
            userId: this.userId,
            x: x,
            y: y,
            interactionType: type
        }));
    }
    
    syncWeather(weather) {
        // 모든 사용자가 동시에 같은 날씨 효과 경험
        applyWeatherTheme(weather);
    }
    
    showUserInteraction(data) {
        // 다른 사용자의 클릭 위치에 작은 효과 표시
        createRippleEffect(data.x, data.y, data.userId);
    }
}