import React, { useState, useEffect, useMemo } from 'react'; import { notificationService, NotificationContainer } from 'notificationService'; import SyncForm from 'SyncForm'; import ProtectedFormAccess from 'ProtectedFormAccess'; // Import ProtectedFormAccess import { badgeService } from 'badgeService'; import { autoSyncService } from 'autoSyncService'; import BadgeModal from 'BadgeModal'; import DisciplineHonorRoll from 'DisciplineHonorRoll'; import DisciplineAscensionShowcase from 'DisciplineAscensionShowcase'; import NotableAchievements from 'NotableAchievements'; // Import the new NotableAchievements component import VerticalNav from 'VerticalNav'; // Import the new VerticalNav component import { applyVerticalNavStyles } from 'verticalNavStyles'; // Import styles for VerticalNav import { getStorageKey } from 'utils'; import { applyPedestalStyles } from 'pedestalStyles'; // Import pedestal styles import { applyBadgeModalStyles } from 'badgeModalStyles'; // Import badge modal styles import { applyHallOfFameStyles } from 'hallOfFameStyles'; import { applyDisciplineAscensionShowcaseStyles } from 'disciplineAscensionShowcaseStyles'; import { applyNotableAchievementsStyles } from 'notableAchievementsStyles'; // Import styles for NotableAchievements import TransformationEvent from 'TransformationEvent'; import FeaturedStory from 'FeaturedStory'; // Import the FeaturedStory component import { applyTransformationEventStyles } from 'transformationEventStyles'; import { applyStoryModalStyles } from 'storyModalStyles'; // Import Story Modal styles import { applyFeaturedStoryStyles } from 'featuredStoryStyles'; // Import FeaturedStory styles import { applySyncFormStyles } from 'syncFormStyles'; // Import SyncForm styles export const HallOfFame = () => { const [loading, setLoading] = useState(true); // REMOVE: const [showSettings, setShowSettings] = useState(false); const [topBadges, setTopBadges] = useState([]); // State for top 3 badges (pedestal) // REMOVE: const [showBadgeManager, setShowBadgeManager] = useState(false); const [selectedBadgeInfo, setSelectedBadgeInfo] = useState(null); // Changed to reflect it holds info for modal const [allUsers, setAllUsers] = useState([]); // State for all users from the service const [allBadgeDefinitions, setAllBadgeDefinitions] = useState([]); // State for all badge definitions const [showUnifiedSettings, setShowUnifiedSettings] = useState(false); // New state for the unified modal // REMOVE: const [configType, setConfigType] = useState('folder'); // 'list' or 'folder' - Always folder now const [autoSyncEnabled, setAutoSyncEnabled] = useState(false); const [lastSyncTime, setLastSyncTime] = useState(null); // badgeLoaded state might need adjustment later depending on how top 3 are displayed const [badgeLoaded, setBadgeLoaded] = useState([false, false, false]); const [notableAchievementsData, setNotableAchievementsData] = useState([]); // Renamed state for notable achievements const [disciplineLevelFieldId, setDisciplineLevelFieldId] = useState(''); // State for discipline level custom field ID const [disciplineScoreFieldId, setDisciplineScoreFieldId] = useState(''); // New state for discipline score custom field ID // const [ascensionDateFieldId, setAscensionDateFieldId] = useState(''); // State for ascension date field ID - REMOVED const [transformationGemsFieldId, setTransformationGemsFieldId] = useState(''); // State for transformation gems field ID const [achievementDateFieldId, setAchievementDateFieldId] = useState(''); // State for achievement date field ID (for weekly achievements) const [storyListId, setStoryListId] = useState(''); // State for Story List ID const [userRelationshipFieldId, setUserRelationshipFieldId] = useState(''); // State for User Relationship Field ID in Story List const [sharePrivateFieldId, setSharePrivateFieldId] = useState(''); // State for Share/Private Field ID in Story List const [transformationStories, setTransformationStories] = useState([]); // State for transformation stories const [featuredTransformationStory, setFeaturedTransformationStory] = useState(null); // State for the featured story const [storySpecificGemsFieldId, setStorySpecificGemsFieldId] = useState(''); // State for Story Task specific gems field ID const [isPasswordPromptVisible, setIsPasswordPromptVisible] = useState(false); // State for password prompt // REMOVE: const [activeDisciplineTab, setActiveDisciplineTab] = useState(1); const validTransformationStories = useMemo(() => { if (!transformationStories || transformationStories.length === 0) { return []; } // console.log('[HallOfFame validTransformationStories] Input transformationStories:', transformationStories); // REMOVED return transformationStories.filter(story => { // console.log(`[HallOfFame validTransformationStories filter] Processing story ID: ${story?.id}, Title: ${story?.title}, Original Gems:`, story?.transformationGems, `Type: ${typeof story?.transformationGems}`); // REMOVED if (story && typeof story.transformationGems !== 'undefined' && story.transformationGems !== null) { const gemsStr = String(story.transformationGems).trim(); if (gemsStr.length > 0) { const parsedNum = Number(gemsStr); const isValid = !isNaN(parsedNum) && Number.isFinite(parsedNum) && parsedNum > 0; // console.log(`[HallOfFame validTransformationStories filter] Story ID: ${story?.id}, GemsStr: "${gemsStr}", ParsedNum: ${parsedNum}, IsValid: ${isValid}`); // REMOVED return isValid; } // console.log(`[HallOfFame validTransformationStories filter] Story ID: ${story?.id}, GemsStr is empty after trim. Original:`, story?.transformationGems); // REMOVED } else { // console.log(`[HallOfFame validTransformationStories filter] Story ID: ${story?.id}, Gems is undefined, null, or story is falsy. Original Gems:`, story?.transformationGems); // REMOVED } return false; }); }, [transformationStories]); useEffect(() => { // console.log('[HallOfFame] validTransformationStories updated:', validTransformationStories); // REMOVED }, [validTransformationStories]); useEffect(() => { applyPedestalStyles(); // Apply pedestal styles applyBadgeModalStyles(); // Apply badge modal styles applyHallOfFameStyles(); applyDisciplineAscensionShowcaseStyles(); applyNotableAchievementsStyles(); applyTransformationEventStyles(); applyStoryModalStyles(); // Apply styles for StoryModal applyFeaturedStoryStyles(); // Apply styles for FeaturedStory applyVerticalNavStyles(); // Apply styles for VerticalNav applySyncFormStyles(); // Apply styles for SyncForm // Khởi tạo autoSyncService và đọc cài đặt const syncSettings = autoSyncService.initialize(); setAutoSyncEnabled(syncSettings.enabled); // Lấy thời gian đồng bộ cuối cùng nếu có const lastSync = autoSyncService.getLastSyncTime(); if (lastSync) { setLastSyncTime(lastSync); } // Tự động tải dữ liệu huy hiệu từ lần đồng bộ trước nếu có const loadExistingData = async () => { try { const lastSyncKey = getStorageKey('lastSync'); // Sử dụng hàm tiện ích const savedData = localStorage.getItem(lastSyncKey); if (savedData) { const { data } = JSON.parse(savedData); // Expect data to be an object now: { pedestalBadges, allUsers, allBadgeDefinitions } if (data && Array.isArray(data.pedestalBadges)) { setTopBadges(data.pedestalBadges); if (Array.isArray(data.allUsers)) setAllUsers(data.allUsers); if (Array.isArray(data.allBadgeDefinitions)) setAllBadgeDefinitions(data.allBadgeDefinitions); if (Array.isArray(data.notableAchievementsData)) setNotableAchievementsData(data.notableAchievementsData); // Updated to use new state setter if (Array.isArray(data.transformationStories)) { setTransformationStories(data.transformationStories); // Load transformation stories // console.log('[HallOfFame] Loaded transformationStories from localStorage:', data.transformationStories); // REMOVED } // Load disciplineLevelFieldId from settings if available in saved data (it might not be initially) if (data.settings && data.settings.disciplineLevelFieldId) { setDisciplineLevelFieldId(data.settings.disciplineLevelFieldId); } // Load disciplineScoreFieldId from settings if available if (data.settings && data.settings.disciplineScoreFieldId) { setDisciplineScoreFieldId(data.settings.disciplineScoreFieldId); } // Load transformationGemsFieldId from settings if available if (data.settings && data.settings.transformationGemsFieldId) { setTransformationGemsFieldId(data.settings.transformationGemsFieldId); } // REMOVED: Load ascensionDateFieldId from settings // if (data.settings && data.settings.ascensionDateFieldId) { // setAscensionDateFieldId(data.settings.ascensionDateFieldId); // } // Load achievementDateFieldId from settings if available if (data.settings && data.settings.achievementDateFieldId) { setAchievementDateFieldId(data.settings.achievementDateFieldId); } // Load storyListId from settings if available if (data.settings && data.settings.storyListId) { setStoryListId(data.settings.storyListId); } // Load userRelationshipFieldId from settings if available if (data.settings && data.settings.userRelationshipFieldId) { setUserRelationshipFieldId(data.settings.userRelationshipFieldId); } // Load sharePrivateFieldId from settings if available if (data.settings && data.settings.sharePrivateFieldId) { setSharePrivateFieldId(data.settings.sharePrivateFieldId); } if (data.settings && data.settings.storySpecificGemsFieldId) { setStorySpecificGemsFieldId(data.settings.storySpecificGemsFieldId); } setBadgeLoaded([false, false, false]); } } } catch (error) { // console.error('Lỗi khi tải dữ liệu đã lưu:', error); } finally { // Tắt trạng thái đang tải setLoading(false); } }; loadExistingData(); // Sample data for Weekly Users With Achievements has been removed to prevent overriding actual data. // Cleanup khi component unmount return () => { // Không dừng auto sync khi thoát component để nó tiếp tục chạy nền }; }, []); useEffect(() => { if (validTransformationStories && validTransformationStories.length > 0) { // Use validTransformationStories let bestStory = null; let maxGems = -1; // Initialize with -1 to correctly handle stories with 0 gems if needed, though current logic filters for >0 let latestTimestamp = 0; for (const story of validTransformationStories) { // console.log(`[HallOfFame featuredStoryEffect] Processing story ID: ${story?.id}, Title: ${story?.title}, Gems: ${story?.transformationGems}, DateUpdated: ${story?.storyDateUpdatedTimestamp}`); // REMOVED let currentGemsNum = 0; if (story && typeof story.transformationGems !== 'undefined' && story.transformationGems !== null) { const gemsStr = String(story.transformationGems).trim(); if (gemsStr.length > 0) { const parsedNum = Number(gemsStr); if (!isNaN(parsedNum) && Number.isFinite(parsedNum)) { currentGemsNum = parsedNum; } } } // Only consider stories with positive gem counts if (currentGemsNum > 0) { if (currentGemsNum > maxGems) { maxGems = currentGemsNum; latestTimestamp = story.storyDateUpdatedTimestamp || 0; bestStory = story; // console.log(`[HallOfFame featuredStoryEffect] New bestStory (more gems) ID: ${bestStory?.id}, maxGems: ${maxGems}, timestamp: ${latestTimestamp}`); // REMOVED } else if (currentGemsNum === maxGems) { const currentStoryTimestamp = story.storyDateUpdatedTimestamp || 0; if (currentStoryTimestamp > latestTimestamp) { latestTimestamp = currentStoryTimestamp; bestStory = story; // console.log(`[HallOfFame featuredStoryEffect] New bestStory (same gems, newer) ID: ${bestStory?.id}, maxGems: ${maxGems}, timestamp: ${latestTimestamp}`); // REMOVED } } } } setFeaturedTransformationStory(bestStory); // console.log('[HallOfFame] Featured transformation story set:', bestStory); // REMOVED } else { setFeaturedTransformationStory(null); // console.log('[HallOfFame] No valid transformation stories, featuredTransformationStory set to null.'); // REMOVED } }, [validTransformationStories]); // REMOVED: useEffect to set configType based on saved settings // useEffect(() => { // if (showUnifiedSettings) { // const savedFolderSettings = localStorage.getItem(getStorageKey('folder')); // setConfigType(savedFolderSettings ? 'folder' : 'list'); // } // }, [showUnifiedSettings]); // Hàm tập trung lấy dữ liệu huy hiệu const fetchAndSetBadgeData = async (isSilent = false) => { if (!isSilent) { notificationService.showLoading('Đang tìm kiếm huy hiệu đặc biệt...'); } try { let serviceCallResult = null; let fetchedNotableAchievements = []; // Renamed variable const settingsKey = getStorageKey('folder'); // Luôn dùng folder settings const savedSettings = localStorage.getItem(settingsKey); let settings = {}; // Initialize settings object let finalTopBadges = []; let errors = []; let fetchedAllUsers = []; let fetchedAllBadgeDefinitions = []; let fetchedTransformationStories = []; // Variable to hold stories from service call if (savedSettings) { settings = JSON.parse(savedSettings); // Assign to the higher-scoped settings // Make sure disciplineLevelFieldId from state is also passed if available // SyncForm will eventually save this to localStorage as part of settings const currentDisciplineLevelFieldId = disciplineLevelFieldId || settings.disciplineLevelFieldId || ''; const currentDisciplineScoreFieldId = disciplineScoreFieldId || settings.disciplineScoreFieldId || ''; const currentTransformationGemsFieldId = transformationGemsFieldId || settings.transformationGemsFieldId || ''; // Get current gems field ID const hardcodedAscensionDateFieldId = '32ca7770-2643-42cb-b3cd-8df4fea2980a'; // Use hardcoded ID const currentAchievementDateFieldId = achievementDateFieldId || settings.achievementDateFieldId || ''; // Get current achievement date field ID const currentStoryListId = storyListId || settings.storyListId || ''; const currentUserRelationshipFieldId = userRelationshipFieldId || settings.userRelationshipFieldId || ''; const currentSharePrivateFieldId = sharePrivateFieldId || settings.sharePrivateFieldId || ''; const currentStorySpecificGemsFieldId = storySpecificGemsFieldId || settings.storySpecificGemsFieldId || ''; // Get current story specific gems field ID if (settings.apiKey && settings.userListId && settings.badgeDefinitionListId) { if (!isSilent) notificationService.showLoading('Đang xử lý dữ liệu Users và Huy hiệu...'); serviceCallResult = await badgeService.getSpecialBadgesFromDedicatedLists( settings.apiKey, settings.userListId, settings.badgeDefinitionListId, (progress) => { if (!isSilent) notificationService.showLoading(`Đang tải dữ liệu... ${progress}%`); }, { relatedBadgesField: settings.relatedBadgesField, disciplineLevelFieldId: currentDisciplineLevelFieldId, disciplineScoreFieldId: currentDisciplineScoreFieldId, transformationGemsFieldId: currentTransformationGemsFieldId, ascensionDateFieldId: hardcodedAscensionDateFieldId, // Pass the hardcoded ascension date field ID storyListId: currentStoryListId, userRelationshipFieldId: currentUserRelationshipFieldId, sharePrivateFieldId: currentSharePrivateFieldId, storySpecificGemsFieldId: currentStorySpecificGemsFieldId // Pass the story specific gems field ID }, { imageUrlFieldId: settings.badgeImageField, badgeDescriptionFieldId: settings.badgeDescriptionField, achievementDateFieldId: currentAchievementDateFieldId } ); // Use pedestalBadges from serviceCallResult if (serviceCallResult) { if (serviceCallResult.pedestalBadges && serviceCallResult.pedestalBadges.length > 0) { finalTopBadges = serviceCallResult.pedestalBadges; } if (serviceCallResult.allUsers) fetchedAllUsers = serviceCallResult.allUsers; if (serviceCallResult.allBadgeDefinitions) fetchedAllBadgeDefinitions = serviceCallResult.allBadgeDefinitions; if (serviceCallResult.notableAchievementsData) fetchedNotableAchievements = serviceCallResult.notableAchievementsData; // Updated to use notableAchievementsData from service if (serviceCallResult.transformationStories) fetchedTransformationStories = serviceCallResult.transformationStories; // Get stories if (serviceCallResult.errors) { errors = errors.concat(serviceCallResult.errors); } } } else { if (!isSilent) { notificationService.showError('Vui lòng cấu hình API Key, User List ID, và Badge Definition List ID trong cài đặt.'); } setLoading(false); return null; } } else { if (!isSilent) { notificationService.showError('Vui lòng cấu hình kết nối ClickUp trong cài đặt.'); } setLoading(false); return null; } // Process badges found if (finalTopBadges.length > 0) { setTopBadges(finalTopBadges); setAllUsers(fetchedAllUsers); setAllBadgeDefinitions(fetchedAllBadgeDefinitions); setNotableAchievementsData(fetchedNotableAchievements); // Use the renamed state setter and local variable setTransformationStories(fetchedTransformationStories); // Set transformation stories state // DEBUG: Log transformationStories after setting state - REMOVED // console.log('[HallOfFame] Fetched transformationStories from service:', fetchedTransformationStories); setBadgeLoaded([false, false, false]); const lastSyncKey = getStorageKey('lastSync'); const syncData = { timestamp: Date.now(), data: { // Save all relevant data pedestalBadges: finalTopBadges, allUsers: fetchedAllUsers, allBadgeDefinitions: fetchedAllBadgeDefinitions, notableAchievementsData: fetchedNotableAchievements, // Save notableAchievementsData notableAchievementsData: fetchedNotableAchievements, // Save notableAchievementsData transformationStories: fetchedTransformationStories, // Save transformation stories settings: { ...settings, disciplineLevelFieldId: disciplineLevelFieldId || settings.disciplineLevelFieldId, disciplineScoreFieldId: disciplineScoreFieldId || settings.disciplineScoreFieldId, transformationGemsFieldId: transformationGemsFieldId || settings.transformationGemsFieldId || '', // Prefer state, then settings // ascensionDateFieldId: hardcodedAscensionDateFieldId, // Save hardcoded ID for consistency, though not read back to state. Removed as it's always hardcoded. achievementDateFieldId: achievementDateFieldId || settings.achievementDateFieldId || '', // Save achievementDateFieldId from state or settings storyListId: storyListId || settings.storyListId || '', userRelationshipFieldId: userRelationshipFieldId || settings.userRelationshipFieldId || '', sharePrivateFieldId: sharePrivateFieldId || settings.sharePrivateFieldId || '', storySpecificGemsFieldId: storySpecificGemsFieldId || settings.storySpecificGemsFieldId || '' // Save story specific gems field ID } } }; localStorage.setItem(lastSyncKey, JSON.stringify(syncData)); setLastSyncTime(new Date()); if (!isSilent) { notificationService.hideLoading(); notificationService.showDataUpdate(`Tìm thấy ${finalTopBadges.length} huy hiệu đặc biệt hàng đầu.`); } return finalTopBadges; // Still return topBadges for consistency if needed by caller } else { setTopBadges([]); if (!isSilent) { notificationService.hideLoading(); notificationService.showError('Không tìm thấy huy hiệu đặc biệt nào từ User List và Badge Definition List.'); } if (errors.length > 0 && !isSilent) { const errorMsg = errors.map(e => `List ${e.listId}: ${e.error}`).join('; '); notificationService.showError(`Gặp sự cố: ${errorMsg}`); } return null; } } catch (error) { // Catch errors from JSON parsing or other unexpected issues if (!isSilent) { notificationService.hideLoading(); notificationService.showError(`Lỗi không mong muốn: ${error.message}`); } // console.error("Lỗi chi tiết:", error); return null; // Trả về null khi có lỗi } finally { setLoading(false); // Ensure loading stops in all scenarios if (!isSilent) notificationService.hideLoading(); // Ensure loading indicator hides } }; // Xử lý chung khi kết nối thành công từ SyncForm const handleGenericSyncComplete = async (result) => { if (result && result.success) { // Gọi hàm fetch tập trung (always uses folder now) await fetchAndSetBadgeData(); // Không đóng modal, để người dùng xem cài đặt khác } }; // Bật/tắt tự động đồng bộ const toggleAutoSync = () => { if (autoSyncEnabled) { autoSyncService.stopAutoSync(); setAutoSyncEnabled(false); } else { autoSyncService.startAutoSync(); setAutoSyncEnabled(true); // Không đồng bộ ngay lập tức khi bật } }; // Thực hiện đồng bộ thủ công (gọi hàm fetch tập trung) const handleManualSync = async () => { await fetchAndSetBadgeData(); // Fetch always uses folder settings now }; const handleNavClick = () => { setShowUnifiedSettings(false); setSelectedBadgeInfo(null); }; const hallSections = [ { id: 'top-banner-section', title: 'ĐẦU TRANG' }, { id: 'special-badges-section', title: 'HUY HIỆU ĐẶC BIỆT' }, { id: 'weekly-highlights-section', title: 'THÀNH TỰU NỔI BẬT' }, // Updated and uppercased { id: 'discipline-ascension-section', title: 'VINH DANH THĂNG HẠNG' }, // Updated and uppercased { id: 'transformation-event-section', title: 'CÂU CHUYỆN CHUYỂN HÓA' }, { id: 'primary-leaderboard-section', title: 'BXH CHÍNH' }, { id: 'discipline-honor-roll-section', title: 'BẢNG VÀNG KỶ LUẬT' }, ]; // Filter out the featured story from the list passed to the grid const gridTransformationStories = useMemo(() => { // If there's no featured story, or its ID is missing (null, undefined), return all stories. // Using typeof check for robustness against ID being 0 or empty string if those are valid. if (!featuredTransformationStory || typeof featuredTransformationStory.id === 'undefined' || featuredTransformationStory.id === null) { return validTransformationStories; // Use validTransformationStories } const featuredIdStr = String(featuredTransformationStory.id); return validTransformationStories.filter(story => { // Filter from validTransformationStories // If the current story in the list is malformed or its ID is missing, // it cannot be the featured one (which is confirmed to have an ID), so keep it. if (!story || typeof story.id === 'undefined' || story.id === null) { return true; } // Compare IDs as strings to avoid type mismatches (e.g., 123 vs "123"). return String(story.id) !== featuredIdStr; }); }, [validTransformationStories, featuredTransformationStory]); useEffect(() => { // console.log('[HallOfFame] gridTransformationStories updated:', gridTransformationStories); // REMOVED }, [gridTransformationStories]); return (

