import React, { useState, useEffect, useRef } from 'react';
import { motion, AnimatePresence } from 'framer-motion';

interface CurrencyRate {
    currency: string;
    rate: number;
    change: number;
}

interface MetalRate {
    metal: string;
    price: number;
    change: number;
}

interface WeatherDay {
    date: string;
    dayOfWeek: string;
    tempMin: number;
    tempMax: number;
    icon: string;
    description: string;
}

interface BottomBarProps {
    onLogout?: () => void;
}

const BottomBar: React.FC<BottomBarProps> = ({ onLogout }) => {
    const [currencyRates, setCurrencyRates] = useState<CurrencyRate[]>([
        { currency: 'USD', rate: 3.22, change: 0.5 },
        { currency: 'EUR', rate: 3.45, change: -0.2 },
        { currency: 'CNY', rate: 0.44, change: 0.1 },
        { currency: 'RUB', rate: 0.035, change: -0.3 },
    ]);

    const [metalRates, setMetalRates] = useState<MetalRate[]>([
        { metal: 'Золото', price: 1950, change: 0.8 },
        { metal: 'Серебро', price: 23.5, change: -0.5 },
        { metal: 'Платина', price: 920, change: 0.3 },
        { metal: 'Палладий', price: 1450, change: -0.7 },
    ]);

    const [isOnline, setIsOnline] = useState(navigator.onLine);
    const [isPaused, setIsPaused] = useState(false);
    const [currentTime, setCurrentTime] = useState(new Date());
    const [weatherData, setWeatherData] = useState<WeatherDay[]>([]);
    const [weatherLoading, setWeatherLoading] = useState(false);
    const [weatherError, setWeatherError] = useState(false);
    const scrollRef = useRef<HTMLDivElement>(null);

    // ============================================
    // 🌤️ ЗАГРУЗКА ПОГОДЫ
    // ============================================
    useEffect(() => {
        const fetchWeather = async () => {
            if (!isOnline) {
                setWeatherData([]);
                return;
            }

            try {
                setWeatherLoading(true);
                setWeatherError(false);

                // API OpenWeatherMap (бесплатный, нужно зарегистрироваться и получить ключ)
                // Замени YOUR_API_KEY на свой ключ
                const apiKey = '9edc3b8058098d110db0aa1894a08c97'; // ← Получить на https://openweathermap.org/api
                const city = 'Grodno';
                const country = 'BY';
                const url = `https://api.openweathermap.org/data/2.5/forecast?q=${city},${country}&units=metric&lang=ru&appid=${apiKey}`;

                const response = await fetch(url);
                if (!response.ok) {
                    throw new Error(`Ошибка: ${response.status}`);
                }

                const data = await response.json();

                // Группируем прогноз по дням (берем по 1 прогнозу на день)
                const dailyForecast: WeatherDay[] = [];
                const daysMap = new Map();

                data.list.forEach((item: any) => {
                    const date = new Date(item.dt * 1000);
                    const dateStr = date.toISOString().split('T')[0];
                    const dayOfWeek = date.toLocaleString('ru-RU', { weekday: 'short' });

                    if (!daysMap.has(dateStr)) {
                        daysMap.set(dateStr, {
                            date: dateStr,
                            dayOfWeek: dayOfWeek.charAt(0).toUpperCase() + dayOfWeek.slice(1),
                            tempMin: item.main.temp_min,
                            tempMax: item.main.temp_max,
                            icon: item.weather[0].icon,
                            description: item.weather[0].description,
                        });
                    } else {
                        const existing = daysMap.get(dateStr);
                        existing.tempMin = Math.min(existing.tempMin, item.main.temp_min);
                        existing.tempMax = Math.max(existing.tempMax, item.main.temp_max);
                    }
                });

                // Берем первые 7 дней
                const sevenDays = Array.from(daysMap.values()).slice(0, 7);
                setWeatherData(sevenDays);
                setWeatherLoading(false);

            } catch (error) {
                console.warn('Ошибка загрузки погоды:', error);
                setWeatherError(true);
                setWeatherLoading(false);
                setWeatherData([]);
            }
        };

        fetchWeather();
        const interval = setInterval(fetchWeather, 30 * 60 * 1000); // Обновление каждые 30 минут

        return () => clearInterval(interval);
    }, [isOnline]);

    // ============================================
    // 🌐 СТАТУС ИНТЕРНЕТА
    // ============================================
    useEffect(() => {
        const handleOnline = () => setIsOnline(true);
        const handleOffline = () => setIsOnline(false);

        window.addEventListener('online', handleOnline);
        window.addEventListener('offline', handleOffline);

        return () => {
            window.removeEventListener('online', handleOnline);
            window.removeEventListener('offline', handleOffline);
        };
    }, []);

    // ============================================
    // ⏰ ВРЕМЯ
    // ============================================
    useEffect(() => {
        const interval = setInterval(() => {
            setCurrentTime(new Date());
        }, 1000);
        return () => clearInterval(interval);
    }, []);

    // ============================================
    // 📊 ЗАГРУЗКА КУРСОВ
    // ============================================
    useEffect(() => {
        const loadRates = async () => {
            try {
                if (isOnline) {
                    const response = await fetch('http://localhost:3001/api/rates');
                    if (response.ok) {
                        const data = await response.json();
                        setCurrencyRates(data.currency || currencyRates);
                        setMetalRates(data.metals || metalRates);
                    }
                } else {
                    const stored = localStorage.getItem('currencyRates');
                    if (stored) {
                        const data = JSON.parse(stored);
                        setCurrencyRates(data.currency || currencyRates);
                        setMetalRates(data.metals || metalRates);
                    }
                }
            } catch (error) {
                console.warn('Ошибка загрузки курсов:', error);
            }
        };

        loadRates();
        const interval = setInterval(loadRates, 60000);
        return () => clearInterval(interval);
    }, [isOnline]);

    // ============================================
    // 🎮 УПРАВЛЕНИЕ ПАУЗОЙ
    // ============================================
    const handleMouseEnter = () => setIsPaused(true);
    const handleMouseLeave = () => setIsPaused(false);
    const handleTouchStart = () => setIsPaused(true);
    const handleTouchEnd = () => setIsPaused(false);

    // ============================================
    // 🚪 ВЫХОД
    // ============================================
    const handleLogout = () => {
        if (onLogout) {
            onLogout();
        }
    };

    // ============================================
    // 🎨 ИКОНКА ПОГОДЫ
    // ============================================
    const getWeatherIcon = (iconCode: string) => {
        const icons: Record<string, string> = {
            '01d': '☀️',
            '01n': '🌙',
            '02d': '⛅',
            '02n': '☁️',
            '03d': '☁️',
            '03n': '☁️',
            '04d': '☁️',
            '04n': '☁️',
            '09d': '🌧️',
            '09n': '🌧️',
            '10d': '🌦️',
            '10n': '🌧️',
            '11d': '⛈️',
            '11n': '⛈️',
            '13d': '❄️',
            '13n': '❄️',
            '50d': '🌫️',
            '50n': '🌫️',
        };
        return icons[iconCode] || '🌡️';
    };

    // ============================================
    // 📦 ВСЕ ЭЛЕМЕНТЫ ДЛЯ БЕГУЩЕЙ СТРОКИ
    // ============================================
    const getAllItems = () => {
        const currencyItems = currencyRates.map(item => ({
            id: `currency-${item.currency}`,
            type: 'currency' as const,
            label: item.currency,
            value: item.rate,
            change: item.change,
            displayValue: item.rate.toFixed(item.rate < 1 ? 3 : 2),
        }));

        const metalItems = metalRates.map(item => ({
            id: `metal-${item.metal}`,
            type: 'metal' as const,
            label: item.metal,
            value: item.price,
            change: item.change,
            displayValue: `$${item.price.toFixed(item.price < 10 ? 2 : 0)}`,
        }));

        return [...currencyItems, ...metalItems];
    };

    const items = getAllItems();
    const doubledItems = [...items, ...items, ...items];

    // ============================================
    // 🎨 РЕНДЕР
    // ============================================
    return (
        <>
            {/* 🌤️ ПОЛОСКА ПОГОДЫ — показываем только если есть интернет и данные */}
            <AnimatePresence>
                {isOnline && weatherData.length > 0 && !weatherLoading && !weatherError && (
                    <motion.div
                        initial={{ y: -30, opacity: 0 }}
                        animate={{ y: 0, opacity: 1 }}
                        exit={{ y: -30, opacity: 0 }}
                        transition={{ duration: 0.3 }}
                        style={{
                            position: 'fixed',
                            bottom: '44px',
                            left: 0,
                            right: 0,
                            zIndex: 999,
                            background: 'rgba(44, 62, 80, 0.85)',
                            backdropFilter: 'blur(10px)',
                            color: '#fff',
                            padding: '4px 20px',
                            display: 'flex',
                            alignItems: 'center',
                            gap: '12px',
                            overflow: 'hidden',
                            height: '32px',
                            borderTop: '1px solid rgba(255,255,255,0.05)',
                            borderBottom: '1px solid rgba(255,255,255,0.05)',
                            fontSize: '12px',
                            fontFamily: 'monospace',
                        }}
                    >
                        <div style={{
                            display: 'flex',
                            alignItems: 'center',
                            gap: '8px',
                            flexShrink: 0,
                            background: 'rgba(44, 62, 80, 0.85)',
                            paddingRight: '12px',
                        }}>
                            <span style={{ fontSize: '16px' }}>🌤️</span>
                            <span style={{ fontWeight: 600, opacity: 0.7, fontSize: '11px' }}>
                                ГРОДНО
                            </span>
                            <div style={{
                                width: '1px',
                                height: '20px',
                                background: 'rgba(255,255,255,0.1)',
                                marginLeft: '4px',
                            }} />
                        </div>

                        <div
                            style={{
                                flex: 1,
                                overflow: 'hidden',
                                position: 'relative',
                                height: '100%',
                                display: 'flex',
                                alignItems: 'center',
                            }}
                        >
                            <motion.div
                                animate={{
                                    x: isPaused ? 0 : ['0%', '-50%'],
                                }}
                                transition={{
                                    duration: 20,
                                    repeat: Infinity,
                                    ease: 'linear',
                                    repeatType: 'loop',
                                }}
                                style={{
                                    display: 'flex',
                                    gap: '30px',
                                    whiteSpace: 'nowrap',
                                    willChange: 'transform',
                                    transform: 'translateZ(0)',
                                    paddingRight: '30px',
                                    height: '100%',
                                    alignItems: 'center',
                                }}
                            >
                                {[...weatherData, ...weatherData].map((day, index) => (
                                    <div
                                        key={`${day.date}-${index}`}
                                        style={{
                                            display: 'flex',
                                            gap: '8px',
                                            alignItems: 'center',
                                            whiteSpace: 'nowrap',
                                            flexShrink: 0,
                                        }}
                                    >
                                        <span style={{ fontSize: '13px', fontWeight: 500 }}>
                                            {day.dayOfWeek}
                                        </span>
                                        <span style={{ fontSize: '16px' }}>
                                            {getWeatherIcon(day.icon)}
                                        </span>
                                        <span style={{ color: 'rgba(255,255,255,0.7)' }}>
                                            {Math.round(day.tempMin)}°…{Math.round(day.tempMax)}°
                                        </span>
                                    </div>
                                ))}
                            </motion.div>
                        </div>
                    </motion.div>
                )}
            </AnimatePresence>

            {/* 📊 ОСНОВНАЯ ПОЛОСКА (курсы валют) */}
            <motion.div
                className="bottom-bar"
                initial={{ y: 100 }}
                animate={{ y: 0 }}
                transition={{ type: 'spring', stiffness: 300, damping: 30 }}
                style={{
                    position: 'fixed',
                    bottom: 0,
                    left: 0,
                    right: 0,
                    background: 'rgba(44, 62, 80, 0.95)',
                    backdropFilter: 'blur(10px)',
                    color: '#fff',
                    padding: '8px 20px',
                    display: 'flex',
                    alignItems: 'center',
                    gap: '16px',
                    overflow: 'hidden',
                    zIndex: 1000,
                    height: '44px',
                    borderTop: '1px solid rgba(255,255,255,0.1)',
                    fontSize: '13px',
                    fontFamily: 'monospace',
                }}
                onMouseEnter={handleMouseEnter}
                onMouseLeave={handleMouseLeave}
                onTouchStart={handleTouchStart}
                onTouchEnd={handleTouchEnd}
            >
                {/* Статус */}
                <div style={{
                    display: 'flex',
                    alignItems: 'center',
                    gap: '12px',
                    flexShrink: 0,
                    zIndex: 2,
                    background: 'rgba(44, 62, 80, 0.95)',
                    paddingRight: '12px',
                }}>
                    <span style={{
                        color: isOnline ? '#2ecc71' : '#e74c3c',
                        fontSize: '12px',
                    }}>
                        {isOnline ? '●' : '○'}
                    </span>
                    <span style={{ fontWeight: 600, opacity: 0.7, fontSize: '11px' }}>КУРСЫ</span>
                    <div style={{
                        width: '1px',
                        height: '24px',
                        background: 'rgba(255,255,255,0.15)',
                        marginLeft: '4px',
                    }} />
                </div>

                {/* Бегущая строка с курсами */}
                <div
                    ref={scrollRef}
                    style={{
                        flex: 1,
                        overflow: 'hidden',
                        position: 'relative',
                        height: '100%',
                        display: 'flex',
                        alignItems: 'center',
                        maskImage: 'linear-gradient(to right, transparent, black 3%, black 97%, transparent)',
                        WebkitMaskImage: 'linear-gradient(to right, transparent, black 3%, black 97%, transparent)',
                    }}
                >
                    <motion.div
                        animate={{
                            x: isPaused ? 0 : ['0%', '-33.33%'],
                        }}
                        transition={{
                            duration: 35,
                            repeat: Infinity,
                            ease: 'linear',
                            repeatType: 'loop',
                        }}
                        style={{
                            display: 'flex',
                            gap: '40px',
                            whiteSpace: 'nowrap',
                            willChange: 'transform',
                            transform: 'translateZ(0)',
                            backfaceVisibility: 'hidden',
                            WebkitFontSmoothing: 'antialiased',
                            MozOsxFontSmoothing: 'grayscale',
                            textRendering: 'geometricPrecision',
                            paddingRight: '40px',
                            height: '100%',
                            alignItems: 'center',
                        }}
                    >
                        {doubledItems.map((item, index) => (
                            <div
                                key={`${item.id}-${index}`}
                                style={{
                                    display: 'flex',
                                    gap: '8px',
                                    alignItems: 'center',
                                    whiteSpace: 'nowrap',
                                    flexShrink: 0,
                                    fontSmooth: 'always',
                                    WebkitFontSmoothing: 'antialiased',
                                    textRendering: 'geometricPrecision',
                                }}
                            >
                                <span style={{
                                    fontWeight: 600,
                                    color: 'rgba(255,255,255,0.9)',
                                    fontSize: '13px',
                                    letterSpacing: '0.3px',
                                }}>
                                    {item.label}
                                </span>
                                <span style={{
                                    color: 'rgba(255,255,255,0.8)',
                                    fontSize: '13px',
                                    letterSpacing: '0.2px',
                                }}>
                                    {item.displayValue}
                                </span>
                                <span style={{
                                    color: item.change >= 0 ? '#2ecc71' : '#e74c3c',
                                    fontSize: '11px',
                                    fontWeight: 500,
                                    display: 'flex',
                                    alignItems: 'center',
                                    gap: '2px',
                                    letterSpacing: '0.2px',
                                }}>
                                    {item.change >= 0 ? '▲' : '▼'}
                                    {Math.abs(item.change).toFixed(1)}%
                                </span>
                                {item.type === 'metal' && (
                                    <span style={{
                                        fontSize: '9px',
                                        opacity: 0.3,
                                        marginLeft: '-2px',
                                    }}>
                                        $
                                    </span>
                                )}
                            </div>
                        ))}
                    </motion.div>
                </div>

                {/* Время + Кнопка выхода */}
                <div style={{
                    display: 'flex',
                    alignItems: 'center',
                    gap: '12px',
                    flexShrink: 0,
                    paddingLeft: '12px',
                    background: 'rgba(44, 62, 80, 0.95)',
                    zIndex: 2,
                }}>
                    <div style={{
                        fontSize: '11px',
                        opacity: 0.4,
                        whiteSpace: 'nowrap',
                        fontSmooth: 'always',
                        WebkitFontSmoothing: 'antialiased',
                    }}>
                        {currentTime.toLocaleString('ru-RU', {
                            timeZone: 'Europe/Minsk',
                            hour: '2-digit',
                            minute: '2-digit',
                            second: '2-digit',
                            hour12: false,
                        })}
                    </div>

                    {onLogout && (
                        <button
                            onClick={handleLogout}
                            style={{
                                padding: '4px 14px',
                                background: 'rgba(231, 76, 60, 0.8)',
                                color: 'white',
                                border: 'none',
                                borderRadius: '6px',
                                cursor: 'pointer',
                                fontSize: '12px',
                                fontWeight: 500,
                                transition: 'all 0.3s ease',
                                whiteSpace: 'nowrap',
                                minHeight: '28px',
                                display: 'flex',
                                alignItems: 'center',
                                gap: '4px',
                            }}
                            onMouseEnter={(e) => {
                                e.currentTarget.style.background = 'rgba(231, 76, 60, 1)';
                                e.currentTarget.style.transform = 'scale(1.05)';
                            }}
                            onMouseLeave={(e) => {
                                e.currentTarget.style.background = 'rgba(231, 76, 60, 0.8)';
                                e.currentTarget.style.transform = 'scale(1)';
                            }}
                        >
                            <span style={{ fontSize: '14px' }}>⏻</span>
                            Выйти
                        </button>
                    )}
                </div>

                {/* Пауза */}
                {isPaused && (
                    <div style={{
                        position: 'absolute',
                        top: '50%',
                        left: '50%',
                        transform: 'translate(-50%, -50%)',
                        fontSize: '11px',
                        color: 'rgba(255,255,255,0.3)',
                        pointerEvents: 'none',
                        zIndex: 3,
                        background: 'rgba(0,0,0,0.5)',
                        padding: '2px 12px',
                        borderRadius: '4px',
                        backdropFilter: 'blur(5px)',
                    }}>
                        ⏸ Пауза
                    </div>
                )}
            </motion.div>
        </>
    );
};

export default BottomBar;