Update app.py

app.py

@@ -1,4 +1,4 @@
-from flask import Flask, render_template_string, request, jsonify, redirect, url_for, flash
+from flask import Flask, render_template_string, request, redirect, url_for, jsonify, flash
 import json
 import os
 import logging
@@ -18,15 +18,16 @@ import requests
 load_dotenv()
 
 app = Flask(__name__)
-app.secret_key = os.getenv("FLASK_SECRET_KEY", 'tontalent_secret_key_for_flash_messages_only')
+app.secret_key = os.getenv("FLASK_SECRET_KEY", 'telegram_wall_secret_key_for_flash_messages')
 DATA_FILE = 'wall_data.json'
 SYNC_FILES = [DATA_FILE]
 
-REPO_ID = os.getenv("HF_REPO_ID", "Kgshop/tontalent2")
+REPO_ID = os.getenv("HF_REPO_ID", "Kgshop/tontalent2") # Using existing repo config
 HF_TOKEN_WRITE = os.getenv("HF_TOKEN_WRITE")
 HF_TOKEN_READ = os.getenv("HF_TOKEN_READ")
 
-TELEGRAM_BOT_TOKEN = os.getenv("TELEGRAM_BOT_TOKEN", "7549355625:AAGYWatM-nUVQirgBiBwoAtWZgzfp3QnQjY")
+# IMPORTANT: Replace with your actual Bot Token from .env or config if necessary
+TELEGRAM_BOT_TOKEN = os.getenv("TELEGRAM_BOT_TOKEN", "7549355625:8283649768:AAGYWatM-nUVQirgBiBwoAtWZgzfp3QnQjY")
 
 DOWNLOAD_RETRIES = 3
 DOWNLOAD_DELAY = 5
