Update app.py

app.py

@@ -640,4 +640,896 @@ class SchoolService:
                     assignments = json.loads(result[0]) if result[0] else []
                     assignments.append(new_assignment)
                     cursor.execute('''
-                        UPDATE student_sessions SET assignments = ? WHERE user
+                        UPDATE student_sessions SET assignments = ? WHERE username = ?
+                    ''', (json.dumps(assignments), username))
+
+            self.conn.commit()
+            return assignment_id
+        except Exception as e:
+            print(f"Create assignment error: {e}")
+            return -1
+
+# Initialize school service
+school_service = SchoolService()
+
+# ==================== ADMIN SERVICE WITH SQLITE ====================
+
+class AdminService:
+    def __init__(self):
+        self.conn = db_manager.get_connection()
+
+    def __del__(self):
+        if hasattr(self, 'conn'):
+            self.conn.close()
+
+    def authenticate(self, username: str, password: str) -> Optional[Dict]:
+        try:
+            cursor = self.conn.cursor()
+            cursor.execute('''
+                SELECT name, role FROM teachers
+                WHERE username = ? AND password = ?
+            ''', (username, password))
+            result = cursor.fetchone()
+            if result:
+                return {"name": result[0], "role": result[1]}
+            return None
+        except Exception as e:
+            print(f"Admin auth error: {e}")
+            return None
+
+# Initialize admin service
+admin_service = AdminService()
+
+# ==================== OPENAI SETUP ====================
+
+OPENAI_API_KEY = os.getenv("OPENAI_API_KEY")
+USE_OPENAI = bool(OPENAI_API_KEY)
+
+if USE_OPENAI:
+    try:
+        from openai import OpenAI
+        client = OpenAI(api_key=OPENAI_API_KEY)
+    except Exception as e:
+        print(f"⚠️ OpenAI error: {e}")
+        USE_OPENAI = False
+else:
+    print("⚠️ OPENAI_API_KEY not set. Using mock responses.")
+
+# ==================== AI CHAT FUNCTION ====================
+
+def ai_chat(message: str, history: List, username: str = "guest") -> tuple:
+    if not message.strip():
+        return history, ""
+
+    thinking_msg = "🤔 ThutoAI is thinking..."
+    history.append((message, thinking_msg))
+    yield history, ""
+
+    if USE_OPENAI:
+        try:
+            system_prompt = f"""You are ThutoAI, a friendly and knowledgeable AI assistant for students.
+Context from school:
+{school_service.get_school_context_for_ai()}
+
+Guidelines:
+- Be encouraging, clear, and concise.
+- Use emojis sparingly to keep it fun 😊📚🎯
+- If asked about deadlines or exams, refer to context.
+- Offer study tips if appropriate.
+- Never invent facts — say 'I don't know' if unsure."""
+
+            response = client.chat.completions.create(
+                model="gpt-3.5-turbo",
+                messages=[
+                    {"role": "system", "content": system_prompt},
+                    {"role": "user", "content": message}
+                ],
+                temperature=0.7,
+                max_tokens=500
+            )
+
+            reply = response.choices[0].message.content.strip()
+
+            keywords = ["exam", "test", "due", "assignment", "deadline", "when", "what", "grade", "score"]
+            if any(kw in message.lower() for kw in keywords):
+                matches = school_service.get_announcements()
+                relevant = [a for a in matches if any(kw in a["title"].lower() or kw in a["content"].lower() for kw in keywords)]
+                if relevant:
+                    reply += "\n\n📌 **Quick Info from School:**"
+                    for ann in relevant[:2]:
+                        emoji = "🚨" if ann["priority"] == "high" else "📌" if ann["priority"] == "normal" else "ℹ️"
+                        reply += f"\n{emoji} **{ann['title']}** ({ann['course']})\n   → {ann['content'][:70]}..."
+
+        except Exception as e:
+            reply = f"⚠️ Sorry, I had a glitch: {str(e)}"
+    else:
+        time.sleep(1.5)
+        reply = f"👋 Hi! I'm ThutoAI. You asked: '{message}'.\n💡 *Pro tip: Add your OpenAI API key in HF Secrets for smarter answers!*"
+
+    history[-1] = (message, reply)
+
+    if username != "guest":
+        student_service.add_to_chat_history(username, message, reply)
+
+    yield history, ""
+
+
+# ==================== UI RENDERING HELPERS ====================
+
+def render_announcements(course: str) -> str:
+    announcements = school_service.get_announcements(course)
+    if not announcements:
+        return """
+        <div style='text-align: center; padding: 40px; color: #6c757d;'>
+            <div style='font-size: 4em; margin-bottom: 16px;'>📭</div>
+            <h3>No announcements for this course.</h3>
+            <p>Check back later or select "All" to see everything.</p>
+        </div>
+        """
+
+    html = "<div style='display: grid; gap: 16px;'>"
+    priority_icons = {"high": "🚨", "normal": "📌", "low": "ℹ️"}
+    priority_colors = {"high": "#dc3545", "normal": "#ffc107", "low": "#6c757d"}
+
+    for ann in announcements:
+        icon = priority_icons.get(ann["priority"], "📌")
+        color = priority_colors.get(ann["priority"], "#6c757d")
+        html += f"""
+        <div style='
+            background: white;
+            border-radius: 12px;
+            padding: 20px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+            border-left: 4px solid {color};
+            transition: transform 0.2s, box-shadow 0.2s;
+        '>
+            <div style='display: flex; align-items: flex-start; gap: 12px;'>
+                <div style='font-size: 1.5em;'>{icon}</div>
+                <div style='flex: 1;'>
+                    <div style='display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;'>
+                        <h3 style='margin: 0; color: #212529;'>{ann['title']}</h3>
+                        <span style='
+                            background: {color};
+                            color: white;
+                            padding: 4px 10px;
+                            border-radius: 20px;
+                            font-size: 0.8em;
+                            font-weight: bold;
+                        '>{ann['priority'].upper()}</span>
+                    </div>
+                    <p style='margin: 8px 0; color: #495057; line-height: 1.5;'>{ann['content']}</p>
+                    <div style='display: flex; justify-content: space-between; font-size: 0.85em; color: #6c757d; margin-top: 12px;'>
+                        <span>📚 {ann['course']}</span>
+                        <span>📅 {ann['date']}</span>
+                        <span>👨‍🏫 {ann['posted_by']}</span>
+                        <span>👁️ {ann['views']} views</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        """
+    html += "</div>"
+    return html
+
+
+def render_assignments(assignments: List[Dict]) -> str:
+    if not assignments:
+        return """
+        <div style='text-align: center; padding: 40px; color: #6c757d;'>
+            <div style='font-size: 4em; margin-bottom: 16px;'>📅</div>
+            <h3>No upcoming assignments.</h3>
+            <p>Ask your teacher or join a class group to see assignments.</p>
+        </div>
+        """
+
+    html = "<div style='display: grid; gap: 16px;'>"
+    today = datetime.today().date()
+
+    for task in assignments:
+        due_date = datetime.strptime(task["due_date"], "%Y-%m-%d").date()
+        days_left = (due_date - today).days
+        is_overdue = days_left < 0
+        is_today = days_left == 0
+
+        if is_overdue:
+            badge = "🚨 OVERDUE"
+            color = "#dc3545"
+        elif is_today:
+            badge = "🎯 TODAY"
+            color = "#fd7e14"
+        elif days_left <= 2:
+            badge = f"⚠️ Due in {days_left} day{'s' if days_left != 1 else ''}"
+            color = "#ffc107"
+        else:
+            badge = f"✅ Due in {days_left} days"
+            color = "#28a745"
+
+        html += f"""
+        <div style='
+            background: white;
+            border-radius: 12px;
+            padding: 20px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+            border-left: 4px solid {color};
+            transition: transform 0.2s;
+        '>
+            <div style='display: flex; justify-content: space-between; align-items: flex-start;'>
+                <div>
+                    <h3 style='margin: 0 0 8px 0; color: #212529;'>{task['title']}</h3>
+                    <div style='color: #6c757d; margin-bottom: 8px;'>📚 {task['course']} · 👩‍🏫 {task['assigned_by']}</div>
+                    <div style='color: #495057;'>📅 Due: {task['due_date']}</div>
+                    <div style='color: #6c757d; font-size: 0.9em;'>{task.get('description', '')}</div>
+                </div>
+                <span style='
+                    background: {color};
+                    color: white;
+                    padding: 6px 12px;
+                    border-radius: 20px;
+                    font-weight: bold;
+                    font-size: 0.85em;
+                    align-self: flex-start;
+                '>{badge}</span>
+            </div>
+        </div>
+        """
+
+    html += "</div>"
+    return html
+
+
+def render_groups(groups: List[str]) -> str:
+    if not groups:
+        return """
+        <div style='text-align: center; padding: 40px; color: #6c757d;'>
+            <div style='font-size: 4em; margin-bottom: 16px;'>👥</div>
+            <h3>You haven't joined any class groups yet.</h3>
+            <p>Ask your teacher for a group code to join your class.</p>
+        </div>
+        """
+
+    html = "<div style='display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px;'>"
+    for group in groups:
+        html += f"""
+        <div style='
+            background: #e3f2fd;
+            border-radius: 12px;
+            padding: 20px;
+            text-align: center;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+            border: 2px solid #2196f3;
+        '>
+            <div style='font-size: 1.5em; margin-bottom: 8px;'>🎒</div>
+            <h3 style='margin: 0; color: #1976d2;'>{group}</h3>
+            <p style='margin: 8px 0 0 0; color: #555; font-size: 0.9em;'>Class Group</p>
+        </div>
+        """
+    html += "</div>"
+    return html
+
+
+def get_avatar_html(avatar_path: Optional[str], name: str) -> str:
+    if avatar_path and os.path.exists(avatar_path):
+        try:
+            with open(avatar_path, "rb") as f:
+                img_data = base64.b64encode(f.read()).decode()
+            img_html = f'<img src="data:image/png;base64,{img_data}" style="width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 2px solid #6e8efb;">'
+        except:
+            img_html = f'<div style="width: 60px; height: 60px; border-radius: 50%; background: #6e8efb; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.2em; border: 2px solid #6e8efb;">{name[0].upper()}</div>'
+    else:
+        img_html = f'<div style="width: 60px; height: 60px; border-radius: 50%; background: #6e8efb; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.2em; border: 2px solid #6e8efb;">{name[0].upper()}</div>'
+
+    return img_html
+
+
+def render_analytics() -> str:
+    total_students = student_service.get_total_students()
+    active_students = student_service.get_active_students()
+    total_assignments = student_service.get_total_assignments()
+    group_popularity = student_service.get_group_popularity()
+    recent_activity = student_service.get_recent_activity()
+    school_stats = school_service.get_stats()
+
+    html = f"""
+    <div style='display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-bottom: 32px;'>
+        <div style='background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);'>
+            <h3 style='color: #212529; margin: 0 0 16px 0;'>👥 Student Engagement</h3>
+            <div style='display: grid; grid-template-columns: 1fr 1fr; gap: 16px;'>
+                <div style='text-align: center; padding: 16px; background: #e3f2fd; border-radius: 8px;'>
+                    <div style='font-size: 2em; color: #1976d2;'>{total_students}</div>
+                    <div>Total Students</div>
+                </div>
+                <div style='text-align: center; padding: 16px; background: #e8f5e8; border-radius: 8px;'>
+                    <div style='font-size: 2em; color: #2e7d32;'>{active_students}</div>
+                    <div>Active Students</div>
+                </div>
+            </div>
+        </div>
+        
+        <div style='background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);'>
+            <h3 style='color: #212529; margin: 0 0 16px 0;'>📊 Assignment Stats</h3>
+            <div style='display: grid; grid-template-columns: 1fr 1fr; gap: 16px;'>
+                <div style='text-align: center; padding: 16px; background: #fff3e0; border-radius: 8px;'>
+                    <div style='font-size: 2em; color: #ef6c00;'>{total_assignments}</div>
+                    <div>Total Assignments</div>
+                </div>
+                <div style='text-align: center; padding: 16px; background: #f3e5f5; border-radius: 8px;'>
+                    <div style='font-size: 2em; color: #7b1fa2;'>N/A</div>
+                    <div>Completion Rate</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div style='display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 32px;'>
+        <div style='background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);'>
+            <h3 style='color: #212529; margin: 0 0 16px 0;'>📈 Popular Class Groups</h3>
+            <div style='display: grid; gap: 12px;'>
+    """
+
+    sorted_groups = sorted(group_popularity.items(), key=lambda x: x[1], reverse=True)
+    for group, count in sorted_groups[:5]:
+        percentage = (count / total_students * 100) if total_students > 0 else 0
+        html += f"""
+                <div style='display: flex; align-items: center; gap: 12px;'>
+                    <div style='width: 100%; background: #e0e0e0; height: 8px; border-radius: 4px;'>
+                        <div style='width: {percentage}%; background: #6e8efb; height: 100%; border-radius: 4px;'></div>
+                    </div>
+                    <div style='min-width: 80px;'>{group}</div>
+                    <div style='color: #6c757d;'>{count} students</div>
+                </div>
+        """
+
+    html += """
+            </div>
+        </div>
+
+        <div style='background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);'>
+            <h3 style='color: #212529; margin: 0 0 16px 0;'>📢 Announcement Stats</h3>
+            <div style='display: grid; gap: 12px;'>
+    """
+
+    for ann in school_service.get_announcements()[:5]:
+        views = ann.get("views", 0)
+        max_views = max(a.get("views", 0) for a in school_service.get_announcements()) if school_service.get_announcements() else 1
+        width_percent = (views / max_views * 100) if max_views > 0 else 0
+        html += f"""
+                <div style='display: flex; align-items: center; gap: 12px;'>
+                    <div style='width: 100%; background: #e0e0e0; height: 8px; border-radius: 4px;'>
+                        <div style='width: {width_percent}%; background: #ff7043; height: 100%; border-radius: 4px;'></div>
+                    </div>
+                    <div style='min-width: 120px; font-size: 0.9em;'>{ann['title'][:20]}...</div>
+                    <div style='color: #6c757d;'>{views} views</div>
+                </div>
+        """
+
+    html += """
+            </div>
+        </div>
+    </div>
+
+    <div style='background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);'>
+        <h3 style='color: #212529; margin: 0 0 16px 0;'>⏱️ Recent Activity</h3>
+        <div style='display: grid; gap: 12px;'>
+    """
+
+    for activity in recent_activity:
+        html += f"""
+            <div style='padding: 12px; background: #f8f9fa; border-radius: 8px; display: flex; justify-content: space-between; align-items: center;'>
+                <div>
+                    <strong>{activity['student']}</strong> received assignment: <em>{activity['last_assignment']}</em>
+                </div>
+                <div style='color: #6c757d; font-size: 0.9em;'>{activity['date']}</div>
+            </div>
+        """
+
+    html += """
+        </div>
+    </div>
+    """
+
+    return html
+
+# ==================== STATE MANAGEMENT ====================
+
+CURRENT_USER = "guest"
+CURRENT_TEACHER = None
+DARK_MODE = False
+
+def login_student(username: str, password: str) -> tuple:
+    global CURRENT_USER, DARK_MODE
+    student_data = student_service.authenticate_student(username, password)
+    if student_
+        CURRENT_USER = username
+        DARK_MODE = student_data["dark_mode"]
+        chat_history = student_service.get_chat_history(username)
+        files = student_service.get_files(username)
+        assignments = student_service.get_assignments(username)
+        groups = student_service.get_groups(username)
+        avatar_html = get_avatar_html(student_data["avatar"], student_data["name"])
+        welcome_msg = f"Welcome back, {student_data['name']}!"
+
+        return (
+            gr.update(visible=False),  # login_group
+            gr.update(visible=True),   # main_app
+            gr.update(value=chat_history),  # chatbot
+            gr.update(value=files),    # files
+            gr.update(value=render_assignments(assignments)),  # assignments_display
+            gr.update(value=render_groups(groups)),  # groups_display
+            gr.update(value=welcome_msg),  # login_status
+            gr.update(value=student_data["name"], visible=True),  # user_display
+            gr.update(visible=True),   # logout_btn
+            gr.update(value=avatar_html),  # avatar_display
+            gr.update(value="🌙 Light Mode" if DARK_MODE else "☀️ Dark Mode"),  # dark_mode_btn
+            gr.update()  # css placeholder
+        )
+    return (
+        gr.update(visible=True),
+        gr.update(visible=False),
+        gr.update(),
+        gr.update(),
+        gr.update(),
+        gr.update(),
+        gr.update(value="❌ Invalid username or password"),
+        gr.update(visible=False),
+        gr.update(visible=False),
+        gr.update(),
+        gr.update(),
+        gr.update()
+    )
+
+def register_student(username: str, password: str, name: str) -> str:
+    return student_service.register_student(username, password, name)
+
+def logout_student() -> tuple:
+    global CURRENT_USER, DARK_MODE
+    CURRENT_USER = "guest"
+    DARK_MODE = False
+    return (
+        gr.update(visible=True),
+        gr.update(visible=False),
+        gr.update(),
+        gr.update(),
+        gr.update(),
+        gr.update(),
+        gr.update(),
+        gr.update(visible=False),
+        gr.update(visible=False),
+        gr.update(),
+        gr.update(value="☀️ Dark Mode"),
+        gr.update()
+    )
+
+def toggle_dark_mode() -> tuple:
+    global DARK_MODE, CURRENT_USER
+    DARK_MODE = not DARK_MODE
+    if CURRENT_USER != "guest":
+        student_service.update_dark_mode(CURRENT_USER, DARK_MODE)
+    btn_text = "🌙 Light Mode" if DARK_MODE else "☀️ Dark Mode"
+    return btn_text, gr.update()
+
+def upload_avatar(file) -> str:
+    if not file:
+        return "❌ No file selected"
+    if CURRENT_USER == "guest":
+        return "❌ Please log in first"
+    # In production, save file to disk
+    # For demo, just store filename
+    student_service.update_avatar(CURRENT_USER, file.name)
+    return f"✅ Avatar updated!"
+
+def join_group(group_code: str) -> tuple:
+    if CURRENT_USER == "guest":
+        return "❌ Please log in first.", gr.update()
+    result = student_service.join_group(CURRENT_USER, group_code)
+    groups = student_service.get_groups(CURRENT_USER)
+    return result, gr.update(value=render_groups(groups))
+
+def leave_group(group_code: str) -> tuple:
+    if CURRENT_USER == "guest":
+        return "❌ Please log in first.", gr.update()
+    result = student_service.leave_group(CURRENT_USER, group_code)
+    groups = student_service.get_groups(CURRENT_USER)
+    return result, gr.update(value=render_groups(groups))
+
+def upload_file_for_student(file) -> str:
+    if not file:
+        return "❌ No file selected"
+    result = f"✅ Uploaded: {file.name}"
+    if CURRENT_USER != "guest":
+        student_service.add_file(CURRENT_USER, file.name)
+    return result
+
+# ==================== TEACHER FUNCTIONS ====================
+
+def teacher_login(username: str, password: str) -> tuple:
+    global CURRENT_TEACHER
+    teacher_data = admin_service.authenticate(username, password)
+    if teacher_data and teacher_data["role"] == "teacher":
+        CURRENT_TEACHER = teacher_data
+        return (
+            gr.update(visible=False),
+            gr.update(visible=True),
+            gr.update(value=f"✅ Welcome, {teacher_data['name']}!"),
+            gr.update(visible=True)
+        )
+    elif teacher_data and teacher_data["role"] == "admin":
+        CURRENT_TEACHER = teacher_data
+        return (
+            gr.update(visible=False),
+            gr.update(visible=True),
+            gr.update(value=f"✅ Welcome, Admin {teacher_data['name']}!"),
+            gr.update(visible=True)
+        )
+    return (
+        gr.update(visible=True),
+        gr.update(visible=False),
+        gr.update(value="❌ Invalid credentials or not a teacher account"),
+        gr.update(visible=False)
+    )
+
+def teacher_logout():
+    global CURRENT_TEACHER
+    CURRENT_TEACHER = None
+    return (
+        gr.update(visible=True),
+        gr.update(visible=False),
+        gr.update(),
+        gr.update(visible=False)
+    )
+
+def create_assignment(title: str, description: str, due_date: str, course: str) -> str:
+    if not CURRENT_TEACHER:
+        return "🔒 Please log in as teacher first."
+    if not title or not due_date or not course:
+        return "⚠️ Title, due date, and course are required."
+
+    assignment_id = school_service.create_assignment(
+        title=title,
+        description=description,
+        due_date=due_date,
+        course=course,
+        assigned_by=CURRENT_TEACHER["name"]
+    )
+
+    if assignment_id == -1:
+        return "❌ Failed to create assignment. Please try again."
+
+    # Count recipients
+    conn = db_manager.get_connection()
+    cursor = conn.cursor()
+    cursor.execute('''
+        SELECT COUNT(*) FROM student_sessions
+        WHERE groups LIKE ?
+    ''', (f'%"{course}"%',))
+    recipients = cursor.fetchone()[0]
+    conn.close()
+
+    return f"✅ Assignment created! ID: {assignment_id}. Sent to {recipients} students in {course}."
+
+# ==================== VOICE INPUT ====================
+
+VOICE_JS = """
+async function startVoiceInput() {
+    if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) {
+        alert('🎙️ Voice input is not supported in your browser. Try Chrome or Edge.');
+        return '';
+    }
+
+    const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
+    recognition.lang = 'en-US';
+    recognition.interimResults = false;
+    recognition.maxAlternatives = 1;
+
+    return new Promise((resolve) => {
+        recognition.start();
+        recognition.onresult = (event) => {
+            const transcript = event.results[0][0].transcript;
+            resolve(transcript);
+        };
+        recognition.onerror = (event) => {
+            alert('🎙️ Error: ' + event.error);
+            resolve('');
+        };
+    });
+}
+"""
+
+def voice_input_handler() -> str:
+    return ""
+
+# ==================== CUSTOM CSS ====================
+
+CUSTOM_CSS = """
+.gradio-container {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 16px;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+.dark-mode {
+    --background-fill-primary: #1e1e1e !important;
+    --background-fill-secondary: #2d2d2d !important;
+    --text-color: #f0f0f0 !important;
+    --button-primary-background-fill: #5a5a5a !important;
+    --button-secondary-background-fill: #3a3a3a !important;
+    --input-background-fill: #2d2d2d !important;
+    --input-border-color: #444 !important;
+}
+
+.primary {
+    background: linear-gradient(135deg, #6e8efb, #a777e3) !important;
+    border: none !important;
+    color: white !important;
+}
+
+.chatbot-container {
+    background: #f8f9fa !important;
+    border-radius: 16px !important;
+}
+
+.dark-mode .chatbot-container {
+    background: #2d2d2d !important;
+}
+
+.user, .bot {
+    border-radius: 18px !important;
+    padding: 12px 16px !important;
+}
+
+.file-upload {
+    border: 2px dashed #6e8efb !important;
+    border-radius: 12px !important;
+    background: #f8f9ff !important;
+}
+
+.dark-mode .file-upload {
+    background: #2a2a2a !important;
+    border-color: #5a5a5a !important;
+}
+"""
+
+# ==================== BUILD UI ====================
+
+with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Soft(primary_hue="indigo")) as demo:
+    with gr.Row():
+        gr.Markdown("# 🎓 ThutoAI — Your AI School Assistant")
+        dark_mode_btn = gr.Button("☀️ Dark Mode", variant="secondary")
+
+    with gr.Group() as login_group:
+        gr.Markdown("### 🔐 Student Login")
+        with gr.Row():
+            login_username = gr.Textbox(label="Username", scale=3)
+            login_password = gr.Textbox(label="Password", type="password", scale=3)
+        login_btn = gr.Button("🔓 Login", variant="primary")
+        register_btn = gr.Button("📝 Register", variant="secondary")
+        login_status = gr.Textbox(label="Status", interactive=False)
+
+        with gr.Accordion("📝 Register New Account", open=False):
+            reg_username = gr.Textbox(label="Username")
+            reg_password = gr.Textbox(label="Password", type="password")
+            reg_name = gr.Textbox(label="Full Name")
+            reg_btn = gr.Button("Create Account")
+            reg_status = gr.Textbox(label="Registration Status")
+
+    with gr.Group(visible=False) as main_app:
+        with gr.Row():
+            avatar_display = gr.HTML()
+            user_display = gr.Textbox(label="Logged in as", interactive=False, visible=True)
+            logout_btn = gr.Button("⬅️ Logout", variant="secondary")
+
+        with gr.Tabs():
+            with gr.Tab("📢 Announcements"):
+                gr.Markdown("### Filter by Course or Subject")
+                with gr.Row():
+                    course_filter = gr.Dropdown(
+                        choices=["All", "Mathematics", "Science", "English", "History", "General"],
+                        value="All",
+                        label="Select Course",
+                        scale=3
+                    )
+                    refresh_btn = gr.Button("🔄 Refresh", variant="secondary", scale=1)
+                announcements_html = gr.HTML()
+                course_filter.change(fn=render_announcements, inputs=course_filter, outputs=announcements_html, api_name="filter_announcements")
+                refresh_btn.click(fn=render_announcements, inputs=course_filter, outputs=announcements_html, api_name="refresh_announcements")
+                demo.load(fn=render_announcements, inputs=course_filter, outputs=announcements_html, api_name="load_announcements")
+
+            with gr.Tab("💬 Ask ThutoAI"):
+                gr.Markdown("### 💡 Ask me anything — I'm here to help!")
+                chatbot = gr.Chatbot(
+                    height=480,
+                    type='messages'
+                )
+                with gr.Row():
+                    msg = gr.Textbox(
+                        label="Type your question",
+                        placeholder="E.g., How do I prepare for the Math exam?",
+                        scale=7
+                    )
+                    voice_btn = gr.Button("🎙️ Speak", variant="secondary", scale=1)
+                    submit_btn = gr.Button("➤ Send", variant="primary", scale=1)
+                clear_btn = gr.Button("🗑️ Clear Chat", variant="secondary")
+
+                def respond(message, chat_history):
+                    for updated_history, _ in ai_chat(message, chat_history, CURRENT_USER):
+                        yield updated_history, ""
+
+                msg.submit(respond, [msg, chatbot], [msg, chatbot])
+                submit_btn.click(respond, [msg, chatbot], [msg, chatbot])
+                clear_btn.click(lambda: None, None, chatbot)
+
+                voice_btn.click(
+                    fn=voice_input_handler,
+                    inputs=None,
+                    outputs=msg,
+                    js=VOICE_JS + "return startVoiceInput();"
+                )
+
+            with gr.Tab("📅 Assignments"):
+                gr.Markdown("### 📌 Your Upcoming Assignments & Exams")
+                assignments_display = gr.HTML()
+                demo.load(
+                    fn=lambda: render_assignments(student_service.get_assignments(CURRENT_USER)) if CURRENT_USER != "guest" else "",
+                    inputs=None,
+                    outputs=assignments_display
+                )
+
+            with gr.Tab("👥 Class Groups"):
+                gr.Markdown("### 🎒 Join Your Class Groups")
+                with gr.Row():
+                    group_code_input = gr.Textbox(label="Group Code (e.g., MATH10A)", scale=3)
+                    join_btn = gr.Button("➕ Join Group", variant="primary", scale=1)
+                    leave_btn = gr.Button("➖ Leave Group", variant="secondary", scale=1)
+                group_status = gr.Textbox(label="Status")
+                groups_display = gr.HTML()
+                join_btn.click(
+                    fn=join_group,
+                    inputs=group_code_input,
+                    outputs=[group_status, groups_display]
+                )
+                leave_btn.click(
+                    fn=leave_group,
+                    inputs=group_code_input,
+                    outputs=[group_status, groups_display]
+                )
+                demo.load(
+                    fn=lambda: render_groups(student_service.get_groups(CURRENT_USER)) if CURRENT_USER != "guest" else "",
+                    inputs=None,
+                    outputs=groups_display
+                )
+
+            with gr.Tab("📂 My Files"):
+                gr.Markdown("### 📁 Upload & Manage Study Materials")
+                with gr.Row():
+                    file_input = gr.File(label="Drag & drop or click to upload", elem_classes=["file-upload"])
+                    upload_btn = gr.Button("📤 Upload", variant="primary")
+                upload_status = gr.Textbox(label="Status")
+                file_list = gr.JSON(label="Your Files")
+
+                upload_btn.click(
+                    fn=upload_file_for_student,
+                    inputs=file_input,
+                    outputs=upload_status
+                )
+                demo.load(
+                    fn=lambda: student_service.get_files(CURRENT_USER) if CURRENT_USER != "guest" else [],
+                    inputs=None,
+                    outputs=file_list
+                )
+
+            with gr.Tab("🖼️ Profile"):
+                gr.Markdown("### 🖼️ Update Your Profile Picture")
+                with gr.Row():
+                    avatar_input = gr.File(label="Choose an image (PNG, JPG)", file_types=["image"])
+                    upload_avatar_btn = gr.Button("📤 Upload Avatar", variant="primary")
+                avatar_status = gr.Textbox(label="Status")
+                upload_avatar_btn.click(
+                    fn=upload_avatar,
+                    inputs=avatar_input,
+                    outputs=avatar_status
+                )
+                demo.load(
+                    fn=lambda: get_avatar_html(
+                        None,  # We don't handle real avatar paths yet
+                        student_service.authenticate_student(CURRENT_USER, "")["name"] if CURRENT_USER != "guest" else "Guest"
+                    ) if CURRENT_USER != "guest" else "",
+                    inputs=None,
+                    outputs=avatar_display
+                )
+
+            with gr.Tab("👩‍🏫 Teacher Panel"):
+                gr.Markdown("### 🔑 Teacher Login (for assignment creation)")
+
+                with gr.Group() as teacher_login_group:
+                    teacher_username = gr.Textbox(label="Teacher Username")
+                    teacher_password = gr.Textbox(label="Password", type="password")
+                    teacher_login_btn = gr.Button("🔓 Login", variant="primary")
+                    teacher_status = gr.Textbox(label="Status")
+
+                with gr.Group(visible=False) as teacher_dashboard:
+                    gr.Markdown("### ✍️ Create New Assignment")
+                    assignment_title = gr.Textbox(label="Assignment Title", placeholder="e.g., Chapter 5 Quiz")
+                    assignment_description = gr.Textbox(label="Description", placeholder="Instructions for students...", lines=2)
+                    assignment_due_date = gr.Textbox(label="Due Date (YYYY-MM-DD)", placeholder="2025-05-01")
+                    assignment_course = gr.Dropdown(
+                        choices=["MATH10A", "MATH10B", "SCI11A", "SCI11B", "ENG10A", "ENG10B", "HIST9A", "HIST9B"],
+                        label="Assign to Class Group",
+                        value="MATH10A"
+                    )
+                    create_assignment_btn = gr.Button("📬 Create Assignment", variant="primary")
+                    assignment_result = gr.Textbox(label="Result")
+
+                    assignment_priority = gr.Radio(
+                        ["low", "normal", "high"],
+                        label="Priority",
+                        value="normal"
+                    )
+
+                    teacher_logout_btn = gr.Button("⬅️ Logout", variant="secondary")
+
+                teacher_login_btn.click(
+                    fn=teacher_login,
+                    inputs=[teacher_username, teacher_password],
+                    outputs=[teacher_login_group, teacher_dashboard, teacher_status, create_assignment_btn]
+                )
+                teacher_logout_btn.click(
+                    fn=teacher_logout,
+                    inputs=None,
+                    outputs=[teacher_login_group, teacher_dashboard, teacher_status, assignment_result]
+                )
+                create_assignment_btn.click(
+                    fn=create_assignment,
+                    inputs=[assignment_title, assignment_description, assignment_due_date, assignment_course],
+                    outputs=assignment_result
+                )
+
+            with gr.Tab("📊 Admin Analytics"):
+                gr.Markdown("### 📈 School Analytics Dashboard")
+                analytics_display = gr.HTML()
+                refresh_analytics_btn = gr.Button("🔄 Refresh Analytics")
+                refresh_analytics_btn.click(
+                    fn=render_analytics,
+                    inputs=None,
+                    outputs=analytics_display
+                )
+                demo.load(
+                    fn=render_analytics,
+                    inputs=None,
+                    outputs=analytics_display
+                )
+
+    # ✅ FIXED: Use gr.update() for ALL outputs
+    login_btn.click(
+        fn=login_student,
+        inputs=[login_username, login_password],
+        outputs=[
+            gr.update(),  # login_group
+            gr.update(),  # main_app
+            gr.update(),  # chatbot
+            gr.update(),  # files
+            gr.update(),  # assignments_display
+            gr.update(),  # groups_display
+            gr.update(),  # login_status
+            gr.update(),  # user_display
+            gr.update(),  # logout_btn
+            gr.update(),  # avatar_display
+            gr.update(),  # dark_mode_btn
+            gr.update()   # css placeholder
+        ]
+    )
+
+    register_btn.click(
+        fn=register_student,
+        inputs=[reg_username, reg_password, reg_name],
+        outputs=gr.update()
+    )
+
+    dark_mode_btn.click(
+        fn=toggle_dark_mode,
+        inputs=None,
+        outputs=[dark_mode_btn, gr.update()]
+    )
+
+if __name__ == "__main__":
+    demo.launch()