import React, { useState, useEffect, useMemo, useCallback, useRef } from 'react'; import { MilestoneCelebration } from 'MilestoneCelebration'; import { clickupService } from 'clickupService'; // Added import for clickupService // Sample daily goals array const sampleDailyGoals = [ { id: 1, title: "Meditation", description: "15 minutes of mindfulness", completed: false }, { id: 2, title: "Exercise", description: "30 minutes cardio", completed: true }, { id: 3, title: "Reading", description: "Read 20 pages", completed: false }, { id: 4, title: "Coding", description: "Solve 2 coding problems", completed: true }, { id: 5, title: "Journaling", description: "Write daily reflection", completed: false } ]; // Tối ưu bằng cách trích xuất các inline styles thành các biến có thể tái sử dụng const styles = { container: { position: 'relative', margin: '20px auto', padding: '15px 0', width: '100%', maxWidth: '700px', display: 'flex', flexDirection: 'column' }, timelineTrack: { position: 'absolute', top: 0, bottom: 0, left: '50%', width: '4px', backgroundColor: 'rgba(255, 215, 0, 0.3)', transform: 'translateX(-50%)', zIndex: 1 }, glowEffect: { position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, boxShadow: '0 0 15px rgba(255, 215, 0, 0.5)', zIndex: 0 }, timelineItem: (isLeft, index) => ({ display: 'flex', justifyContent: isLeft ? 'flex-start' : 'flex-end', padding: '18px 10px', position: 'relative', zIndex: 2, marginTop: index === 0 ? '0' : `${index === 1 ? '20px' : '30px'}` }), timelineDot: (isCompleted) => ({ position: 'absolute', left: '50%', width: '16px', height: '16px', borderRadius: '50%', background: isCompleted ? 'linear-gradient(135deg, #FFD700, #FFA500)' : 'rgba(255, 255, 255, 0.2)', border: isCompleted ? '2px solid #FFD700' : '1px solid rgba(255, 215, 0, 0.3)', transform: 'translateX(-50%)', boxShadow: isCompleted ? '0 0 8px rgba(255, 215, 0, 0.7)' : 'none', zIndex: 5 }) }; export const TimelineMilestones = ({ currentDays = 0, isLoading = false }) => { // Ref cho container chính để có thể cuộn đến vị trí cần thiết const timelineContainerRef = useRef(null); // Refs cho từng mốc để có thể tìm vị trí cụ thể để cuộn đến const milestoneRefs = useRef([]); // Function to get the appropriate image for each milestone const getMilestoneImage = useCallback((index) => { const imageMap = { 0: "https://play.rosebud.ai/assets/1.gif?yIro", 1: "https://play.rosebud.ai/assets/2.gif?W0iA", 2: "https://play.rosebud.ai/assets/3.gif?T6CX", 3: "https://play.rosebud.ai/assets/4.gif?AsQT", 4: "https://play.rosebud.ai/assets/5.gif?oUHk" }; return imageMap[index] || "https://play.rosebud.ai/assets/1lv1.gif?WcwU"; }, []); // Added useCallback here // Helper function to calculate gift points based on milestone days const calculateGiftPoints = useCallback((days) => { if (days >= 15) return 2000; if (days >= 10) return 1000; if (days >= 5) return 600; if (days >= 3) return 400; if (days >= 1) return 200; // Points for the first milestone return 0; // Default case }, []); // State for celebration popup const [celebrationOpen, setCelebrationOpen] = useState(false); const [celebratedMilestone, setCelebratedMilestone] = useState(null); const [lastCelebratedDay, setLastCelebratedDay] = useState(0); const [notifiedMilestones, setNotifiedMilestones] = useState(() => { const saved = localStorage.getItem('notifiedMilestones'); return saved ? JSON.parse(saved) : []; }); // Define milestones with useMemo to prevent recreating on each render const milestones = useMemo(() => [ { days: 1, position: 0, scholarship: 200000 }, // First milestone at position 0 { days: 3, position: 40, scholarship: 400000 }, // Second milestone { days: 5, position: 80, scholarship: 600000 }, // Third milestone { days: 10, position: 120, scholarship: 1000000 }, // Fourth milestone { days: 15, position: 160, scholarship: 2000000 } // Fifth milestone ], []); // Khởi tạo mảng refs cho từng milestone useEffect(() => { // Khởi tạo mảng refs cho từng milestone milestoneRefs.current = Array(milestones.length) .fill() .map((_, i) => milestoneRefs.current[i] || React.createRef()); }, [milestones.length]); // Check if we need to show celebration when currentDays changes useEffect(() => { // Only check if we should show celebration when currentDays changes and is greater than zero if (currentDays <= 0 || currentDays <= lastCelebratedDay) return; // Find the highest completed milestone const highestCompletedMilestone = [...milestones] .filter(m => currentDays >= m.days) .sort((a, b) => b.days - a.days)[0]; // Only show celebration if we've reached a new milestone higher than previously celebrated // and it hasn't been notified before if (highestCompletedMilestone && highestCompletedMilestone.days > lastCelebratedDay && !notifiedMilestones.includes(highestCompletedMilestone.days)) { setCelebratedMilestone(highestCompletedMilestone); setCelebrationOpen(true); setLastCelebratedDay(highestCompletedMilestone.days); // Chỉ gửi comment nếu cột mốc này chưa được thông báo trước đó if (!notifiedMilestones.includes(highestCompletedMilestone.days)) { try { // Removed redundant getPageSpecificKey and hashString functions console.log('[MilestoneDebug] Checking for milestone notification. Current Days:', currentDays, 'Last Celebrated:', lastCelebratedDay, 'Notified:', notifiedMilestones); // Get ClickUp credentials using clickupService (which now uses the shared key) const savedCredentials = clickupService.getSavedCredentials(); console.log('[MilestoneDebug] Saved Credentials:', savedCredentials); if (savedCredentials) { const credentials = savedCredentials; // Already parsed by the service console.log('[MilestoneDebug] Parsed Credentials for comment/task:', credentials); if (credentials.apiKey && credentials.milestoneTaskId) { // Create the milestone data object const milestoneData = { days: highestCompletedMilestone.days, imageUrl: getMilestoneImage(milestones.findIndex(m => m.days === highestCompletedMilestone.days)), // Calculate gift points based on milestone days giftPoints: calculateGiftPoints(highestCompletedMilestone.days) }; // Call the ClickUp service to add a comment clickupService.addMilestoneComment(credentials, credentials.milestoneTaskId, milestoneData) .then(async commentResponse => { // Mark async to use await inside // Add the notified milestone to the list and update localStorage const updatedNotifiedMilestones = [...notifiedMilestones, highestCompletedMilestone.days]; setNotifiedMilestones(updatedNotifiedMilestones); localStorage.setItem('notifiedMilestones', JSON.stringify(updatedNotifiedMilestones)); // Gift Points custom field update is now handled by GoalStats.js // Create a new milestone task if milestoneListId is provided console.log('[MilestoneDebug] Checking milestoneListId for new task creation. Value:', credentials.milestoneListId); if (credentials.milestoneListId) { console.log('[MilestoneDebug] milestoneListId IS PRESENT. Proceeding to create task.'); try { const now = new Date(); const formattedTime = `${now.getDate().toString().padStart(2, '0')}/${(now.getMonth() + 1).toString().padStart(2, '0')}/${now.getFullYear()} ${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`; const newMilestoneTaskData = { taskName: `2.LG - Cột Mốc ${highestCompletedMilestone.days} Mục Tiêu Tháng - ${formattedTime}`, taskDescription: `Chúc mừng bạn đã hoàn thành ${highestCompletedMilestone.days} mục tiêu ngày. Phần thưởng: ${milestoneData.giftPoints} Gift Points. Huy hiệu: ${milestoneData.imageUrl}`, imageUrl: milestoneData.imageUrl, // Credentials like apiKey, workspace, milestoneListId, milestoneTagName, milestoneImageFieldId // will be spread from the 'credentials' object by the service. }; console.log('[MilestoneDebug] Data for new milestone task:', newMilestoneTaskData); await clickupService.createMilestoneTask(credentials, newMilestoneTaskData); console.log(`[MilestoneDebug] SUCCESS: Đã gửi yêu cầu tạo task với tên mới cho cột mốc ${highestCompletedMilestone.days} ngày.`); } catch (createTaskError) { console.error("Lỗi khi tạo task cột mốc:", createTaskError); alert(`Lỗi khi tạo task cột mốc: ${createTaskError.message}. Vui lòng kiểm tra lại cài đặt ClickUp (đặc biệt là 'List ID (Tạo Task Cột Mốc)') và thử lại. Chi tiết lỗi đã được ghi vào console.`); } } }) .catch(commentError => { console.error("[MilestoneDebug] Failed to add milestone comment:", commentError); // Error handling silently for comment failure }); } else { console.log('[MilestoneDebug] API Key or Milestone Task ID is missing. Skipping comment and task creation related to comment flow.'); } } else { console.log('[MilestoneDebug] No saved credentials found. Skipping comment and task creation.'); } } catch (error) { console.error('[MilestoneDebug] Outer catch error in milestone effect:', error); // Silent error handling } } else { console.log('[MilestoneDebug] Conditions not met for celebration/notification. Current Days:', currentDays, 'Highest Completed:', highestCompletedMilestone?.days, 'Last Celebrated:', lastCelebratedDay, 'Already Notified:', highestCompletedMilestone ? notifiedMilestones.includes(highestCompletedMilestone.days) : 'N/A'); } } }, [currentDays, lastCelebratedDay, milestones, notifiedMilestones, getMilestoneImage, calculateGiftPoints]); // Effect để tự động cuộn đến vị trí người chơi đang chinh phục useEffect(() => { if (timelineContainerRef.current && currentDays > 0 && !isLoading) { // Tìm milestone đang chinh phục (chưa hoàn thành nhưng gần nhất) let targetIndex = 0; for (let i = 0; i < milestones.length; i++) { if (currentDays >= milestones[i].days) { // Nếu đã vượt qua milestone này, tiếp tục đến milestone tiếp theo targetIndex = i + 1; } else { // Đã tìm thấy milestone đang chinh phục break; } } // Giới hạn targetIndex để không vượt quá số milestone có sẵn if (targetIndex >= milestones.length) { targetIndex = milestones.length - 1; } // Tìm element tương ứng và cuộn đến const targetRef = milestoneRefs.current[targetIndex]; if (targetRef && targetRef.current) { // Tạo độ trễ nhỏ để đảm bảo DOM đã được render hoàn toàn setTimeout(() => { targetRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' }); }, 500); } } }, [currentDays, isLoading, milestones.length]); // Close celebration popup handler with useCallback const handleCloseCelebration = useCallback(() => { setCelebrationOpen(false); }, []); return (