{/* Container cho các nút điều khiển */}

{/* Nút duy nhất để mở cài đặt tổng hợp */}

{/* Cửa sổ nhập mật khẩu */} {isPasswordPromptVisible && ( { setIsPasswordPromptVisible(false); // Đóng cửa sổ mật khẩu setShowUnifiedSettings(true); // Mở cửa sổ cài đặt }} onClose={() => { setIsPasswordPromptVisible(false); // Đóng cửa sổ mật khẩu }} /> )} {/* Cửa sổ cài đặt tổng hợp (giữ nguyên logic hiện tại) */} {showUnifiedSettings && (

{/* Thêm class mới */}

{/* Thêm class mới */} {/* Nội dung modal */}

Cài đặt & Đồng bộ Huy hiệu

{/* REMOVED: Lựa chọn loại cấu hình */} {/*

...

*/} {/* Form cấu hình luôn là folder */} {/* Divider */}

{/* Cài đặt Tự động đồng bộ */}

Tự động đồng bộ

Tự động cập nhật dữ liệu

Khoảng thời gian (phút):

{lastSyncTime && (

🕒 Cập nhật lần cuối: {lastSyncTime.toLocaleTimeString('vi-VN', { hour: '2-digit', minute: '2-digit' })}

)}

{/* Phần cài đặt Folder đã bị loại bỏ */}

)} {/* New Top Banner Module */}

{/* Add the star fall container */}

{[...Array(10)].map((_, i) => (

))}

{/* The hall-title H1 has been moved to top-banner-module */}

HUY HIỆU ĐẶC BIỆT

{loading ? (

{[...Array(3)].map((_, i) => (

))}

) : (

{[...Array(3)].map((_, index) => { const badge = topBadges[index]; // console.log(`[HallOfFame] Pedestal ${index}, badge data:`, badge); // Already removed const isLoaded = badgeLoaded[index]; // const pedestalRank = ['gold', 'silver', 'bronze'][index] || 'bronze'; // REMOVE: No longer assigning rank classes // Function to update badge loaded state with a delay const handleLoad = (idx) => { // Add a small delay based on index for staggered effect setTimeout(() => { setBadgeLoaded(prev => { const newState = [...prev]; newState[idx] = true; return newState; }); }, idx * 150); // Stagger by 150ms }; // Function to handle image load errors const handleError = (e, idx) => { e.target.onerror = null; e.target.src = 'https://play.rosebud.ai/assets/banner.png?t9ni'; handleLoad(idx); // Mark as loaded even on error }; return ( // REMOVE rank class from pedestal-item

{/* Stage for the badge */}

{badge ? (

{ if (!badge || !badge.owner) { // Handle case where badge or owner is missing (e.g., placeholder) // Show only this badge or a default state setSelectedBadgeInfo({ allUserBadges: badge ? [badge] : [], initialBadgeIndex: 0, }); return; } // Find the full user object from allUsers state const user = allUsers.find(u => u.id === badge.owner.id); if (!user || !user.relatedBadgeIds || user.relatedBadgeIds.length === 0) { // If user not found or has no related badges, just show the clicked badge setSelectedBadgeInfo({ allUserBadges: [badge], initialBadgeIndex: 0, }); return; } // Get all badge definitions for this user const userOwnedBadges = user.relatedBadgeIds .map(badgeId => allBadgeDefinitions.find(bd => bd.id === badgeId)) .filter(Boolean) // Remove undefined if a badgeId doesn't match .map(bd => ({ // Reconstruct badge object with owner info for modal consistency ...bd, owner: badge.owner // Use the owner from the pedestal badge })) .sort((a, b) => b.level - a.level); // Sort by level desc if (userOwnedBadges.length === 0) { // Fallback if no badges were resolved (shouldn't happen if relatedBadgeIds are valid) setSelectedBadgeInfo({ allUserBadges: [badge], initialBadgeIndex: 0, }); return; } const initialIndex = userOwnedBadges.findIndex(b => b.id === badge.id); setSelectedBadgeInfo({ allUserBadges: userOwnedBadges, initialBadgeIndex: initialIndex !== -1 ? initialIndex : 0, }); }} >

handleLoad(index)} onError={(e) => handleError(e, index)} /> {isLoaded && (

{[...Array(6)].map((_, i) =>

)}

) : (

setShowBadgeManager(true)}>

👑

Trống

)}

{/* Pedestal Base */}

{/* Display A/B achievers count if available INSIDE pedestal base */} {/* Ensure 'badge' itself is not null or undefined before accessing its properties */} {badge && typeof badge.achieversCount === 'number' && typeof badge.totalUsersInSystem === 'number' && badge.totalUsersInSystem > 0 && (

Chỉ Có {badge.achieversCount}/{badge.totalUsersInSystem} Người Đạt Được

)}

{/* User Info Area */}

{/* Change userInfo to owner */} {badge && badge.owner ? ( // Check if badge AND owner exist <>

{/* Check specifically for avatar URL */} {badge.owner.avatar ? (

{ // Fallback logic remains the same if (e.target.src !== 'https://play.rosebud.ai/assets/banner.png?t9ni') { e.target.src = 'https://play.rosebud.ai/assets/banner.png?t9ni'; } else { e.target.style.display = 'none'; const placeholder = e.target.closest('.avatar-container')?.querySelector('.avatar-placeholder'); if (placeholder) placeholder.style.display = 'flex'; } }} /> ) : ( /* Ensure placeholder is always displayed if no avatar URL */

👤

)}

{/* Wrap name and date in a div for better flex control */}

{/* 'Chiến Binh' Label */}

Chiến Binh

{/* Display name - Check if owner.name exists */}

{badge.owner.name || 'Chưa có tên'}

{/* Percentage text has been moved into pedestal-base */}

) : ( /* Fallback for when badge exists but owner doesn't, or badge doesn't exist */

Chưa có chủ nhân

)}

); })}

)} {/* End pedestal-container */}

{/* End special-badges-section */}

{/* --- Weekly Highlights Section (Combined Achievements & Top 10) --- */}

{/* Changed class */}

THÀNH TỰU NỔI BẬT

{/* Changed to use generic .section-title */}

{/* New container for columns */} {/* Left Column: Notable Achievements */} {/* Right Column: Top 10 Weekly Discipline */}

{/*

Top 10 Kỷ Luật Tuần

REMOVED title from here as well */}

{/* End highlights-columns */}

{/* End weekly-highlights */}

{/* --- Discipline Ascension Showcase Section --- */}

{/* --- End Discipline Ascension Showcase Section --- */} {/* --- Transformation Event Section --- */}

{/* The h2 title and FeaturedStory component previously rendered directly by HallOfFame for this section have been removed. The TransformationEvent component below is now solely responsible for displaying the "CÂU CHUYỆN CHUYỂN HÓA" title, its own featured story (from stories[0]), and the grid of subsequent stories. It receives the full 'transformationStories' list. */}

{/* --- End Transformation Event Section --- */} {/* --- Primary Leaderboard Section --- */}

BẢNG XẾP HẠNG CHÍNH

{/* Đổi tên cho rõ ràng */}

{/* --- End Leaderboard Sections --- */}

BẢNG VÀNG KỶ LUẬT

{/* The new wrapper div below will allow the .discipline-honor-roll-title (which has width: 100%) to correctly center itself above the .discipline-honor-roll-section-inner, as the title is now a direct child of DisciplineHonorRoll component and its width:100% will refer to this wrapper. The .discipline-honor-roll-section-inner itself has margin: auto to center. */}

{/* --- End Discipline Honor Roll Section --- */}

{selectedBadgeInfo && selectedBadgeInfo.allUserBadges && ( setSelectedBadgeInfo(null)} /> )}

); }; export default HallOfFame;