import React, { useState, useEffect, useMemo, useRef } from 'react';
import { DietData, ExerciseData, SleepData, AdviceItem, WeeklyReport, GamificationState } from './types';
import { analyzeFoodImage, generateWeeklyReportAI } from './services/geminiService';
import { calculateGamificationState } from './services/gamificationLogic';
import { StepsChart, NutritionPieChart, SleepBarChart } from './components/AnalysisCharts';


// --- Helper: Generate Mock Data ---
const generateMockData = () => {
  const dates = Array.from({ length: 7 }, (_, i) => {
    const d = new Date();
    d.setDate(d.getDate() - (6 - i));
    return d.toISOString().split('T')[0];
  });


  const diets: DietData[] = dates.map(date => ({
    id: Math.random().toString(),
    date,
    calorieIntake: Math.floor(Math.random() * 600 + 400),
    vegRatio: Math.random() * 0.4 + 0.1, // 0.1 - 0.5
    proteinRatio: Math.random() * 0.3 + 0.1,
    starchRatio: Math.random() * 0.4 + 0.2,
    sugaryDrinksCount: Math.random() > 0.7 ? 1 : 0,
    friedFoodCount: Math.random() > 0.8 ? 1 : 0,
  }));


  const exercises: ExerciseData[] = dates.map(date => ({
    id: Math.random().toString(),
    date,
    dailySteps: Math.floor(Math.random() * 5000 + 4000), // 4000 - 9000
    moderateExerciseMinutes: Math.floor(Math.random() * 40),
    totalSittingMinutes: Math.floor(Math.random() * 100 + 300),
  }));


  const sleeps: SleepData[] = dates.map(date => ({
    id: Math.random().toString(),
    date,
    bedTime: "23:45",
    wakeTime: "06:30",
    sleepDuration: 6.5 + Math.random(),
    usedPhoneBeforeBed: Math.random() > 0.5,
  }));


  return { diets, exercises, sleeps };
};


// --- Core Analysis Logic Functions ---


const analyzeDiet = (weeklyData: DietData[]): AdviceItem[] => {
  const advice: AdviceItem[] = [];
  if (weeklyData.length === 0) return advice;


  // 1. Veg & Protein Ratio Check (Average of last 7 entries)
  const avgVeg = weeklyData.reduce((sum, d) => sum + d.vegRatio, 0) / weeklyData.length;
  const avgProtein = weeklyData.reduce((sum, d) => sum + d.proteinRatio, 0) / weeklyData.length;


  if (avgVeg < 0.5 || avgProtein < 0.25) {
    advice.push({
      category: 'Diet',
      title: '營養比例失衡',
      description: '建議採用「健康餐盤法」：1/2 蔬菜、1/4 蛋白質、1/4 澱粉。',
      priority: 'High'
    });
  }


  // 2. Sugary Drinks Check
  const totalSugary = weeklyData.reduce((sum, d) => sum + d.sugaryDrinksCount, 0);
  const avgSugary = totalSugary / weeklyData.length;
  // Threshold: > (7-3)/7 per day => > 0.57
  if (avgSugary > 0.57) {
    advice.push({
      category: 'Diet',
      title: '含糖飲料攝取過多',
      description: '提醒每週至少 3 天不喝含糖飲料，多喝水。',
      priority: 'Medium'
    });
  }


  return advice;
};


const analyzeExercise = (weeklyData: ExerciseData[]): AdviceItem[] => {
  const advice: AdviceItem[] = [];
  if (weeklyData.length === 0) return advice;


  // 1. Steps Check
  const avgSteps = weeklyData.reduce((sum, d) => sum + d.dailySteps, 0) / weeklyData.length;
  if (avgSteps < 8000) {
    advice.push({
      category: 'Exercise',
      title: '活動量不足',
      description: `目前平均步數 ${Math.round(avgSteps)} 步。建議每日目標：8,000–10,000 步。`,
      priority: 'Medium'
    });
  }


  // 2. Moderate Exercise Check (Weekly sum)
  const totalModMin = weeklyData.reduce((sum, d) => sum + d.moderateExerciseMinutes, 0);
  if (totalModMin < 180) { // 3 * 60
    advice.push({
      category: 'Exercise',
      title: '中等強度運動不足',
      description: '每週建議至少 3 次，共 180 分鐘的中等強度運動。',
      priority: 'High'
    });
  }


  // 3. Sitting Check (Simplified for daily avg)
  const avgSitting = weeklyData.reduce((sum, d) => sum + d.totalSittingMinutes, 0) / weeklyData.length;
  if (avgSitting > 480) { // > 8 hours
    advice.push({
      category: 'Exercise',
      title: '久坐時間過長',
      description: '建議每久坐 50 分鐘後，起身活動 5 分鐘。',
      priority: 'Low'
    });
  }


  return advice;
};


const analyzeSleep = (weeklyData: SleepData[]): AdviceItem[] => {
  const advice: AdviceItem[] = [];
  if (weeklyData.length === 0) return advice;


  // 1. Late Night Check
  const lateNights = weeklyData.filter(d => {
    const [hour] = d.bedTime.split(':').map(Number);
    // If hour is 0, 1, 2, 3 (past midnight) OR hour >= 23 and min > 30... simplified check
    return (hour >= 0 && hour < 5) || (hour === 23 && parseInt(d.bedTime.split(':')[1]) > 30);
  }).length;


  if (lateNights > 2) {
    advice.push({
      category: 'Sleep',
      title: '頻繁熬夜',
      description: '檢測到入睡時間較晚，建議養成規律作息，目標 23:00 前就寢。',
      priority: 'High'
    });
  }


  // 2. Duration Check
  const avgSleep = weeklyData.reduce((sum, d) => sum + d.sleepDuration, 0) / weeklyData.length;
  if (avgSleep < 7.5) {
    advice.push({
      category: 'Sleep',
      title: '睡眠時數不足',
      description: `平均睡眠僅 ${avgSleep.toFixed(1)} 小時。高中生建議每晚睡足 7.5 - 8.5 小時。`,
      priority: 'High'
    });
  }


  // 3. Phone Habits
  const phoneDays = weeklyData.filter(d => d.usedPhoneBeforeBed).length;
  if (phoneDays > 3) {
    advice.push({
      category: 'Sleep',
      title: '睡前使用手機',
      description: '藍光會影響褪黑激素分泌，建議睡前 30 分鐘不要使用手機。',
      priority: 'Medium'
    });
  }


  return advice;
};


