"""
مكون عرض معلومات فريق التطوير
"""

import streamlit as st

# تصدير واضح للدالة لجعلها متاحة للاستيراد
__all__ = ['render_credits', 'display_credits']


def render_credits():
    """
    عرض معلومات فريق التطوير (واجهة للاستخدام مع وحدات النظام المختلفة)
    """
    display_credits()
    
    
def display_credits():
    """
    عرض معلومات فريق التطوير
    """
    # تعريف بيانات الفريق
    team_members = [
        {
            "name": "م بدر وهبي",
            "role": "مدير المشروع",
            "image": "badr.jpg",
            "bio": "مهندس برمجيات ذو خبرة 15 عامًا في تطوير أنظمة المقاولات والتسعير"
        },
        {
            "name": "م تامر الجوهري",
            "role": "مهندسة الذكاء الاصطناعي",
            "image": "tamer.jpg",
            "bio": "متخصصة في معالجة اللغة العربية الطبيعية وتحليل البيانات"
        },
        {
            "name": "م اسلام عيسي",
            "role": "أخصائي تطوير التسعير",
            "image": "Islam.jpg",
            "bio": "خبير في أنظمة التسعير المتقدمة والتحليل المالي للمشاريع"
        }
    ]
    
    # عرض معلومات الفريق في صفوف
    # كل صف يحتوي على 3 أعضاء
    cols_per_row = 3
    
    for i in range(0, len(team_members), cols_per_row):
        # إنشاء الأعمدة
        cols = st.columns(cols_per_row)
        
        # عرض الأعضاء في هذا الصف
        for j in range(cols_per_row):
            idx = i + j
            if idx < len(team_members):
                member = team_members[idx]
                
                with cols[j]:
                    # عرض صورة العضو (استخدام صورة افتراضية إذا لم تكن متوفرة)
                    try:
                        st.image(f"static/images/team/{member['image']}", width=150)
                    except:
                        # استخدام الأحرف الأولى من الاسم كصورة افتراضية
                        initials = ''.join([name[0] for name in member['name'].split() if name.startswith('م.') == False])
                        st.markdown(f"""
                        <div class="avatar">
                            <span>{initials}</span>
                        </div>
                        """, unsafe_allow_html=True)
                    
                    # عرض معلومات العضو
                    st.markdown(f"""
                    <div class="team-member">
                        <h3>{member['name']}</h3>
                        <h4>{member['role']}</h4>
                        <p>{member['bio']}</p>
                    </div>
                    """, unsafe_allow_html=True)
    
    # إضافة أسلوب CSS للعرض
    st.markdown("""
    <style>
    .team-member {
        text-align: center;
        margin-bottom: 20px;
    }
    .team-member h3 {
        color: #333;
        margin-bottom: 5px;
        font-size: 18px;
    }
    .team-member h4 {
        color: #ff9a3c;
        margin-top: 0;
        margin-bottom: 10px;
        font-size: 14px;
    }
    .team-member p {
        color: #666;
        font-size: 12px;
    }
    .avatar {
        background-color: #ff9a3c;
        color: white;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto 15px auto;
        font-size: 36px;
    }
    </style>
    """, unsafe_allow_html=True)