"""
مكون ترويسة الصفحة المحسن
"""

import streamlit as st
from datetime import datetime
import config


def render_header():
    """
    عرض ترويسة الصفحة المحسنة
    """
    # إنشاء مكون الترويسة باستخدام HTML
    header_html = """
    <div class="header-container">
        <div class="header-logo-title">
            <img src="./static/images/logo.png" class="header-logo" alt="شعار النظام">
            <div class="header-title">
                <h1>نظام تحليل العقود والمناقصات</h1>
                <p>الحلول الشاملة للتسعير والتحليل بالذكاء الاصطناعي</p>
            </div>
        </div>
        <div class="header-info">
            <button class="theme-toggle" id="theme-toggle" onclick="toggleTheme()">
                <span id="theme-icon">🌙</span>
            </button>
            <div class="date-box">
                <div class="date-day">{day}</div>
                <div class="date-info">
                    <div class="date-month">{month}</div>
                    <div class="date-year">{year}</div>
                </div>
            </div>
        </div>
    </div>
    <script>
        function toggleTheme() {{
            const body = document.body;
            const icon = document.getElementById('theme-icon');
            
            if (body.classList.contains('dark-theme')) {{
                body.classList.remove('dark-theme');
                icon.innerText = '🌙';
                localStorage.setItem('theme', 'light');
            }} else {{
                body.classList.add('dark-theme');
                icon.innerText = '☀️';
                localStorage.setItem('theme', 'dark');
            }}
        }}
        
        // تطبيق السمة المحفوظة عند تحميل الصفحة
        document.addEventListener('DOMContentLoaded', () => {{
            const savedTheme = localStorage.getItem('theme');
            const icon = document.getElementById('theme-icon');
            
            if (savedTheme === 'dark') {{
                document.body.classList.add('dark-theme');
                icon.innerText = '☀️';
            }}
        }});
    </script>
    """
    
    # الحصول على معلومات التاريخ الحالي
    today = datetime.now()
    day = today.day
    month_names = [
        "يناير", "فبراير", "مارس", "إبريل", "مايو", "يونيو",
        "يوليو", "أغسطس", "سبتمبر", "أكتوبر", "نوفمبر", "ديسمبر"
    ]
    month = month_names[today.month - 1]
    year = today.year
    
    # استبدال القيم في قالب HTML
    header_html = header_html.format(day=day, month=month, year=year)
    
    # عرض الترويسة
    st.markdown(header_html, unsafe_allow_html=True)
    
    # إضافة شريط التنقل الرئيسي
    if 'is_authenticated' in st.session_state and st.session_state.is_authenticated:
        render_navigation_menu()
    
    # إضافة خط فاصل
    st.markdown("<hr>", unsafe_allow_html=True)


def render_navigation_menu():
    """
    عرض قائمة التنقل الرئيسية المحسنة
    """
    # إنشاء قائمة التنقل المختصرة
    menu_items = [
        {"icon": "🏠", "label": "الرئيسية", "url": "/?page=home", "active": True},
        {"icon": "📊", "label": "لوحة المعلومات", "url": "/?page=dashboard", "active": False},
        {"icon": "📑", "label": "المناقصات", "url": "/?page=tenders", "active": False},
        {"icon": "📋", "label": "المشاريع", "url": "/?page=projects", "active": False},
        {"icon": "⚙️", "label": "الإعدادات", "url": "/?page=settings", "active": False},
        {"icon": "❓", "label": "المساعدة", "url": "/?page=help", "active": False}
    ]
    
    # تحديد الصفحة النشطة
    current_page = st.query_params.get("page", "home")
    for item in menu_items:
        if item["url"].endswith(current_page):
            item["active"] = True
        else:
            item["active"] = False
    
    # إنشاء قائمة HTML
    menu_html = """
    <div class="nav-menu">
        <ul>
    """
    
    for item in menu_items:
        active_class = "active" if item["active"] else ""
        menu_html += f"""
            <li>
                <a href="{item['url']}" class="{active_class}">
                    <span class="nav-icon">{item['icon']}</span>
                    <span class="nav-label">{item['label']}</span>
                </a>
            </li>
        """
    
    menu_html += """
        </ul>
    </div>
    """
    
    # عرض قائمة التنقل
    st.markdown(menu_html, unsafe_allow_html=True)