// --- Main App Component ---


enum Tab {
  DASHBOARD = 'DASHBOARD',
  DIET = 'DIET',
  EXERCISE = 'EXERCISE',
  SLEEP = 'SLEEP',
  REPORT = 'REPORT'
}


export default function App() {
  const [activeTab, setActiveTab] = useState<Tab>(Tab.DASHBOARD);
 
  // Data State
  const [dietData, setDietData] = useState<DietData[]>([]);
  const [exerciseData, setExerciseData] = useState<ExerciseData[]>([]);
  const [sleepData, setSleepData] = useState<SleepData[]>([]);
 
  // Report State
  const [adviceList, setAdviceList] = useState<AdviceItem[]>([]);
  const [aiReportSummary, setAiReportSummary] = useState<string>('');
  const [isGeneratingReport, setIsGeneratingReport] = useState(false);


  // Gamification State
  const [gameState, setGameState] = useState<GamificationState>({
      totalPoints: 0,
      level: 1,
      progressToNextLevel: 0,
      badges: [],
      challenges: []
  });


  // Initialize with some mock data on first load for demo purposes
  useEffect(() => {
    const { diets, exercises, sleeps } = generateMockData();
    setDietData(diets);
    setExerciseData(exercises);
    setSleepData(sleeps);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);


  // Recalculate advice AND Gamification whenever data changes
  useEffect(() => {
    const dietAdvice = analyzeDiet(dietData);
    const exerciseAdvice = analyzeExercise(exerciseData);
    const sleepAdvice = analyzeSleep(sleepData);
    setAdviceList([...dietAdvice, ...exerciseAdvice, ...sleepAdvice]);


    // Update Gamification
    const newGameState = calculateGamificationState(dietData, exerciseData, sleepData);
    setGameState(newGameState);


  }, [dietData, exerciseData, sleepData]);


  // --- Input Handlers ---


  const handleDietSubmit = (data: DietData) => {
    setDietData(prev => [...prev, data]);
    setActiveTab(Tab.DASHBOARD);
  };


  const handleExerciseSubmit = (data: ExerciseData) => {
    setExerciseData(prev => [...prev, data]);
    setActiveTab(Tab.DASHBOARD);
  };


  const handleSleepSubmit = (data: SleepData) => {
    setSleepData(prev => [...prev, data]);
    setActiveTab(Tab.DASHBOARD);
  };


  const handleGenerateReport = async () => {
    setIsGeneratingReport(true);
    try {
      const summary = await generateWeeklyReportAI(dietData, exerciseData, sleepData, adviceList);
      setAiReportSummary(summary);
    } catch (e) {
      setAiReportSummary("報告生成失敗，請檢查網路連線。");
    } finally {
      setIsGeneratingReport(false);
    }
  };


  // --- Render Views ---


  return (
    <div className="min-h-screen bg-gray-50 text-gray-800 pb-20 font-sans">
      {/* Header */}
      <header className="bg-white shadow-sm sticky top-0 z-20">
        <div className="max-w-md mx-auto px-4 py-4 flex justify-between items-center">
          <h1 className="text-xl font-bold text-primary flex items-center">
            <i className="fa-solid fa-heart-pulse mr-2"></i>
            AI 智慧健康管理
          </h1>
          <button
            onClick={() => {
               const { diets, exercises, sleeps } = generateMockData();
               setDietData(diets); setExerciseData(exercises); setSleepData(sleeps);
            }}
            className="text-xs text-gray-400 hover:text-primary"
          >
            重置數據
          </button>
        </div>
      </header>


      {/* Main Content Area */}
      <main className="max-w-md mx-auto p-4 space-y-6">
       
        {activeTab === Tab.DASHBOARD && (
          <DashboardView
            dietData={dietData}
            exerciseData={exerciseData}
            sleepData={sleepData}
            adviceCount={adviceList.length}
            gameState={gameState}
            onNavigate={setActiveTab}
          />
        )}


        {activeTab === Tab.DIET && <DietInputView onSave={handleDietSubmit} onCancel={() => setActiveTab(Tab.DASHBOARD)} />}
        {activeTab === Tab.EXERCISE && <ExerciseInputView onSave={handleExerciseSubmit} onCancel={() => setActiveTab(Tab.DASHBOARD)} />}
        {activeTab === Tab.SLEEP && <SleepInputView onSave={handleSleepSubmit} onCancel={() => setActiveTab(Tab.DASHBOARD)} />}
       
        {activeTab === Tab.REPORT && (
          <ReportView
            adviceList={adviceList}
            summary={aiReportSummary}
            isGenerating={isGeneratingReport}
            onGenerate={handleGenerateReport}
          />
        )}


      </main>


      {/* Bottom Navigation */}
      <nav className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-10">
        <div className="max-w-md mx-auto flex justify-around py-3">
          <NavButton icon="fa-house" label="首頁" active={activeTab === Tab.DASHBOARD} onClick={() => setActiveTab(Tab.DASHBOARD)} />
          <NavButton icon="fa-carrot" label="飲食" active={activeTab === Tab.DIET} onClick={() => setActiveTab(Tab.DIET)} />
          <NavButton icon="fa-person-running" label="運動" active={activeTab === Tab.EXERCISE} onClick={() => setActiveTab(Tab.EXERCISE)} />
          <NavButton icon="fa-bed" label="睡眠" active={activeTab === Tab.SLEEP} onClick={() => setActiveTab(Tab.SLEEP)} />
          <NavButton icon="fa-file-medical" label="週報" active={activeTab === Tab.REPORT} onClick={() => setActiveTab(Tab.REPORT)} />
        </div>
      </nav>
    </div>
  );
}


// --- Sub-Components ---


const NavButton = ({ icon, label, active, onClick }: { icon: string, label: string, active: boolean, onClick: () => void }) => (
  <button onClick={onClick} className={`flex flex-col items-center w-full ${active ? 'text-primary' : 'text-gray-400'}`}>
    <i className={`fa-solid ${icon} text-lg mb-1`}></i>
    <span className="text-xs font-medium">{label}</span>
  </button>
);


const DashboardView: React.FC<any> = ({ dietData, exerciseData, sleepData, adviceCount, gameState, onNavigate }) => {
  return (
    <div className="space-y-6 animate-fade-in">
     
      {/* --- Gamification Section --- */}
      <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
          <div className="flex justify-between items-end mb-2">
              <div>
                  <h2 className="text-lg font-bold text-gray-800">等級 {gameState.level}</h2>
                  <span className="text-xs text-gray-500">總積分: {gameState.totalPoints}</span>
              </div>
              <span className="text-xs font-bold text-primary">{gameState.progressToNextLevel}%</span>
          </div>
          {/* Progress Bar */}
          <div className="w-full bg-gray-100 rounded-full h-2.5 mb-4">
              <div className="bg-primary h-2.5 rounded-full transition-all duration-500" style={{ width: `${gameState.progressToNextLevel}%` }}></div>
          </div>
         
          {/* Badges Preview */}
          <div className="flex space-x-3 overflow-x-auto no-scrollbar pb-2">
              {gameState.badges.map((badge: any) => (
                  <div key={badge.id} className={`flex-shrink-0 flex flex-col items-center justify-center w-16 h-16 rounded-lg border ${badge.isUnlocked ? 'border-amber-200 bg-amber-50' : 'border-gray-100 bg-gray-50 opacity-50'}`}>
                      <i className={`fa-solid ${badge.icon} text-xl mb-1 ${badge.isUnlocked ? badge.color : 'text-gray-300'}`}></i>
                      <span className="text-[10px] text-gray-600 truncate w-14 text-center">{badge.name}</span>
                  </div>
              ))}
          </div>
      </div>


      {/* --- Active Challenges --- */}
      <div className="space-y-3">
          <h3 className="font-bold text-gray-700 flex items-center">
              <i className="fa-solid fa-trophy text-accent mr-2"></i> 本週挑戰
          </h3>
          {gameState.challenges.map((challenge: any) => (
              <div key={challenge.id} className="bg-white p-3 rounded-lg border border-gray-100 shadow-sm flex items-center space-x-3">
                  <div className={`w-10 h-10 rounded-full flex items-center justify-center ${challenge.isCompleted ? 'bg-green-100 text-green-600' : 'bg-blue-50 text-blue-500'}`}>
                      <i className={`fa-solid ${challenge.type === 'Diet' ? 'fa-carrot' : challenge.type === 'Exercise' ? 'fa-person-running' : 'fa-bed'}`}></i>
                  </div>
                  <div className="flex-1">
                      <div className="flex justify-between">
                          <h4 className="text-sm font-bold text-gray-800">{challenge.title}</h4>
                          <span className="text-xs text-gray-500">{challenge.current} / {challenge.target} {challenge.unit}</span>
                      </div>
                      <div className="w-full bg-gray-100 rounded-full h-1.5 mt-1">
                          <div className={`h-1.5 rounded-full ${challenge.isCompleted ? 'bg-green-500' : 'bg-blue-500'}`}
                               style={{ width: `${Math.min(100, (challenge.current / challenge.target) * 100)}%` }}></div>
                      </div>
                  </div>
              </div>
          ))}
      </div>


      {/* Status Cards */}
      <div className="grid grid-cols-2 gap-4">
        <div className="bg-gradient-to-br from-emerald-400 to-emerald-600 text-white p-4 rounded-xl shadow-lg"
             onClick={() => onNavigate(Tab.REPORT)}>
          <div className="flex justify-between items-start">
            <span className="text-sm font-medium opacity-90">待處理建議</span>
            <i className="fa-solid fa-bell opacity-80"></i>
          </div>
          <div className="mt-2 text-3xl font-bold">{adviceCount}</div>
          <div className="text-xs opacity-75 mt-1">點擊查看建議</div>
        </div>
        <div className="bg-white p-4 rounded-xl shadow-md border border-gray-100 flex flex-col justify-center items-center text-center">
             <span className="text-gray-500 text-sm mb-1">今日紀錄</span>
             <span className="text-primary font-bold text-lg">
                {(new Date()).toISOString().split('T')[0].slice(5)}
             </span>
             <span className="text-xs text-gray-400 mt-1">保持健康好習慣！</span>
        </div>
      </div>


      {/* Charts */}
      <div className="space-y-4">
        <StepsChart data={exerciseData} />
        <NutritionPieChart data={dietData} />
        <SleepBarChart data={sleepData} />
      </div>
    </div>
  );
};


// --- Input Views ---


const DietInputView: React.FC<{ onSave: (d: DietData) => void, onCancel: () => void }> = ({ onSave, onCancel }) => {
  const [analyzing, setAnalyzing] = useState(false);
  const [imagePreview, setImagePreview] = useState<string | null>(null);
  const [formData, setFormData] = useState<Partial<DietData>>({
    date: new Date().toISOString().split('T')[0],
    sugaryDrinksCount: 0,
    friedFoodCount: 0
  });


  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;


    // Preview
    const reader = new FileReader();
    reader.onloadend = async () => {
      const base64 = reader.result as string;
      setImagePreview(base64);
     
      // Analyze with Gemini
      setAnalyzing(true);
      try {
        const base64Data = base64.split(',')[1]; // Remove data:image/jpeg;base64,
        const result = await analyzeFoodImage(base64Data);
        setFormData(prev => ({
          ...prev,
          ...result
        }));
      } catch (error) {
        alert("分析失敗，請手動輸入數據");
      } finally {
        setAnalyzing(false);
      }
    };
    reader.readAsDataURL(file);
  };


  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (formData.calorieIntake !== undefined) {
      onSave({
        id: Math.random().toString(),
        date: formData.date!,
        calorieIntake: formData.calorieIntake!,
        vegRatio: formData.vegRatio || 0,
        proteinRatio: formData.proteinRatio || 0,
        starchRatio: formData.starchRatio || 0,
        sugaryDrinksCount: formData.sugaryDrinksCount || 0,
        friedFoodCount: formData.friedFoodCount || 0
      });
    } else {
        alert("請輸入完整的飲食資訊或上傳照片");
    }
  };


  return (
    <div className="bg-white p-6 rounded-xl shadow-md space-y-4 animate-fade-in-up">
      <h2 className="text-xl font-bold text-gray-800">新增飲食紀錄</h2>
     
      <div className="space-y-2">
        <label className="block text-sm font-medium text-gray-700">拍照/上傳食物 (Gemini AI 分析)</label>
        <div className="relative">
          <input type="file" accept="image/*" onChange={handleFileChange} className="hidden" id="food-upload" />
          <label htmlFor="food-upload" className="flex flex-col items-center justify-center w-full h-40 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 bg-gray-50 overflow-hidden">
            {imagePreview ? (
              <img src={imagePreview} alt="Preview" className="w-full h-full object-cover" />
            ) : (
              <>
                <i className="fa-solid fa-camera text-2xl text-gray-400 mb-2"></i>
                <span className="text-sm text-gray-500">點擊上傳</span>
              </>
            )}
          </label>
        </div>
      </div>


      {analyzing && (
        <div className="flex items-center text-primary space-x-2">
            <i className="fa-solid fa-circle-notch fa-spin"></i>
            <span>AI 正在分析營養成分...</span>
        </div>
      )}


      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
           <label className="text-xs text-gray-500">日期</label>
           <input type="date" value={formData.date} onChange={e => setFormData({...formData, date: e.target.value})} className="w-full border rounded p-2" />
        </div>
       
        <div className="grid grid-cols-2 gap-4">
            <div>
                <label className="text-xs text-gray-500">熱量 (kcal)</label>
                <input type="number" value={formData.calorieIntake || ''} onChange={e => setFormData({...formData, calorieIntake: Number(e.target.value)})} className="w-full border rounded p-2" placeholder="0" />
            </div>
            <div>
                 <label className="text-xs text-gray-500">含糖飲料(次)</label>
                 <input type="number" value={formData.sugaryDrinksCount} onChange={e => setFormData({...formData, sugaryDrinksCount: Number(e.target.value)})} className="w-full border rounded p-2" />
            </div>
        </div>


        <div>
             <label className="text-xs text-gray-500 block mb-1">餐盤比例 (0-1)</label>
             <div className="flex space-x-2">
                <input type="number" step="0.1" max="1" placeholder="菜" value={formData.vegRatio || ''} onChange={e => setFormData({...formData, vegRatio: Number(e.target.value)})} className="w-full border rounded p-2 bg-green-50" />
                <input type="number" step="0.1" max="1" placeholder="肉" value={formData.proteinRatio || ''} onChange={e => setFormData({...formData, proteinRatio: Number(e.target.value)})} className="w-full border rounded p-2 bg-red-50" />
                <input type="number" step="0.1" max="1" placeholder="飯" value={formData.starchRatio || ''} onChange={e => setFormData({...formData, starchRatio: Number(e.target.value)})} className="w-full border rounded p-2 bg-yellow-50" />
             </div>
        </div>


        <div className="flex space-x-3 pt-2">
             <button type="button" onClick={onCancel} className="flex-1 py-2 rounded-lg border border-gray-300 text-gray-600">取消</button>
             <button type="submit" className="flex-1 py-2 rounded-lg bg-primary text-white font-bold shadow-md hover:bg-emerald-600">儲存</button>
        </div>
      </form>
    </div>
  );
};


