import React, { useState, useEffect } from 'react';
import { Activity, TrendingUp, AlertCircle, CheckCircle, Moon, Zap, Heart, Calendar, Award, Target, BarChart3, Settings, User, LogOut, Plus, ChevronRight, Bell, Flame } from 'lucide-react';
// Mock API service
const mockAPI = {
getDashboard: async () => ({
user: { name: 'Alex Johnson', streak: 15, totalWorkouts: 48 },
recommendation: {
acwr: 1.18,
wellness_score: 7.3,
pain_level: 1,
injury_risk: 0.15,
status: { color: 'green', text: 'Ready to Progress' },
recommendations: {
action: 'PROGRESS',
load_change_percent: 5,
message: "You're in the optimal zone! Add 5% to your main lifts today.",
focus: 'Progressive overload'
},
recovery: {
days_to_baseline: 0,
recovery_status: 0.95,
trajectory: 'improving',
baseline_wellness: 7.2
},
risk_factors: ['Low injury risk', 'Good recovery status'],
personalized_thresholds: { green_max: 1.35, yellow_max: 1.55 }
}
})
};
const EnhancedACWRApp = () => {
const [currentScreen, setCurrentScreen] = useState('dashboard');
const [dashboardData, setDashboardData] = useState(null);
const [loading, setLoading] = useState(true);
const [wellness, setWellness] = useState({
energy: 7, sleep: 7, soreness: 7, motivation: 7, pain: 0
});
const [checkinStep, setCheckinStep] = useState(0);
const [showCheckinResults, setShowCheckinResults] = useState(false);
useEffect(() => {
loadDashboard();
}, []);
const loadDashboard = async () => {
setLoading(true);
const data = await mockAPI.getDashboard();
setDashboardData(data);
setLoading(false);
};
const StatCard = ({ icon: Icon, label, value, max, color }) => (
{value}{max && `/${max}`}
{label}
{[
{ id: 'dashboard', icon: Activity, label: 'Home' },
{ id: 'checkin', icon: Heart, label: 'Check-In' },
{ id: 'workout', icon: Plus, label: 'Log' },
{ id: 'progress', icon: BarChart3, label: 'Progress' },
{ id: 'profile', icon: User, label: 'Profile' }
].map(nav => (
))}
);
const DashboardScreen = () => {
if (loading || !dashboardData) return Loading...
;
const { user, recommendation } = dashboardData;
const statusColors = {
green: 'from-green-500 to-green-600',
yellow: 'from-yellow-500 to-yellow-600',
orange: 'from-orange-500 to-orange-600',
red: 'from-red-500 to-red-600'
};
const statusColor = statusColors[recommendation.status.color];
return (
Hey, {user.name.split(' ')[0]}! 👋
Let's make today count
Training Load Status
{recommendation.acwr}
ACWR Score
0.8
{recommendation.personalized_thresholds.green_max}
{recommendation.personalized_thresholds.yellow_max}
2.0+
{recommendation.status.text}
Today's AI Recommendation
Confidence
85%
💪 Action Plan:
{recommendation.recommendations.message}
Key Insights:
{recommendation.risk_factors.map((factor, idx) => (
{factor}
))}
Recovery Status
{recommendation.recovery.trajectory}
Current: {recommendation.wellness_score}
Baseline: {recommendation.recovery.baseline_wellness}
Quick Actions
All Set! 🎉
Your daily check-in is complete
= 7 ? 'text-green-600' :
wellnessScore >= 6 ? 'text-yellow-600' :
wellnessScore >= 5 ? 'text-orange-600' :
'text-red-600'
}`}>{wellnessScore}
Wellness Score
{wellnessScore >= 8 ? 'Excellent' :
wellnessScore >= 7 ? 'Good' :
wellnessScore >= 6 ? 'Moderate' :
wellnessScore >= 5 ? 'Fair' : 'Low'}
{Object.entries(wellness).map(([key, value]) => {
// Pain uses reverse color logic (low is good, high is bad)
const isPain = key === 'pain';
let colorClass;
if (isPain) {
colorClass = value === 0 ? 'text-green-600' :
value <= 2 ? 'text-yellow-600' :
value <= 5 ? 'text-orange-600' :
'text-red-600';
} else {
colorClass = value >= 7 ? 'text-green-600' :
value >= 5 ? 'text-yellow-600' :
'text-orange-600';
}
return (
);
})}
{value}
{key}
{recommendation.message}
{recommendation.reasons && recommendation.reasons.length > 0 && (Why this recommendation:
-
{recommendation.reasons.map((reason, idx) => (
- • {reason} ))}
Daily Check-In
Question {checkinStep + 1} of {questions.length}
{questions.map((q, idx) => (
))}
{currentQuestion.desc}
Slide to rate how you feel
{wellness[currentQuestion.field]}
{wellness[currentQuestion.field] <= 3 ? 'Low' :
wellness[currentQuestion.field] <= 6 ? 'Moderate' : 'High'}
{currentQuestion.showZero ? 'None' : 'Low'}
Medium
High
{checkinStep > 0 && (
)}
Log Workout
Track your training session
Today's Recommendation
Add 5% weight to your main lifts today
Exercises
Workout logging coming soon...
Your Progress
Track your journey
Achievements
🔥
15
Day Streak
💪
48
Workouts
🎯
0
Injuries
Alex Johnson
Member since Jan 2025
{[
{ icon: Settings, label: 'Settings' },
{ icon: Award, label: 'Achievements' },
{ icon: Calendar, label: 'Training History' },
{ icon: Target, label: 'Goals' },
{ icon: LogOut, label: 'Logout' }
].map((item, idx) => (
))}
{currentScreen === 'dashboard' &&
);
};
export default EnhancedACWRApp;