styling/enhanced_ui.py

"""
محسن واجهة المستخدم - نظام تحليل المناقصات
"""

import streamlit as st
import pandas as pd
import numpy as np
import base64
from pathlib import Path
import os

class UIEnhancer:
    """فئة لتحسين واجهة المستخدم وتوحيد التصميم عبر النظام"""
    
    # ألوان النظام
    COLORS = {
        'primary': '#1E88E5',      # أزرق
        'secondary': '#5E35B1',    # بنفسجي
        'success': '#43A047',      # أخضر
        'warning': '#FB8C00',      # برتقالي
        'danger': '#E53935',       # أحمر
        'info': '#00ACC1',         # سماوي
        'light': '#F5F5F5',        # رمادي فاتح
        'dark': '#212121',         # رمادي داكن
        'accent': '#FF4081',       # وردي
        'background': '#FFFFFF',   # أبيض
        'text': '#212121',         # أسود
        'border': '#E0E0E0'        # رمادي حدود
    }
    
    # أحجام الخطوط
    FONT_SIZES = {
        'xs': '0.75rem',
        'sm': '0.875rem',
        'md': '1rem',
        'lg': '1.125rem',
        'xl': '1.25rem',
        '2xl': '1.5rem',
        '3xl': '1.875rem',
        '4xl': '2.25rem',
        '5xl': '3rem'
    }
    
    def __init__(self, page_title="نظام تحليل المناقصات", page_icon="📊"):
        """تهيئة محسن واجهة المستخدم"""
        self.page_title = page_title
        self.page_icon = page_icon
        self.theme_mode = "light"  # الوضع الافتراضي هو الوضع الفاتح
    
    def apply_global_styles(self):
        """تطبيق التنسيقات العامة على الصفحة"""
        # تعريف CSS العام
        css = f"""
        @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap');
        
        * {{
            font-family: 'Tajawal', sans-serif;
            direction: rtl;
        }}
        
        h1, h2, h3, h4, h5, h6 {{
            font-family: 'Tajawal', sans-serif;
            font-weight: 700;
            color: {self.COLORS['dark']};
        }}
        
        .module-title {{
            color: {self.COLORS['primary']};
            font-size: {self.FONT_SIZES['3xl']};
            margin-bottom: 1rem;
            border-bottom: 2px solid {self.COLORS['primary']};
            padding-bottom: 0.5rem;
        }}
        
        .stTabs [data-baseweb="tab-list"] {{
            gap: 2px;
        }}
        
        .stTabs [data-baseweb="tab"] {{
            height: 50px;
            white-space: pre-wrap;
            background-color: {self.COLORS['light']};
            border-radius: 4px 4px 0 0;
            gap: 1px;
            padding-top: 10px;
            padding-bottom: 10px;
        }}
        
        .stTabs [aria-selected="true"] {{
            background-color: {self.COLORS['primary']};
            color: white;
        }}
        
        div[data-testid="stSidebarNav"] li div a span {{
            direction: rtl;
            text-align: right;
            font-family: 'Tajawal', sans-serif;
        }}
        
        div[data-testid="stSidebarNav"] {{
            background-color: {self.COLORS['light']};
        }}
        
        div[data-testid="stSidebarNav"] li div {{
            margin-right: 0;
            margin-left: auto;
        }}
        
        div[data-testid="stSidebarNav"] li div a {{
            padding-right: 10px;
            padding-left: 0;
        }}
        
        div[data-testid="stSidebarNav"] li div a:hover {{
            background-color: {self.COLORS['primary'] + '20'};
        }}
        
        div[data-testid="stSidebarNav"] li div[aria-selected="true"] {{
            background-color: {self.COLORS['primary'] + '40'};
        }}
        
        div[data-testid="stSidebarNav"] li div[aria-selected="true"] a span {{
            color: {self.COLORS['primary']};
            font-weight: 500;
        }}
        
        .metric-card {{
            background-color: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            text-align: center;
            transition: transform 0.3s ease;
        }}
        
        .metric-card:hover {{
            transform: translateY(-5px);
        }}
        
        .metric-value {{
            font-size: 2.5rem;
            font-weight: 700;
            margin: 10px 0;
        }}
        
        .metric-label {{
            font-size: 1rem;
            color: #666;
        }}
        
        .metric-change {{
            font-size: 0.9rem;
            margin-top: 5px;
        }}
        
        .metric-change-positive {{
            color: {self.COLORS['success']};
        }}
        
        .metric-change-negative {{
            color: {self.COLORS['danger']};
        }}
        
        .custom-button {{
            background-color: {self.COLORS['primary']};
            color: white;
            border: none;
            border-radius: 5px;
            padding: 10px 20px;
            font-size: 1rem;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }}
        
        .custom-button:hover {{
            background-color: {self.COLORS['secondary']};
        }}
        
        .custom-card {{
            background-color: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }}
        
        .header-container {{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid {self.COLORS['border']};
        }}
        
        .header-title {{
            color: {self.COLORS['primary']};
            font-size: {self.FONT_SIZES['3xl']};
            margin: 0;
        }}
        
        .header-subtitle {{
            color: {self.COLORS['dark']};
            font-size: {self.FONT_SIZES['lg']};
            margin: 0;
        }}
        
        .header-actions {{
            display: flex;
            gap: 10px;
        }}
        
        /* تنسيق الجداول */
        div[data-testid="stTable"] table {{
            width: 100%;
            border-collapse: collapse;
        }}
        
        div[data-testid="stTable"] thead tr th {{
            background-color: {self.COLORS['primary']};
            color: white;
            text-align: right;
            padding: 12px;
        }}
        
        div[data-testid="stTable"] tbody tr:nth-child(even) {{
            background-color: {self.COLORS['light']};
        }}
        
        div[data-testid="stTable"] tbody tr:hover {{
            background-color: {self.COLORS['primary'] + '10'};
        }}
        
        div[data-testid="stTable"] tbody tr td {{
            padding: 10px;
            text-align: right;
        }}
        
        /* تنسيق النماذج */
        div[data-testid="stForm"] {{
            background-color: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }}
        
        button[kind="primaryFormSubmit"] {{
            background-color: {self.COLORS['primary']};
            color: white;
        }}
        
        button[kind="secondaryFormSubmit"] {{
            background-color: {self.COLORS['light']};
            color: {self.COLORS['dark']};
            border: 1px solid {self.COLORS['border']};
        }}
        
        /* تنسيق الرسوم البيانية */
        div[data-testid="stVegaLiteChart"] {{
            background-color: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }}
        """
        
        # تطبيق CSS
        st.markdown(f'<style>{css}</style>', unsafe_allow_html=True)
    
    def apply_theme_colors(self):
        """تطبيق ألوان السمة الحالية"""
        # تحديد ألوان السمة بناءً على الوضع
        if self.theme_mode == "dark":
            self.COLORS['background'] = '#121212'
            self.COLORS['text'] = '#FFFFFF'
            self.COLORS['border'] = '#333333'
        else:
            self.COLORS['background'] = '#FFFFFF'
            self.COLORS['text'] = '#212121'
            self.COLORS['border'] = '#E0E0E0'
        
        # تطبيق CSS للسمة
        theme_css = f"""
        body {{
            background-color: {self.COLORS['background']};
            color: {self.COLORS['text']};
        }}
        """
        
        st.markdown(f'<style>{theme_css}</style>', unsafe_allow_html=True)
    
    def toggle_theme(self):
        """تبديل وضع السمة بين الفاتح والداكن"""
        if self.theme_mode == "light":
            self.theme_mode = "dark"
        else:
            self.theme_mode = "light"
        
        self.apply_theme_colors()
    
    def create_sidebar(self, menu_items):
        """إنشاء الشريط الجانبي مع قائمة العناصر"""
        with st.sidebar:
            # إضافة الشعار
            st.markdown(
                f"""
                <div style="text-align: center; margin-bottom: 20px;">
                    <h2 style="color: {self.COLORS['primary']};">{self.page_icon} {self.page_title}</h2>
                </div>
                """,
                unsafe_allow_html=True
            )
            
            # إضافة معلومات المستخدم
            st.markdown(
                f"""
                <div style="text-align: center; margin-bottom: 20px;">
                    <div style="width: 60px; height: 60px; border-radius: 50%; background-color: {self.COLORS['primary']}; color: white; display: flex; align-items: center; justify-content: center; margin: 0 auto; font-size: 24px; font-weight: bold;">
                        م
                    </div>
                    <p style="margin-top: 10px; font-weight: bold;">محمد أحمد</p>
                    <p style="margin-top: -15px; font-size: 0.8rem; color: #666;">مدير المشاريع</p>
                </div>
                """,
                unsafe_allow_html=True
            )
            
            st.divider()
            
            # إنشاء القائمة
            selected = st.radio(
                "القائمة الرئيسية",
                [item["name"] for item in menu_items],
                format_func=lambda x: x,
                label_visibility="collapsed"
            )
            
            st.divider()
            
            # إضافة زر تبديل السمة
            if st.button("تبديل السمة 🌓"):
                self.toggle_theme()
                st.experimental_rerun()
            
            # إضافة معلومات النظام
            st.markdown(
                """
                <div style="position: absolute; bottom: 20px; left: 20px; right: 20px; text-align: center;">
                    <p style="font-size: 0.8rem; color: #666;">نظام تحليل المناقصات | الإصدار 2.0.0</p>
                    <p style="font-size: 0.7rem; color: #888;">© 2025 جميع الحقوق محفوظة</p>
                </div>
                """,
                unsafe_allow_html=True
            )
        
        return selected
    
    def create_header(self, title, subtitle=None, show_actions=True):
        """إنشاء ترويسة الصفحة"""
        col1, col2 = st.columns([3, 1])
        
        with col1:
            st.markdown(f'<h1 class="header-title">{title}</h1>', unsafe_allow_html=True)
            if subtitle:
                st.markdown(f'<p class="header-subtitle">{subtitle}</p>', unsafe_allow_html=True)
        
        if show_actions:
            with col2:
                st.markdown(
                    """
                    <div class="header-actions" style="display: flex; justify-content: flex-end; gap: 10px;">
                        <button class="custom-button" style="background-color: #43A047;">إضافة جديد</button>
                        <button class="custom-button" style="background-color: #1E88E5;">تحديث</button>
                    </div>
                    """,
                    unsafe_allow_html=True
                )
        
        st.divider()
    
    def create_metric_card(self, label, value, change=None, color=None):
        """إنشاء بطاقة مقياس"""
        if color is None:
            color = self.COLORS['primary']
        
        change_html = ""
        if change is not None:
            if change.startswith("+"):
                change_class = "metric-change-positive"
                change_icon = "↑"
            elif change.startswith("-"):
                change_class = "metric-change-negative"
                change_icon = "↓"
            else:
                change_class = ""
                change_icon = ""
            
            change_html = f'<div class="metric-change {change_class}">{change_icon} {change}</div>'
        
        st.markdown(
            f"""
            <div class="metric-card" style="border-top: 4px solid {color};">
                <div class="metric-label">{label}</div>
                <div class="metric-value" style="color: {color};">{value}</div>
                {change_html}
            </div>
            """,
            unsafe_allow_html=True
        )
    
    def create_card(self, title, content, footer=None, color=None):
        """إنشاء بطاقة عامة"""
        if color is None:
            color = self.COLORS['primary']
        
        footer_html = ""
        if footer is not None:
            footer_html = f'<div style="margin-top: 15px; padding-top: 10px; border-top: 1px solid {self.COLORS["border"]}; font-size: 0.9rem; color: #666;">{footer}</div>'
        
        st.markdown(
            f"""
            <div class="custom-card" style="border-top: 4px solid {color};">
                <h3 style="color: {color}; margin-top: 0;">{title}</h3>
                <div>{content}</div>
                {footer_html}
            </div>
            """,
            unsafe_allow_html=True
        )
    
    def create_status_badge(self, status):
        """إنشاء شارة حالة"""
        status_colors = {
            "جديد": self.COLORS['info'],
            "قيد التسعير": self.COLORS['warning'],
            "تم التقديم": self.COLORS['primary'],
            "تمت الترسية": self.COLORS['success'],
            "قيد التنفيذ": self.COLORS['accent'],
            "منتهي": self.COLORS['secondary'],
            "ملغي": self.COLORS['danger']
        }
        
        color = status_colors.get(status, self.COLORS['primary'])
        
        return f"""
        <span style="background-color: {color}; color: white; padding: 3px 8px; border-radius: 12px; font-size: 0.8rem;">
            {status}
        </span>
        """
    
    def create_progress_bar(self, percent, label=None):
        """إنشاء شريط تقدم"""
        if label is None:
            label = f"{percent}%"
        
        # تحديد لون شريط التقدم بناءً على النسبة
        if percent < 30:
            color = self.COLORS['danger']
        elif percent < 70:
            color = self.COLORS['warning']
        else:
            color = self.COLORS['success']
        
        st.markdown(
            f"""
            <div style="margin-bottom: 10px;">
                <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                    <span>{label}</span>
                    <span>{percent}%</span>
                </div>
                <div style="background-color: {self.COLORS['light']}; border-radius: 5px; height: 10px;">
                    <div style="background-color: {color}; width: {percent}%; height: 100%; border-radius: 5px;"></div>
                </div>
            </div>
            """,
            unsafe_allow_html=True
        )
    
    def create_tabs_container(self, tabs_data):
        """إنشاء حاوية تبويبات مخصصة"""
        # إنشاء أزرار التبويب
        tab_buttons_html = ""
        for i, tab in enumerate(tabs_data):
            active_class = "active" if i == 0 else ""
            tab_buttons_html += f"""
            <button class="tablinks {active_class}" onclick="openTab(event, 'tab{i}')">{tab['title']}</button>
            """
        
        # إنشاء محتوى التبويبات
        tab_content_html = ""
        for i, tab in enumerate(tabs_data):
            display_style = "block" if i == 0 else "none"
            tab_content_html += f"""
            <div id="tab{i}" class="tabcontent" style="display: {display_style};">
                {tab['content']}
            </div>
            """
        
        # إنشاء JavaScript للتبديل بين التبويبات
        js = """
        <script>
        function openTab(evt, tabName) {
            var i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            tablinks = document.getElementsByClassName("tablinks");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active", "");
            }
            document.getElementById(tabName).style.display = "block";
            evt.currentTarget.className += " active";
        }
        </script>
        """
        
        # إنشاء CSS للتبويبات
        css = f"""
        <style>
        .tab {{
            overflow: hidden;
            border: 1px solid {self.COLORS['border']};
            background-color: {self.COLORS['light']};
            border-radius: 5px 5px 0 0;
        }}
        
        .tab button {{
            background-color: inherit;
            float: right;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 14px 16px;
            transition: 0.3s;
            font-size: 16px;
            font-family: 'Tajawal', sans-serif;
        }}
        
        .tab button:hover {{
            background-color: {self.COLORS['primary'] + '20'};
        }}
        
        .tab button.active {{
            background-color: {self.COLORS['primary']};
            color: white;
        }}
        
        .tabcontent {{
            display: none;
            padding: 20px;
            border: 1px solid {self.COLORS['border']};
            border-top: none;
            border-radius: 0 0 5px 5px;
        }}
        </style>
        """
        
        # تجميع HTML
        html = f"""
        {css}
        <div class="tab">
            {tab_buttons_html}
        </div>
        
        {tab_content_html}
        
        {js}
        """
        
        st.markdown(html, unsafe_allow_html=True)
    
    def get_icon_html(self, icon_name, size="1rem", color=None):
        """الحصول على HTML لأيقونة Bootstrap"""
        if color is None:
            color = self.COLORS['primary']
        
        return f"""
        <i class="bi bi-{icon_name}" style="font-size: {size}; color: {color};"></i>
        """
    
    def add_bootstrap_icons(self):
        """إضافة أيقونات Bootstrap"""
        st.markdown(
            """
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
            """,
            unsafe_allow_html=True
        )
    
    def get_image_base64(self, image_path):
        """تحويل الصورة إلى تنسيق base64"""
        with open(image_path, "rb") as img_file:
            return base64.b64encode(img_file.read()).decode()
    
    def add_logo(self, logo_path, width="150px"):
        """إضافة شعار"""
        if os.path.exists(logo_path):
            try:
                base64_image = self.get_image_base64(logo_path)
                st.markdown(
                    f"""
                    <div style="text-align: center; margin-bottom: 20px;">
                        <img src="data:image/png;base64,{base64_image}" width="{width}">
                    </div>
                    """,
                    unsafe_allow_html=True
                )
            except Exception as e:
                st.error(f"خطأ في تحميل الشعار: {e}")
        else:
            st.warning(f"ملف الشعار غير موجود: {logo_path}")