const ExerciseInputView: React.FC<{ onSave: (d: ExerciseData) => void, onCancel: () => void }> = ({ onSave, onCancel }) => {
    const [data, setData] = useState<Partial<ExerciseData>>({
        date: new Date().toISOString().split('T')[0],
        dailySteps: 0,
        moderateExerciseMinutes: 0,
        totalSittingMinutes: 0
    });


    return (
        <div className="bg-white p-6 rounded-xl shadow-md space-y-4 animate-fade-in-up">
             <h2 className="text-xl font-bold text-gray-800">新增運動紀錄</h2>
             <div className="space-y-4">
                 <div>
                    <label className="text-xs text-gray-500">日期</label>
                    <input type="date" value={data.date} onChange={e => setData({...data, date: e.target.value})} className="w-full border rounded p-2" />
                 </div>
                 <div>
                    <label className="text-xs text-gray-500">今日步數</label>
                    <input type="number" value={data.dailySteps || ''} onChange={e => setData({...data, dailySteps: Number(e.target.value)})} className="w-full border rounded p-2" placeholder="ex: 8000" />
                 </div>
                 <div>
                    <label className="text-xs text-gray-500">中等強度運動 (分鐘)</label>
                    <input type="number" value={data.moderateExerciseMinutes || ''} onChange={e => setData({...data, moderateExerciseMinutes: Number(e.target.value)})} className="w-full border rounded p-2" placeholder="ex: 30" />
                 </div>
                 <div>
                    <label className="text-xs text-gray-500">久坐時間 (分鐘)</label>
                    <input type="number" value={data.totalSittingMinutes || ''} onChange={e => setData({...data, totalSittingMinutes: Number(e.target.value)})} className="w-full border rounded p-2" placeholder="ex: 480" />
                 </div>
                 <div className="flex space-x-3 pt-2">
                    <button onClick={onCancel} className="flex-1 py-2 rounded-lg border border-gray-300 text-gray-600">取消</button>
                    <button onClick={() => onSave({id: Math.random().toString(), ...data} as ExerciseData)} className="flex-1 py-2 rounded-lg bg-secondary text-white font-bold shadow-md hover:bg-blue-600">儲存</button>
                </div>
             </div>
        </div>
    )
}


