"""
مكون عرض معلومات حول النظام
"""

import streamlit as st


def display_about_system():
    """
    عرض معلومات حول النظام وميزاته
    """
    # مربع معلومات النظام
    st.markdown("""
    <div class="about-system">
        <h2>نبذة عن النظام</h2>
        <p>
            نظام WAHBi AI هو نظام متكامل لتحليل العقود والمناقصات باستخدام تقنيات الذكاء الاصطناعي المتقدمة. 
            تم تطوير النظام خصيصًا لشركة شبه الجزيرة للمقاولات لتمكينها من تحليل وثائق المناقصات، وتسعير المشاريع، وتقييم المخاطر، 
            وإدارة الموارد بكفاءة عالية.
        </p>
        
        <h2>المميزات الرئيسية</h2>
        <ul>
            <li><strong>تحليل المستندات ذكيًا</strong> - استخراج البنود والكميات والمخاطر من المستندات تلقائيًا</li>
            <li><strong>حاسبة تكاليف البناء المتكاملة</strong> - حساب التكاليف التفصيلية للمواد الخام والمعدات والعمالة والمصاريف الإدارية وهوامش الربح</li>
            <li><strong>تحليل الأسعار غير المتزنة</strong> - تحليل ومقارنة الأسعار مع متوسطات السوق لتحقيق أقصى استفادة</li>
            <li><strong>تتبع المعدات والموارد</strong> - متابعة وتنظيم موارد الشركة وتخصيصها للمشاريع المختلفة</li>
            <li><strong>تحليل المخاطر</strong> - تحديد المخاطر المحتملة في المشاريع وتقييم تأثيرها واقتراح إجراءات التخفيف</li>
            <li><strong>مؤشرات أداء المشاريع</strong> - متابعة الأداء المالي والفني للمشاريع وقياس الإنجاز</li>
            <li><strong>حاسبة المحتوى المحلي</strong> - حساب وتحسين نسبة المحتوى المحلي في المشاريع لتلبية متطلبات المملكة</li>
            <li><strong>التنبؤ بأسعار المواد</strong> - استخدام نماذج التعلم الآلي للتنبؤ بتغيرات الأسعار المستقبلية</li>
            <li><strong>مؤقت مواعيد التسليم</strong> - متابعة مواعيد بدء الدراسة ومواعيد تسليم العروض للمشاريع</li>
            <li><strong>دعم اللغة العربية</strong> - واجهة مستخدم باللغة العربية مع إمكانية التبديل للغة الإنجليزية</li>
            <li><strong>توافق متعدد الأجهزة</strong> - يعمل على جميع الأجهزة (أيفون، أندرويد، أجهزة لوحية، حواسيب مكتبية)</li>
        </ul>
        
        <h2>معلومات الاتصال</h2>
        <div class="contact-info">
            <p><strong>العنوان:</strong> المملكة العربية السعودية - الرياض - حي الملز - شارع السبالة</p>
            <p><strong>البريد الإلكتروني:</strong> info@peninsula-contracting.com</p>
            <p><strong>هاتف:</strong> +966 12 345 6789</p>
            <p><strong>الموقع الإلكتروني:</strong> www.peninsula-contracting.com</p>
        </div>
        
        <h2>فريق التطوير</h2>
        <p>
            تم تطوير هذا النظام بواسطة فريق متخصص من المهندسين والمطورين بقيادة م. بدر وهبي، 
            بالتعاون مع فريق التسعير والمشاريع في شركة شبه الجزيرة للمقاولات.
        </p>
        
        <h2>الإصدار والترخيص</h2>
        <p>
            <strong>رقم الإصدار:</strong> 2.5.0 (مارس 2025)<br>
            <strong>الترخيص:</strong> جميع الحقوق محفوظة © 2025 شركة شبه الجزيرة للمقاولات
        </p>
    </div>
    """, unsafe_allow_html=True)
    
    # أضف مساحة أسفل المحتوى
    st.markdown("<br><br>", unsafe_allow_html=True)
    
    # إضافة أزرار تفاعلية
    col1, col2, col3 = st.columns(3)
    
    with col1:
        st.button("تحميل دليل المستخدم")
    
    with col2:
        st.button("الدعم الفني")
    
    with col3:
        st.button("التحديثات والمزايا القادمة")


