djs-builder 0.7.0 → 0.7.1-8.1

package/views/levels.ejs

@@ -138,8 +138,35 @@
     .action-btn { padding: 8px 12px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); cursor: pointer; font-size: 14px; transition: all 0.3s; }
     .action-btn:hover { background: var(--accent); border-color: var(--accent); color: white; }
     .action-btn.danger:hover { background: var(--danger); border-color: var(--danger); }
+    .action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+    .action-btn:disabled:hover { background: rgba(255,255,255,0.03); border-color: var(--border); color: var(--text-secondary); }
     
-    .empty-state { text-align: center; padding: 80px 20px; }
+    .reward-card { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; display: flex; align-items: center; justify-content: space-between; transition: all 0.3s; position: relative; overflow: hidden; }
+    .reward-card:hover { border-color: var(--accent); background: rgba(88, 101, 242, 0.05); transform: translateY(-2px); }
+    .reward-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--role-color, var(--accent)); opacity: 0.5; }
+    .reward-icon-wrapper { width: 56px; height: 56px; border-radius: 14px; background: color-mix(in srgb, var(--role-color, var(--accent)) 15%, transparent); display: flex; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--role-color, var(--accent)) 30%, transparent); }
+    .reward-icon-wrapper i { font-size: 28px; color: var(--role-color, var(--accent)); }
+    .reward-content { flex: 1; margin-right: 20px; }
+    .reward-level-tag { font-size: 11px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
+    .reward-role-name { font-size: 18px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
+    .role-indicator { width: 12px; height: 12px; border-radius: 50%; background: var(--role-color, var(--accent)); box-shadow: 0 0 10px var(--role-color, var(--accent)); }
+    .empty-rewards-state { text-align: center; padding: 60px 40px; background: rgba(255,255,255,0.01); border: 2px dashed var(--border); border-radius: var(--radius); grid-column: 1 / -1; }
+    .empty-rewards-icon { font-size: 48px; color: var(--text-muted); opacity: 0.3; margin-bottom: 16px; }
+    .empty-rewards-text { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
+    .empty-rewards-hint { color: var(--text-secondary); font-size: 14px; max-width: 400px; margin: 0 auto; }
+    
+    .readonly-notice { display: flex; align-items: center; gap: 14px; padding: 16px 24px; background: rgba(88, 101, 242, 0.1); border: 2px solid var(--accent); border-radius: var(--radius); margin-bottom: 24px; border-style: dashed; }
+    
+    .role-select { width: 100%; padding: 14px 18px; background: linear-gradient(145deg, #1e2433, #171c28); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 14px; cursor: pointer; transition: all 0.3s; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 14px center; padding-left: 40px; font-weight: 500; }
+    .role-select:hover { border-color: var(--accent); background: linear-gradient(145deg, #252b3d, #1e2433); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
+    .role-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
+    .role-select:disabled { opacity: 0.5; cursor: not-allowed; }
+    .role-select option { background: #1a1f2e; color: var(--text-primary); padding: 14px; font-size: 14px; }
+    .role-select option:checked { background: var(--accent); color: white; }
+    .readonly-notice i { font-size: 24px; color: var(--accent); }
+    .readonly-notice-text { flex: 1; }
+    .readonly-notice-title { font-weight: 700; font-size: 15px; margin-bottom: 2px; }
+    .readonly-notice-desc { font-size: 13px; color: var(--text-secondary); }
     .empty-state i { font-size: 56px; color: var(--text-muted); margin-bottom: 20px; opacity: 0.3; }
     .empty-state h3 { font-size: 20px; margin-bottom: 10px; }
     .empty-state p { color: var(--text-secondary); }
@@ -202,6 +229,142 @@
       .modal-content { width: 95%; margin: 12px; padding: 20px; }
     }
     @media (min-width: 993px) { .mobile-menu-btn { display: none; } }
+    
+    /* Settings Styles */
+    .status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 50px; font-size: 12px; font-weight: 600; }
+    .status-badge.success { background: rgba(16, 185, 129, 0.15); color: var(--success); border: 1px solid rgba(16, 185, 129, 0.3); }
+    
+    .settings-section { background: linear-gradient(145deg, var(--bg-card), rgba(18,18,26,0.6)); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 20px; overflow: hidden; }
+    .section-header { padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: background 0.3s; }
+    .section-header:hover { background: rgba(255,255,255,0.02); }
+    .section-title { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
+    .section-title i { color: var(--accent); font-size: 20px; }
+    .toggle-icon { font-size: 20px; color: var(--text-muted); transition: transform 0.3s; }
+    .section-content { padding: 0 24px 24px; }
+    .section-content.collapsed { display: none; }
+    
+    .setting-card { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
+    .setting-card.vertical { flex-direction: column; align-items: stretch; gap: 14px; }
+    .setting-card.mini { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
+    .setting-info { flex: 1; }
+    .setting-label { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
+    .setting-desc { font-size: 12px; color: var(--text-muted); }
+    
+    .setting-select { padding: 14px 18px; background: linear-gradient(145deg, #1e2433, #171c28); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 14px; width: 100%; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 14px center; padding-left: 40px; transition: all 0.3s; font-weight: 500; }
+    .setting-select:hover { border-color: var(--accent); background: linear-gradient(145deg, #252b3d, #1e2433); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
+    .setting-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
+    .setting-select option { background: #1a1f2e; color: var(--text-primary); padding: 14px 18px; font-size: 14px; }
+    .setting-select option:checked { background: var(--accent); color: white; }
+    .setting-input { padding: 10px 14px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 14px; width: 100%; }
+    .setting-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
+    .setting-input.small { width: 80px; }
+    
+    .input-with-btn { display: flex; gap: 10px; }
+    .input-with-btn input { flex: 1; }
+    
+    .inline-settings { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+    .inline-settings span { color: var(--text-muted); font-size: 13px; }
+    
+    .settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 16px; }
+    
+    .toggle-switch { position: relative; display: inline-block; width: 52px; height: 28px; flex-shrink: 0; }
+    .toggle-switch input { opacity: 0; width: 0; height: 0; }
+    .toggle-slider { position: absolute; cursor: pointer; inset: 0; background: rgba(255,255,255,0.1); transition: 0.3s; border-radius: 28px; }
+    .toggle-slider:before { position: absolute; content: ""; height: 22px; width: 22px; right: 3px; bottom: 3px; background: white; transition: 0.3s; border-radius: 50%; }
+    .toggle-switch input:checked + .toggle-slider { background: var(--accent); }
+    .toggle-switch input:checked + .toggle-slider:before { transform: translateX(-24px); }
+    
+    .add-reward-row { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; padding: 18px; background: linear-gradient(135deg, rgba(88,101,242,0.05), rgba(155,89,182,0.03)); border-radius: var(--radius); border: 2px dashed rgba(88,101,242,0.3); }
+    .rewards-list, .blacklist-list { display: grid; gap: 12px; }
+    .rewards-list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
+    .reward-item { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: linear-gradient(145deg, rgba(88,101,242,0.1), rgba(155,89,182,0.06)); border: 1px solid rgba(88,101,242,0.2); border-radius: 14px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; }
+    .reward-item::before { content: ''; position: absolute; top: 0; right: 0; width: 4px; height: 100%; background: linear-gradient(180deg, var(--accent), #9b59b6); opacity: 0; transition: opacity 0.3s; }
+    .reward-item:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(88,101,242,0.2); }
+    .reward-item:hover::before { opacity: 1; }
+    .blacklist-list { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
+    .blacklist-item { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: rgba(239,68,68,0.05); border: 1px solid rgba(239,68,68,0.2); border-radius: var(--radius); transition: all 0.3s; }
+    .blacklist-item:hover { border-color: var(--danger); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(239,68,68,0.1); }
+    .reward-level { display: flex; align-items: center; justify-content: center; min-width: 52px; height: 52px; background: linear-gradient(145deg, var(--accent), #9b59b6); border-radius: 14px; font-weight: 900; font-size: 18px; color: white; flex-shrink: 0; box-shadow: 0 4px 12px rgba(88,101,242,0.3); }
+    .reward-level i { display: none; }
+    .reward-info { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
+    .reward-info .level-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; }
+    .reward-info .role-name { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 10px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .reward-arrow { display: none; }
+    .reward-role { font-weight: 600; flex: 1; display: flex; align-items: center; gap: 8px; }
+    .reward-role .role-dot, .role-name .role-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 10px currentColor; }
+    .channel-name { flex: 1; color: var(--text-secondary); font-weight: 500; display: flex; align-items: center; gap: 8px; }
+    .channel-name i { color: var(--danger); }
+    
+    .btn-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 10px; color: var(--text-muted); cursor: pointer; transition: all 0.3s; }
+    .btn-icon:hover { background: var(--accent); border-color: var(--accent); color: white; transform: scale(1.1); }
+    .btn-icon.danger:hover { background: var(--danger); border-color: var(--danger); }
+    
+    .empty-mini { text-align: center; padding: 24px; color: var(--text-muted); font-size: 13px; }
+    
+    .empty-rewards-state { text-align: center; padding: 40px 20px; background: linear-gradient(145deg, rgba(88,101,242,0.05), rgba(155,89,182,0.03)); border: 2px dashed rgba(88,101,242,0.2); border-radius: 16px; }
+    .empty-rewards-icon { width: 72px; height: 72px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, rgba(88,101,242,0.15), rgba(155,89,182,0.1)); border-radius: 50%; }
+    .empty-rewards-icon i { font-size: 32px; background: linear-gradient(135deg, var(--accent), #9b59b6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
+    .empty-rewards-text { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
+    .empty-rewards-hint { font-size: 13px; color: var(--text-muted); max-width: 280px; margin: 0 auto; line-height: 1.5; }
+    
+    .notice-card { display: flex; align-items: flex-start; gap: 16px; padding: 20px 24px; background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.3); border-radius: var(--radius); margin-bottom: 24px; }
+    .notice-card i { font-size: 24px; color: var(--warning); flex-shrink: 0; }
+    .notice-card strong { display: block; margin-bottom: 4px; color: var(--warning); }
+    .notice-card p { font-size: 13px; color: var(--text-secondary); margin: 0; }
+    .notice-card code { background: rgba(0,0,0,0.3); padding: 2px 8px; border-radius: 4px; font-family: monospace; font-size: 12px; }
+    
+    .btn-warning { background: linear-gradient(135deg, var(--warning), #d97706); color: white; }
+    
+    /* Placeholders Help Box */
+    .placeholders-help { background: linear-gradient(135deg, rgba(88,101,242,0.1), rgba(155,89,182,0.05)); border: 1px solid rgba(88,101,242,0.2); border-radius: var(--radius-sm); padding: 16px; margin-top: 12px; }
+    .placeholders-title { font-size: 13px; font-weight: 600; color: var(--accent); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
+    .placeholders-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
+    .placeholder-item { display: flex; align-items: center; gap: 8px; font-size: 12px; }
+    .placeholder-code { background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 4px; font-family: monospace; color: var(--accent); }
+    .placeholder-desc { color: var(--text-muted); }
+    
+    /* XP Settings Modal Styles */
+    .xp-settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
+    .xp-setting-card { background: linear-gradient(145deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; text-align: center; }
+    .xp-setting-card:hover { border-color: var(--accent); }
+    .xp-setting-icon { font-size: 28px; margin-bottom: 8px; }
+    .xp-setting-card:nth-child(1) .xp-setting-icon { color: #10b981; }
+    .xp-setting-card:nth-child(2) .xp-setting-icon { color: #f59e0b; }
+    .xp-setting-card:nth-child(3) .xp-setting-icon { color: #8b5cf6; }
+    .xp-setting-card:nth-child(4) .xp-setting-icon { color: #ec4899; }
+    .xp-setting-label { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
+    .xp-setting-card input { text-align: center; font-size: 18px; font-weight: 700; background: transparent; border: none; color: var(--text-primary); width: 100%; }
+    .xp-setting-card input:focus { outline: none; }
+    
+    /* Cooldown & Bonus Cards */
+    .bonus-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 20px; }
+    .bonus-card { background: linear-gradient(145deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 20px; }
+    .bonus-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
+    .bonus-card-title { font-weight: 600; display: flex; align-items: center; gap: 8px; }
+    .bonus-card-title i { color: var(--accent); }
+    .bonus-card-body { display: flex; align-items: center; gap: 12px; }
+    .bonus-card-body span { color: var(--text-muted); font-size: 13px; }
+    
+    /* Role Selector Improved */
+    .role-select-wrapper { position: relative; flex: 1; }
+    .role-select { width: 100%; padding: 14px 18px; background: linear-gradient(145deg, #1e2433, #171c28); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 14px; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 14px center; padding-left: 40px; font-weight: 500; transition: all 0.3s; }
+    .role-select:hover { border-color: var(--accent); background: linear-gradient(145deg, #252b3d, #1e2433); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
+    .role-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
+    .role-select option { background: #1a1f2e; padding: 14px; font-size: 14px; }
+    
+    /* Level Input Wrapper */
+    .level-input-wrapper { position: relative; display: inline-flex; align-items: center; }
+    .level-input-wrapper i { position: absolute; right: 12px; color: var(--accent); font-size: 16px; pointer-events: none; }
+    .level-input-wrapper input { padding-right: 36px !important; }
+    
+    /* Tabs System */
+    .tabs-nav { display: flex; gap: 8px; margin-bottom: 28px; background: rgba(255,255,255,0.02); padding: 6px; border-radius: var(--radius); border: 1px solid var(--border); }
+    .tab-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border-radius: var(--radius-sm); font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: none; background: transparent; color: var(--text-secondary); }
+    .tab-btn:hover { background: rgba(255,255,255,0.03); color: var(--text-primary); }
+    .tab-btn.active { background: linear-gradient(135deg, var(--accent), var(--accent-light)); color: white; box-shadow: 0 4px 15px var(--accent-glow); }
+    .tab-btn i { font-size: 18px; }
+    .tab-content { display: none; animation: fadeIn 0.3s ease; }
+    .tab-content.active { display: block; }
   </style>
 </head>
 <body>
@@ -227,6 +390,7 @@
       <div class="nav-section"><div class="nav-section-title">الميزات</div>
         <a href="/dashboard/<%= guild.id %>/levels" class="nav-link active"><i class="ri-bar-chart-grouped-line"></i><span>نظام المستويات</span></a>
         <a href="/dashboard/<%= guild.id %>/giveaways" class="nav-link"><i class="ri-gift-2-line"></i><span>الهدايا</span></a>
+        <a href="/dashboard/<%= guild.id %>/logs" class="nav-link"><i class="ri-shield-check-line"></i><span>سجلات المراقبة</span></a>
       </div>
     </nav>
     <div class="sidebar-footer"><a href="/dashboard" class="back-btn"><i class="ri-arrow-right-line"></i><span>العودة للوحة التحكم</span></a></div>
@@ -235,49 +399,325 @@
   <main class="main">
     <div class="page-header animate-in">
       <div><h1><i class="ri-bar-chart-grouped-line"></i> نظام المستويات</h1><p>إدارة مستويات ونقاط الأعضاء</p></div>
+      <div style="display: flex; gap: 10px;">
+        <% if (!canModify) { %>
+          <span class="status-badge" style="background: rgba(245, 158, 11, 0.1); color: var(--warning); border: 1px solid rgba(245, 158, 11, 0.3);"><i class="ri-lock-line"></i> وضع القراءة فقط</span>
+        <% } %>
+        <% if (databaseEnabled) { %>
+          <span class="status-badge success"><i class="ri-database-2-line"></i> نظام المستويات مفعّل</span>
+        <% } else if (mongoConnected) { %>
+          <span class="status-badge" style="background: rgba(245, 158, 11, 0.1); color: var(--warning); border: 1px solid rgba(245, 158, 11, 0.3);"><i class="ri-error-warning-line"></i> غير مُفعّل</span>
+        <% } else { %>
+          <span class="status-badge" style="background: rgba(239, 68, 68, 0.1); color: var(--danger); border: 1px solid rgba(239, 68, 68, 0.3);"><i class="ri-database-2-line"></i> قاعدة البيانات غير متصلة</span>
+        <% } %>
+      </div>
     </div>
     
-    <div class="search-section animate-in" style="animation-delay: 0.05s">
-      <div class="search-title"><i class="ri-search-line"></i> البحث عن عضو وإعطاء XP</div>
-      <div class="search-row">
-        <div class="search-input">
-          <i class="ri-search-line"></i>
-          <input type="text" id="memberSearch" placeholder="ابحث عن عضو بالاسم أو المعرف..." autocomplete="off">
-          <div class="search-results" id="searchResults"></div>
+    <% if (!canModify) { %>
+      <div class="readonly-notice animate-in">
+        <i class="ri-information-line"></i>
+        <div class="readonly-notice-text">
+          <div class="readonly-notice-title">وضع العرض فقط مفعل</div>
+          <div class="readonly-notice-desc">تم تعطيل التعديل من لوحة التحكم في إعدادات البوت الرئيسية. يمكنك عرض البيانات ولكن لا يمكنك تعديلها.</div>
         </div>
-        <button class="btn btn-primary" onclick="openAddXPModal()"><i class="ri-add-line"></i> إضافة XP لعضو</button>
       </div>
+    <% } %>
+    
+    <% if (!databaseEnabled && mongoConnected) { %>
+      <div class="readonly-notice animate-in" style="border-color: var(--warning); background: rgba(245, 158, 11, 0.1);">
+        <i class="ri-error-warning-line" style="color: var(--warning);"></i>
+        <div class="readonly-notice-text">
+          <div class="readonly-notice-title">نظام المستويات غير مُفعّل</div>
+          <div class="readonly-notice-desc">لتفعيل نظام المستويات، استخدم <code style="background: rgba(0,0,0,0.3); padding: 2px 6px; border-radius: 4px;">setLevel(client, [{ id: "GUILD_ID", Dashboard: true }])</code> في ملف البوت الرئيسي.</div>
+        </div>
+      </div>
+    <% } %>
+    
+    <!-- Tabs Navigation -->
+    <div class="tabs-nav animate-in" style="animation-delay: 0.02s">
+      <button class="tab-btn active" onclick="switchTab('leaderboard')" id="tab-leaderboard">
+        <i class="ri-trophy-line"></i> الترتيب والمتصدرون
+      </button>
+      <button class="tab-btn" onclick="switchTab('settings')" id="tab-settings">
+        <i class="ri-settings-4-line"></i> إعدادات النظام
+      </button>
     </div>
     
-    <% const totalXP = leaderboard.reduce((sum, u) => sum + (u.totalXP || 0), 0); const highestLevel = leaderboard.length > 0 ? (leaderboard[0].level || 0) : 0; %>
+    <!-- Leaderboard Tab Content -->
+    <div class="tab-content active" id="content-leaderboard">
+      <div class="search-section animate-in" style="animation-delay: 0.05s">
+        <div class="search-title"><i class="ri-search-line"></i> البحث عن عضو وإعطاء XP</div>
+        <div class="search-row">
+          <div class="search-input">
+            <i class="ri-search-line"></i>
+            <input type="text" id="memberSearch" placeholder="ابحث عن عضو بالاسم أو المعرف..." autocomplete="off">
+            <div class="search-results" id="searchResults"></div>
+          </div>
+          <button class="btn btn-primary" onclick="openAddXPModal()" <%= !canModify ? 'disabled' : '' %>><i class="ri-add-line"></i> إضافة XP لعضو</button>
+        </div>
+      </div>
+      
+      <% const totalXP = leaderboard.reduce((sum, u) => sum + (u.totalXP || 0), 0); const highestLevel = leaderboard.length > 0 ? (leaderboard[0].level || 0) : 0; %>
+      
+      <div class="stats-row animate-in" style="animation-delay: 0.1s">
+        <div class="mini-stat"><i class="ri-group-line"></i><div><div class="mini-stat-value"><%= leaderboard.length %></div><div class="mini-stat-label">مستخدم مسجل</div></div></div>
+        <div class="mini-stat"><i class="ri-bar-chart-grouped-line"></i><div><div class="mini-stat-value"><%= highestLevel %></div><div class="mini-stat-label">أعلى مستوى</div></div></div>
+        <div class="mini-stat"><i class="ri-star-line"></i><div><div class="mini-stat-value"><%= totalXP.toLocaleString() %></div><div class="mini-stat-label">إجمالي XP</div></div></div>
+      </div>
+      
+      <% if (leaderboard.length > 0) { %>
+        <% 
+          // XP calculation function based on leveling config
+          function calculateXpNeeded(level, config) {
+            const leveling = config && config.leveling ? config.leveling : { type: 'line', amount: 100 };
+            const type = leveling.type || 'line';
+            const amount = leveling.amount || 100;
+            
+            switch (type) {
+              case 'exponential':
+                return Math.floor(amount * Math.pow(2, level));
+              case 'balanced':
+                const a = leveling.a || 5;
+                const b = leveling.b || 50;
+                const c = leveling.c || 100;
+                return Math.floor(a * Math.pow(level, 2) + b * level + c);
+              case 'line':
+              default:
+                return (level + 1) * amount;
+            }
+          }
+        %>
+        <div class="leaderboard animate-in" style="animation-delay: 0.15s">
+          <div class="leaderboard-header"><h2><i class="ri-trophy-line"></i> المتصدرون</h2></div>
+          <table class="leaderboard-table">
+            <thead><tr><th>الترتيب</th><th>المستخدم</th><th>المستوى</th><th>نقاط XP</th><th>إجراءات</th></tr></thead>
+            <tbody id="leaderboardBody">
+              <% leaderboard.forEach((user, index) => { if (!user) return; const userXP = user.totalXP || 0; const userLevel = user.level || 0; const xpNeeded = calculateXpNeeded(userLevel, levelConfigDb); const progress = xpNeeded > 0 ? Math.min((userXP / xpNeeded) * 100, 100) : 0; const rankClass = index === 0 ? 'gold' : index === 1 ? 'silver' : index === 2 ? 'bronze' : ''; %>
+                <tr data-user-id="<%= user.userId %>">
+                  <td><span class="rank <%= rankClass %>">#<%= index + 1 %></span></td>
+                  <td><div class="user-cell"><img src="<%= user.avatar %>" data-user-id="<%= user.userId %>" alt="" style="border-radius: 12px; border: 2px solid <%= index === 0 ? '#FFD700' : index === 1 ? '#C0C0C0' : index === 2 ? '#CD7F32' : 'var(--border)' %>; padding: 2px; width: 48px; height: 48px;"><div><div class="user-name user-name-<%= user.userId %>"><%= user.username %></div><div class="user-id"><%= user.userId %></div></div></div></td>
+                  <td><span class="level-badge" style="background: <%= index === 0 ? 'linear-gradient(135deg, #FFD700, #FDB931)' : index === 1 ? 'linear-gradient(135deg, #C0C0C0, #8E8E8E)' : index === 2 ? 'linear-gradient(135deg, #CD7F32, #A0522D)' : '' %>"><%= userLevel %></span></td>
+                  <td><div class="xp-bar"><div class="xp-text"><%= userXP.toLocaleString() %> / <%= xpNeeded.toLocaleString() %> XP</div><div class="xp-progress"><div class="xp-fill" style="width: <%= progress %>%; background: <%= index === 0 ? 'linear-gradient(90deg, #FFD700, #FDB931)' : '' %>"></div></div></div></td>
+                  <td><div class="actions-cell"><button class="action-btn" onclick="openEditModal('<%= user.userId %>', <%= userXP %>, <%= userLevel %>)" title="تعديل" <%= !canModify ? 'disabled' : '' %>><i class="ri-edit-line"></i></button><button class="action-btn danger" onclick="resetUser('<%= user.userId %>')" title="إعادة تعيين" <%= !canModify ? 'disabled' : '' %>><i class="ri-refresh-line"></i></button></div></td>
+                </tr>
+              <% }); %>
+            </tbody>
+          </table>
+        </div>
+      <% } else { %>
+        <div class="empty-state animate-in"><i class="ri-bar-chart-grouped-line"></i><h3>لا توجد بيانات</h3><p>لم يكتسب أي عضو نقاط XP بعد</p></div>
+      <% } %>
+    </div>
     
-    <div class="stats-row animate-in" style="animation-delay: 0.1s">
-      <div class="mini-stat"><i class="ri-group-line"></i><div><div class="mini-stat-value"><%= leaderboard.length %></div><div class="mini-stat-label">مستخدم مسجل</div></div></div>
-      <div class="mini-stat"><i class="ri-bar-chart-grouped-line"></i><div><div class="mini-stat-value"><%= highestLevel %></div><div class="mini-stat-label">أعلى مستوى</div></div></div>
-      <div class="mini-stat"><i class="ri-star-line"></i><div><div class="mini-stat-value"><%= totalXP.toLocaleString() %></div><div class="mini-stat-label">إجمالي XP</div></div></div>
+    <!-- Settings Tab Content -->
+    <div class="tab-content" id="content-settings">
+    <% if (databaseEnabled) { %>
+    <!-- Level Settings Section -->
+    <div class="settings-section animate-in" style="animation-delay: 0.03s">
+      <div class="section-header" onclick="toggleSection('levelSettings')">
+        <div class="section-title"><i class="ri-settings-4-line"></i> إعدادات XP المتقدمة</div>
+        <i class="ri-arrow-down-s-line toggle-icon" id="levelSettingsIcon"></i>
+      </div>
+      <div class="section-content collapsed" id="levelSettings">
+        <!-- Enable/Disable Toggle -->
+        <div class="setting-card">
+          <div class="setting-info">
+            <div class="setting-label">تفعيل النظام</div>
+            <div class="setting-desc">تفعيل أو تعطيل نظام المستويات في هذا السيرفر</div>
+          </div>
+          <label class="toggle-switch">
+            <input type="checkbox" id="systemEnabled" <%= (levelConfigDb && !levelConfigDb.disabled) ? 'checked' : '' %> onchange="toggleSystem()" <%= !canModify ? 'disabled' : '' %>>
+            <span class="toggle-slider"></span>
+          </label>
+        </div>
+        
+        <!-- XP Settings Grid -->
+        <div class="xp-settings-grid" style="margin-top: 16px;">
+          <div class="xp-setting-card">
+            <div class="xp-setting-icon"><i class="ri-arrow-down-line"></i></div>
+            <div class="xp-setting-label">أقل XP لكل رسالة</div>
+            <input type="number" id="minXP" value="<%= levelConfigDb && levelConfigDb.minXP ? levelConfigDb.minXP : 15 %>" min="1" <%= !canModify ? 'disabled' : '' %>>
+          </div>
+          <div class="xp-setting-card">
+            <div class="xp-setting-icon"><i class="ri-arrow-up-line"></i></div>
+            <div class="xp-setting-label">أكثر XP لكل رسالة</div>
+            <input type="number" id="maxXP" value="<%= levelConfigDb && levelConfigDb.maxXP ? levelConfigDb.maxXP : 25 %>" min="1" <%= !canModify ? 'disabled' : '' %>>
+          </div>
+          <div class="xp-setting-card">
+            <div class="xp-setting-icon"><i class="ri-percent-line"></i></div>
+            <div class="xp-setting-label">مضاعف XP</div>
+            <input type="number" id="xpMultiplier" value="<%= levelConfigDb && levelConfigDb.xpMultiplier ? levelConfigDb.xpMultiplier : 1 %>" min="0.1" step="0.1" <%= !canModify ? 'disabled' : '' %>>
+          </div>
+          <div class="xp-setting-card">
+            <div class="xp-setting-icon"><i class="ri-trophy-line"></i></div>
+            <div class="xp-setting-label">أقصى مستوى</div>
+            <input type="number" id="maxLevel" value="<%= levelConfigDb && levelConfigDb.maxLevel ? levelConfigDb.maxLevel : 100 %>" min="1" <%= !canModify ? 'disabled' : '' %>>
+          </div>
+        </div>
+        
+        <!-- Cooldown -->
+        <div class="setting-card" style="margin-top: 16px;">
+          <div class="setting-info">
+            <div class="setting-label"><i class="ri-timer-line" style="color: var(--accent); margin-left: 6px;"></i> Cooldown</div>
+            <div class="setting-desc">المدة بالثواني بين الرسائل (0 = معطل)</div>
+          </div>
+          <input type="number" id="cooldown" class="setting-input" style="width: 100px;" value="<%= levelConfigDb && levelConfigDb.cooldown ? levelConfigDb.cooldown : 0 %>" min="0" <%= !canModify ? 'disabled' : '' %>>
+        </div>
+        
+        <!-- Leveling Type -->
+        <div class="setting-card vertical" style="margin-top: 16px;">
+          <div class="setting-info">
+            <div class="setting-label"><i class="ri-bar-chart-line" style="color: var(--accent); margin-left: 6px;"></i> نوع حساب المستوى</div>
+            <div class="setting-desc">اختر طريقة حساب XP المطلوب للترقية</div>
+          </div>
+          <select id="levelingType" class="setting-select" onchange="toggleLevelingOptions()" <%= !canModify ? 'disabled' : '' %>>
+            <option value="line" <%= levelConfigDb && levelConfigDb.leveling && levelConfigDb.leveling.type === 'line' ? 'selected' : (!levelConfigDb || !levelConfigDb.leveling ? 'selected' : '') %>>خطي (سهل)</option>
+            <option value="exponential" <%= levelConfigDb && levelConfigDb.leveling && levelConfigDb.leveling.type === 'exponential' ? 'selected' : '' %>>أسي (صعب)</option>
+            <option value="balanced" <%= levelConfigDb && levelConfigDb.leveling && levelConfigDb.leveling.type === 'balanced' ? 'selected' : '' %>>متوازن (متوسط)</option>
+          </select>
+        </div>
+        
+        <!-- Leveling Amount -->
+        <div id="levelingAmountGroup" class="setting-card" style="margin-top: 16px;">
+          <div class="setting-info">
+            <div class="setting-label">قيمة XP الأساسية (amount)</div>
+            <div class="setting-desc">للخطي: XP = (level + 1) × amount | للأسي: XP = amount × 2^level</div>
+          </div>
+          <input type="number" id="levelingAmount" class="setting-input" style="width: 100px;" value="<%= levelConfigDb && levelConfigDb.leveling && levelConfigDb.leveling.amount ? levelConfigDb.leveling.amount : 100 %>" min="1" <%= !canModify ? 'disabled' : '' %>>
+        </div>
+        
+        <!-- Balanced Options -->
+        <div id="balancedOptions" style="display: none; margin-top: 16px; padding: 16px; background: rgba(255,255,255,0.02); border-radius: 12px; border: 1px solid var(--border);">
+          <div class="setting-desc" style="margin-bottom: 12px;"><i class="ri-function-line"></i> المعادلة: XP = a×level² + b×level + c</div>
+          <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;">
+            <div>
+              <label style="color: var(--muted); font-size: 12px;">معامل a (level²)</label>
+              <input type="number" id="levelingA" class="setting-input" value="<%= levelConfigDb && levelConfigDb.leveling && levelConfigDb.leveling.a ? levelConfigDb.leveling.a : 5 %>" min="1" <%= !canModify ? 'disabled' : '' %>>
+            </div>
+            <div>
+              <label style="color: var(--muted); font-size: 12px;">معامل b (level)</label>
+              <input type="number" id="levelingB" class="setting-input" value="<%= levelConfigDb && levelConfigDb.leveling && levelConfigDb.leveling.b ? levelConfigDb.leveling.b : 50 %>" min="1" <%= !canModify ? 'disabled' : '' %>>
+            </div>
+            <div>
+              <label style="color: var(--muted); font-size: 12px;">ثابت c</label>
+              <input type="number" id="levelingC" class="setting-input" value="<%= levelConfigDb && levelConfigDb.leveling && levelConfigDb.leveling.c ? levelConfigDb.leveling.c : 100 %>" min="0" <%= !canModify ? 'disabled' : '' %>>
+            </div>
+          </div>
+        </div>
+        
+        <!-- Save Button -->
+        <div style="margin-top: 20px; text-align: left;">
+          <button class="btn btn-primary" onclick="saveAllXPSettings()" <%= !canModify ? 'disabled' : '' %>><i class="ri-save-line"></i> حفظ الإعدادات</button>
+        </div>
+      </div>
     </div>
     
-    <% if (leaderboard.length > 0) { %>
-      <div class="leaderboard animate-in" style="animation-delay: 0.15s">
-        <div class="leaderboard-header"><h2><i class="ri-trophy-line"></i> المتصدرون</h2></div>
-        <table class="leaderboard-table">
-          <thead><tr><th>الترتيب</th><th>المستخدم</th><th>المستوى</th><th>نقاط XP</th><th>إجراءات</th></tr></thead>
-          <tbody id="leaderboardBody">
-            <% leaderboard.forEach((user, index) => { if (!user) return; const userXP = user.totalXP || 0; const userLevel = user.level || 0; const xpNeeded = (userLevel + 1) * 100; const progress = xpNeeded > 0 ? Math.min((userXP / xpNeeded) * 100, 100) : 0; const rankClass = index === 0 ? 'gold' : index === 1 ? 'silver' : index === 2 ? 'bronze' : ''; %>
-              <tr data-user-id="<%= user.userId %>">
-                <td><span class="rank <%= rankClass %>">#<%= index + 1 %></span></td>
-                <td><div class="user-cell"><img src="https://cdn.discordapp.com/embed/avatars/<%= index % 5 %>.png" class="user-avatar user-avatar-<%= user.userId %>" data-user-id="<%= user.userId %>" alt=""><div><div class="user-name user-name-<%= user.userId %>"><%= user.userId %></div><div class="user-id"><%= user.userId %></div></div></div></td>
-                <td><span class="level-badge"><%= userLevel %></span></td>
-                <td><div class="xp-bar"><div class="xp-text"><%= userXP.toLocaleString() %> / <%= xpNeeded.toLocaleString() %> XP</div><div class="xp-progress"><div class="xp-fill" style="width: <%= progress %>%"></div></div></div></td>
-                <td><div class="actions-cell"><button class="action-btn" onclick="openEditModal('<%= user.userId %>', <%= userXP %>, <%= userLevel %>)" title="تعديل"><i class="ri-edit-line"></i></button><button class="action-btn danger" onclick="resetUser('<%= user.userId %>')" title="إعادة تعيين"><i class="ri-refresh-line"></i></button></div></td>
-              </tr>
+    <!-- Role Rewards Section -->
+    <div class="settings-section animate-in" style="animation-delay: 0.06s">
+      <div class="section-header" onclick="toggleSection('roleRewards')">
+        <div class="section-title"><i class="ri-vip-crown-line"></i> مكافآت الرتب</div>
+        <i class="ri-arrow-down-s-line toggle-icon" id="roleRewardsIcon"></i>
+      </div>
+      <div class="section-content collapsed" id="roleRewards">
+        <div class="setting-desc" style="margin-bottom: 16px;">أضف رتب تُعطى تلقائياً عند الوصول لمستوى معين</div>
+        
+        <div class="add-reward-row" style="border-style: solid; background: rgba(255,255,255,0.02); border-color: var(--border);">
+          <div class="level-input-wrapper" style="flex: 1;">
+            <i class="ri-medal-fill"></i>
+            <input type="number" id="rewardLevel" class="setting-input" placeholder="رقم المستوى" min="1" style="padding-right: 40px;" <%= !canModify ? 'disabled' : '' %>>
+          </div>
+          <div class="role-select-wrapper" style="flex: 2;">
+            <select id="rewardRole" class="role-select" <%= !canModify ? 'disabled' : '' %>>
+              <option value="">🎭 اختر الرتبة التي سيحصل عليها العضو...</option>
+              <% roles.forEach(role => { %>
+                <option value="<%= role.id %>" data-color="<%= role.color %>">@<%= role.name %></option>
+              <% }); %>
+            </select>
+          </div>
+          <button class="btn btn-primary" onclick="addRoleReward()" <%= !canModify ? 'disabled' : '' %> style="padding: 12px 30px;">
+            <i class="ri-add-circle-line"></i> إضافة للمكافآت
+          </button>
+        </div>
+        
+        <div class="rewards-list" id="rewardsList" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px;">
+          <% if (levelConfigDb && levelConfigDb.roleReward && Object.keys(levelConfigDb.roleReward).length > 0) { %>
+            <% Object.entries(levelConfigDb.roleReward).sort((a,b) => parseInt(a[0]) - parseInt(b[0])).forEach(([lvl, roleId]) => { 
+                const role = roles.find(r => r.id === roleId);
+                const roleColor = role && role.color && role.color !== '#000000' ? role.color : '#5865F2';
+            %>
+              <div class="reward-card" style="--role-color: <%= roleColor %>;">
+                <div class="reward-icon-wrapper">
+                  <i class="ri-vip-medal-fill"></i>
+                </div>
+                <div class="reward-content">
+                  <div class="reward-level-tag">المستوى <%= lvl %></div>
+                  <div class="reward-role-name">
+                    <span class="role-indicator"></span>
+                    <%= role ? role.name : 'رتبة محذوفة' %>
+                  </div>
+                </div>
+                <button class="btn-icon danger" onclick="removeRoleReward(<%= lvl %>, '<%= roleId %>')" title="حذف" <%= !canModify ? 'disabled' : '' %> style="width: 42px; height: 42px; border-radius: 12px; background: rgba(239, 68, 68, 0.1); color: var(--danger); border: 1px solid rgba(239, 68, 68, 0.2);">
+                  <i class="ri-delete-bin-line"></i>
+                </button>
+              </div>
             <% }); %>
-          </tbody>
-        </table>
+          <% } else { %>
+            <div class="empty-rewards-state">
+              <div class="empty-rewards-icon"><i class="ri-medal-fill"></i></div>
+              <div class="empty-rewards-text">قائمة المكافآت فارغة</div>
+              <div class="empty-rewards-hint">لا توجد رتب مكافآت مسجلة حالياً. ابدأ بإضافة بعض المكافآت لتحفيز أعضاء السيرفر على التفاعل!</div>
+            </div>
+          <% } %>
+        </div>
       </div>
+    </div>
+    
+    <!-- Blacklisted Channels Section -->
+    <div class="settings-section animate-in" style="animation-delay: 0.09s">
+      <div class="section-header" onclick="toggleSection('blacklist')">
+        <div class="section-title"><i class="ri-forbid-line"></i> القنوات المحظورة</div>
+        <i class="ri-arrow-down-s-line toggle-icon" id="blacklistIcon"></i>
+      </div>
+      <div class="section-content collapsed" id="blacklist">
+        <div class="setting-desc" style="margin-bottom: 16px;">القنوات التي لا يُكتسب فيها XP</div>
+        
+        <div class="add-reward-row">
+          <select id="blacklistChannel" class="setting-select" style="flex: 1;" <%= !canModify ? 'disabled' : '' %>>
+            <option value="">🔍 اختر قناة...</option>
+            <% channels.forEach(ch => { %>
+              <option value="<%= ch.id %>"># <%= ch.name %></option>
+            <% }); %>
+          </select>
+          <button class="btn btn-warning" onclick="addBlacklistChannel()" <%= !canModify ? 'disabled' : '' %>><i class="ri-forbid-line"></i> إضافة للقائمة</button>
+        </div>
+        
+        <div class="blacklist-list" id="blacklistList">
+          <% if (levelConfigDb && levelConfigDb.blacklistedChannels && levelConfigDb.blacklistedChannels.length > 0) { %>
+            <% levelConfigDb.blacklistedChannels.forEach(chId => { 
+              const ch = channels.find(c => c.id === chId);
+            %>
+              <div class="blacklist-item" data-channel="<%= chId %>">
+                <span class="channel-name"><i class="ri-hashtag"></i> <%= ch ? ch.name : 'قناة محذوفة' %></span>
+                <button class="btn-icon danger" onclick="removeBlacklistChannel('<%= chId %>')" title="إزالة" <%= !canModify ? 'disabled' : '' %>><i class="ri-delete-bin-line"></i></button>
+              </div>
+            <% }); %>
+          <% } else { %>
+            <div class="empty-mini"><i class="ri-checkbox-circle-line" style="font-size: 32px; opacity: 0.3; margin-bottom: 8px; display: block; color: var(--success);"></i>جميع القنوات مفعّلة<br><small style="color: var(--text-muted);">لم يتم حظر أي قناة</small></div>
+          <% } %>
+        </div>
+      </div>
+    </div>
     <% } else { %>
-      <div class="empty-state animate-in"><i class="ri-bar-chart-grouped-line"></i><h3>لا توجد بيانات</h3><p>لم يكتسب أي عضو نقاط XP بعد</p></div>
+    <!-- Database Mode Not Enabled Notice -->
+    <div class="notice-card animate-in" style="animation-delay: 0.03s">
+      <i class="ri-information-line"></i>
+      <div>
+        <strong>وضع قاعدة البيانات غير مفعّل</strong>
+        <p>الإعدادات تُدار تلقائياً. تأكد من اتصال قاعدة البيانات.</p>
+      </div>
+    </div>
     <% } %>
+    </div>
   </main>
   
   <div class="modal" id="editModal">
@@ -303,11 +743,211 @@
     </div>
   </div>
   
+  <!-- Confirm Modal -->
+  <div class="modal" id="confirmModal">
+    <div class="modal-content" style="max-width: 400px;">
+      <div class="modal-header">
+        <h3 id="confirmTitle"><i class="ri-question-line" style="color: var(--warning);"></i> تأكيد</h3>
+        <button class="modal-close" onclick="closeConfirmModal()">&times;</button>
+      </div>
+      <div class="modal-body">
+        <p id="confirmMessage" style="font-size: 15px; text-align: center; padding: 10px 0;"></p>
+      </div>
+      <div class="modal-footer" style="justify-content: center;">
+        <button class="btn btn-secondary" onclick="closeConfirmModal()">إلغاء</button>
+        <button class="btn btn-primary" id="confirmBtn" style="background: var(--danger);"><i class="ri-check-line"></i> تأكيد</button>
+      </div>
+    </div>
+  </div>
+  
   <div class="toast" id="toast"></div>
   
   <script>
     const guildId = '<%= guild.id %>';
+    const databaseEnabled = <%= databaseEnabled ? 'true' : 'false' %>;
+    
     function showToast(message, type = 'success') { const toast = document.getElementById('toast'); toast.textContent = message; toast.className = 'toast ' + type + ' show'; setTimeout(() => toast.classList.remove('show'), 3000); }
+    
+    // Confirm Modal Functions
+    let confirmCallback = null;
+    function showConfirm(message, callback, title = 'تأكيد') {
+      document.getElementById('confirmMessage').textContent = message;
+      document.getElementById('confirmTitle').innerHTML = '<i class="ri-question-line" style="color: var(--warning);"></i> ' + title;
+      confirmCallback = callback;
+      document.getElementById('confirmModal').classList.add('show');
+    }
+    function closeConfirmModal() {
+      document.getElementById('confirmModal').classList.remove('show');
+      confirmCallback = null;
+    }
+    document.getElementById('confirmBtn').addEventListener('click', function() {
+      if (confirmCallback) confirmCallback();
+      closeConfirmModal();
+    });
+    
+    function toggleSection(id) {
+      const content = document.getElementById(id);
+      const icon = document.getElementById(id + 'Icon');
+      content.classList.toggle('collapsed');
+      icon.style.transform = content.classList.contains('collapsed') ? '' : 'rotate(180deg)';
+    }
+    
+    // Tab Switching Function
+    function switchTab(tabName) {
+      // Remove active from all tabs and contents
+      document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
+      document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
+      
+      // Add active to selected tab and content
+      document.getElementById('tab-' + tabName).classList.add('active');
+      document.getElementById('content-' + tabName).classList.add('active');
+      
+      // Update URL hash without reload
+      history.replaceState(null, null, '#' + tabName);
+    }
+    
+    // Restore tab from URL hash on page load
+    document.addEventListener('DOMContentLoaded', function() {
+      const hash = window.location.hash.replace('#', '');
+      if (hash && (hash === 'settings' || hash === 'leaderboard')) {
+        switchTab(hash);
+      }
+    });
+    
+    function toggleLevelingOptions() {
+      const type = document.getElementById('levelingType').value;
+      const balancedOptions = document.getElementById('balancedOptions');
+      const amountGroup = document.getElementById('levelingAmountGroup');
+      if (type === 'balanced') {
+        balancedOptions.style.display = 'block';
+        amountGroup.style.display = 'none';
+      } else {
+        balancedOptions.style.display = 'none';
+        amountGroup.style.display = 'block';
+      }
+    }
+    // Run on load
+    toggleLevelingOptions();
+    
+    async function saveAllXPSettings() {
+      const minXP = parseInt(document.getElementById('minXP').value) || 15;
+      const maxXP = parseInt(document.getElementById('maxXP').value) || 25;
+      const xpMultiplier = parseFloat(document.getElementById('xpMultiplier').value) || 1;
+      const maxLevel = parseInt(document.getElementById('maxLevel').value) || 100;
+      const cooldown = parseInt(document.getElementById('cooldown').value) || 0;
+      
+      // Leveling settings
+      const leveling = {
+        type: document.getElementById('levelingType').value,
+        amount: parseInt(document.getElementById('levelingAmount').value) || 100,
+        a: parseInt(document.getElementById('levelingA').value) || 5,
+        b: parseInt(document.getElementById('levelingB').value) || 50,
+        c: parseInt(document.getElementById('levelingC').value) || 100,
+      };
+      
+      try {
+        const res = await fetch(`/api/${guildId}/level/config/xp`, { 
+          method: 'POST', 
+          headers: { 'Content-Type': 'application/json' }, 
+          body: JSON.stringify({ 
+            minXP, maxXP, xpMultiplier, maxLevel, cooldown, leveling
+          }) 
+        });
+        const data = await res.json();
+        if (data.success) { 
+          showToast('تم حفظ جميع الإعدادات بنجاح ✓'); 
+        } else showToast(data.error || 'حدث خطأ', 'error');
+      } catch (e) { showToast('حدث خطأ في الاتصال', 'error'); }
+    }
+    
+    // Level Config API Functions
+    async function toggleSystem() {
+      const enabled = document.getElementById('systemEnabled').checked;
+      try {
+        const res = await fetch(`/api/${guildId}/level/config/toggle`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ disabled: !enabled }) });
+        const data = await res.json();
+        if (data.success) showToast(enabled ? 'تم تفعيل النظام' : 'تم تعطيل النظام');
+        else showToast(data.error || 'حدث خطأ', 'error');
+      } catch (e) { showToast('حدث خطأ في الاتصال', 'error'); }
+    }
+    
+    async function updateXPSettings() {
+      const minXP = parseInt(document.getElementById('minXP').value) || 15;
+      const maxXP = parseInt(document.getElementById('maxXP').value) || 25;
+      const xpMultiplier = parseFloat(document.getElementById('xpMultiplier').value) || 1;
+      const maxLevel = parseInt(document.getElementById('maxLevel').value) || 100;
+      try {
+        const res = await fetch(`/api/${guildId}/level/config/xp`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ minXP, maxXP, xpMultiplier, maxLevel }) });
+        const data = await res.json();
+        if (data.success) showToast('تم تحديث إعدادات XP');
+        else showToast(data.error || 'حدث خطأ', 'error');
+      } catch (e) { showToast('حدث خطأ في الاتصال', 'error'); }
+    }
+    
+    async function updateCooldown() {
+      const cooldown = parseInt(document.getElementById('cooldown').value) || 0;
+      try {
+        const res = await fetch(`/api/${guildId}/level/config/xp`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ cooldown }) });
+        const data = await res.json();
+        if (data.success) showToast('تم تحديث إعدادات Cooldown');
+        else showToast(data.error || 'حدث خطأ', 'error');
+      } catch (e) { showToast('حدث خطأ في الاتصال', 'error'); }
+    }
+    
+    async function addRoleReward() {
+      const level = parseInt(document.getElementById('rewardLevel').value);
+      const roleId = document.getElementById('rewardRole').value;
+      if (!level || level < 1) return showToast('أدخل مستوى صحيح', 'error');
+      if (!roleId) return showToast('اختر رتبة', 'error');
+      try {
+        const res = await fetch(`/api/${guildId}/level/config/role`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ level, roleId }) });
+        const data = await res.json();
+        if (data.success) { 
+          showToast('تمت إضافة مكافأة الرتبة'); 
+          document.getElementById('rewardLevel').value = '';
+          document.getElementById('rewardRole').value = '';
+          setTimeout(() => { window.location.href = window.location.pathname + '#settings'; window.location.reload(); }, 800);
+        }
+        else showToast(data.error || 'حدث خطأ', 'error');
+      } catch (e) { showToast('حدث خطأ في الاتصال', 'error'); }
+    }
+    
+    function removeRoleReward(level, roleId) {
+      showConfirm('هل تريد حذف هذه المكافأة؟', async () => {
+        try {
+          const res = await fetch(`/api/${guildId}/level/config/role`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ level, roleId: null }) });
+          const data = await res.json();
+          if (data.success) { showToast('تم حذف المكافأة'); document.querySelector(`[data-level="${level}"][data-role="${roleId}"]`).remove(); }
+          else showToast(data.error || 'حدث خطأ', 'error');
+        } catch (e) { showToast('حدث خطأ في الاتصال', 'error'); }
+      }, 'حذف المكافأة');
+    }
+    
+    async function addBlacklistChannel() {
+      const channelId = document.getElementById('blacklistChannel').value;
+      if (!channelId) return showToast('اختر قناة', 'error');
+      try {
+        const res = await fetch(`/api/${guildId}/level/config/blacklist`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ channelId, action: 'add' }) });
+        const data = await res.json();
+        if (data.success) { 
+          showToast('تمت إضافة القناة للقائمة السوداء'); 
+          setTimeout(() => { window.location.href = window.location.pathname + '#settings'; window.location.reload(); }, 800);
+        }
+        else showToast(data.error || 'حدث خطأ', 'error');
+      } catch (e) { showToast('حدث خطأ في الاتصال', 'error'); }
+    }
+    
+    function removeBlacklistChannel(channelId) {
+      showConfirm('هل تريد إزالة هذه القناة من القائمة السوداء؟', async () => {
+        try {
+          const res = await fetch(`/api/${guildId}/level/config/blacklist`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ channelId, action: 'remove' }) });
+          const data = await res.json();
+          if (data.success) { showToast('تمت إزالة القناة'); document.querySelector(`[data-channel="${channelId}"]`).remove(); }
+          else showToast(data.error || 'حدث خطأ', 'error');
+        } catch (e) { showToast('حدث خطأ في الاتصال', 'error'); }
+      }, 'إزالة القناة');
+    }
+    
     async function loadUserData() { const userIds = [...document.querySelectorAll('[data-user-id]')].map(el => el.dataset.userId); const uniqueIds = [...new Set(userIds)]; for (const userId of uniqueIds) { try { const res = await fetch(`/api/${guildId}/member/${userId}`); const data = await res.json(); if (data.user) { const avatarUrl = data.user.avatar ? `https://cdn.discordapp.com/avatars/${userId}/${data.user.avatar}.png?size=64` : `https://cdn.discordapp.com/embed/avatars/${parseInt(userId) % 5}.png`; document.querySelectorAll(`.user-avatar-${userId}`).forEach(img => img.src = avatarUrl); document.querySelectorAll(`.user-name-${userId}`).forEach(el => el.textContent = data.user.username || data.user.global_name || userId); } } catch (e) { console.error('Error loading user:', userId, e); } } }
     let searchTimeout; const searchInput = document.getElementById('memberSearch'); const searchResults = document.getElementById('searchResults');
     searchInput.addEventListener('input', function() { clearTimeout(searchTimeout); const query = this.value.trim(); if (query.length < 2) { searchResults.classList.remove('show'); return; } searchTimeout = setTimeout(async () => { try { const res = await fetch(`/api/${guildId}/members/search?q=${encodeURIComponent(query)}`); const data = await res.json(); if (data.members && data.members.length > 0) { searchResults.innerHTML = data.members.map(m => `<div class="search-result-item" onclick="selectMember('${m.id}', '${m.username}', '${m.avatar || ''}')"><img src="${m.avatar ? `https://cdn.discordapp.com/avatars/${m.id}/${m.avatar}.png?size=64` : `https://cdn.discordapp.com/embed/avatars/${parseInt(m.id) % 5}.png`}" alt=""><div><div class="name">${m.displayName || m.username}</div><div class="tag">${m.username}</div></div></div>`).join(''); searchResults.classList.add('show'); } else { searchResults.innerHTML = '<div style="padding: 16px; text-align: center; color: var(--text-muted);">لا توجد نتائج</div>'; searchResults.classList.add('show'); } } catch (e) { searchResults.classList.remove('show'); } }, 300); });
@@ -319,7 +959,7 @@
     function openAddXPModal() { document.getElementById('addXPModal').classList.add('show'); }
     function closeAddXPModal() { document.getElementById('addXPModal').classList.remove('show'); document.getElementById('newUserId').value = ''; searchInput.value = ''; }
     async function addXPToUser() { const userId = document.getElementById('newUserId').value.trim(); const xp = parseInt(document.getElementById('newUserXP').value) || 100; const level = parseInt(document.getElementById('newUserLevel').value) || 0; if (!userId) return showToast('أدخل معرف العضو', 'error'); try { const res = await fetch(`/api/${guildId}/level/add`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ userId, xp, level }) }); const data = await res.json(); if (data.success) { showToast('تمت الإضافة بنجاح'); closeAddXPModal(); setTimeout(() => location.reload(), 1000); } else showToast(data.error || 'حدث خطأ', 'error'); } catch (e) { showToast('حدث خطأ في الاتصال', 'error'); } }
-    async function resetUser(userId) { if (!confirm('هل أنت متأكد من إعادة تعيين بيانات هذا المستخدم؟')) return; try { const res = await fetch(`/api/${guildId}/level/reset`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ userId }) }); const data = await res.json(); if (data.success) { showToast('تمت إعادة التعيين'); setTimeout(() => location.reload(), 1000); } else showToast(data.error || 'حدث خطأ', 'error'); } catch (e) { showToast('حدث خطأ', 'error'); } }
+    function resetUser(userId) { showConfirm('هل أنت متأكد من إعادة تعيين بيانات هذا المستخدم؟', async () => { try { const res = await fetch(`/api/${guildId}/level/reset`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ userId }) }); const data = await res.json(); if (data.success) { showToast('تمت إعادة التعيين'); setTimeout(() => location.reload(), 1000); } else showToast(data.error || 'حدث خطأ', 'error'); } catch (e) { showToast('حدث خطأ', 'error'); } }, 'إعادة تعيين'); }
     loadUserData();
   </script>
 </body>