const SleepInputView: React.FC<{ onSave: (d: SleepData) => void, onCancel: () => void }> = ({ onSave, onCancel }) => {
    const [data, setData] = useState<Partial<SleepData>>({
        date: new Date().toISOString().split('T')[0],
        bedTime: '23:00',
        wakeTime: '07:00',
        usedPhoneBeforeBed: false
    });


    const calculateDuration = () => {
        const start = new Date(`2000-01-01T${data.bedTime}`);
        const end = new Date(`2000-01-01T${data.wakeTime}`);
        if (end < start) end.setDate(end.getDate() + 1);
        const diff = (end.getTime() - start.getTime()) / 1000 / 60 / 60;
        return diff;
    }


    return (
        <div className="bg-white p-6 rounded-xl shadow-md space-y-4 animate-fade-in-up">
             <h2 className="text-xl font-bold text-gray-800">新增睡眠紀錄</h2>
             <div className="space-y-4">
                 <div>
                    <label className="text-xs text-gray-500">日期</label>
                    <input type="date" value={data.date} onChange={e => setData({...data, date: e.target.value})} className="w-full border rounded p-2" />
                 </div>
                 <div className="grid grid-cols-2 gap-4">
                    <div>
                        <label className="text-xs text-gray-500">入睡時間</label>
                        <input type="time" value={data.bedTime} onChange={e => setData({...data, bedTime: e.target.value})} className="w-full border rounded p-2" />
                    </div>
                    <div>
                        <label className="text-xs text-gray-500">起床時間</label>
                        <input type="time" value={data.wakeTime} onChange={e => setData({...data, wakeTime: e.target.value})} className="w-full border rounded p-2" />
                    </div>
                 </div>
                 
                 <div className="flex items-center space-x-2 py-2">
                    <input type="checkbox" id="phone" checked={data.usedPhoneBeforeBed} onChange={e => setData({...data, usedPhoneBeforeBed: e.target.checked})} className="w-5 h-5 text-primary rounded" />
                    <label htmlFor="phone" className="text-gray-700">睡前 30 分鐘使用手機</label>
                 </div>


                 <div className="flex space-x-3 pt-2">
                    <button onClick={onCancel} className="flex-1 py-2 rounded-lg border border-gray-300 text-gray-600">取消</button>
                    <button onClick={() => onSave({id: Math.random().toString(), sleepDuration: calculateDuration(), ...data} as SleepData)} className="flex-1 py-2 rounded-lg bg-accent text-white font-bold shadow-md hover:bg-amber-600">儲存</button>
                </div>
             </div>
        </div>
    )
}