def display_settings():
    """
    عرض صفحة الإعدادات
    """
    st.markdown("<h2 class='module-title'>إعدادات النظام</h2>", unsafe_allow_html=True)
    
    # تقسيم الصفحة إلى قسمين
    col1, col2 = st.columns(2)
    
    with col1:
        st.markdown("""
        <div class="settings-form">
            <div class="settings-group">
                <h3>خيارات اللغة</h3>
                <div class="settings-item">
                    <label>لغة الواجهة</label>
                </div>
            </div>
        </div>
        """, unsafe_allow_html=True)
        
        language = st.selectbox(
            "اختر لغة الواجهة",
            options=["العربية", "English"],
            index=0,
            label_visibility="collapsed"
        )
        
        st.markdown("""
        <div class="settings-form">
            <div class="settings-group">
                <h3>الإشعارات</h3>
                <div class="settings-item">
                    <label>إعدادات الإشعارات</label>
                </div>
            </div>
        </div>
        """, unsafe_allow_html=True)
        
        notifications_email = st.checkbox("إشعارات البريد الإلكتروني", value=True)
        notifications_sms = st.checkbox("إشعارات الرسائل النصية SMS", value=False)
        notifications_system = st.checkbox("إشعارات النظام", value=True)
        
        if st.button("حفظ الإعدادات"):
            st.success("تم حفظ الإعدادات بنجاح")
    
    with col2:
        st.markdown("""
        <div class="settings-form">
            <div class="settings-group">
                <h3>معلومات الحساب</h3>
            </div>
        </div>
        """, unsafe_allow_html=True)
        
        username = st.text_input("اسم المستخدم", value="admin")
        email = st.text_input("البريد الإلكتروني", value="admin@peninsula-contracting.com")
        
        st.markdown("""
        <div class="settings-form" style="margin-top: 20px;">
            <div class="settings-group">
                <h3>تغيير كلمة المرور</h3>
            </div>
        </div>
        """, unsafe_allow_html=True)
        
        current_password = st.text_input("كلمة المرور الحالية", type="password")
        new_password = st.text_input("كلمة المرور الجديدة", type="password")
        confirm_password = st.text_input("تأكيد كلمة المرور الجديدة", type="password")
        
        if st.button("تغيير كلمة المرور"):
            if not current_password or not new_password or not confirm_password:
                st.error("يرجى ملء جميع الحقول")
            elif new_password != confirm_password:
                st.error("كلمات المرور غير متطابقة")
            else:
                st.success("تم تغيير كلمة المرور بنجاح")
        
    # إضافة مزيد من الإعدادات
    st.markdown("<hr>", unsafe_allow_html=True)
    st.markdown("<h3>إعدادات النظام المتقدمة</h3>", unsafe_allow_html=True)
    
    col3, col4 = st.columns(2)
    
    with col3:
        theme = st.selectbox(
            "سمة النظام",
            options=["الافتراضية", "الوضع الفاتح", "الوضع الداكن"]
        )
        
        date_format = st.selectbox(
            "تنسيق التاريخ",
            options=["DD/MM/YYYY", "MM/DD/YYYY", "YYYY-MM-DD"]
        )
    
    with col4:
        currency = st.selectbox(
            "العملة الافتراضية",
            options=["ريال سعودي (SAR)", "دولار أمريكي (USD)", "يورو (EUR)"]
        )
        
        notifications_frequency = st.selectbox(
            "تكرار الإشعارات",
            options=["فوري", "يومي", "أسبوعي"]
        )


def display_countdown_timer():
    """
    عرض مؤقت العد التنازلي للمواعيد النهائية
    """
    st.markdown("<h3>مواعيد المناقصات</h3>", unsafe_allow_html=True)
    
    # بيانات المواعيد
    deadlines = [
        {
            "name": "مناقصة توسعة مستشفى الملك فهد",
            "submission_date": "15 أبريل 2025",
            "days_left": 15,
            "start_date": "1 مارس 2025"
        },
        {
            "name": "مناقصة إنشاء مبنى كلية الطب",
            "submission_date": "30 مارس 2025",
            "days_left": 0,
            "start_date": "15 فبراير 2025"
        },
        {
            "name": "مناقصة طريق الدائري الشمالي",
            "submission_date": "10 مايو 2025",
            "days_left": 40,
            "start_date": "5 مارس 2025"
        }
    ]
    
    for i, deadline in enumerate(deadlines):
        # تحديد لون المؤقت بناءً على عدد الأيام المتبقية
        color_class = "danger" if deadline["days_left"] <= 5 else "warning" if deadline["days_left"] <= 15 else "success"
        
        # عرض معلومات الموعد والمؤقت
        st.markdown(f"""
        <div class="card" style="margin-bottom: 15px;">
            <h4>{deadline["name"]}</h4>
            <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                <div>
                    <small style="color: var(--text-light);">بدء الدراسة: {deadline["start_date"]}</small>
                </div>
                <div>
                    <small style="color: var(--text-light);">تاريخ التسليم: {deadline["submission_date"]}</small>
                </div>
            </div>
            <div class="progress" style="margin-bottom: 5px;">
                <div class="progress-bar progress-{color_class}" style="width: {100 - min(100, deadline["days_left"] * 2)}%;"></div>
            </div>
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <div>
                    <small>متبقي: <span class="bold">{deadline["days_left"]} أيام</span></small>
                </div>
                <div>
                    <button class="btn-secondary btn-sm">تفاصيل المناقصة</button>
                </div>
            </div>
        </div>
        """, unsafe_allow_html=True)
    
    # عرض مؤقت تفصيلي للمناقصة الأولى
    st.markdown("<h4>العد التنازلي للتسليم</h4>", unsafe_allow_html=True)
    
    st.markdown("""
    <div class="countdown-timer">
        <div class="time-block">
            <div class="time-value">15</div>
            <div class="time-label">يوم</div>
        </div>
        <div class="time-block">
            <div class="time-value">08</div>
            <div class="time-label">ساعة</div>
        </div>
        <div class="time-block">
            <div class="time-value">45</div>
            <div class="time-label">دقيقة</div>
        </div>
        <div class="time-block">
            <div class="time-value">20</div>
            <div class="time-label">ثانية</div>
        </div>
    </div>
    """, unsafe_allow_html=True)