import React, { useState, useEffect } from 'react'; import { HabitStats } from 'HabitStats'; import { TrainingLevelMilestones } from 'TrainingLevelMilestones'; import SyncForm from 'SyncForm'; import { clickupService } from 'clickupService'; import { MilestoneCelebration } from 'MilestoneCelebration'; import confetti from 'https://esm.sh/canvas-confetti@1.6.0'; // Helper function to get or generate pageInstanceId (same as in SyncForm) const getPageInstanceId = () => { let id = localStorage.getItem('pageInstanceId'); if (!id) { id = crypto.randomUUID(); // Generate a new unique ID localStorage.setItem('pageInstanceId', id); } return id; }; const SYNC_INTERVAL = 2 * 60 * 60 * 1000; // 2 hours in milliseconds export const RewardLadder = () => { const [activeTab, setActiveTab] = useState('habits'); const [activeSubTab, setActiveSubTab] = useState('aa'); const [giftPoints, setGiftPoints] = useState(() => { // Get the unique page instance ID const pageInstanceId = getPageInstanceId(); // Load gift points using the page instance ID const pageSpecificCreds = localStorage.getItem(`clickupCredentials_${pageInstanceId}`); if (pageSpecificCreds) { try { const parsed = JSON.parse(pageSpecificCreds); if (parsed.giftPoints !== undefined) { return parsed.giftPoints; } } catch (error) { console.error(`Error parsing page-specific credentials (${pageInstanceId}):`, error); } } // Priority 2: Check specifically for processed milestones for this page instance const processedMilestonesKey = `processedMilestones_${pageInstanceId}`; const processedMilestones = JSON.parse(localStorage.getItem(processedMilestonesKey) || '[]'); if (processedMilestones.length > 0) { const levelGiftPoints = { 1: 200, 2: 400, 3: 600, 4: 1000, 5: 2000 }; return processedMilestones.reduce((total, level) => total + (levelGiftPoints[level] || 0), 0); } // Default fallback return 0; }); const [showSettings, setShowSettings] = useState(false); const [syncState, setSyncState] = useState({ status: 'idle', // idle, syncing, success, error message: '', progress: 0 }); const [habitStats, setHabitStats] = useState({ daysFollowingHabits: 0, trainingLevel: 0, averageHappiness: 0, scholarshipAmount: 1000000, giftPoints: 0 }); const [showMilestone, setShowMilestone] = useState(false); const [currentMilestone, setCurrentMilestone] = useState(null); const [clickupCredentials, setClickupCredentials] = useState(null); const [giftPointsUpdateStatus, setGiftPointsUpdateStatus] = useState({ status: 'idle', message: '' }); // idle, updating, success, error // State for reset confirmation is no longer needed // --- Move Ref and Effect for previous gift points here --- const prevGiftPointsRef = React.useRef(); React.useEffect(() => { // Store the current gift points in the ref after each render // so we can access the previous value in the next effect run prevGiftPointsRef.current = habitStats.giftPoints; }); // --- End moved code --- useEffect(() => { const loadSettings = () => { const pageInstanceId = getPageInstanceId(); // Get the unique page instance ID const savedCredentials = localStorage.getItem(`clickupCredentials_${pageInstanceId}`); // Use the unique ID if (savedCredentials) { try { const parsedCredentials = JSON.parse(savedCredentials); setClickupCredentials(parsedCredentials); // Automatically sync data when credentials are loaded if (parsedCredentials.apiKey && parsedCredentials.listId) { syncClickUpData(parsedCredentials); // Pass the credentials // Setup auto-sync check // Save sync time using the unique pageInstanceId const lastSyncTimeKey = `lastSyncTime_${pageInstanceId}`; const lastSyncTime = localStorage.getItem(lastSyncTimeKey); // Save current sync time using the unique key localStorage.setItem(lastSyncTimeKey, Date.now().toString()); } } catch (error) { console.error(`Error parsing saved page-specific credentials (${pageInstanceId}):`, error); } } }; loadSettings(); // Setup interval for periodic sync every 2 hours const intervalId = setInterval(() => { // Use clickupCredentials from state (already potentially page-specific) if (clickupCredentials && clickupCredentials.apiKey && clickupCredentials.listId) { const pageInstanceId = getPageInstanceId(); // Get ID again for keys const lastSyncTimeKey = `lastSyncTime_${pageInstanceId}`; const lastSyncTime = localStorage.getItem(lastSyncTimeKey); const currentTime = Date.now(); // If no previous sync or 2 hours have passed if (!lastSyncTime || (currentTime - parseInt(lastSyncTime)) >= SYNC_INTERVAL) { // Perform sync syncClickUpData(clickupCredentials); // Update last sync time using the unique key localStorage.setItem(lastSyncTimeKey, currentTime.toString()); } } }, 60000); // Check every minute to avoid missing the exact interval // Cleanup interval on component unmount return () => { clearInterval(intervalId); }; }, []); // Function to sync data with ClickUp const syncClickUpData = async (credentials) => { // Set syncing state setSyncState({ status: 'syncing', message: 'Đang tự động đồng bộ dữ liệu...', progress: 10 }); // Call the ClickUp service to fetch data clickupService.fetchData(credentials) .then(data => { if (data && data.habitStats) { const { trainingLevel = 0 } = data.habitStats; let calculatedGiftPoints = calculateGiftPoints(trainingLevel); // Ensure calculatedGiftPoints is always a valid number if (isNaN(calculatedGiftPoints) || calculatedGiftPoints === undefined) { calculatedGiftPoints = 0; } // Save immediately to localStorage before updating state, using pageInstanceId const pageInstanceId = getPageInstanceId(); const currentCredsKey = `clickupCredentials_${pageInstanceId}`; const currentCreds = JSON.parse(localStorage.getItem(currentCredsKey) || '{}'); localStorage.setItem(currentCredsKey, JSON.stringify({ ...currentCreds, giftPoints: calculatedGiftPoints })); // Đảm bảo giftPoints không bao giờ undefined const safeGiftPoints = calculatedGiftPoints ?? 0; // Update local state setHabitStats(prev => ({ ...prev, daysFollowingHabits: data.habitStats.daysFollowingHabits || 0, trainingLevel: trainingLevel || 0, averageHappiness: data.habitStats.averageHappiness || 0, scholarshipAmount: 0, giftPoints: safeGiftPoints // Sử dụng giá trị đã được kiểm tra })); // Removed redundant setGiftPoints(safeGiftPoints) call here // The useEffect watching habitStats.giftPoints will handle updates based on the change above. } // Update last sync time using the unique pageInstanceId const pageInstanceId = getPageInstanceId(); const lastSyncTimeKey = `lastSyncTime_${pageInstanceId}`; localStorage.setItem(lastSyncTimeKey, Date.now().toString()); setSyncState({ status: 'success', message: 'Đồng bộ tự động thành công!', progress: 100 }); // Clear the sync status after 3 seconds setTimeout(() => { setSyncState({ status: 'idle', message: '', progress: 0 }); }, 3000); } // Moved this brace down to correctly close the .then block ) .catch(error => { console.error('Lỗi đồng bộ tự động:', error); setSyncState({ status: 'error', message: 'Đồng bộ tự động thất bại: ' + error.message, progress: 0 }); // Clear the error after 5 seconds setTimeout(() => { setSyncState({ status: 'idle', message: '', progress: 0 }); }, 5000); }); }; const handleSyncComplete = async (data) => { if (data && data.habitStats) { const { trainingLevel } = data.habitStats; setHabitStats({ daysFollowingHabits: data.habitStats.daysFollowingHabits || 0, trainingLevel: trainingLevel || 0, averageHappiness: data.habitStats.averageHappiness || 0, scholarshipAmount: 0 }); // Save ClickUp credentials setClickupCredentials(data.clickupCredentials); setSyncState({ status: 'success', message: 'Đồng bộ hóa thành công!', progress: 100 }); setTimeout(() => { setShowSettings(false); setSyncState({ status: 'idle', message: '', progress: 0 }); }, 2000); } else { setSyncState({ status: 'error', message: 'Đồng bộ hóa thất bại. Dữ liệu không hợp lệ.', progress: 0 }); } }; // Kiểm tra cột mốc đã đạt được useEffect(() => { // Make the checkMilestones function async const checkMilestones = async () => { // Định nghĩa các cột mốc theo cấp độ const levelMilestones = [ { level: 1, position: 5, imageUrl: "https://play.rosebud.ai/assets/1.gif?LNIc" }, { level: 2, position: 10, imageUrl: "https://play.rosebud.ai/assets/2.gif?RXIC" }, { level: 3, position: 15, imageUrl: "https://play.rosebud.ai/assets/3.gif?ngPv" }, { level: 4, position: 25, imageUrl: "https://play.rosebud.ai/assets/4.gif?4W1i" }, { level: 5, position: 40, imageUrl: "https://play.rosebud.ai/assets/5.gif?F1wD" } ]; // Tìm cột mốc cao nhất đã đạt được for (let i = levelMilestones.length - 1; i >= 0; i--) { if (habitStats.trainingLevel >= levelMilestones[i].position) { // Kiểm tra xem đã hiển thị thông báo chúc mừng chưa const milestoneKey = `milestone_shown_level_${levelMilestones[i].position}`; const hasShownMilestone = localStorage.getItem(milestoneKey); if (!hasShownMilestone) { // Hiển thị thông báo chúc mừng const newMilestone = { level: levelMilestones[i].level, days: levelMilestones[i].position, imageUrl: levelMilestones[i].imageUrl }; // Trigger confetti effect triggerConfetti(); // Set the milestone data and show the popup setCurrentMilestone(newMilestone); setShowMilestone(true); // Đánh dấu đã hiển thị localStorage.setItem(milestoneKey, 'true'); // Add comment AND create new task if credentials are set if (clickupCredentials) { // 1. Add comment to the designated task (if milestoneTaskId exists) if (clickupCredentials.milestoneTaskId) { try { await addMilestoneComment(newMilestone, clickupCredentials); } catch (commentError) { console.error("Failed to add milestone comment:", commentError); // Continue even if comment fails, task creation is separate } } else { console.log("milestoneTaskId not set, skipping comment."); } // 2. Create the new milestone task (if required fields exist) if (clickupCredentials.newTaskLisId && clickupCredentials.tagName && clickupCredentials.imageUrlFieldId) { try { await clickupService.createMilestoneTask( clickupCredentials, newMilestone, newMilestone.imageUrl // Pass the image URL from the milestone definition ); } catch (createTaskError) { console.error('Failed to create new milestone task:', createTaskError.message); // Handle or log error, maybe show a user notification? setSyncState({ // Use existing sync state for feedback status: 'error', message: `Lỗi tạo task cột mốc: ${createTaskError.message}`, progress: 0 }); setTimeout(() => setSyncState({ status: 'idle', message: '', progress: 0 }), 5000); } } else { // console.warn("[Milestone Check] Required credentials MISSING (newTaskLisId, tagName, or imageUrlFieldId). Skipping new task creation."); } // 3. Update gift points state locally (API call is handled by another useEffect) const pageInstanceId = getPageInstanceId(); // Get ID for milestone processing if (!hasMilestoneBeenProcessed(newMilestone, pageInstanceId)) { // Khi một cột mốc mới được đạt, trainingLevel đã được cập nhật (hoặc sẽ sớm được cập nhật từ ClickUp sync) // Tính toán lại TOÀN BỘ điểm thưởng dựa trên trainingLevel hiện tại (sau khi đạt mốc) // Giả sử habitStats.trainingLevel đã phản ánh cấp độ mới nhất sau khi đạt mốc const newTotalGiftPoints = calculateGiftPoints(habitStats.trainingLevel); setHabitStats(prev => ({ ...prev, giftPoints: newTotalGiftPoints // Đặt lại tổng điểm dựa trên tính toán mới })); markMilestoneAsProcessed(newMilestone, pageInstanceId); } } break; } } } }; checkMilestones(); }, [habitStats.trainingLevel, clickupCredentials]); // Watch for gift points changes and update ClickUp + localStorage useEffect(() => { // Access the previous value from the ref moved outside this effect const prevGiftPoints = prevGiftPointsRef.current; // Save to localStorage whenever giftPoints change, using pageInstanceId if (clickupCredentials) { const pageInstanceId = getPageInstanceId(); const currentCredsKey = `clickupCredentials_${pageInstanceId}`; const currentCreds = JSON.parse(localStorage.getItem(currentCredsKey) || '{}'); localStorage.setItem(currentCredsKey, JSON.stringify({ ...currentCreds, giftPoints: habitStats.giftPoints })); } const updateGiftPointsInClickUp = async () => { // Check if all required credentials and custom field ID are available if ( clickupCredentials?.apiKey && clickupCredentials?.milestoneTaskId && clickupCredentials?.customFieldId && habitStats.giftPoints !== undefined // Ensure giftPoints has a value ) { const giftPointsToUpdate = habitStats.giftPoints ?? 0; // Validate if giftPoints is a number if (isNaN(giftPointsToUpdate)) { console.error('Invalid gift points value, cannot update ClickUp:', giftPointsToUpdate); return; // Stop if value is not a number } setGiftPointsUpdateStatus({ status: 'updating', message: 'Đang cập nhật điểm đổi quà lên ClickUp...' }); try { const response = await clickupService.updateCustomField( clickupCredentials, clickupCredentials.milestoneTaskId, clickupCredentials.customFieldId, giftPointsToUpdate ); setGiftPointsUpdateStatus({ status: 'success', message: 'Cập nhật điểm đổi quà thành công!' }); // Reset status after 3 seconds setTimeout(() => setGiftPointsUpdateStatus({ status: 'idle', message: '' }), 3000); } catch (error) { console.error('Failed to update gift points:', error.message); setGiftPointsUpdateStatus({ status: 'error', message: `Lỗi cập nhật điểm: ${error.message}` }); // Reset status after 5 seconds setTimeout(() => setGiftPointsUpdateStatus({ status: 'idle', message: '' }), 5000); } } else { // Logs for why update is skipped can be added here if needed for debugging // e.g. if (!clickupCredentials?.apiKey) { console.log('- API Key is missing.'); } } }; // Only call the update function if credentials are set if (clickupCredentials) { updateGiftPointsInClickUp(); } }, [habitStats.giftPoints, clickupCredentials]); // Function to trigger confetti effect const triggerConfetti = () => { const duration = 3000; const animationEnd = Date.now() + duration; const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 1001 }; function randomInRange(min, max) { return Math.random() * (max - min) + min; } const interval = setInterval(() => { const timeLeft = animationEnd - Date.now(); if (timeLeft <= 0) { return clearInterval(interval); } const particleCount = 50 * (timeLeft / duration); // Gold color scheme confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 }, colors: ['#FFD700', '#FFA500', '#FFFF00'], gravity: randomInRange(0.4, 0.6), scalar: randomInRange(0.8, 1.2), }); confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 }, colors: ['#FFD700', '#FFA500', '#FFFF00'], gravity: randomInRange(0.4, 0.6), scalar: randomInRange(0.8, 1.2), }); }, 250); }; const addMilestoneComment = async (milestone, credentials) => { try { await clickupService.addMilestoneComment(credentials, credentials.milestoneTaskId, milestone); } catch (error) { console.error('Error adding milestone comment:', error.message); } }; const handleCloseMilestone = () => { setShowMilestone(false); }; const hasMilestoneBeenProcessed = (milestone, pageInstanceId) => { const processedMilestonesKey = `processedMilestones_${pageInstanceId}`; const processedMilestones = JSON.parse(localStorage.getItem(processedMilestonesKey) || '[]'); return processedMilestones.includes(milestone.level); }; const markMilestoneAsProcessed = (milestone, pageInstanceId) => { const processedMilestonesKey = `processedMilestones_${pageInstanceId}`; const processedMilestones = JSON.parse(localStorage.getItem(processedMilestonesKey) || '[]'); if (!processedMilestones.includes(milestone.level)) { processedMilestones.push(milestone.level); localStorage.setItem(processedMilestonesKey, JSON.stringify(processedMilestones)); } }; const getGiftPointsForMilestone = (milestone) => { const levelGiftPoints = { 1: 200, 2: 400, 3: 600, 4: 1000, 5: 2000 }; const points = levelGiftPoints[milestone.level] || 0; return points; }; const calculateGiftPoints = (trainingLevel) => { // Convert trainingLevel to number if it's a string trainingLevel = parseInt(trainingLevel) || 0; const pageInstanceId = getPageInstanceId(); // Get ID for fallback calculation // Load processed milestones from localStorage for this instance as fallback const processedMilestonesKey = `processedMilestones_${pageInstanceId}`; const processedMilestones = JSON.parse(localStorage.getItem(processedMilestonesKey) || '[]'); if (processedMilestones.length > 0 && trainingLevel === 0) { const levelGiftPoints = {1: 200, 2: 400, 3: 600, 4: 1000, 5: 2000}; const pointsFromMilestones = processedMilestones.reduce((total, level) => total + (levelGiftPoints[level] || 0), 0); return pointsFromMilestones; } const trainingLevelMilestones = [5, 10, 15, 25, 40]; const giftPointsAmounts = [200, 400, 600, 1000, 2000]; let totalGiftPoints = 0; for (let i = 0; i < trainingLevelMilestones.length; i++) { if (trainingLevel >= trainingLevelMilestones[i]) { totalGiftPoints += giftPointsAmounts[i]; } else { break; } } return totalGiftPoints || 0; // Ensure we never return undefined }; // Function to reset milestone history is removed // Dữ liệu cơ bản cho tabs const tabsData = { discipline: { title: 'Cấp Độ', rewards: [] }, habits: { title: 'Thói Quen', rewards: [] }, goals: { title: 'Mục Tiêu', rewards: [] }, focus: { title: 'Tập Trung', rewards: [] }, time: { title: 'Thời Gian', rewards: [] } }; return (