const ReportView: React.FC<{ adviceList: AdviceItem[], summary: string, isGenerating: boolean, onGenerate: () => void }> = ({ adviceList, summary, isGenerating, onGenerate }) => {
    return (
        <div className="space-y-6 animate-fade-in pb-12">
           
            {/* AI Report Card */}
            <div className="bg-gradient-to-r from-indigo-500 to-purple-600 text-white p-6 rounded-xl shadow-lg">
                <div className="flex justify-between items-center mb-4">
                     <h2 className="text-xl font-bold"><i className="fa-solid fa-robot mr-2"></i>AI 健康週報</h2>
                     {!summary && !isGenerating && (
                         <button onClick={onGenerate} className="bg-white text-indigo-600 px-4 py-1.5 rounded-full text-sm font-bold shadow hover:bg-gray-100 transition">
                             生成分析
                         </button>
                     )}
                </div>
               
                {isGenerating ? (
                    <div className="py-8 text-center">
                        <i className="fa-solid fa-spinner fa-spin text-3xl mb-2"></i>
                        <p>AI 正在分析您的健康數據...</p>
                    </div>
                ) : summary ? (
                    <div className="bg-white/10 p-4 rounded-lg text-sm leading-relaxed backdrop-blur-sm">
                        {summary.split('\n').map((line, i) => <p key={i} className="mb-2">{line}</p>)}
                    </div>
                ) : (
                    <p className="opacity-80 text-sm">點擊生成按鈕，讓 AI 為您分析本週的健康狀況並提供建議。</p>
                )}
            </div>


            {/* Advice Table */}
            <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                <div className="p-4 border-b border-gray-100 bg-gray-50">
                    <h3 className="font-bold text-gray-700">系統建議摘要</h3>
                </div>
                {adviceList.length === 0 ? (
                    <div className="p-8 text-center text-gray-400">
                        <i className="fa-regular fa-thumbs-up text-3xl mb-2"></i>
                        <p>太棒了！目前沒有發現顯著的健康問題。</p>
                    </div>
                ) : (
                    <div className="divide-y divide-gray-100">
                        {adviceList.map((advice, idx) => (
                            <div key={idx} className="p-4 flex items-start space-x-3">
                                <div className={`mt-1 w-2 h-2 rounded-full flex-shrink-0
                                    ${advice.priority === 'High' ? 'bg-red-500' : advice.priority === 'Medium' ? 'bg-yellow-500' : 'bg-green-500'}`}
                                />
                                <div>
                                    <div className="flex items-center space-x-2">
                                        <span className="text-xs font-bold text-gray-400 uppercase tracking-wider">{advice.category}</span>
                                        <h4 className="font-bold text-gray-800">{advice.title}</h4>
                                    </div>
                                    <p className="text-sm text-gray-600 mt-1">{advice.description}</p>
                                </div>
                            </div>
                        ))}
                    </div>
                )}
            </div>
        </div>
    );
};


