Update app.py

app.py

@@ -1,398 +1,892 @@
-# app.py — Clean, fixed, single-file Gradio app for Synchrony
-# Last updated: 2025-11-06
-# Author: (rewritten for Lujain)
-# -------------------------------------------------------
-
 import gradio as gr
 import requests
+import json
 from datetime import datetime
-from typing import Tuple, Any, Dict, List
 
 # ============================================
-# Configuration / Webhook URLs (update if needed)
+# 🌟 SYNCHRONY - STUDENT PORTAL (GEN Z EDITION)
+# Real Team Data | No Hardcoding | Pure Black Style
 # ============================================
+
+# Your n8n webhook URLs (CORRECTED)
 BASE_URL = "https://maryyam.app.n8n.cloud/webhook-test"
 START_SESSION_URL = f"{BASE_URL}/start-session"
 GENERATE_CHALLENGES_URL = f"{BASE_URL}/generate-challenges"
 REQUEST_HINT_URL = f"{BASE_URL}/request-hint"
 
-# Keep a lightweight in-memory "current session" (not persistent)
-current_session: Dict[str, Any] = {"session_id": None, "challenges": None}
-
+# Google Form and Sheets URLs
+REGISTRATION_FORM = "https://docs.google.com/forms/d/e/1FAIpQLSfJFGx-yd0FPIuRYLUJut3BOOiQ14x_5DYheWpgrUqcHdQaCA/viewform"
+GOOGLE_SHEETS = "https://docs.google.com/spreadsheets/d/1rpR-E_RSooDkNDh-Q_1BDIeGw4vfgmusNAfwPqATaW4/edit?usp=sharing"
+
+# Current student session (stored in memory)
+current_student = {
+    "name": None,
+    "email": None,
+    "group_id": None,
+    "session_id": None,
+    "team_members": [],
+    "challenges": []
+}
 
 # ============================================
-# Helper / API functions
+# 🔧 API FUNCTIONS (ALL REAL - NO HARDCODING)
 # ============================================
-def safe_post(url: str, payload: dict, timeout: int = 30) -> Tuple[bool, Any]:
+
+def start_session_and_get_team(group_id):
+    """Start session and get REAL team data from n8n"""
     try:
-        r = requests.post(url, json=payload, headers={"Content-Type": "application/json"}, timeout=timeout)
-        if r.status_code == 200:
-            try:
-                return True, r.json()
-            except ValueError:
-                return True, r.text
+        response = requests.post(
+            START_SESSION_URL,
+            json={"group_id": group_id},
+            headers={"Content-Type": "application/json"},
+            timeout=30
+        )
+        
+        if response.status_code == 200:
+            data = response.json()
+            
+            # Store real data from API
+            current_student["session_id"] = data.get("session_id")
+            current_student["group_id"] = group_id
+            current_student["team_members"] = data.get("students", [])
+            
+            return data
         else:
-            return False, f"Error {r.status_code}: {r.text}"
+            print(f"Error starting session: {response.status_code}")
+            return None
+            
     except Exception as e:
-        return False, f"Connection Error: {str(e)}"
+        print(f"Exception starting session: {str(e)}")
+        return None
 
 
-def start_session(group_id: str) -> Tuple[str, str]:
-    if not group_id:
-        return "❌ Please enter a Group ID (e.g., G001).", ""
-
-    ok, result = safe_post(START_SESSION_URL, {"group_id": group_id}, timeout=30)
-    if not ok:
-        return f"❌ {result}", ""
+def lookup_student(email):
+    """Login with any email - assigns to G001 for demo, gets REAL team"""
+    try:
+        if not email or "@" not in email:
+            return False, "❌ please enter a valid email address!"
+        
+        # Extract name from email (demo approach)
+        name_part = email.split("@")[0]
+        name = name_part.replace(".", " ").replace("_", " ").title()
+        
+        # For demo: everyone joins G001 (in production: query Sheets for real group)
+        # Start session to get REAL team data
+        session_data = start_session_and_get_team("G001")
+        
+        if session_data:
+            current_student["name"] = name
+            current_student["email"] = email
+            
+            welcome_msg = f"✅ **welcome back, {name}!** 🎉\n\n"
+            welcome_msg += f"🆔 **session id:** `{session_data.get('session_id')}`\n\n"
+            welcome_msg += f"💬 **synco says:**\n{session_data.get('synco_message', '')}\n\n"
+            welcome_msg += f"👥 **your team:** {', '.join([s['name'] for s in session_data.get('students', [])])}\n\n"
+            welcome_msg += f"✨ head to **MY TEAM** tab to see everyone!"
+            
+            return True, welcome_msg
+        else:
+            return False, "❌ could not connect to server. try again!"
+            
+    except Exception as e:
+        return False, f"❌ error: {str(e)}"
 
-    if isinstance(result, dict):
-        session_id = result.get("session_id", "")
-        current_session["session_id"] = session_id
-        students = result.get("students", [])
-        students_list = ", ".join([s.get("name", "Unknown") for s in students]) if students else "No students found"
 