@@ -40,11 +41,11 @@ def download_db_from_hf(specific_file=None, retries=DOWNLOAD_RETRIES, delay=DOWN
     files_to_download = [specific_file] if specific_file else SYNC_FILES
     logging.info(f"Attempting download for {files_to_download} from {REPO_ID}...")
     all_successful = True
+    default_data = {'users': {}, 'posts': {}} 
     for file_name in files_to_download:
         success = False
         for attempt in range(retries + 1):
             try:
-                logging.info(f"Downloading {file_name} (Attempt {attempt + 1}/{retries + 1})...")
                 local_path = hf_hub_download(
                     repo_id=REPO_ID, filename=file_name, repo_type="dataset",
                     token=token_to_use, local_dir=".", local_dir_use_symlinks=False,
@@ -63,8 +64,10 @@ def download_db_from_hf(specific_file=None, retries=DOWNLOAD_RETRIES, delay=DOWN
                         try:
                             if file_name == DATA_FILE:
                                 with open(file_name, 'w', encoding='utf-8') as f:
-                                    json.dump({'users': {}}, f)
+                                    json.dump(default_data, f)
                                 logging.info(f"Created empty local file {file_name} because it was not found on HF.")
+                            success = True # Consider a 404 for DATA_FILE as successful if we create it
+                            break
                         except Exception as create_e:
                             logging.error(f"Failed to create empty local file {file_name}: {create_e}")
                     success = True
@@ -115,34 +118,59 @@ def periodic_backup():
         logging.info("Periodic backup finished.")
 
 def load_data():
-    default_data = {'users': {}}
+    default_data = {'users': {}, 'posts': {}} 
     try:
         with open(DATA_FILE, 'r', encoding='utf-8') as file:
             data = json.load(file)
-        if not isinstance(data.get('users'), dict):
-            logging.warning(f"Data in {DATA_FILE} is not in the correct format. Resetting.")
-            return default_data
+        logging.info(f"Local data loaded successfully from {DATA_FILE}")
+        if not isinstance(data, dict):
+             logging.warning(f"Local {DATA_FILE} is not a dictionary. Attempting download.")
+             raise FileNotFoundError
+        for key in default_data:
+            if key not in data: data[key] = default_data[key]
         return data
-    except (FileNotFoundError, json.JSONDecodeError):
-        if download_db_from_hf(specific_file=DATA_FILE):
+    except (FileNotFoundError, json.JSONDecodeError) as e:
+        logging.warning(f"Error loading local data ({e}). Attempting download from HF.")
+
+    if download_db_from_hf(specific_file=DATA_FILE):
+        try:
+            with open(DATA_FILE, 'r', encoding='utf-8') as file:
+                data = json.load(file)
+            logging.info(f"Data loaded successfully from {DATA_FILE} after download.")
+            if not isinstance(data, dict):
+                 logging.error(f"Downloaded {DATA_FILE} is not a dictionary. Using default.")
+                 return default_data
+            for key in default_data:
+                if key not in data: data[key] = default_data[key]
+            return data
+        except Exception as load_e:
+            logging.error(f"Error loading downloaded {DATA_FILE}: {load_e}. Using default.", exc_info=True)
+            return default_data
+    else:
+        logging.error(f"Failed to download {DATA_FILE} from HF. Using empty default data structure.")
+        if not os.path.exists(DATA_FILE):
             try:
-                with open(DATA_FILE, 'r', encoding='utf-8') as file:
-                    data = json.load(file)
-                if not isinstance(data.get('users'), dict):
-                    logging.warning(f"Downloaded data in {DATA_FILE} is not correct. Resetting.")
-                    return default_data
-                return data
-            except (FileNotFoundError, json.JSONDecodeError):
-                return default_data
+                with open(DATA_FILE, 'w', encoding='utf-8') as f: json.dump(default_data, f)
+                logging.info(f"Created empty local file {DATA_FILE} after failed download.")
+            except Exception as create_e:
+                logging.error(f"Failed to create empty local file {DATA_FILE}: {create_e}")
         return default_data
 
 def save_data(data):
     try:
+        if not isinstance(data, dict):
+            logging.error("Attempted to save invalid data structure (not a dict). Aborting save.")
+            return
+        default_keys = {'users': {}, 'posts': {}} 
+        for key in default_keys:
+            if key not in data: data[key] = default_keys[key]
+
         with open(DATA_FILE, 'w', encoding='utf-8') as file:
             json.dump(data, file, ensure_ascii=False, indent=4)
+        logging.info(f"Data successfully saved to {DATA_FILE}")
         upload_db_to_hf(specific_file=DATA_FILE)
     except Exception as e:
-        logging.error(f"Error saving data: {e}", exc_info=True)
+        logging.error(f"Error saving data to {DATA_FILE}: {e}", exc_info=True)
 
 def verify_telegram_auth_data(auth_data_str, bot_token):
     if not auth_data_str:
@@ -172,34 +200,416 @@ def verify_telegram_auth_data(auth_data_str, bot_token):
             return False, None
     return False, None
 
-def send_telegram_notification(chat_id, message_text):
+def send_telegram_notification(chat_id, text):
     if not TELEGRAM_BOT_TOKEN:
-        logging.warning("TELEGRAM_BOT_TOKEN not set, cannot send notification.")
-        return
+        logging.warning("TELEGRAM_BOT_TOKEN not set. Skipping notification.")
+        return False
 
     url = f"https://api.telegram.org/bot{TELEGRAM_BOT_TOKEN}/sendMessage"
     payload = {
         'chat_id': chat_id,
-        'text': message_text,
-        'parse_mode': 'HTML'
+        'text': text,
+        'parse_mode': 'Markdown'
     }
+    
     try:
         response = requests.post(url, json=payload)
-        response_json = response.json()
-        if not response_json.get('ok'):
-            logging.error(f"Failed to send Telegram notification: {response_json.get('description')}")
+        if response.status_code == 200:
+            logging.info(f"Notification sent to chat ID {chat_id} successfully.")
+            return True
+        else:
+            logging.error(f"Failed to send notification to {chat_id}: {response.text}")
+            return False
+    except requests.RequestException as e:
+        logging.error(f"Request error sending notification to {chat_id}: {e}")
+        return False
+
+def get_authenticated_user_details(request_headers):
+    auth_data_str = request_headers.get('X-Telegram-Auth')
+    if not auth_data_str:
+        return None
+    is_valid, user_data_from_auth = verify_telegram_auth_data(auth_data_str, TELEGRAM_BOT_TOKEN)
+    if is_valid and user_data_from_auth:
+        data = load_data()
+        user_id_str = str(user_data_from_auth.get('id'))
+        return data.get('users', {}).get(user_id_str)
+    return None
+
+# --- API Endpoints ---
+
+@app.route('/api/auth_user', methods=['POST'])
+def auth_user():
+    auth_data_str = request.headers.get('X-Telegram-Auth')
+    if not auth_data_str:
+        init_data_payload = request.json.get('init_data')
+        if init_data_payload:
+            auth_data_str = init_data_payload
+        else:
+            return jsonify({"error": "Authentication data not provided"}), 401
+
+    is_valid, user_data_from_auth = verify_telegram_auth_data(auth_data_str, TELEGRAM_BOT_TOKEN)
+
+    if not is_valid or not user_data_from_auth:
+        return jsonify({"error": "Invalid authentication data"}), 403
+
+    data = load_data()
+    users = data.get('users', {})
+    user_id_str = str(user_data_from_auth.get('id'))
+    chat_id = str(user_data_from_auth.get('id')) 
+
+    if user_id_str not in users:
+        users[user_id_str] = {
+            'id': user_data_from_auth.get('id'),
+            'first_name': user_data_from_auth.get('first_name'),
+            'last_name': user_data_from_auth.get('last_name'),
+            'username': user_data_from_auth.get('username'),
+            'language_code': user_data_from_auth.get('language_code'),
+            'photo_url': user_data_from_auth.get('photo_url'),
+            'chat_id': chat_id, # Use user ID as chat_id for notifications
+            'first_seen': datetime.now().isoformat()
+        }
+    
+    user_updates = {
+        'last_seen': datetime.now().isoformat(),
+        'language_code': user_data_from_auth.get('language_code'),
+        'username': user_data_from_auth.get('username'),
+        'first_name': user_data_from_auth.get('first_name'),
+        'last_name': user_data_from_auth.get('last_name'),
+    }
+    if user_data_from_auth.get('photo_url'):
+        user_updates['photo_url'] = user_data_from_auth.get('photo_url')
+
+    users[user_id_str].update(user_updates)
+    
+    data['users'] = users
+    save_data(data)
+    
+    return jsonify({"message": "User authenticated", "user": users[user_id_str]}), 200
+
+@app.route('/api/users', methods=['GET'])
+def get_users():
+    data = load_data()
+    users = list(data.get('users', {}).values())
+    
+    # Sort users by last seen, most recent first
+    sorted_users = sorted(users, key=lambda x: x.get('last_seen', ''), reverse=True)
+    
+    # Simple list of users
+    user_list = [
+        {
+            'id': u['id'],
+            'first_name': u['first_name'],
+            'last_name': u['last_name'],
+            'username': u['username'],
+            'photo_url': u.get('photo_url'),
+            'last_seen': u['last_seen']
+        } for u in sorted_users
+    ]
+    return jsonify(user_list), 200
+
+@app.route('/api/posts', methods=['GET'])
+def get_feed_posts():
+    data = load_data()
+    all_posts = []
+    
+    # Flatten all posts from all users
+    for wall_owner_id, posts in data.get('posts', {}).items():
+        all_posts.extend(posts)
+        
+    # Sort all posts by timestamp, newest first
+    sorted_posts = sorted(all_posts, key=lambda x: x.get('timestamp', ''), reverse=True)
+    
+    # Enrich with user info
+    users = data.get('users', {})
+    for post in sorted_posts:
+        author = users.get(str(post['author_id']), {})
+        post['author_name'] = f"{author.get('first_name', 'Unknown')} {author.get('last_name', '')}".strip() or "Unknown User"
+        post['author_username'] = author.get('username')
+        wall_owner = users.get(str(post['wall_owner_id']), {})
+        post['wall_owner_name'] = f"{wall_owner.get('first_name', 'Unknown')} {wall_owner.get('last_name', '')}".strip() or "Unknown User"
+        post['wall_owner_username'] = wall_owner.get('username')
+        
+    return jsonify(sorted_posts), 200
+
+@app.route('/api/posts/<user_id>', methods=['GET'])
+def get_user_wall_posts(user_id):
+    data = load_data()
+    user_posts = data.get('posts', {}).get(user_id, [])
+    
+    # Sort posts by timestamp, newest first
+    sorted_posts = sorted(user_posts, key=lambda x: x.get('timestamp', ''), reverse=True)
+    
+    # Enrich with author info
+    users = data.get('users', {})
+    wall_owner = users.get(user_id)
+    
+    for post in sorted_posts:
+        author = users.get(str(post['author_id']), {})
+        post['author_name'] = f"{author.get('first_name', 'Unknown')} {author.get('last_name', '')}".strip() or "Unknown User"
+        post['author_username'] = author.get('username')
+        post['wall_owner_name'] = f"{wall_owner.get('first_name', 'Unknown')} {wall_owner.get('last_name', '')}".strip() if wall_owner else "Unknown User"
+        post['wall_owner_username'] = wall_owner.get('username')
+        
+    return jsonify(sorted_posts), 200
+
+@app.route('/api/post_to_wall/<wall_owner_id>', methods=['POST'])
+def create_post(wall_owner_id):
+    user = get_authenticated_user_details(request.headers)
+    if not user:
+        return jsonify({"error": "Authentication required"}), 401
+
+    if str(wall_owner_id) not in load_data().get('users', {}):
+        return jsonify({"error": "Wall owner not found"}), 404
+    
+    req_data = request.json
+    text = req_data.get('text', '').strip()
+    media_type = req_data.get('media_type') # e.g., 'photo', 'video', 'document'
+    media_url = req_data.get('media_url')   # Placeholder for uploaded file URL
+    
+    if not text and not media_url:
+        return jsonify({"error": "Post must contain text or media"}), 400
+
+    data = load_data()
+    wall_owner = data['users'].get(str(wall_owner_id))
+
+    new_post = {
+        "id": str(uuid.uuid4()),
+        "wall_owner_id": str(wall_owner_id),
+        "author_id": str(user['id']),
+        "text": text,
+        "media_type": media_type if media_type and media_url else None,
+        "media_url": media_url if media_url else None,
+        "timestamp": datetime.now().isoformat(),
+    }
+
+    if wall_owner_id not in data['posts']:
+        data['posts'][wall_owner_id] = []
+        
+    data['posts'][wall_owner_id].append(new_post)
+    save_data(data)
+
+    # --- Notification Logic ---
+    if str(wall_owner_id) != str(user['id']):
+        author_name = f"{user.get('first_name', 'Someone')} {user.get('last_name', '')}".strip()
+        author_username = user.get('username')
+        
+        # Build notification text
+        notification_text = f"🚨 *New Post on your Wall!* 🚨\n\n"
+        if author_username:
+            notification_text += f"From: @{author_username}\n"
+        else:
+            notification_text += f"From: {author_name} (ID: {user['id']})\n"
+        
+        if text:
+            notification_text += f"Text: \"{text[:100]}...\"" if len(text) > 100 else f"Text: \"{text}\""
+        
+        if new_post['media_type']:
+             notification_text += f"\n_Contains a {new_post['media_type']}_"
+        
+        # NOTE: Cannot open the mini-app directly from a notification without a specific bot setup
+        # notification_text += f"\n\n[Open Wall](https://t.me/your_bot_username/your_miniapp?startapp={wall_owner_id})" 
+        
+        if wall_owner and wall_owner.get('chat_id'):
+            send_telegram_notification(wall_owner['chat_id'], notification_text)
+            
+    # Enrich post for immediate response
+    new_post['author_name'] = f"{user.get('first_name', 'Unknown')} {user.get('last_name', '')}".strip() or "Unknown User"
+    new_post['author_username'] = user.get('username')
+    new_post['wall_owner_name'] = f"{wall_owner.get('first_name', 'Unknown')} {wall_owner.get('last_name', '')}".strip() or "Unknown User"
+    new_post['wall_owner_username'] = wall_owner.get('username')
+
+    return jsonify(new_post), 201
+
+# --- Admin Panel (Simplified) ---
+
+@app.route('/admin')
+def admin_panel():
+    data = load_data()
+    users = data.get('users', {})
+    
+    # Flatten all posts for admin view
+    all_posts = []
+    for wall_owner_id, posts in data.get('posts', {}).items():
+        all_posts.extend(posts)
+        
+    sorted_posts = sorted(all_posts, key=lambda x: x.get('timestamp', ''), reverse=True)
+    
+    admin_template = '''
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Telegram Wall Admin</title>
+    <style>
+        body { font-family: sans-serif; margin: 20px; background-color: #f4f4f4; color: #333; }
+        .container { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
+        h1, h2 { color: #333; }
+        .section { margin-bottom: 30px; padding: 15px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9;}
+        .item { border-bottom: 1px solid #eee; padding: 10px 0; }
+        .item:last-child { border-bottom: none; }
+        .item h3 { margin: 0 0 5px 0; }
+        .item p { margin: 3px 0; font-size: 0.9em; color: #555; }
+        .button { padding: 8px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9em; margin-right: 5px; }
+        .button-primary { background-color: #007bff; color: white; }
+        .button-danger { background-color: #dc3545; color: white; }
+        .button-secondary { background-color: #6c757d; color: white; }
+        .message { padding: 10px; margin-bottom: 15px; border-radius: 4px; }
+        .message.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
+        .message.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
+        .message.warning { background-color: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
+        .sync-buttons form { display: inline-block; margin-right: 10px; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Telegram Wall Admin Panel</h1>
+
+        {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+                {% for category, message in messages %}
+                    <div class="message {{ category }}">{{ message }}</div>
+                {% endfor %}
+            {% endif %}
+        {% endwith %}
+
+        <div class="section">
+            <h2>Data Synchronization with Hugging Face</h2>
+            <div class="sync-buttons">
+                <form method="POST" action="{{ url_for('force_upload_admin') }}" onsubmit="return confirm('Upload local data to Hugging Face? This will overwrite server data.');">
+                    <button type="submit" class="button button-primary">Upload DB to HF</button>
+                </form>
+                <form method="POST" action="{{ url_for('force_download_admin') }}" onsubmit="return confirm('Download data from Hugging Face? This will overwrite local data.');">
+                    <button type="submit" class="button button-secondary">Download DB from HF</button>
+                </form>
+            </div>
+            <p style="font-size: 0.8em; color: #666;">Automatic backup runs every 30 minutes if HF_TOKEN_WRITE is set.</p>
+        </div>
+
+        <div class="section">
+            <h2>Users ({{ users|length }})</h2>
+            {% for user_id, user in users.items() %}
+            <div class="item">
+                <h3>{{ user.first_name }} {{ user.last_name }} (@{{ user.username or 'No Username' }})</h3>
+                <p>ID: {{ user_id }} | Last Seen: {{ user.last_seen }}</p>
+                <p>Posts on wall: {{ (data.posts.get(user_id) or [])|length }}</p>
+            </div>
+            {% endfor %}
+        </div>
+
+        <div class="section">
+            <h2>All Posts ({{ sorted_posts|length }})</h2>
+            {% for post in sorted_posts %}
+                {% set author = users.get(post.author_id) %}
+                {% set wall_owner = users.get(post.wall_owner_id) %}
+                <div class="item">
+                    <h3>
+                        {% if post.text %}
+                            {{ post.text[:50] }}{% if post.text|length > 50 %}...{% endif %}
+                        {% else %}
+                            [No Text]
+                        {% endif %}
+                    </h3>
+                    <p>
+                        Author: 
+                        {% if author %}
+                            {{ author.first_name }} {{ author.last_name }} (@{{ author.username or 'No Username' }})
+                        {% else %}
+                            Unknown Author ({{ post.author_id }})
+                        {% endif %}
+                        | On Wall of:
+                        {% if wall_owner %}
+                            {{ wall_owner.first_name }} {{ wall_owner.last_name }}
+                        {% else %}
+                            Unknown Wall Owner ({{ post.wall_owner_id }})
+                        {% endif %}
+                    </p>
+                    {% if post.media_type %}<p>Media: {{ post.media_type|capitalize }} (URL: {{ post.media_url }})</p>{% endif %}
+                    <p>Posted: {{ post.timestamp }}</p>
+                    <form method="POST" action="{{ url_for('admin_delete_post') }}" style="display:inline;" onsubmit="return confirm('Delete this post?');">
+                        <input type="hidden" name="wall_owner_id" value="{{ post.wall_owner_id }}">
+                        <input type="hidden" name="post_id" value="{{ post.id }}">
+                        <button type="submit" class="button button-danger">Delete Post</button>
+                    </form>
+                </div>
+            {% else %}
+            <p>No posts found.</p>
+            {% endfor %}
+        </div>
+    </div>
+</body>
+</html>
+    '''
+    return render_template_string(admin_template, 
+                                  users=users, 
+                                  sorted_posts=sorted_posts,
+                                  data=data)
+
+@app.route('/admin/delete_post', methods=['POST'])
+def admin_delete_post():
+    wall_owner_id = request.form.get('wall_owner_id')
+    post_id = request.form.get('post_id')
+
+    if not wall_owner_id or not post_id:
+        flash('Invalid Post ID or Wall Owner ID for deletion.', 'error')
+        return redirect(url_for('admin_panel'))
+
+    data = load_data()
+    posts_list = data.get('posts', {}).get(wall_owner_id, [])
+    original_length = len(posts_list)
+    
+    data['posts'][wall_owner_id] = [p for p in posts_list if p['id'] != post_id]
+
+    if len(data['posts'][wall_owner_id]) < original_length:
+        save_data(data)
+        flash(f'Post {post_id} deleted successfully from wall {wall_owner_id}.', 'success')
+    else:
+        flash(f'Post {post_id} not found on wall {wall_owner_id} or already deleted.', 'warning')
+        
+    # Clean up empty wall list
+    if not data['posts'][wall_owner_id]:
+        del data['posts'][wall_owner_id]
+        save_data(data)
+        
+    return redirect(url_for('admin_panel'))
+
+@app.route('/admin/force_upload', methods=['POST'])
+def force_upload_admin():
+    logging.info("Admin forcing upload to Hugging Face...")
+    try:
+        upload_db_to_hf()
+        flash("Data successfully uploaded to Hugging Face.", 'success')
     except Exception as e:
-        logging.error(f"Exception while sending Telegram notification: {e}")
+        logging.error(f"Error during forced upload: {e}", exc_info=True)
+        flash(f"Error uploading to Hugging Face: {e}", 'error')
+    return redirect(url_for('admin_panel'))
 
+@app.route('/admin/force_download', methods=['POST'])
+def force_download_admin():
+    logging.info("Admin forcing download from Hugging Face...")
+    try:
+        if download_db_from_hf():
+            flash("Data successfully downloaded from Hugging Face. Local files updated.", 'success')
+            load_data() 
+        else:
+            flash("Failed to download data from Hugging Face. Check logs.", 'error')
+    except Exception as e:
+        logging.error(f"Error during forced download: {e}", exc_info=True)
+        flash(f"Error downloading from Hugging Face: {e}", 'error')
+    return redirect(url_for('admin_panel'))
+
+
+# --- MAIN APP TEMPLATE (New Wall UI) ---
 
-WALL_TEMPLATE = '''
+MAIN_APP_TEMPLATE = '''
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
-    <title>Telegram Wall</title>
+    <title id="appTitle">Telegram Wall</title>
     <script src="https://telegram.org/js/telegram-web-app.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLMDJdZ4wPuyzYfFw4u3Q23oNqgqFj5Lh2mX5L+R5E5u+5F5A2V5a5S+5A5A5Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <style>
         :root {
             --tg-theme-bg-color: #ffffff;
@@ -211,16 +621,25 @@ WALL_TEMPLATE = '''
             --tg-theme-secondary-bg-color: #f0f0f0;
             --tg-theme-header-bg-color: #efeff4;
             --tg-theme-section-bg-color: #ffffff;
+            --tg-theme-section-header-text-color: #8e8e93;
+            --tg-theme-destructive-text-color: #ff3b30;
+            --tg-theme-accent-text-color: #007aff;
         }
         body {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
             margin: 0;
             padding: 0;
             background-color: var(--tg-theme-bg-color);
             color: var(--tg-theme-text-color);
             overscroll-behavior-y: none;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+            line-height: 1.4;
+            padding-bottom: 60px; /* Space for bottom nav */
+            min-height: 100vh;
+            min-height: -webkit-fill-available;
         }
-        .app-container { display: flex; flex-direction: column; min-height: 100vh; }
+        .app-container { display: flex; flex-direction: column; }
         .header {
             background-color: var(--tg-theme-header-bg-color);
             padding: 12px 15px;
@@ -232,338 +651,578 @@ WALL_TEMPLATE = '''
             top: 0;
             z-index: 100;
         }
-        .tabs { display: flex; background-color: var(--tg-theme-secondary-bg-color); padding: 5px; }
-        .tab-button {
-            flex: 1; padding: 12px 10px; text-align: center; cursor: pointer;
-            background: none; border: none; color: var(--tg-theme-hint-color);
-            font-size: 15px; font-weight: 500; border-bottom: 2.5px solid transparent;
-            transition: color 0.2s ease, border-bottom-color 0.2s ease;
+        .content { flex-grow: 1; padding: 10px 0; overflow-x: hidden; transition: opacity 0.2s ease-out; }
+        .nav-bar {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 56px;
+            background-color: var(--tg-theme-section-bg-color);
+            border-top: 0.5px solid var(--tg-theme-secondary-bg-color);
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            z-index: 1000;
+        }
+        .nav-item {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            color: var(--tg-theme-hint-color);
+            font-size: 11px;
+            padding-top: 5px;
+            height: 100%;
+            transition: color 0.2s ease;
             -webkit-tap-highlight-color: transparent;
         }
-        .tab-button.active { color: var(--tg-theme-link-color); border-bottom-color: var(--tg-theme-link-color); }
-        .content { flex-grow: 1; padding: 15px; }
-        .loading, .empty-state { text-align: center; padding: 50px 15px; color: var(--tg-theme-hint-color); font-size: 16px; }
-        
-        .post-form {
+        .nav-item i { font-size: 20px; margin-bottom: 3px; }
+        .nav-item.active { color: var(--tg-theme-link-color); }
+
+        /* General Item Styles */
+        .list-item, .post-item {
             background-color: var(--tg-theme-section-bg-color);
             padding: 15px;
+            margin: 10px 15px;
             border-radius: 10px;
-            margin-bottom: 20px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+            cursor: pointer;
+            transition: background-color 0.1s ease;
         }
-        .post-form textarea {
+        .list-item:active, .post-item:active { background-color: var(--tg-theme-secondary-bg-color); }
+        .list-item h3 { margin: 0; font-size: 17px; font-weight: 600; color: var(--tg-theme-text-color); }
+        .list-item p { margin: 3px 0; font-size: 14px; color: var(--tg-theme-hint-color); }
+        .user-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; margin-right: 10px; background-color: var(--tg-theme-secondary-bg-color); }
+        .user-info { display: flex; align-items: center; }
+
+        /* Post Specific Styles */
+        .post-header { display: flex; align-items: center; margin-bottom: 10px; }
+        .post-author-name { font-weight: 600; font-size: 15px; color: var(--tg-theme-text-color); }
+        .post-username { font-size: 13px; color: var(--tg-theme-hint-color); margin-left: 5px; }
+        .post-text { margin: 10px 0; font-size: 16px; white-space: pre-wrap; word-wrap: break-word; color: var(--tg-theme-text-color); }
+        .post-meta { font-size: 12px; color: var(--tg-theme-hint-color); margin-top: 10px; border-top: 0.5px solid var(--tg-theme-secondary-bg-color); padding-top: 5px; }
+        .post-media { max-width: 100%; height: auto; border-radius: 8px; margin-top: 10px; }
+        .post-media-placeholder { font-size: 14px; color: var(--tg-theme-link-color); margin-top: 10px; display: block; }
+        .post-wall-owner-link { font-size: 13px; color: var(--tg-theme-link-color); margin-left: 5px; }
+
+        /* Form/View Styles */
+        .view-container { padding: 15px; }
+        .form-group { margin-bottom: 15px; }
+        .form-group label { display: block; font-size: 14px; color: var(--tg-theme-section-header-text-color); margin-bottom: 5px; font-weight: 500; }
+        .form-group input, .form-group textarea, .form-group select {
             width: 100%;
-            padding: 12px;
+            padding: 10px;
             border: 1px solid var(--tg-theme-secondary-bg-color);
             border-radius: 8px;
             font-size: 16px;
             background-color: var(--tg-theme-bg-color);
             color: var(--tg-theme-text-color);
             box-sizing: border-box;
-            min-height: 80px;
-            resize: vertical;
-        }
-        .post-form .form-actions {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-top: 10px;
-        }
-        .post-form .file-inputs label {
-             color: var(--tg-theme-link-color);
-             cursor: pointer;
-             margin-right: 15px;
-             font-size: 14px;
-        }
-        .post-form .file-inputs input { display: none; }
-
-        .post-form button {
-            background-color: var(--tg-theme-button-color);
-            color: var(--tg-theme-button-text-color);
-            border: none;
-            padding: 10px 20px;
-            border-radius: 8px;
-            font-size: 15px;
-            font-weight: 500;
-            cursor: pointer;
+            transition: border-color 0.2s ease;
         }
+        .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--tg-theme-link-color); outline: none; }
+        .form-group textarea { min-height: 80px; resize: vertical; }
         
-        .post-card {
-            background-color: var(--tg-theme-section-bg-color);
-            padding: 15px;
-            border-radius: 10px;
-            margin-bottom: 15px;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
-        }
-        .post-card .post-header {
-            display: flex;
-            align-items: center;
-            margin-bottom: 10px;
-        }
-        .post-card .post-header img {
-            width: 36px;
-            height: 36px;
-            border-radius: 50%;
-            margin-right: 10px;
-            background-color: var(--tg-theme-secondary-bg-color);
-        }
-        .post-card .post-header-info {
-            display: flex;
-            flex-direction: column;
-        }
-        .post-card .post-header .author { font-weight: 600; color: var(--tg-theme-text-color); }
-        .post-card .post-header .timestamp { font-size: 13px; color: var(--tg-theme-hint-color); }
-        .post-card .post-content {
-            font-size: 15px;
-            line-height: 1.5;
-            white-space: pre-wrap;
-            word-wrap: break-word;
-        }
-        .post-card .post-media { margin-top: 10px; }
-        .post-card .post-media img, .post-card .post-media video { max-width: 100%; border-radius: 8px; }
-        .post-card .post-media a { color: var(--tg-theme-link-color); }
+        .loading, .empty-state { text-align: center; padding: 50px 15px; color: var(--tg-theme-hint-color); font-size: 16px; }
+        .error-message { color: var(--tg-theme-destructive-text-color); font-size: 14px; margin-top: 10px; text-align: center; }
         
-        .user-list-item {
-            display: flex;
-            align-items: center;
-            padding: 12px 0;
-            border-bottom: 1px solid var(--tg-theme-secondary-bg-color);
+        /* Profile View Styles */
+        .profile-header { text-align: center; padding: 20px 15px; background-color: var(--tg-theme-secondary-bg-color); border-radius: 10px; margin: 10px 15px; }
+        .profile-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-bottom: 10px; background-color: var(--tg-theme-bg-color); }
+        .profile-name { font-size: 20px; font-weight: 600; margin: 0; color: var(--tg-theme-text-color); }
+        .profile-username { font-size: 15px; color: var(--tg-theme-hint-color); margin: 5px 0 0 0; }
+        .profile-stats { display: flex; justify-content: space-around; margin-top: 15px; }
+        .profile-stat span { display: block; font-size: 16px; font-weight: 600; color: var(--tg-theme-text-color); }
+        .profile-stat small { font-size: 12px; color: var(--tg-theme-hint-color); }
+        .profile-post-section h2 { margin: 10px 15px; font-size: 18px; color: var(--tg-theme-section-header-text-color); font-weight: 500;}
+        .profile-post-button { 
+            background-color: var(--tg-theme-button-color); 
+            color: var(--tg-theme-button-text-color); 
+            padding: 12px 15px; 
+            border: none; 
+            border-radius: 8px; 
+            font-size: 16px; 
+            font-weight: 500;
+            width: 100%;
+            margin-top: 15px;
             cursor: pointer;
+            transition: opacity 0.2s;
         }
-        .user-list-item:last-child { border-bottom: none; }
-        .user-list-item img {
-            width: 45px;
-            height: 45px;
-            border-radius: 50%;
-            margin-right: 12px;
-            background-color: var(--tg-theme-secondary-bg-color);
-        }
-        .user-list-item .user-info span { font-size: 16px; font-weight: 500; }
-        .user-list-item .user-info p { margin: 2px 0 0 0; font-size: 14px; color: var(--tg-theme-hint-color); }
+        .profile-post-button:active { opacity: 0.8; }
+
     </style>
 </head>
 <body>
     <div class="app-container">
-        <div class="header" id="appHeader">My Wall</div>
-        <div class="tabs">
-            <button class="tab-button active" id="myWallTab">My Wall</button>
-            <button class="tab-button" id="usersTab">Users</button>
-        </div>
+        <div class="header" id="appHeader">Telegram Wall</div>
         <div class="content" id="mainContent">
             <div class="loading">Loading...</div>
         </div>
+        
+        <div class="nav-bar" id="bottomNav">
+            <div class="nav-item active" data-view="feed">
+                <i class="fas fa-home"></i>
+                <span id="nav-feed-text">Feed</span>
+            </div>
+            <div class="nav-item" data-view="my_wall">
+                <i class="fas fa-user-circle"></i>
+                <span id="nav-mywall-text">My Wall</span>
+            </div>
+            <div class="nav-item" data-view="users">
+                <i class="fas fa-users"></i>
+                <span id="nav-users-text">Users</span>
+            </div>
+        </div>
     </div>
 
     <script>
         const tg = window.Telegram.WebApp;
         let currentUser = null;
-        let currentView = 'my_wall'; 
-        let viewingUserId = null;
-
+        let currentView = 'feed'; 
+        let currentWallOwnerId = null; 
+        
         const mainContent = document.getElementById('mainContent');
         const appHeader = document.getElementById('appHeader');
-        const myWallTab = document.getElementById('myWallTab');
-        const usersTab = document.getElementById('usersTab');
+        const bottomNav = document.getElementById('bottomNav');
+        
+        const langStrings = {
+            en: {
+                appTitle: "Telegram Wall", feed: "Feed", myWall: "My Wall", users: "Users",
+                welcome: "Welcome to the Wall!", loading: "Loading...", emptyFeed: "No posts yet. Be the first!",
+                emptyWall: "This wall is empty. Post something!", userList: "User List",
+                writePost: "Write a Post", writeOnWall: "Write on Wall", postText: "Text", postMedia: "Media Type", postMediaUrl: "Media URL",
+                postPlaceholder: "What's on your mind?", postButton: "Post to Wall", 
+                postedBy: "Posted by", onWallOf: "on wall of", postedOn: "Posted on", mediaPhoto: "Photo", mediaVideo: "Video", mediaDoc: "Document", mediaNone: "None/Text Only",
+                profilePosts: "Wall Posts", editProfile: "Edit Profile",
+                authFailed: "Authentication with the server failed. Some features might be limited.",
+            },
+            ru: {
+                appTitle: "Стена в Telegram", feed: "Лента", myWall: "Моя Стена", users: "Пользователи",
+                welcome: "Добро пожаловать на Стену!", loading: "Загрузка...", emptyFeed: "Постов пока нет. Будьте первыми!",
+                emptyWall: "Эта стена пуста. Оставьте запись!", userList: "Список Пользователей",
+                writePost: "Написать Пост", writeOnWall: "Написать на Стене", postText: "Текст", postMedia: "Тип Медиа", postMediaUrl: "URL Медиа",
+                postPlaceholder: "О чем вы думаете?", postButton: "Опубликовать", 
+                postedBy: "Опубликовал", onWallOf: "на стене", postedOn: "Опубликовано", mediaPhoto: "Фотография", mediaVideo: "Видео", mediaDoc: "Документ", mediaNone: "Нет/Только Текст",
+                profilePosts: "Записи на Стене", editProfile: "Редактировать Профиль",
+                authFailed: "Не удалось авторизоваться на сервере. Функционал может быть ограничен.",
+            }
+        };
+        let lang = 'en';
+        let T = langStrings[lang];
 
-        function applyThemeParams() {
-            const root = document.documentElement.style;
-            Object.keys(tg.themeParams).forEach(key => {
-                const cssVar = `--tg-theme-${key.replace(/_/g, '-')}`;
-                root.setProperty(cssVar, tg.themeParams[key]);
-            });
+        function setLanguage(langCode) {
+            lang = langCode === 'ru' ? 'ru' : 'en';
+            T = langStrings[lang];
+            document.getElementById('appTitle').textContent = T.appTitle;
+            document.getElementById('nav-feed-text').textContent = T.feed;
+            document.getElementById('nav-mywall-text').textContent = T.myWall;
+            document.getElementById('nav-users-text').textContent = T.users;
+            appHeader.textContent = T.appTitle;
         }
 
+        function applyThemeParams() {
+            const rootStyle = document.documentElement.style;
+            rootStyle.setProperty('--tg-theme-bg-color', tg.themeParams.bg_color || '#ffffff');
+            rootStyle.setProperty('--tg-theme-text-color', tg.themeParams.text_color || '#000000');
+            rootStyle.setProperty('--tg-theme-hint-color', tg.themeParams.hint_color || '#999999');
+            rootStyle.setProperty('--tg-theme-link-color', tg.themeParams.link_color || '#007aff');
+            rootStyle.setProperty('--tg-theme-button-color', tg.themeParams.button_color || '#007aff');
+            rootStyle.setProperty('--tg-theme-button-text-color', tg.themeParams.button_text_color || '#ffffff');
+            rootStyle.setProperty('--tg-theme-secondary-bg-color', tg.themeParams.secondary_bg_color || '#f0f0f0');
+            rootStyle.setProperty('--tg-theme-header-bg-color', tg.themeParams.header_bg_color || tg.themeParams.secondary_bg_color || '#efeff4');
+            rootStyle.setProperty('--tg-theme-section-bg-color', tg.themeParams.section_bg_color || tg.themeParams.bg_color || '#ffffff');
+            rootStyle.setProperty('--tg-theme-section-header-text-color', tg.themeParams.section_header_text_color || tg.themeParams.hint_color || '#8e8e93');
+            rootStyle.setProperty('--tg-theme-destructive-text-color', tg.themeParams.destructive_text_color || '#ff3b30');
+            rootStyle.setProperty('--tg-theme-accent-text-color', tg.themeParams.accent_text_color || tg.themeParams.link_color || '#007aff');
+        }
+        
         async function apiCall(endpoint, method = 'GET', body = null) {
             const headers = { 'Content-Type': 'application/json' };
-            if (tg.initData) headers['X-Telegram-Auth'] = tg.initData;
-            
+            if (tg.initData) {
+                headers['X-Telegram-Auth'] = tg.initData;
+            }
             const options = { method, headers };
             if (body) options.body = JSON.stringify(body);
+            try {
+                const response = await fetch(endpoint, options);
+                if (!response.ok) {
+                    const errorData = await response.json().catch(() => ({ error: 'Request failed without JSON body' }));
+                    throw new Error(errorData.error || `HTTP error ${response.status}`);
+                }
+                return response.json();
+            } catch (error) {
+                console.error('API Call Error:', error);
+                // tg.showAlert(error.message || 'An API error occurred.'); // Don't block flow on every minor error
+                throw error;
+            }
+        }
+
+        function getAvatarUrl(user) {
+            return user.photo_url || 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'; // Default placeholder
+        }
+        
+        function formatUserLink(username) {
+            return username ? `<a href="https://t.me/${username}" target="_blank">@${username}</a>` : 'Unknown';
+        }
+        
+        function formatDate(isoString) {
+            try {
+                const date = new Date(isoString);
+                return date.toLocaleDateString(lang, { day: 'numeric', month: 'short', year: 'numeric' }) + ' ' + 
+                       date.toLocaleTimeString(lang, { hour: '2-digit', minute: '2-digit' });
+            } catch (e) {
+                return isoString || 'N/A';
+            }
+        }
+
+        // --- Renderer Functions ---
+
+        function renderPostList(posts, containerId = 'mainContent') {
+            const container = document.getElementById(containerId);
+            container.style.opacity = 0;
+            
+            if (!posts || posts.length === 0) {
+                const emptyMessage = currentView === 'feed' ? T.emptyFeed : T.emptyWall;
+                container.innerHTML = `<div class="empty-state">${emptyMessage}</div>`;
+            } else {
+                container.innerHTML = posts.map(post => {
+                    const authorLink = formatUserLink(post.author_username);
+                    const wallOwnerLink = formatUserLink(post.wall_owner_username);
+                    
+                    let mediaHtml = '';
+                    if (post.media_type === 'photo' && post.media_url) {
+                        mediaHtml = `<img src="${post.media_url}" alt="${T.mediaPhoto}" class="post-media" />`;
+                    } else if (post.media_url) {
+                         // Simple link/placeholder for other media types
+                        const mediaTypeDisplay = T['media' + post.media_type.charAt(0).toUpperCase() + post.media_type.slice(1)] || post.media_type;
+                        mediaHtml = `<a href="${post.media_url}" target="_blank" rel="noopener noreferrer" class="post-media-placeholder"><i class="fas fa-paperclip"></i> ${mediaTypeDisplay} Link</a>`;
+                    }
 
-            const response = await fetch(endpoint, options);
-            if (!response.ok) {
-                const errorData = await response.json().catch(() => ({ error: 'Request failed' }));
-                throw new Error(errorData.error || `HTTP error ${response.status}`);
+                    return `
+                        <div class="post-item">
+                            <div class="post-header">
+                                <img src="${getAvatarUrl(post)}" alt="Avatar" class="user-avatar">
+                                <div>
+                                    <div class="post-author-name">${post.author_name}</div>
+                                    <div class="post-username">${authorLink}</div>
+                                </div>
+                            </div>
+                            ${mediaHtml}
+                            ${post.text ? `<p class="post-text">${post.text.replace(/\\n/g, '<br>')}</p>` : ''}
+                            <div class="post-meta">
+                                ${T.postedOn}: ${formatDate(post.timestamp)}
+                                ${post.wall_owner_id !== post.author_id 
+                                    ? ` | ${T.onWallOf}: ${wallOwnerLink}` 
+                                    : ''}
+                            </div>
+                        </div>
+                    `;
+                }).join('');
             }
-            return response.json();
+            setTimeout(() => { container.style.opacity = 1; }, 50);
         }
 
-        function renderPostForm(wallOwnerId) {
-            return `
-                <div class="post-form">
-                    <textarea id="postText" placeholder="Write something on the wall..."></textarea>
-                    <div class="form-actions">
-                        <div class="file-inputs">
-                            <label for="photo-upload">Photo</label>
-                            <input type="file" id="photo-upload" accept="image/*" disabled>
-                            <label for="video-upload">Video</label>
-                            <input type="file" id="video-upload" accept="video/*" disabled>
-                            <label for="doc-upload">File</label>
-                            <input type="file" id="doc-upload" disabled>
+        function renderUserList(users) {
+            mainContent.style.opacity = 0;
+            appHeader.textContent = T.userList;
+            
+            if (!users || users.length === 0) {
+                mainContent.innerHTML = `<div class="empty-state">No registered users found.</div>`;
+            } else {
+                mainContent.innerHTML = `<div class="view-container">` + users.map(user => {
+                    const fullName = `${user.first_name || ''} ${user.last_name || ''}`.trim() || 'No Name';
+                    const username = user.username ? `@${user.username}` : 'ID: ' + user.id;
+                    
+                    return `
+                        <div class="list-item user-info" onclick="loadView('user_wall', '${user.id}')">
+                            <img src="${getAvatarUrl(user)}" alt="Avatar" class="user-avatar">
+                            <div>
+                                <h3>${fullName}</h3>
+                                <p>${username}</p>
+                            </div>
+                        </div>
+                    `;
+                }).join('') + `</div>`;
+            }
+            setTimeout(() => { mainContent.style.opacity = 1; }, 50);
+        }
+
+        function renderMyWallView(user, posts) {
+            mainContent.style.opacity = 0;
+            appHeader.textContent = T.myWall;
+            currentWallOwnerId = user.id;
+
+            const fullName = `${user.first_name || ''} ${user.last_name || ''}`.trim() || 'No Name';
+            const username = user.username ? `@${user.username}` : '';
+
+            let profileHtml = `
+                <div class="profile-header">
+                    <img src="${getAvatarUrl(user)}" alt="Avatar" class="profile-avatar">
+                    <h1 class="profile-name">${fullName}</h1>
+                    <p class="profile-username">${username}</p>
+                    <div class="profile-stats">
+                        <div class="profile-stat">
+                            <span>${posts.length}</span>
+                            <small>${T.profilePosts}</small>
                         </div>
-                        <button onclick="submitPost('${wallOwnerId}')">Post</button>
                     </div>
-                    <p style="font-size:12px; color:var(--tg-theme-hint-color); margin-top:8px;">File uploads are not yet implemented.</p>
+                    <button class="profile-post-button" onclick="showPostForm('${user.id}')">${T.writePost}</button>
+                </div>
+                <div class="profile-post-section">
+                    <h2>${T.profilePosts}</h2>
+                    <div id="wallPostsContainer"></div>
                 </div>
             `;
+            
+            mainContent.innerHTML = profileHtml;
+            renderPostList(posts, 'wallPostsContainer');
+            setTimeout(() => { mainContent.style.opacity = 1; }, 50);
         }
 
-        function renderPostCard(post) {
-            const authorUsername = post.author_username ? `@${post.author_username}` : 'Anonymous';
-            const postDate = new Date(post.timestamp).toLocaleString();
-            return `
-                <div class="post-card">
-                    <div class="post-header">
-                        <img src="${post.author_photo_url || ''}" alt="Avatar">
-                        <div class="post-header-info">
-                            <span class="author">${post.author_first_name || 'User'}</span>
-                            <span class="timestamp">${authorUsername} • ${postDate}</span>
-                        </div>
-                    </div>
-                    <div class="post-content">${post.text}</div>
+        function renderUserWallView(wallOwner, posts) {
+            mainContent.style.opacity = 0;
+            const fullName = `${wallOwner.first_name || ''} ${wallOwner.last_name || ''}`.trim() || 'No Name';
+            appHeader.textContent = fullName + (wallOwner.username ? ` (@${wallOwner.username})` : '');
+            currentWallOwnerId = wallOwner.id;
+
+            const username = wallOwner.username ? `@${wallOwner.username}` : '';
+            
+            let profileHtml = `
+                <div class="profile-header">
+                    <img src="${getAvatarUrl(wallOwner)}" alt="Avatar" class="profile-avatar">
+                    <h1 class="profile-name">${fullName}</h1>
+                    <p class="profile-username">${username}</p>
+                    <button class="profile-post-button" onclick="showPostForm('${wallOwner.id}')">${T.writeOnWall}</button>
+                </div>
+                <div class="profile-post-section">
+                    <h2>${T.profilePosts}</h2>
+                    <div id="wallPostsContainer"></div>
                 </div>
             `;
+            
+            mainContent.innerHTML = profileHtml;
+            renderPostList(posts, 'wallPostsContainer');
+            setTimeout(() => { mainContent.style.opacity = 1; }, 50);
         }
-        
-        function renderWallView(wallOwnerId, wallOwnerName, posts) {
-            let wallHtml = renderPostForm(wallOwnerId);
-            if (posts && posts.length > 0) {
-                wallHtml += posts.map(renderPostCard).join('');
+
+        // --- Navigation Logic ---
+
+        function loadView(viewName, userId = null) {
+            if (currentView === viewName && viewName !== 'user_wall') return;
+            tg.HapticFeedback.impactOccurred('light');
+
+            currentView = viewName;
+            currentWallOwnerId = null; 
+            
+            document.querySelectorAll('.nav-item').forEach(btn => btn.classList.remove('active'));
+            const activeNav = document.querySelector(`.nav-item[data-view="${viewName}"]`);
+            if (activeNav) {
+                activeNav.classList.add('active');
             } else {
-                wallHtml += `<div class="empty-state">This wall is empty. Be the first to post!</div>`;
+                appHeader.textContent = T.appTitle; // Reset header for sub-views
             }
-            mainContent.innerHTML = wallHtml;
-        }
 
-        async function loadMyWall() {
-            if (!currentUser) return;
-            currentView = 'my_wall';
-            viewingUserId = null;
-            appHeader.textContent = 'My Wall';
-            myWallTab.classList.add('active');
-            usersTab.classList.remove('active');
-            mainContent.innerHTML = '<div class="loading">Loading your wall...</div>';
+            mainContent.style.opacity = 0;
+            mainContent.innerHTML = `<div class="loading">${T.loading}</div>`;
             tg.BackButton.hide();
-            
-            try {
-                const wallData = await apiCall(`/api/wall/${currentUser.id}`);
-                renderWallView(currentUser.id, 'My', wallData.posts);
-            } catch (error) {
-                tg.showAlert(`Error loading your wall: ${error.message}`);
-                mainContent.innerHTML = `<div class="empty-state">Could not load your wall.</div>`;
+            tg.MainButton.hide();
+
+            if (viewName === 'feed') {
+                appHeader.textContent = T.feed;
+                apiCall('/api/posts')
+                    .then(posts => renderPostList(posts))
+                    .catch(err => mainContent.innerHTML = `<div class="empty-state">Error loading feed.</div>`);
+            } else if (viewName === 'users') {
+                appHeader.textContent = T.userList;
+                apiCall('/api/users')
+                    .then(users => renderUserList(users.filter(u => u.id !== currentUser.id)))
+                    .catch(err => mainContent.innerHTML = `<div class="empty-state">Error loading user list.</div>`);
+            } else if (viewName === 'my_wall') {
+                if (!currentUser) {
+                    mainContent.innerHTML = `<div class="empty-state">${T.authFailed}</div>`;
+                    setTimeout(() => { mainContent.style.opacity = 1; }, 50);
+                    return;
+                }
+                Promise.all([
+                    apiCall(`/api/users`),
+                    apiCall(`/api/posts/${currentUser.id}`)
+                ]).then(([allUsers, posts]) => {
+                    renderMyWallView(currentUser, posts);
+                }).catch(err => mainContent.innerHTML = `<div class="empty-state">Error loading wall.</div>`);
+            } else if (viewName === 'user_wall' && userId) {
+                tg.BackButton.show();
+                tg.BackButton.onClick(() => loadView('users')); 
+                
+                Promise.all([
+                    apiCall('/api/users'),
+                    apiCall(`/api/posts/${userId}`)
+                ]).then(([allUsers, posts]) => {
+                    const wallOwner = allUsers.find(u => u.id === userId);
+                    if (wallOwner) {
+                         renderUserWallView(wallOwner, posts);
+                    } else {
+                        mainContent.innerHTML = `<div class="empty-state">User not found.</div>`;
+                        setTimeout(() => { mainContent.style.opacity = 1; }, 50);
+                    }
+                }).catch(err => mainContent.innerHTML = `<div class="empty-state">Error loading user wall.</div>`);
             }
         }
-        
-        async function loadUsersList() {
-            currentView = 'users_list';
-            viewingUserId = null;
-            appHeader.textContent = 'Users';
-            myWallTab.classList.remove('active');
-            usersTab.classList.add('active');
-            mainContent.innerHTML = '<div class="loading">Loading users...</div>';
 
-            tg.BackButton.show();
-            tg.BackButton.onClick(loadMyWall);
+        function showPostForm(wallOwnerId) {
+            if (!currentUser) {
+                tg.showAlert(T.authFailed);
+                return;
+            }
 
-            try {
-                const users = await apiCall('/api/users');
-                if (users.length <= 1) { // Only current user exists
-                     mainContent.innerHTML = `<div class="empty-state">No other users have joined yet.</div>`;
+            mainContent.style.opacity = 0;
+            currentWallOwnerId = wallOwnerId;
+            
+            tg.BackButton.show();
+            tg.BackButton.onClick(() => {
+                tg.HapticFeedback.impactOccurred('light');
+                if (wallOwnerId === currentUser.id) {
+                    loadView('my_wall');
                 } else {
-                    mainContent.innerHTML = users
-                        .filter(user => String(user.id) !== String(currentUser.id))
-                        .map(user => `
-                        <div class="user-list-item" onclick="loadUserWall('${user.id}')">
-                            <img src="${user.photo_url || ''}" alt="Avatar">
-                            <div class="user-info">
-                                <span>${user.first_name || ''} ${user.last_name || ''}</span>
-                                <p>${user.username ? `@${user.username}` : `ID: ${user.id}`}</p>
-                            </div>
-                        </div>
-                    `).join('');
+                    loadView('user_wall', wallOwnerId);
                 }
-            } catch (error) {
-                tg.showAlert(`Error loading users: ${error.message}`);
-                mainContent.innerHTML = `<div class="empty-state">Could not load users.</div>`;
-            }
-        }
+            });
+
+            appHeader.textContent = wallOwnerId === currentUser.id ? T.writePost : T.writeOnWall;
+
+            const mediaOptions = [
+                { value: '', text: T.mediaNone },
+                { value: 'photo', text: T.mediaPhoto },
+                { value: 'video', text: T.mediaVideo },
+                { value: 'document', text: T.mediaDoc }
+            ];
+
+            const formHtml = `
+                <div class="view-container">
+                    <form id="postForm">
+                        <div class="form-group">
+                            <label for="postText">${T.postText}</label>
+                            <textarea id="postText" placeholder="${T.postPlaceholder}"></textarea>
+                        </div>
+                        <div class="form-group">
+                            <label for="mediaType">${T.postMedia}</label>
+                            <select id="mediaType">
+                                ${mediaOptions.map(opt => `<option value="${opt.value}">${opt.text}</option>`).join('')}
+                            </select>
+                        </div>
+                        <div class="form-group" id="mediaUrlGroup" style="display:none;">
+                            <label for="mediaUrl">${T.postMediaUrl} (HTTPS link)</label>
+                            <input type="url" id="mediaUrl" placeholder="https://example.com/media.jpg">
+                        </div>
+                        <div id="formError" class="error-message"></div>
+                    </form>
+                </div>
+            `;
+            mainContent.innerHTML = formHtml;
+            setTimeout(() => { mainContent.style.opacity = 1; }, 50);
 
-        async function loadUserWall(userId) {
-            if (!userId) return;
-            currentView = 'user_wall';
-            viewingUserId = userId;
-            mainContent.innerHTML = '<div class="loading">Loading wall...</div>';
+            const mediaTypeSelect = document.getElementById('mediaType');
+            const mediaUrlGroup = document.getElementById('mediaUrlGroup');
             
-            tg.BackButton.show();
-            tg.BackButton.onClick(loadUsersList);
+            mediaTypeSelect.addEventListener('change', (e) => {
+                if (e.target.value) {
+                    mediaUrlGroup.style.display = 'block';
+                } else {
+                    mediaUrlGroup.style.display = 'none';
+                }
+            });
 
-            try {
-                const wallData = await apiCall(`/api/wall/${userId}`);
-                const wallOwner = wallData.owner;
-                const ownerName = wallOwner.first_name || `User ${wallOwner.id}`;
-                appHeader.textContent = `${ownerName}'s Wall`;
-                renderWallView(userId, ownerName, wallData.posts);
-            } catch (error) {
-                tg.showAlert(`Error loading wall: ${error.message}`);
-                mainContent.innerHTML = `<div class="empty-state">Could not load this wall.</div>`;
-            }
+            tg.MainButton.setText(T.postButton);
+            tg.MainButton.show();
+            tg.MainButton.onClick(() => handleSubmitPost(wallOwnerId));
         }
-        
-        async function submitPost(wallOwnerId) {
-            const postTextArea = document.getElementById('postText');
-            const text = postTextArea.value.trim();
 
-            if (!text) {
-                tg.showAlert('Please write something before posting.');
+        function handleSubmitPost(wallOwnerId) {
+            const text = document.getElementById('postText').value.trim();
+            const mediaType = document.getElementById('mediaType').value;
+            const mediaUrl = document.getElementById('mediaUrl').value.trim();
+            const formError = document.getElementById('formError');
+            formError.textContent = '';
+
+            if (!text && !mediaUrl) {
+                formError.textContent = T.postPlaceholder;
+                tg.HapticFeedback.notificationOccurred('error');
                 return;
             }
+            
+            if (mediaType && !mediaUrl) {
+                 formError.textContent = `${T.postMediaUrl} is required for media post.`;
+                 tg.HapticFeedback.notificationOccurred('error');
+                 return;
+            }
 
             tg.MainButton.showProgress();
             tg.HapticFeedback.impactOccurred('light');
 
-            try {
-                const newPost = await apiCall(`/api/wall/${wallOwnerId}/posts`, 'POST', { text });
-                tg.HapticFeedback.notificationOccurred('success');
-                postTextArea.value = '';
-                
-                if (currentView === 'my_wall') {
-                    loadMyWall();
-                } else if (currentView === 'user_wall') {
-                    loadUserWall(wallOwnerId);
-                }
-            } catch (error) {
-                tg.HapticFeedback.notificationOccurred('error');
-                tg.showAlert(`Failed to post: ${error.message}`);
-            } finally {
-                tg.MainButton.hideProgress();
-            }
+            const payload = {
+                text: text,
+                media_type: mediaType,
+                media_url: mediaUrl
+            };
+
+            apiCall(`/api/post_to_wall/${wallOwnerId}`, 'POST', payload)
+                .then(response => {
+                    tg.HapticFeedback.notificationOccurred('success');
+                    tg.MainButton.hideProgress();
+                    tg.MainButton.hide();
+                    
+                    if (wallOwnerId === currentUser.id) {
+                        loadView('my_wall');
+                    } else {
+                        loadView('user_wall', wallOwnerId);
+                    }
+                })
+                .catch(err => {
+                    tg.HapticFeedback.notificationOccurred('error');
+                    tg.MainButton.hideProgress();
+                    formError.textContent = err.message || 'Failed to submit post.';
+                });
         }
 
         async function init() {
             tg.ready();
+            
+            // 1. Language detection
+            const langCode = tg.initDataUnsafe.user?.language_code;
+            setLanguage(langCode);
+            
             applyThemeParams();
             tg.expand();
             tg.enableClosingConfirmation();
 
             tg.onEvent('themeChanged', applyThemeParams);
             
-            myWallTab.addEventListener('click', () => {
-                if (currentView !== 'my_wall') loadMyWall();
-            });
-            usersTab.addEventListener('click', () => {
-                if (currentView !== 'users_list') loadUsersList();
-            });
-
+            // 2. Auth user
             try {
                 const authResponse = await apiCall('/api/auth_user', 'POST', { init_data: tg.initData });
                 currentUser = authResponse.user;
-                if (!currentUser) throw new Error("Authentication failed, user data not received.");
-                
-                loadMyWall();
             } catch (error) {
                 console.error("Auth error:", error);
-                mainContent.innerHTML = `<div class="empty-state">Error: Could not authenticate with server. Please try reloading.</div>`;
-                tg.showAlert(error.message);
+                // tg.showAlert(T.authFailed); 
+                // Proceed with limited functionality if auth fails
             }
+
+            // 3. Setup Nav Bar
+            document.querySelectorAll('.nav-item').forEach(button => {
+                button.addEventListener('click', () => {
+                    const view = button.dataset.view;
+                    if (view === 'my_wall' && !currentUser) {
+                         tg.showAlert(T.authFailed);
+                         return;
+                    }
+                    loadView(view);
+                });
+            });
+            
+            // 4. Load initial view
+            loadView('feed');
         }
 
         init();
@@ -572,143 +1231,16 @@ WALL_TEMPLATE = '''
 </html>
 '''
 
+
 @app.route('/')
 def main_app_view():
-    return render_template_string(WALL_TEMPLATE)
-
-@app.route('/api/auth_user', methods=['POST'])
-def auth_user():
-    auth_data_str = request.headers.get('X-Telegram-Auth') or request.json.get('init_data')
-    if not auth_data_str:
-        return jsonify({"error": "Authentication data not provided"}), 401
-
-    is_valid, user_data_from_auth = verify_telegram_auth_data(auth_data_str, TELEGRAM_BOT_TOKEN)
-
-    if not is_valid or not user_data_from_auth:
-        return jsonify({"error": "Invalid authentication data"}), 403
-
-    data = load_data()
-    users = data.get('users', {})
-    user_id_str = str(user_data_from_auth.get('id'))
-
-    if user_id_str not in users:
-        users[user_id_str] = {
-            'id': user_data_from_auth.get('id'),
-            'first_name': user_data_from_auth.get('first_name'),
-            'last_name': user_data_from_auth.get('last_name'),
-            'username': user_data_from_auth.get('username'),
-            'photo_url': user_data_from_auth.get('photo_url'),
-            'first_seen': datetime.now().isoformat(),
-            'wall_posts': []
-        }
-    
-    users[user_id_str]['last_seen'] = datetime.now().isoformat()
-    if user_data_from_auth.get('photo_url'):
-        users[user_id_str]['photo_url'] = user_data_from_auth.get('photo_url')
-    
-    data['users'] = users
-    save_data(data)
-    
-    return jsonify({"message": "User authenticated", "user": users[user_id_str]}), 200
-
-def get_authenticated_user(request_headers):
-    auth_data_str = request_headers.get('X-Telegram-Auth')
-    if not auth_data_str: return None
-    is_valid, user_data_from_auth = verify_telegram_auth_data(auth_data_str, TELEGRAM_BOT_TOKEN)
-    if is_valid and user_data_from_auth:
-        return user_data_from_auth
-    return None
-
-@app.route('/api/users', methods=['GET'])
-def get_users():
-    user = get_authenticated_user(request.headers)
-    if not user: return jsonify({"error": "Authentication required"}), 401
-    
-    data = load_data()
-    users_list = [
-        {
-            'id': u.get('id'), 
-            'first_name': u.get('first_name'), 
-            'last_name': u.get('last_name'), 
-            'username': u.get('username'),
-            'photo_url': u.get('photo_url')
-        } 
-        for u in data.get('users', {}).values()
-    ]
-    return jsonify(users_list), 200
-
-@app.route('/api/wall/<wall_owner_id>', methods=['GET'])
-def get_wall(wall_owner_id):
-    user = get_authenticated_user(request.headers)
-    if not user: return jsonify({"error": "Authentication required"}), 401
-
-    data = load_data()
-    owner_data = data.get('users', {}).get(wall_owner_id)
-
-    if not owner_data:
-        return jsonify({"error": "Wall owner not found"}), 404
-        
-    owner_info = {
-        'id': owner_data.get('id'),
-        'first_name': owner_data.get('first_name'),
-        'username': owner_data.get('username')
-    }
-    
-    posts = sorted(owner_data.get('wall_posts', []), key=lambda x: x['timestamp'], reverse=True)
-    
-    return jsonify({"owner": owner_info, "posts": posts}), 200
-
-@app.route('/api/wall/<wall_owner_id>/posts', methods=['POST'])
-def create_post(wall_owner_id):
-    author = get_authenticated_user(request.headers)
-    if not author: return jsonify({"error": "Authentication required"}), 401
-
-    req_data = request.json
-    post_text = req_data.get('text')
-    if not post_text:
-        return jsonify({"error": "Post text cannot be empty"}), 400
-
-    data = load_data()
-    wall_owner = data.get('users', {}).get(wall_owner_id)
-    if not wall_owner:
-        return jsonify({"error": "Wall owner not found"}), 404
-
-    author_id_str = str(author.get('id'))
-    author_full_info = data.get('users', {}).get(author_id_str, {})
-
-    new_post = {
-        "post_id": str(uuid.uuid4()),
-        "author_id": author.get('id'),
-        "author_first_name": author.get('first_name'),
-        "author_username": author.get('username'),
-        "author_photo_url": author_full_info.get('photo_url'),
-        "text": post_text,
-        "timestamp": datetime.now().isoformat(),
-    }
-    
-    if 'wall_posts' not in wall_owner:
-        wall_owner['wall_posts'] = []
-    
-    wall_owner['wall_posts'].append(new_post)
-    save_data(data)
-    
-    if str(wall_owner_id) != str(author.get('id')):
-        author_name = author.get('first_name', 'Someone')
-        author_link = f"@{author.get('username')}" if author.get('username') else f"A user (ID: {author.get('id')})"
-        message = f"<b>New post on your wall!</b>\n\n{author_name} ({author_link}) wrote:\n<i>{post_text}</i>"
-        send_telegram_notification(wall_owner_id, message)
-
-    return jsonify(new_post), 201
+    return render_template_string(MAIN_APP_TEMPLATE)
 
 if __name__ == '__main__':
-    logging.info("Application starting up...")
-    initial_download_success = download_db_from_hf()
-    if initial_download_success:
-        logging.info("Initial data sync from Hugging Face was successful.")
-    else:
-        logging.warning("Initial data sync from Hugging Face failed. Starting with local or empty data.")
-    
+    logging.info("Application starting up. Performing initial data load/download...")
+    download_db_from_hf() 
     load_data()
+    logging.info("Initial data load complete.")
 
     if HF_TOKEN_WRITE:
         backup_thread = threading.Thread(target=periodic_backup, daemon=True)