import React from 'react';
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
  PieChart,
  Pie,
  Cell,
  BarChart,
  Bar
} from 'recharts';
import { DietData, ExerciseData, SleepData } from '../types';


interface ChartProps {
  dietData: DietData[];
  exerciseData: ExerciseData[];
  sleepData: SleepData[];
}


const COLORS = ['#10B981', '#3B82F6', '#F59E0B', '#EF4444'];


export const StepsChart: React.FC<{ data: ExerciseData[] }> = ({ data }) => {
  // Take last 7 entries
  const chartData = data.slice(-7).map(d => ({
    name: d.date.substring(5), // MM-DD
    steps: d.dailySteps
  }));


  return (
    <div className="bg-white p-4 rounded-xl shadow-sm border border-gray-100 h-64">
      <h3 className="text-gray-700 font-bold mb-4 flex items-center">
        <i className="fa-solid fa-person-walking text-primary mr-2"></i> 每日步數趨勢
      </h3>
      <ResponsiveContainer width="100%" height="80%">
        <LineChart data={chartData}>
          <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
          <XAxis dataKey="name" fontSize={12} stroke="#9CA3AF" />
          <YAxis fontSize={12} stroke="#9CA3AF" />
          <Tooltip
            contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)' }}
          />
          <Line type="monotone" dataKey="steps" stroke="#10B981" strokeWidth={3} activeDot={{ r: 6 }} name="步數" />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
};


export const NutritionPieChart: React.FC<{ data: DietData[] }> = ({ data }) => {
  // Calculate average ratios
  const total = data.length || 1;
  const avgVeg = data.reduce((acc, curr) => acc + curr.vegRatio, 0) / total;
  const avgProtein = data.reduce((acc, curr) => acc + curr.proteinRatio, 0) / total;
  const avgStarch = data.reduce((acc, curr) => acc + curr.starchRatio, 0) / total;
 
  // Normalize slightly if they don't add to 1 for the chart
  const sum = avgVeg + avgProtein + avgStarch || 1;
 
  const chartData = [
    { name: '蔬菜', value: avgVeg / sum },
    { name: '蛋白質', value: avgProtein / sum },
    { name: '澱粉', value: avgStarch / sum },
  ];


  return (
    <div className="bg-white p-4 rounded-xl shadow-sm border border-gray-100 h-64">
      <h3 className="text-gray-700 font-bold mb-2 flex items-center">
        <i className="fa-solid fa-carrot text-accent mr-2"></i> 平均營養比例
      </h3>
      <ResponsiveContainer width="100%" height="85%">
        <PieChart>
          <Pie
            data={chartData}
            cx="50%"
            cy="50%"
            innerRadius={60}
            outerRadius={80}
            fill="#8884d8"
            paddingAngle={5}
            dataKey="value"
          >
            {chartData.map((entry, index) => (
              <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
            ))}
          </Pie>
          <Tooltip />
          <Legend verticalAlign="bottom" height={36}/>
        </PieChart>
      </ResponsiveContainer>
    </div>
  );
};


export const SleepBarChart: React.FC<{ data: SleepData[] }> = ({ data }) => {
    const chartData = data.slice(-7).map(d => ({
        name: d.date.substring(5),
        hours: d.sleepDuration
    }));


    return (
        <div className="bg-white p-4 rounded-xl shadow-sm border border-gray-100 h-64">
             <h3 className="text-gray-700 font-bold mb-4 flex items-center">
                <i className="fa-solid fa-bed text-secondary mr-2"></i> 睡眠時數
            </h3>
            <ResponsiveContainer width="100%" height="80%">
                <BarChart data={chartData}>
                    <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f0f0f0" />
                    <XAxis dataKey="name" fontSize={12} stroke="#9CA3AF" />
                    <YAxis fontSize={12} stroke="#9CA3AF" />
                    <Tooltip cursor={{fill: '#F3F4F6'}} contentStyle={{ borderRadius: '8px' }}/>
                    <Bar dataKey="hours" fill="#3B82F6" radius={[4, 4, 0, 0]} name="小時" />
                </BarChart>
            </ResponsiveContainer>
        </div>
    )
}


<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>AI 智慧健康管理系統</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              primary: '#10B981', // Emerald 500
              secondary: '#3B82F6', // Blue 500
              accent: '#F59E0B', // Amber 500
              background: '#F3F4F6', // Gray 100
              surface: '#FFFFFF',
            }
          }
        }
      }
    </script>
    <style>
      body {
        font-family: 'Segoe UI', 'Microsoft JhengHei', sans-serif;
        background-color: #F3F4F6;
      }
      /* Hide scrollbar for Chrome, Safari and Opera */
      .no-scrollbar::-webkit-scrollbar {
          display: none;
      }
      /* Hide scrollbar for IE, Edge and Firefox */
      .no-scrollbar {
          -ms-overflow-style: none;  /* IE and Edge */
          scrollbar-width: none;  /* Firefox */
      }
    </style>
  <script type="importmap">
{
  "imports": {
    "react": "https://esm.sh/react@^19.2.3",
    "react-dom/": "https://esm.sh/react-dom@^19.2.3/",
    "react/": "https://esm.sh/react@^19.2.3/",
    "@google/genai": "https://esm.sh/@google/genai@^1.33.0",
    "recharts": "https://esm.sh/recharts@^3.5.1"
  }
}
</script>
</head>
  <body>
    <div id="root"></div>
  </body>
