// src/components/GlobalNav.jsx
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
// เพิ่ม faChartLine เข้ามาในการ import
import { faNewspaper, faChartBar, faGlobeAsia, faDollarSign, faUsers, faFire, faChartLine } from '@fortawesome/free-solid-svg-icons';
import { useCallback } from 'react';

export default function GlobalNav({ activePanel, setActivePanel, isNewsMode, setIsNewsMode, onMenuClick }) {

    // รวมรายการเมนูทั้งหมดไว้ใน Array เดียว
    // ใช้ 'panelId' ในการอ้างอิงถึง key ใน panelData ของ App.jsx
    const navItems = [
        // --- News Section ---
        { id: 'world_news', label: 'WORLD NEWS', type: 'news', icon: faNewspaper },
        { id: 'euro_news', label: 'EURO NEWS', type: 'news', icon: faNewspaper },
        { id: 'america_news', label: 'AMERICA NEWS', type: 'news', icon: faNewspaper },
        { id: 'china_japan_news', label: 'CHINA / JAPAN NEWS', type: 'news', icon: faNewspaper },
        { id: 'asean_news', label: 'ASEAN NEWS', type: 'news', icon: faGlobeAsia },
        // --- Stats Section ---
        { id: 'market_review', label: 'MARKET REVIEW', type: 'stats', icon: faChartBar },
        { id: 'next_dollar_currencies', label: 'CURRENCIES', type: 'stats', icon: faDollarSign },
        { id: 'global_population', label: 'POPULATION', type: 'stats', icon: faUsers },
        { id: 'energy_consumption', label: 'ENERGY', type: 'stats', icon: faFire },
        // **นี่คือส่วนที่ต้องแก้ไข:**
        // ลบบรรทัดเก่าของ 'RUSSIA NEWS' ที่ซ้ำออก
        // { id: 'russia_news_stats', label: 'RUSSIA NEWS', type: 'stats', icon: faNewspaper }, // <-- ลบบรรทัดนี้!
        // เก็บไว้เฉพาะรายการที่ต้องการ: 'RUSSIAN ECONOMY'
        { id: 'russia_news_stats', label: 'RUSSIAN ECONOMY', type: 'stats', icon: faChartLine },
    ];

    // Filter รายการที่จะแสดงตาม isNewsMode
    const currentItems = navItems.filter(item =>
        isNewsMode ? item.type === 'news' : item.type === 'stats'
    );

    const handleNavClick = useCallback((panelId, type) => {
        // อัปเดต activePanel และ isNewsMode เสมอเมื่อมีการคลิกเมนู
        setActivePanel(panelId);
        if (type === 'news') {
            setIsNewsMode(true);
        } else {
            setIsNewsMode(false);
        }

        // เรียกใช้ onMenuClick ที่รับมาจาก App.jsx
        // App.jsx จะเป็นผู้ตัดสินใจว่าควรแสดง NewsPanel/StatsPanel หรือ PopUpDetail
        if (onMenuClick) {
            onMenuClick(panelId);
        }
    }, [setActivePanel, setIsNewsMode, onMenuClick]);


    return (
        <div className="flex flex-col items-start p-4 z-20 pointer-events-auto text-base-content md:w-64">
            <div className="mb-6 ml-6">
                <span className="text-sm font-semibold uppercase tracking-wider text-gray-200">
                    {isNewsMode ? 'WORLD NEWS' : 'WORLD STATISTICS'}
                </span>
            </div>

            <ul className="menu p-2 w-full bg-base-100 rounded-box shadow-xl">
                {currentItems.map((item, index) => (
                    <li
                        key={item.id} // key={item.id} จะต้องไม่ซ้ำกัน
                        className={`${activePanel === item.id ? 'active' : ''}`}
                        onClick={() => handleNavClick(item.id, item.type)}
                    >
                        <a className="flex items-center gap-3">
                            <span className={`badge badge-ghost font-bold text-xs w-6 h-6 flex items-center justify-center rounded-full
                                ${activePanel === item.id
                                ? 'badge-primary text-white shadow-lg'
                                : 'bg-transparent text-base-content/70 border border-base-content/50 group-hover:bg-base-300'
                            }`}>
                                {String(index + 1).padStart(2, '0')}
                            </span>
                            <FontAwesomeIcon icon={item.icon} className="mr-2" />
                            <span className="text-sm font-medium uppercase tracking-wide break-words">
                                {item.label}
                            </span>
                        </a>
                    </li>
                ))}
            </ul>

            <div className="tabs tabs-boxed mt-8 shadow-lg bg-base-300">
                <a
                    role="tab"
                    className={`tab transition-all duration-300 ${isNewsMode ? 'tab-active bg-primary text-primary-content' : 'text-base-content'}`}
                    onClick={() => {
                        setIsNewsMode(true);
                        setActivePanel(navItems.find(item => item.type === 'news')?.id || 'world_news');
                    }}
                >
                    NEWS
                </a>
                <a
                    role="tab"
                    className={`tab transition-all duration-300 ${!isNewsMode ? 'tab-active bg-primary text-primary-content' : 'text-base-content'}`}
                    onClick={() => {
                        setIsNewsMode(false);
                        setActivePanel(navItems.find(item => item.type === 'stats')?.id || 'market_review');
                    }}
                >
                    STATISTICS
                </a>
            </div>
        </div>
    );
}