{/* Central Timeline */}

{/* Gold glow effect */}

{/* Milestone Items */} {milestones.map((milestone, index) => { const isLeft = index % 2 === 0; const isCompleted = currentDays >= milestone.days; const isActive = currentDays > 0 && currentDays < milestone.days && (index === 0 || currentDays >= milestones[index-1].days); // Calculate top position based on the position property const topPosition = `${milestone.position}px`; // Calculate progress for the current active milestone let progress = 0; if (isActive && index > 0) { const prevMilestone = milestones[index-1].days; const range = milestone.days - prevMilestone; const current = currentDays - prevMilestone; progress = (current / range) * 100; } else if (isActive && index === 0) { progress = (currentDays / milestone.days) * 100; } return (

{/* Circle on the timeline */}

{/* Content card */}

{/* Banner image */} {/* Two-column layout container */}

{/* Image column (2/3 width) */}

{/* Lock icon overlay for locked milestones */} {!isCompleted && !isActive && (

🔒

)}

{/* Day counter column (1/3 width) */}

{/* Day number with black background and gold border - matched to image height */}

{/* Content above the number */}

{isCompleted ? ✨ : <> {isActive ? '👑' : '👑'} ĐIỀU KIỆN }

{milestone.days}

MỤC TIÊU

{/* Content below the number */}

{isCompleted ? '⭐' : ''}

{/* Progress bar in separate row */}

{/* Progress bar with percentage inside */}

{/* Percentage text inside progress bar */}

{isCompleted ? '100%' : isActive ? `${Math.round(progress)}%` : '0%'}

{/* Enhanced Reward information */}

{/* Reward image with enhanced styling */}

{/* Gold overlay for completed milestones */} {isCompleted && (

)}

{/* Reward description with enhanced styling */}

{/* Reward value */}

{milestone.scholarship / 1000} Điểm

{/* Reward description */}

Gift Points

{/* Status badge for completed milestones only - removed for simplicity */}

); })} {/* Celebration popup */} m.days === celebratedMilestone?.days)) }} onClose={handleCloseCelebration} />

); }; // Export styles for possible reuse in other components export const timelineStyles = styles; // Add a fallback function to calculate scholarship amount based on days (kept for potential future use) // Note: calculateGiftPoints is now defined inside the component, so this function needs access to it // or calculateGiftPoints needs to be a standalone utility if used by multiple exported functions. // For now, assuming calculateScholarshipAmount is only used internally or can be adjusted. // If calculateScholarshipAmount is exported and needs calculateGiftPoints, // calculateGiftPoints should be defined outside the component or passed as an argument. // Let's keep calculateGiftPoints inside for now as the error originated from its useCallback. export const calculateScholarshipAmount = (days, giftPointsCalculator) => { const milestoneDays = [1, 3, 5, 10, 15]; // Use the actual milestone days let amount = 0; for (let i = milestoneDays.length - 1; i >= 0; i--) { if (days >= milestoneDays[i]) { amount = giftPointsCalculator ? giftPointsCalculator(milestoneDays[i]) : 0; // Get points for *that* milestone level break; } } return amount; // Returns points for the highest achieved milestone level }; // DailyGoalItem component const DailyGoalItem = ({ goal, isCompleted }) => { return (

{isCompleted && ✓}

{goal.title}

{goal.description}

); };