</html>
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';


const rootElement = document.getElementById('root');
if (!rootElement) {
  throw new Error("Could not find root element to mount to");
}


const root = ReactDOM.createRoot(rootElement);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
{
  "name": "AI 智慧健康管理系統",
  "description": "高中生全方位健康追蹤應用程式。整合飲食、運動與睡眠數據，利用 Gemini Vision 辨識飲食內容，並提供個人化健康建議與週報分析。",
  "requestFramePermissions": [
    "camera"
  ]
}
import { DietData, ExerciseData, SleepData, Badge, Challenge, GamificationState } from '../types';


export const calculateGamificationState = (
  diets: DietData[],
  exercises: ExerciseData[],
  sleeps: SleepData[]
): GamificationState => {
  let points = 0;


  // --- 1. Point Calculation System ---
  // Diet Points
  diets.forEach(d => {
    // Balanced Meal: Veg >= 30%, Protein >= 20%
    if (d.vegRatio >= 0.3 && d.proteinRatio >= 0.2) points += 20;
    // Healthy Choice: No sugary drinks
    if (d.sugaryDrinksCount === 0) points += 10;
    // Healthy Choice: No fried food
    if (d.friedFoodCount === 0) points += 10;
  });


  // Exercise Points
  exercises.forEach(e => {
    // Step Goal
    if (e.dailySteps >= 8000) points += 15;
    // Extra Push
    if (e.dailySteps >= 12000) points += 10;
    // Moderate Exercise
    if (e.moderateExerciseMinutes >= 30) points += 20;
  });


  // Sleep Points
  sleeps.forEach(s => {
    // Good Sleep Duration
    if (s.sleepDuration >= 7.0 && s.sleepDuration <= 9.0) points += 20;
    // Good Habits
    if (!s.usedPhoneBeforeBed) points += 15;
  });


  // Level System: Every 200 points is a level
  const pointsPerLevel = 200;
  const level = Math.floor(points / pointsPerLevel) + 1;
  const progressToNextLevel = Math.floor(((points % pointsPerLevel) / pointsPerLevel) * 100);


  // --- 2. Badges Logic ---
  const badges: Badge[] = [
    {
      id: 'first_step',
      name: '初出茅廬',
      description: '紀錄第一筆運動數據',
      icon: 'fa-person-walking',
      color: 'text-blue-400',
      isUnlocked: exercises.length > 0
    },
    {
      id: 'step_master',
      name: '萬步天王',
      description: '單日步數超過 10,000 步',
      icon: 'fa-fire',
      color: 'text-red-500',
      isUnlocked: exercises.some(e => e.dailySteps >= 10000)
    },
    {
      id: 'sleep_streak',
      name: '好眠大師',
      description: '連續 3 天睡眠達標 (7+ 小時)',
      icon: 'fa-moon',
      color: 'text-purple-400',
      isUnlocked: false // Calculated below
    },
    {
      id: 'clean_eater',
      name: '飲食清流',
      description: '累積 3 天不喝含糖飲料',
      icon: 'fa-leaf',
      color: 'text-green-500',
      isUnlocked: diets.filter(d => d.sugaryDrinksCount === 0).length >= 3
    }
  ];


  // Logic for Sleep Streak
  let sleepStreak = 0;
  let maxSleepStreak = 0;
  const sortedSleeps = [...sleeps].sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
 
  sortedSleeps.forEach(s => {
      if (s.sleepDuration >= 7) {
          sleepStreak++;
          maxSleepStreak = Math.max(maxSleepStreak, sleepStreak);
      } else {
          sleepStreak = 0;
      }
  });
  if (maxSleepStreak >= 3) {
      const badge = badges.find(b => b.id === 'sleep_streak');
      if (badge) badge.isUnlocked = true;
  }


  // --- 3. Weekly Challenges Logic ---
  // We assume the data passed in is roughly for the "current week" for simplicity
  const totalSteps = exercises.reduce((acc, curr) => acc + curr.dailySteps, 0);
  const totalModMins = exercises.reduce((acc, curr) => acc + curr.moderateExerciseMinutes, 0);
  const balancedMeals = diets.filter(d => d.vegRatio >= 0.3 && d.proteinRatio >= 0.2).length;


  const challenges: Challenge[] = [
    {
      id: 'weekly_steps',
      title: '本週步數挑戰',
      description: '累積 50,000 步',
      target: 50000,
      current: totalSteps,
      unit: '步',
      isCompleted: totalSteps >= 50000,
      type: 'Exercise'
    },
    {
      id: 'active_week',
      title: '熱血燃燒',
      description: '累積 150 分鐘中等強度運動',
      target: 150,
      current: totalModMins,
      unit: '分鐘',
      isCompleted: totalModMins >= 150,
      type: 'Exercise'
    },
    {
      id: 'balanced_diet',
      title: '營養滿分',
      description: '攝取 5 餐均衡飲食',
      target: 5,
      current: balancedMeals,
      unit: '餐',
      isCompleted: balancedMeals >= 5,
      type: 'Diet'
    }
  ];


  return {
    totalPoints: points,
    level,
    progressToNextLevel,
    badges,
    challenges
  };
};


import { GoogleGenAI, Type, Schema } from "@google/genai";
import { DietData, ExerciseData, SleepData, WeeklyReport, AdviceItem } from '../types';


const getClient = () => {
  const apiKey = process.env.API_KEY;
  if (!apiKey) {
    throw new Error("API Key not found in environment variables");
  }
  return new GoogleGenAI({ apiKey });
};


// --- Image Analysis for Diet ---