{/* Sync status indicator */} {syncState.status !== 'idle' && (

{syncState.status === 'syncing' ? '⌛' : syncState.status === 'success' ? '✅' : '❌'}

{syncState.status === 'syncing' ? "Đang tải dữ liệu mới..." : syncState.message}

{/* Progress bar removed */}

)} {showSettings && (

Cài đặt Đồng bộ

{/* SyncForm component is called directly here, without container and title */}

{/* Reset Button is removed */}

)}

{/* Tab navigation removed */}

{/* Content title removed as requested */}

{/* Content previously under 'Thói quen' tab is now always visible */}

{/* Include the HabitStats component */}

{/* Sub-tabs for habits section */}

setActiveSubTab('aa')} style={{ padding: '10px 16px', border: activeSubTab === 'aa' ? 'none' : '1px solid rgba(255, 215, 0, 0.3)', borderRadius: '8px', background: activeSubTab === 'aa' ? 'linear-gradient(135deg, #FFD700, #FFA500)' : 'rgba(0,0,0,0.2)', color: activeSubTab === 'aa' ? '#2C1810' : '#FFD700', fontSize: '12px', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.5px', minWidth: '160px', whiteSpace: 'nowrap', textAlign: 'center', cursor: 'pointer', boxShadow: activeSubTab === 'aa' ? '0 4px 12px rgba(255, 215, 0, 0.4)' : 'none' }} > CẤP ĐỘ RÈN LUYỆN

{/* Content based on sub-tab selection */}

{ setCurrentMilestone(milestone); setShowMilestone(true); triggerConfetti(); }} />

{/* Milestone Celebration Popup */}

); };