-        message = (
-            "✅ **Session Started!**\n\n"
-            f"**🆔 Session ID:** `{session_id}`\n\n"
-            f"**💬 Synco says:** {result.get('synco_message', 'Welcome!')}\n\n"
-            f"**👥 Students:** {students_list}\n\n"
-            "🎯 Ready to generate challenges!"
+def get_team_info():
+    """Display REAL team information from start-session API"""
+    if not current_student.get("team_members"):
+        # Try to load team if not loaded
+        if current_student.get("group_id"):
+            session_data = start_session_and_get_team(current_student["group_id"])
+            if not session_data:
+                return "⚠️ could not load team info. try logging in again!"
+        else:
+            return "⚠️ please login first in the **HOME** tab!"
+    
+    output = f"## 👥 your study squad - {current_student.get('group_id', '???')} 🔥\n\n"
+    output += f"**session id:** `{current_student.get('session_id', 'not started')}`\n\n"
+    output += "---\n\n"
+    
+    for i, member in enumerate(current_student["team_members"], 1):
+        # Check if this is the logged-in user (fuzzy match)
+        user_name = current_student.get("name", "").lower()
+        member_name = member.get("name", "").lower()
+        is_you = " **(YOU)** 🌟" if user_name in member_name or member_name in user_name else ""
+        
+        output += f"### 🎓 {member['name']}{is_you}\n"
+        output += f"**studying:** {member.get('topic', 'N/A')}\n\n"
+    
+    output += "---\n\n"
+    output += f"💡 *collaborate, learn together, level up!*"
+    
+    return output
+
+
+def load_challenges():
+    """Load REAL challenges from generate-challenges API"""
+    if not current_student.get("session_id"):
+        return "⚠️ no active session. please login first in the **HOME** tab!"
+    
+    try:
+        response = requests.post(
+            GENERATE_CHALLENGES_URL,
+            json={"session_id": current_student["session_id"]},
+            headers={"Content-Type": "application/json"},
+            timeout=60  # AI generation can take time
         )
-        return message, session_id
-
-    return f"✅ Session started (response):\n```\n{result}\n```", str(result)
-
-
-def generate_challenges(session_id: str) -> str:
-    sid = session_id or current_session.get("session_id")
-    if not sid:
-        return "❌ Please provide a session ID (or start a session first)."
-
-    ok, result = safe_post(GENERATE_CHALLENGES_URL, {"session_id": sid}, timeout=60)
-    if not ok:
-        return f"❌ {result}"
-
-    if isinstance(result, dict):
-        challenges = result.get("challenges", [])
-        current_session["challenges"] = challenges
-
-        output_lines: List[str] = []
-        output_lines.append("✅ **Challenges Generated!**\n")
-        synco_msg = result.get("synco_message", "")
-        if synco_msg:
-            output_lines.append(f"**💬 Synco says:** {synco_msg}\n")
-        output_lines.append("---\n")
-
-        if not challenges:
-            output_lines.append("_No challenges returned from the API._")
+        
+        if response.status_code == 200:
+            data = response.json()
+            current_student["challenges"] = data.get("challenges", [])
+            
+            output = f"# 🎯 your collaborative challenges\n\n"
+            output += f"💬 **synco says:**\n{data.get('synco_message', '')}\n\n"
+            output += "---\n\n"
+            
+            for i, challenge in enumerate(current_student["challenges"], 1):
+                chal = challenge.get('json', challenge)
+                output += f"## 🎯 challenge {i}\n\n"
+                output += f"{chal.get('description', 'no description')}\n\n"
+                output += f"**📚 topics:** {chal.get('topics_involved', 'N/A')}\n\n"
+                output += f"💡 *stuck? request a hint in the **HINTS** tab!*\n\n"
+                output += "---\n\n"
+            
+            return output
         else:
-            for i, ch in enumerate(challenges, start=1):
-                ch_json = ch.get("json") if isinstance(ch, dict) else None
-                description = ""
-                topics = ""
-                if isinstance(ch_json, dict):
-                    description = ch_json.get("description", "")
-                    topics = ch_json.get("topics_involved", "")
-                else:
-                    description = str(ch)
-
-                output_lines.append(f"### 🎯 Challenge {i}\n")
-                output_lines.append(f"**Description:**\n{description}\n")
-                if topics:
-                    output_lines.append(f"**Topics:** {topics}\n")
-                output_lines.append("💡 3 hints available - request them when stuck!\n")
-                output_lines.append("---\n")
-
-        return "\n".join(output_lines)
-
-    return f"✅ Response:\n```\n{result}\n```"
-
+            return f"❌ error loading challenges: {response.status_code}\n\ntry refreshing or check your session id!"
+            
+    except Exception as e:
+        return f"❌ connection error: {str(e)}"
 
-def request_hint(session_id: str, challenge_num: str, hint_level: str) -> str:
-    sid = session_id or current_session.get("session_id")
-    if not sid:
-        return "❌ Please provide a session ID."
 
+def request_hint(challenge_num, hint_level_text):
+    """Request REAL hint from request-hint API"""
+    if not current_student.get("session_id"):
+        return "⚠️ no active session. please login first!"
+    
+    # Extract hint level number from text (e.g., "1 - gentle nudge 🤔" -> "1")
+    hint_level = hint_level_text.split(" - ")[0].strip()
+    
     try:
-        cnum = int(challenge_num)
-        hlvl = int(hint_level)
-    except Exception:
-        return "❌ Challenge number and hint level must be integers."
-
-    ok, result = safe_post(REQUEST_HINT_URL, {
-        "session_id": sid,
-        "challenge_number": cnum,
-        "hint_level": hlvl
-    }, timeout=15)
-    if not ok:
-        return f"❌ {result}"
-
-    if isinstance(result, dict):
-        synco_msg = result.get("synco_message", "")
-        hint_text = result.get("hint", "") or str(result.get("hint", ""))
-        output = []
-        if synco_msg:
-            output.append(f"💡 **{synco_msg}**\n")
-        output.append(f"🎯 Challenge {cnum} | Hint Level {hlvl}\n")
-        output.append("---\n")
-        output.append(hint_text or "_No hint provided by the API._")
-        return "\n\n".join(output)
-
-    return f"💡 Response:\n```\n{result}\n```"
+        response = requests.post(
+            REQUEST_HINT_URL,
+            json={
+                "session_id": current_student["session_id"],
+                "challenge_number": int(challenge_num),
+                "hint_level": int(hint_level)
+            },
+            headers={"Content-Type": "application/json"},
+            timeout=10
+        )
+        
+        if response.status_code == 200:
+            data = response.json()
+            
+            output = f"## {data.get('synco_message', '')}\n\n"
+            output += f"🎯 **challenge {challenge_num}** | **hint level {hint_level}**\n\n"
+            output += "---\n\n"
+            output += f"{data.get('hint', '')}\n\n"
+            output += "---\n\n"
+            output += f"💪 *you got this! keep going!*"
+            
+            return output
+        else:
+            return f"❌ error: {response.status_code}\n\nmake sure you've loaded challenges first!"
+            
+    except Exception as e:
+        return f"❌ connection error: {str(e)}"
+
+
+def send_message(message, history):
+    """Send a chat message (SIMULATED for demo - would need real-time backend)"""
+    if not message.strip():
+        return history, ""
+    
+    # Add user message
+    history.append({
+        "role": "user",
+        "content": f"**{current_student.get('name', 'you')}:** {message}"
+    })
+    
+    # Simulate team member responses (FAKE - for demo only)
+    import random
+    
+    if not current_student.get("team_members"):
+        response = "**synco (ai):** please login first to chat with your team! 💬"
+    else:
+        # Get random team member
+        other_members = [m for m in current_student["team_members"] 
+                        if m['name'].lower() != current_student.get('name', '').lower()]
+        
+        if other_members:
+            member = random.choice(other_members)
+            responses = [
+                f"**{member['name']}:** that's a great point! let me add to that...",
+                f"**{member['name']}:** interesting! in {member['topic']}, we do it differently...",
+                f"**{member['name']}:** i agree! should we try that approach?",
+                f"**{member['name']}:** wait, can you explain that part again?",
+                f"**synco (ai):** great discussion everyone! 💡 keep collaborating!"
+            ]
+            response = random.choice(responses)
+        else:
+            response = "**synco (ai):** great question! your teammates will respond soon! 💬"
+    
+    history.append({
+        "role": "assistant",
+        "content": response
+    })
+    
+    return history, ""
 
 
 # ============================================
-# Custom Light Theme CSS — Apple Inspired
+# 🎨 CUSTOM CSS - PURE BLACK GEN Z STYLE
 # ============================================
+
 custom_css = """
+/* Pure Black Gen Z Background */
 .gradio-container {
-    background: linear-gradient(135deg, #f5f5f7 0%, #ffffff 100%) !important;
-    font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif !important;
-    color: #1c1c1e !important;
+    background: #000000 !important;
+    font-family: 'Inter', 'SF Pro Display', 'Segoe UI', sans-serif !important;
+    color: #ffffff !important;
+}
+
+/* Neon accent colors */
+:root {
+    --neon-pink: #ff0080;
+    --neon-cyan: #00ffff;
+    --neon-purple: #a855f7;
+    --neon-green: #00ff88;
+}
+
+/* Main container */
+.contain {
+    background: #000000 !important;
+    max-width: 1400px !important;
+    margin: 0 auto !important;
+}
+
+/* Tabs */
+.tab-nav {
+    background: #0a0a0a !important;
+    border-bottom: 2px solid var(--neon-pink) !important;
+    padding: 10px 0 !important;
 }
 
-/* Tabs styling */
 .tab-nav button {
-    background: rgba(0, 0, 0, 0.03) !important;
-    border: 1px solid rgba(0, 0, 0, 0.1) !important;
-    color: #007aff !important;
-    font-weight: 600 !important;
+    background: #1a1a1a !important;
+    border: 2px solid #222222 !important;
+    color: var(--neon-cyan) !important;
+    font-weight: 800 !important;
+    font-size: 15px !important;
+    text-transform: uppercase !important;
+    letter-spacing: 1.5px !important;
     transition: all 0.3s ease !important;
+    margin: 0 5px !important;
+    padding: 12px 20px !important;
+    border-radius: 8px !important;
 }
+
 .tab-nav button:hover {
-    background: rgba(0, 122, 255, 0.1) !important;
-    border-color: #007aff !important;
+    background: #252525 !important;
+    border-color: var(--neon-pink) !important;
+    color: var(--neon-pink) !important;
+    transform: translateY(-2px) !important;
+    box-shadow: 0 5px 20px rgba(255, 0, 128, 0.4) !important;
 }
+
 .tab-nav button.selected {
-    background: #007aff !important;
-    border-color: #007aff !important;
-    color: white !important;
-    box-shadow: 0 4px 10px rgba(0, 122, 255, 0.3) !important;
+    background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-purple) 100%) !important;
+    border-color: var(--neon-pink) !important;
+    color: #000000 !important;
+    font-weight: 900 !important;
+    box-shadow: 0 0 30px rgba(255, 0, 128, 0.8) !important;
 }
 
 /* Input fields */
 input, textarea, select {
-    background: rgba(242, 242, 247, 0.8) !important;
-    border: 1px solid rgba(0,0,0,0.1) !important;
-    color: #1c1c1e !important;
-    border-radius: 12px !important;
-    padding: 10px !important;
+    background: #1a1a1a !important;
+    border: 2px solid #333333 !important;
+    color: #ffffff !important;
+    border-radius: 10px !important;
+    font-size: 16px !important;
+    padding: 14px !important;
+    transition: all 0.3s ease !important;
 }
+
 input:focus, textarea:focus, select:focus {
-    border-color: #007aff !important;
-    box-shadow: 0 0 10px rgba(0, 122, 255, 0.2) !important;
+    border-color: var(--neon-cyan) !important;
+    box-shadow: 0 0 25px rgba(0, 255, 255, 0.5) !important;
+    outline: none !important;
+    background: #222222 !important;
+}
+
+input::placeholder, textarea::placeholder {
+    color: #666666 !important;
 }
 
 /* Buttons */
 button {
-    background: #007aff !important;
+    background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-purple) 100%) !important;
     border: none !important;
-    color: white !important;
-    font-weight: 600 !important;
-    border-radius: 12px !important;
-    padding: 12px 24px !important;
+    color: #000000 !important;
+    font-weight: 900 !important;
+    font-size: 16px !important;
+    text-transform: uppercase !important;
+    letter-spacing: 2px !important;
+    border-radius: 10px !important;
+    padding: 16px 32px !important;
     transition: all 0.3s ease !important;
-    box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3) !important;
+    box-shadow: 0 5px 25px rgba(255, 0, 128, 0.4) !important;
+    cursor: pointer !important;
 }
+
 button:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 6px 20px rgba(0, 122, 255, 0.4) !important;
+    transform: translateY(-4px) scale(1.03) !important;
+    box-shadow: 0 10px 40px rgba(255, 0, 128, 0.7) !important;
+}
+
+button:active {
+    transform: translateY(-1px) scale(0.98) !important;
+}
+
+/* Secondary buttons */
+button.secondary {
+    background: linear-gradient(135deg, var(--neon-cyan) 0%, var(--neon-green) 100%) !important;
 }
 
 /* Output boxes */
-.output-markdown {
-    background: rgba(242, 242, 247, 0.8) !important;
-    border: 1px solid rgba(0,0,0,0.1) !important;
-    border-radius: 15px !important;
-    padding: 20px !important;
-    color: #1c1c1e !important;
+.output-markdown, .prose, .markdown {
+    background: #0a0a0a !important;
+    border: 2px solid #1a1a1a !important;
+    border-radius: 12px !important;
+    padding: 24px !important;
+    color: #e0e0e0 !important;
+    box-shadow: inset 0 0 30px rgba(0, 255, 255, 0.05) !important;
+    min-height: 100px !important;
 }
 
 /* Headers */
-h1, h2, h3 {
-    background: linear-gradient(135deg, #007aff 0%, #5ac8fa 100%);
+h1 {
+    background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-cyan) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
+    background-clip: text;
+    font-weight: 900 !important;
+    font-size: 56px !important;
+    text-transform: uppercase !important;
+    letter-spacing: 4px !important;
+    text-align: center !important;
+    margin: 30px 0 !important;
+    filter: drop-shadow(0 0 20px rgba(255, 0, 128, 0.5));
+}
+
+h2 {
+    color: var(--neon-cyan) !important;
     font-weight: 800 !important;
+    font-size: 32px !important;
+    text-transform: lowercase !important;
+    letter-spacing: 1px !important;
+    margin: 20px 0 !important;
 }
 
-/* Markdown code blocks */
-code {
-    background: rgba(0, 122, 255, 0.1) !important;
-    color: #007aff !important;
-    padding: 2px 6px !important;
-    border-radius: 5px !important;
+h3 {
+    color: var(--neon-pink) !important;
+    font-weight: 700 !important;
+    font-size: 24px !important;
+    margin: 16px 0 !important;
+}
+
+/* Paragraphs */
+p {
+    color: #cccccc !important;
+    font-size: 16px !important;
+    line-height: 1.6 !important;
 }
 
 /* Links */
 a {
-    color: #007aff !important;
+    color: var(--neon-cyan) !important;
     text-decoration: none !important;
-    font-weight: 600 !important;
+    font-weight: 700 !important;
+    transition: all 0.3s ease !important;
 }
+
 a:hover {
-    color: #5ac8fa !important;
-    text-decoration: underline !important;
+    color: var(--neon-pink) !important;
+    text-shadow: 0 0 15px rgba(255, 0, 128, 0.8) !important;
+}
+
+/* Code blocks */
+code {
+    background: #1a1a1a !important;
+    color: var(--neon-green) !important;
+    padding: 4px 10px !important;
+    border-radius: 6px !important;
+    border: 1px solid var(--neon-cyan) !important;
+    font-family: 'Fira Code', 'Consolas', monospace !important;
+    font-size: 14px !important;
+}
+
+/* Horizontal rules */
+hr {
+    border: none !important;
+    border-top: 2px solid var(--neon-pink) !important;
+    margin: 30px 0 !important;
+    opacity: 0.3 !important;
 }
 
 /* Scrollbar */
 ::-webkit-scrollbar {
-    width: 10px;
+    width: 12px;
+    height: 12px;
 }
+
 ::-webkit-scrollbar-track {
-    background: rgba(242, 242, 247, 0.8);
+    background: #0a0a0a;
+    border-radius: 10px;
 }
+
 ::-webkit-scrollbar-thumb {
-    background: #007aff;
+    background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-cyan) 100%);
     border-radius: 10px;
+    border: 2px solid #000000;
 }
+
 ::-webkit-scrollbar-thumb:hover {
-    background: #5ac8fa;
+    background: linear-gradient(135deg, var(--neon-cyan) 0%, var(--neon-pink) 100%);
+}
+
+/* Labels */
+label {
+    color: var(--neon-cyan) !important;
+    font-weight: 700 !important;
+    font-size: 13px !important;
+    text-transform: uppercase !important;
+    letter-spacing: 1.2px !important;
+    margin-bottom: 8px !important;
+}
+
+/* Chatbot styling */
+.message-wrap {
+    background: #1a1a1a !important;
+    border: 1px solid #333333 !important;
+    border-radius: 12px !important;
+    margin: 8px 0 !important;
+    padding: 12px !important;
+}
+
+.message.user {
+    background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-purple) 100%) !important;
+    color: #ffffff !important;
+    border-radius: 12px !important;
+    padding: 12px !important;
+}
+
+.message.bot {
+    background: #222222 !important;
+    border: 1px solid var(--neon-cyan) !important;
+    color: #ffffff !important;
+    border-radius: 12px !important;
+    padding: 12px !important;
+}
+
+/* Dropdown menus */
+.dropdown-container {
+    background: #1a1a1a !important;
+    border: 2px solid #333333 !important;
+    border-radius: 10px !important;
+}
+
+/* Info/Warning boxes */
+.info {
+    background: rgba(0, 255, 255, 0.1) !important;
+    border-left: 4px solid var(--neon-cyan) !important;
+    padding: 16px !important;
+    border-radius: 8px !important;
+    margin: 16px 0 !important;
+}
+
+.warning {
+    background: rgba(255, 0, 128, 0.1) !important;
+    border-left: 4px solid var(--neon-pink) !important;
+    padding: 16px !important;
+    border-radius: 8px !important;
+    margin: 16px 0 !important;
+}
+
+/* Loading animation */
+@keyframes glow {
+    0%, 100% {
+        box-shadow: 0 0 20px var(--neon-pink), 0 0 40px var(--neon-pink);
+    }
+    50% {
+        box-shadow: 0 0 30px var(--neon-cyan), 0 0 60px var(--neon-cyan);
+    }
+}
+
+.loading {
+    animation: glow 2s ease-in-out infinite;
+}
+
+/* Strong/Bold text */
+strong {
+    color: var(--neon-pink) !important;
+    font-weight: 800 !important;
+}
+
+/* Emphasis/Italic text */
+em {
+    color: var(--neon-cyan) !important;
+    font-style: italic !important;
+}
+
+/* Lists */
+ul, ol {
+    color: #cccccc !important;
+    padding-left: 30px !important;
+}
+
+li {
+    margin: 8px 0 !important;
 }
-"""
 
+/* Blockquotes */
+blockquote {
+    border-left: 4px solid var(--neon-purple) !important;
+    padding-left: 20px !important;
+    color: #aaaaaa !important;
+    font-style: italic !important;
+    margin: 20px 0 !important;
+}
+"""
 
 # ============================================
-# Gradio UI
+# 🎭 GRADIO INTERFACE
 # ============================================
-with gr.Blocks(css=custom_css, title="🌟 Synchrony - AI Study Sessions", theme=gr.themes.Soft()) as app:
-    # Header
-    gr.Markdown(
-        """
-        # 🌟 SYNCHRONY
-        ## AI-Powered Collaborative Learning Platform
-        ### Where Students Teach Each Other 🚀
-        ---
-        """
-    )
-
-    session_display = gr.Textbox(
-        label="📝 Current Session ID",
-        placeholder="No active session",
-        interactive=False,
-        lines=1,
-        value=""
-    )
-
-    # TAB 1: Start Session
-    with gr.Tab("🚀 Start Session"):
-        gr.Markdown("""## 🎯 Start a New Study Session
-Enter a Group ID to begin. Synco will welcome the students and prepare the session!
-*Example Group IDs:* G001, G002, G003""")
+
+with gr.Blocks(css=custom_css, title="🌟 SYNCHRONY - Student Portal", theme=gr.themes.Base()) as app:
+    
+    # ============================================
+    # HEADER
+    # ============================================
+    gr.Markdown("""
+    # 🌟 SYNCHRONY
+    ## *where students teach students* 💫
+    
+    ---
+    """)
+    
+    # ============================================
+    # TAB 1: HOME / LOGIN
+    # ============================================
+    with gr.Tab("🏠 home"):
+        gr.Markdown("""
+        ## welcome to synchrony ✨
+        
+        *the ai-powered study platform where you learn by teaching each other*
+        """)
+        
         with gr.Row():
-            group_id_input = gr.Textbox(label="🆔 Group ID", placeholder="Enter Group ID (e.g., G001)", scale=3)
-            start_btn = gr.Button("🚀 Start Session", scale=1, variant="primary")
-        start_output = gr.Markdown(label="📢 Output")
-        start_btn.click(fn=start_session, inputs=[group_id_input], outputs=[start_output, session_display])
-
-    # TAB 2: Generate Challenges
-    with gr.Tab("🎯 Generate Challenges"):
-        gr.Markdown("""## 🧠 AI-Powered Challenge Generation
-Synco will create *3 collaborative challenges* tailored to your group's topics!
-Each challenge includes *3 progressive hints* for adaptive learning.""")
-        session_id_challenges = gr.Textbox(label="📝 Session ID", placeholder="Enter session ID from previous step")
-        generate_btn = gr.Button("🎯 Generate Challenges", variant="primary")
-        challenges_output = gr.Markdown(label="📋 Challenges")
-        generate_btn.click(fn=generate_challenges, inputs=[session_id_challenges], outputs=[challenges_output])
-
-    # TAB 3: Request Hints
-    with gr.Tab("💡 Get Hints"):
-        gr.Markdown("""## 💡 Adaptive Hint System
-Stuck on a challenge? Request progressive hints from Synco!
-*Hint 1:* Gentle nudge 🤔  
-*Hint 2:* Clearer guidance 💭  
-*Hint 3:* Almost the answer 🎯""")
+            with gr.Column(scale=1):
+                gr.Markdown("""
+                ### 📝 new here?
+                
+                join synchrony and get matched with your perfect study squad!
+                
+                click below to fill out the registration form 👇
+                """)
+                
+                register_btn = gr.Button("🚀 REGISTER NOW", variant="primary", size="lg")
+                
+                gr.Markdown("""
+                
+                ---
+                
+                ### 🔐 already registered?
+                
+                enter your university email to access your study session
+                """)
+                
+                email_input = gr.Textbox(
+                    label="📧 university email",
+                    placeholder="your.email@university.edu",
+                    lines=1
+                )
+                
+                login_btn = gr.Button("🔓 LOGIN", variant="secondary", size="lg")
+                login_output = gr.Markdown(label="")
+                
+                gr.Markdown("""
+                
+                ---
+                
+                ### 📊 view database
+                
+                check out the student database and see who's in synchrony!
+                """)
+                
+                sheets_btn = gr.Button("📊 OPEN GOOGLE SHEETS", variant="secondary")
+        
+        # Register button opens Google Form in new tab
+        register_btn.click(
+            fn=lambda: None,
+            js=f"() => window.open('{REGISTRATION_FORM}', '_blank')"
+        )
+        
+        # Sheets button opens Google Sheets in new tab
+        sheets_btn.click(
+            fn=lambda: None,
+            js=f"() => window.open('{GOOGLE_SHEETS}', '_blank')"
+        )
+        
+        # Login button
+        def handle_login(email):
+            success, message = lookup_student(email)
+            return message
+        
+        login_btn.click(
+            fn=handle_login,
+            inputs=[email_input],
+            outputs=[login_output]
+        )
+        
+        email_input.submit(
+            fn=handle_login,
+            inputs=[email_input],
+            outputs=[login_output]
+        )
+    
+    # ============================================
+    # TAB 2: MY TEAM
+    # ============================================
+    with gr.Tab("👥 my team"):
+        gr.Markdown("""
+        ## your study squad 🔥
+        
+        meet your teammates and see what everyone's working on
+        """)
+        
+        team_display = gr.Markdown(value="⚠️ please login first in the **HOME** tab!")
+        
+        refresh_team_btn = gr.Button("🔄 REFRESH TEAM INFO", variant="secondary")
+        
+        refresh_team_btn.click(
+            fn=get_team_info,
+            outputs=[team_display]
+        )
+    
+    # ============================================
+    # TAB 3: CHALLENGES
+    # ============================================
+    with gr.Tab("🎯 challenges"):
+        gr.Markdown("""
+        ## your collaborative challenges 💪
+        
+        work together, learn from each other, level up!
+        
+        *ai-generated challenges tailored to your group's topics*
+        """)
+        
+        load_challenges_btn = gr.Button("📥 LOAD CHALLENGES", variant="primary", size="lg")
+        challenges_display = gr.Markdown(value="⚠️ click the button above to load your challenges!")
+        
+        load_challenges_btn.click(
+            fn=load_challenges,
+            outputs=[challenges_display]
+        )
+    
+    # ============================================
+    # TAB 4: HINTS
+    # ============================================
+    with gr.Tab("💡 hints"):
+        gr.Markdown("""
+        ## need help? no worries! 🤝
+        
+        synco's got your back with **adaptive hints**
+        
+        **hint 1:** gentle nudge 🤔  
+        **hint 2:** clearer guidance 💭  
+        **hint 3:** almost there! 🎯
+        """)
+        
         with gr.Row():
-            session_id_hints = gr.Textbox(label="📝 Session ID", placeholder="Enter session ID", scale=2)
-            challenge_num = gr.Dropdown(label="🎯 Challenge Number", choices=["1", "2", "3"], value="1", scale=1)
-            hint_level = gr.Dropdown(label="💡 Hint Level", choices=["1", "2", "3"], value="1", scale=1)
-        hint_btn = gr.Button("💡 Get Hint", variant="primary")
-        hint_output = gr.Markdown(label="🔍 Hint")
-        hint_btn.click(fn=request_hint, inputs=[session_id_hints, challenge_num, hint_level], outputs=[hint_output])
-
-    # TAB 4: About
-    with gr.Tab("ℹ About"):
-        gr.Markdown(
-            """
-            ## 🌟 About Synchrony
-            *Synchrony* is an AI-powered collaborative learning platform that:
-            ✨ Matches students with complementary learning styles  
-            🤝 Creates study groups based on chemistry scores  
-            🎯 Generates personalized collaborative challenges  
-            💡 Provides adaptive hints for progressive learning  
-            🏆 Tracks progress and awards achievements
-            ---
-            ### 🔗 Quick Links
-            - 📝 Student Registration Form (Add your Google Form link)
-            - 📊 View Student Database (Add your Google Sheet link)
-            - 🎓 View Groups (Add your Google Sheet link)
-            ---
-            ### 🛠 Tech Stack
-            - *Frontend:* Gradio (Python)
-            - *Backend:* n8n Workflows
-            - *AI:* Groq API (Llama 3.3 70B)
-            - *Database:* Google Sheets
-            - *Matching Algorithm:* Chemistry Score System
-            ---
-            ### 👥 Created By
-            *Maryam Shanabli* | 2025-11-06
-            Powered by AI • Built for Students • Designed for Impact 🚀
-            """
+            challenge_select = gr.Dropdown(
+                label="🎯 select challenge",
+                choices=["1", "2", "3"],
+                value="1",
+                scale=1
+            )
+            
+            hint_level_select = gr.Dropdown(
+                label="💡 hint level",
+                choices=[
+                    "1 - gentle nudge 🤔",
+                    "2 - clearer guidance 💭",
+                    "3 - almost there! 🎯"
+                ],
+                value="1 - gentle nudge 🤔",
+                scale=2
+            )
+        
+        get_hint_btn = gr.Button("💡 GET HINT", variant="primary", size="lg")
+        hint_display = gr.Markdown(value="⚠️ select a challenge and hint level, then click the button!")
+        
+        get_hint_btn.click(
+            fn=request_hint,
+            inputs=[challenge_select, hint_level_select],
+            outputs=[hint_display]
         )
-
-    # TAB 5: API Tester
-    with gr.Tab("🧪 API Tester"):
-        gr.Markdown("## 🧪 Test Your API Endpoints")
-        with gr.Accordion("🚀 Test Start Session", open=False):
-            test_group = gr.Textbox(label="Group ID", value="G001")
-            test_start_btn = gr.Button("Test Start Session")
-            test_start_out = gr.JSON(label="Response")
-            def test_start(gid):
-                ok, res = safe_post(START_SESSION_URL, {"group_id": gid}, timeout=20)
-                return res if ok else {"error": res}
-            test_start_btn.click(test_start, inputs=[test_group], outputs=[test_start_out])
-
-        with gr.Accordion("🎯 Test Generate Challenges", open=False):
-            test_session = gr.Textbox(label="Session ID", value="S20251106160510")
-            test_gen_btn = gr.Button("Test Generate Challenges")
-            test_gen_out = gr.JSON(label="Response")
-            def test_gen(sid):
-                ok, res = safe_post(GENERATE_CHALLENGES_URL, {"session_id": sid}, timeout=60)
-                return res if ok else {"error": res}
-            test_gen_btn.click(test_gen, inputs=[test_session], outputs=[test_gen_out])
-
-        with gr.Accordion("💡 Test Request Hint", open=False):
-            test_hint_session = gr.Textbox(label="Session ID", value="S20251106160510")
-            test_hint_num = gr.Number(label="Challenge Number", value=1)
-            test_hint_lvl = gr.Number(label="Hint Level", value=1)
-            test_hint_btn = gr.Button("Test Request Hint")
-            test_hint_out = gr.JSON(label="Response")
-            def test_hint(sid, cnum, hlvl):
-                try:
-                    ok, res = safe_post(REQUEST_HINT_URL, {
-                        "session_id": sid,
-                        "challenge_number": int(cnum),
-                        "hint_level": int(hlvl)
-                    }, timeout=20)
-                    return res if ok else {"error": res}
-                except Exception as e:
-                    return {"error": str(e)}
-            test_hint_btn.click(test_hint, inputs=[test_hint_session, test_hint_num, test_hint_lvl], outputs=[test_hint_out])
-
-    # Footer
-    gr.Markdown("""---
-    ### 🌟 *Synchrony* | Collaborative Learning, Powered by AI
-    Made with 💜 by Maryam Shanabli | 2025
+    
+    # ============================================
+    # TAB 5: TEAM CHAT
+    # ============================================
+    with gr.Tab("💬 chat"):
+        gr.Markdown("""
+        ## team chat 💬
+        
+        discuss challenges, share ideas, help each other out!
+        
+        <div class="warning">
+        ⚠️ <strong>demo mode:</strong> chat responses are simulated. in production, this would be real-time collaboration!
+        </div>
+        """)
+        
+        chatbot = gr.Chatbot(
+            value=[],
+            label="",
+            height=450,
+            type="messages",
+            avatar_images=None
+        )
+        
+        with gr.Row():
+            msg_input = gr.Textbox(
+                label="",
+                placeholder="type your message here...",
+                scale=5,
+                lines=1
+            )
+            send_btn = gr.Button("📤 SEND", variant="primary", scale=1)
+        
+        send_btn.click(
+            fn=send_message,
+            inputs=[msg_input, chatbot],
+            outputs=[chatbot, msg_input]
+        )
+        
+        msg_input.submit(
+            fn=send_message,
+            inputs=[msg_input, chatbot],
+            outputs=[chatbot, msg_input]
+        )
+    
+    # ============================================
+    # TAB 6: ABOUT
+    # ============================================
+    with gr.Tab("ℹ️ about"):
+        gr.Markdown(f"""
+        ## 🌟 about synchrony
+        
+        **synchrony** is an ai-powered collaborative learning platform that revolutionizes how students study together.
+        
+        ---
+        
+        ### ✨ what we do
+        
+        ✅ **smart matching** - match students with complementary learning styles  
+        ✅ **group formation** - create study groups based on chemistry scores  
+        ✅ **ai challenges** - generate personalized collaborative challenges  
+        ✅ **adaptive hints** - provide progressive learning support  
+        ✅ **peer teaching** - students teach each other, reinforcing their knowledge  
+        
+        ---
+        
+        ### 🛠️ tech stack
+        
+        - **frontend:** gradio (python)  
+        - **backend:** n8n workflows  
+        - **ai:** groq api (llama 3.3 70b)  
+        - **database:** google sheets  
+        - **matching:** chemistry score algorithm  
+        
+        ---
+        
+        ### 🔗 links
+        
+        - 📝 [student registration form]({REGISTRATION_FORM})
+        - 📊 [view database (google sheets)]({GOOGLE_SHEETS})
+        - 🌐 **webhook base:** `{BASE_URL}`
+        
+        ---
+        
+        ### 📊 what's real vs demo
+        
+        <div class="info">
+        ✅ <strong>fully functional:</strong>
+        <ul>
+        <li>student registration (google form → sheets)</li>
+        <li>ai challenge generation (groq api)</li>
+        <li>adaptive hints system (n8n + sheets)</li>
+        <li>team data from real api calls</li>
+        </ul>
+        </div>
+        
+        <div class="warning">
+        🎭 <strong>simulated for demo:</strong>
+        <ul>
+        <li>login system (assigns everyone to G001)</li>
+        <li>team chat (random responses)</li>
+        </ul>
+        
+        <em>these would connect to authentication/real-time systems in production</em>
+        </div>
+        
+        ---
+        
+        ### 👥 created by
+        
+        **maryam shanabli** | november 2025
+        
+        *powered by ai • built for students • designed for impact* 🚀
+        
+        ---
+        
+        ### 🎯 project status
+        
+        **current phase:** demo/prototype  
+        **backend status:** fully operational ✅  
+        **frontend status:** student portal (v2) ✅  
+        **next steps:** real-time chat, authentication, mobile app  
+        """)
+    
+    # ============================================
+    # FOOTER
+    # ============================================
+    gr.Markdown("""
+    ---
+    
+    ### 🌟 **synchrony** | *collaborative learning, powered by ai* 💜
+    
+    made with 🔥 by maryam shanabli | 2025
     """)
 
-
 # ============================================
-# Launch
+# 🚀 LAUNCH APP
 # ============================================
+
 if __name__ == "__main__":
+    print("🚀 Starting SYNCHRONY Student Portal...")
+    print(f"📡 Connected to: {BASE_URL}")
+    print(f"📝 Registration: {REGISTRATION_FORM}")
+    print(f"📊 Database: {GOOGLE_SHEETS}")
+    print("✨ All systems ready!")
+    
     app.launch(
         server_name="0.0.0.0",
         server_port=7860,
-        share=True,
-        show_error=True
-    )
+        share=True,  # Creates public shareable link
+        show_error=True,
+        favicon_path=None,
+        show_api=False
+    )