interface FoodAnalysisResult {
  calorieIntake: number;
  vegRatio: number;
  proteinRatio: number;
  starchRatio: number;
  sugaryDrinksCount: number;
  friedFoodCount: number;
}


export const analyzeFoodImage = async (base64Image: string): Promise<FoodAnalysisResult> => {
  const ai = getClient();
  const modelId = "gemini-2.5-flash"; // Fast and capable for vision


  const schema: Schema = {
    type: Type.OBJECT,
    properties: {
      calorieIntake: { type: Type.NUMBER, description: "Estimated total calories in kcal" },
      vegRatio: { type: Type.NUMBER, description: "Ratio of vegetables (0.0 to 1.0)" },
      proteinRatio: { type: Type.NUMBER, description: "Ratio of protein sources (0.0 to 1.0)" },
      starchRatio: { type: Type.NUMBER, description: "Ratio of starch/carbs (0.0 to 1.0)" },
      sugaryDrinksCount: { type: Type.INTEGER, description: "Count of sugary drinks visible (usually 0 or 1)" },
      friedFoodCount: { type: Type.INTEGER, description: "Count of fried food items visible (usually 0 or 1)" },
    },
    required: ["calorieIntake", "vegRatio", "proteinRatio", "starchRatio", "sugaryDrinksCount", "friedFoodCount"],
  };


  const prompt = `Analyze this food image for a high school student's health log.
  Estimate the nutritional content based on the visible food.
  Provide ratios for vegetables, protein, and starch (they should roughly sum to 1.0, but it's okay if not exact).
  Identify if there are sugary drinks or fried foods.`;


  try {
    const response = await ai.models.generateContent({
      model: modelId,
      contents: {
        parts: [
            { inlineData: { mimeType: "image/jpeg", data: base64Image } },
            { text: prompt }
        ]
      },
      config: {
        responseMimeType: "application/json",
        responseSchema: schema,
      },
    });


    const text = response.text;
    if (!text) throw new Error("No response from Gemini");
   
    return JSON.parse(text) as FoodAnalysisResult;
  } catch (error) {
    console.error("Gemini Image Analysis Error:", error);
    // Fallback or re-throw
    throw error;
  }
};


// --- Weekly Report Generation ---


export const generateWeeklyReportAI = async (
  dietData: DietData[],
  exerciseData: ExerciseData[],
  sleepData: SleepData[],
  manualAdvice: AdviceItem[]
): Promise<string> => {
  const ai = getClient();
  const modelId = "gemini-2.5-flash";


  // Format data for the prompt
  const dataSummary = {
    diet: dietData.map(d => ({ date: d.date, cal: d.calorieIntake, veg: d.vegRatio, sugary: d.sugaryDrinksCount })),
    exercise: exerciseData.map(e => ({ date: e.date, steps: e.dailySteps, modMin: e.moderateExerciseMinutes, sitting: e.totalSittingMinutes })),
    sleep: sleepData.map(s => ({ date: s.date, duration: s.sleepDuration, bedTime: s.bedTime, phone: s.usedPhoneBeforeBed })),
    systemDetectedIssues: manualAdvice
  };


  const prompt = `
  Role: School Health Nurse AI.
  Target Audience: High School Student.
  Task: Write a friendly, encouraging, but serious weekly health summary based on the provided data JSON.
 
  Data Provided: ${JSON.stringify(dataSummary)}


  Requirements:
  1. Summarize their performance in Diet, Exercise, and Sleep.
  2. Specifically reference the "systemDetectedIssues" if any exist.
  3. Give 1 concrete, actionable goal for next week.
  4. Keep it under 200 words.
  5. Use Traditional Chinese (zh-TW).
  `;


  try {
    const response = await ai.models.generateContent({
      model: modelId,
      contents: prompt,
      config: {
        maxOutputTokens: 500,
        temperature: 0.7,
      },
    });


    return response.text || "無法生成報告，請稍後再試。";
  } catch (error) {
    console.error("Gemini Report Generation Error:", error);
    return "生成報告時發生錯誤。";
  }
};


export interface DietData {
  id: string;
  date: string; // YYYY-MM-DD
  calorieIntake: number;
  vegRatio: number; // 0.0 - 1.0
  proteinRatio: number; // 0.0 - 1.0
  starchRatio: number; // 0.0 - 1.0
  sugaryDrinksCount: number;
  friedFoodCount: number;
  imageUrl?: string;
}


export interface ExerciseData {
  id: string;
  date: string; // YYYY-MM-DD
  dailySteps: number;
  moderateExerciseMinutes: number;
  totalSittingMinutes: number;
}


export interface SleepData {
  id: string;
  date: string; // YYYY-MM-DD
  bedTime: string; // HH:mm
  wakeTime: string; // HH:mm
  sleepDuration: number; // Hours (float)
  usedPhoneBeforeBed: boolean;
}


export interface AdviceItem {
  category: 'Diet' | 'Exercise' | 'Sleep';
  title: string;
  description: string;
  priority: 'High' | 'Medium' | 'Low';
}


export interface WeeklyReport {
  generatedAt: string;
  summary: string;
  adviceList: AdviceItem[];
}


// --- Gamification Types ---


export interface Badge {
  id: string;
  name: string;
  description: string;
  icon: string; // Font Awesome class suffix (e.g., 'trophy')
  color: string; // Tailwind color class (e.g., 'text-yellow-400')
  isUnlocked: boolean;
  unlockedDate?: string;
}


export interface Challenge {
  id: string;
  title: string;
  description: string;
  target: number;
  current: number;
  unit: string;
  isCompleted: boolean;
  type: 'Diet' | 'Exercise' | 'Sleep';
}


export interface GamificationState {
  totalPoints: number;
  level: number;
  progressToNextLevel: number; // 0 - 100
  badges: Badge[];
  challenges: Challenge[];
}