import React, { useState, useEffect, useMemo } from 'react';
import { 
  Leaf, Droplet, Sun, CheckCircle2, Circle, Scale, 
  Trees, TrendingDown, TrendingUp, Award, Wind, 
  Plus, User, Settings, Trash2, X, ChevronRight, Activity, Calendar, Target,
  AlertTriangle
} from 'lucide-react';

// --- Toast 通知元件 ---
const Toast = ({ message, type, onClose }) => {
  useEffect(() => {
    const timer = setTimeout(onClose, 3000);
    return () => clearTimeout(timer);
  }, [onClose]);

  return (
    <div className="absolute top-6 left-1/2 transform -translate-x-1/2 z-[100] animate-in slide-in-from-top-4 fade-in duration-300">
      <div className={`px-6 py-3 rounded-full shadow-lg font-bold text-sm flex items-center space-x-2 ${
        type === 'success' ? 'bg-emerald-500 text-white' : 
        type === 'reward' ? 'bg-gradient-to-r from-amber-400 to-orange-500 text-white shadow-orange-500/30' : 
        type === 'error' ? 'bg-red-500 text-white' :
        'bg-stone-800 text-white'
      }`}>
        {type === 'success' && <CheckCircle2 size={18} />}
        {type === 'reward' && <Award size={18} />}
        {type === 'error' && <AlertTriangle size={18} />}
        <span>{message}</span>
      </div>
    </div>
  );
};

// --- SVG 折線圖元件 ---
const LineChart = ({ data }) => {
  if (data.length === 0) return (
    <div className="h-48 flex items-center justify-center text-stone-400 text-sm bg-stone-50 rounded-2xl border border-stone-100">
      還沒有足夠的數據畫圖表喔 🌱
    </div>
  );

  // 整理資料：按照日期由舊到新排序
  const sortedData = [...data].sort((a, b) => new Date(a.dateStr) - new Date(b.dateStr));
  
  const width = 300;
  const height = 150;
  const padding = 20;

  const minWeight = Math.floor(Math.min(...sortedData.map(d => d.weight))) - 1;
  const maxWeight = Math.ceil(Math.max(...sortedData.map(d => d.weight))) + 1;
  const weightRange = maxWeight - minWeight || 1; // 避免除以 0

  const getX = (index) => padding + (index * ((width - padding * 2) / Math.max(1, sortedData.length - 1)));
  const getY = (weight) => height - padding - ((weight - minWeight) / weightRange) * (height - padding * 2);

  const points = sortedData.map((d, i) => `${getX(i)},${getY(d.weight)}`).join(' ');
  const areaPath = `M ${getX(0)},${height - padding} L ${points} L ${getX(sortedData.length - 1)},${height - padding} Z`;

  return (
    <div className="bg-white p-4 rounded-3xl shadow-sm border border-stone-100 mb-6">
      <h3 className="text-sm font-bold text-stone-600 mb-2 px-2 flex items-center">
        <TrendingDown size={16} className="mr-1 text-emerald-500" /> 體重變化趨勢
      </h3>
      <div className="relative w-full overflow-x-auto scrollbar-hide">
        <svg viewBox={`0 0 ${width} ${height}`} className="w-full h-auto min-w-[300px]">
          <defs>
            <linearGradient id="areaGradient" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#10b981" stopOpacity="0.2" />
              <stop offset="100%" stopColor="#10b981" stopOpacity="0" />
            </linearGradient>
          </defs>
          
          {/* 漸層面積 */}
          {sortedData.length > 1 && <path d={areaPath} fill="url(#areaGradient)" />}
          
          {/* 折線 */}
          {sortedData.length > 1 && <polyline fill="none" stroke="#10b981" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" points={points} />}
          
          {/* 資料點與數值 */}
          {sortedData.map((d, i) => (
            <g key={d.id}>
              <circle cx={getX(i)} cy={getY(d.weight)} r="4" fill="#fff" stroke="#10b981" strokeWidth="2" />
              {(i === 0 || i === sortedData.length - 1 || d.weight === minWeight + 1 || d.weight === maxWeight - 1) && (
                <text x={getX(i)} y={getY(d.weight) - 10} fontSize="10" fill="#78716c" textAnchor="middle" fontWeight="bold">
                  {d.weight}
                </text>
              )}
            </g>
          ))}
        </svg>
      </div>
    </div>
  );
};

export default function App() {
  // --- 狀態管理 (使用新 key 避免舊資料衝突) ---
  const [isInitialized, setIsInitialized] = useState(false);
  const [activeTab, setActiveTab] = useState('tree');
  const [toast, setToast] = useState(null);
  
  // 彈出視窗狀態
  const [showSettings, setShowSettings] = useState(false);
  const [showResetConfirm, setShowResetConfirm] = useState(false);

  // 取得今天日期的 YYYY-MM-DD 格式
  const getTodayStr = () => {
    const today = new Date();
    return today.toISOString().split('T')[0];
  };

  const [logDate, setLogDate] = useState(getTodayStr());

  // 用戶資料 (新增目標日期)
  const [userProfile, setUserProfile] = useState(() => {
    const saved = localStorage.getItem('td_v2_userProfile');
    return saved ? JSON.parse(saved) : { 
      initialWeight: '', 
      targetWeight: '', 
      startDate: getTodayStr(),
      targetDate: '',
      hasOnboarded: false 
    };
  });

  // 樹木與森林狀態
  const maxExp = 100;
  const [treeState, setTreeState] = useState(() => {
    const saved = localStorage.getItem('td_v2_treeState');
    return saved ? JSON.parse(saved) : { level: 1, exp: 0 };
  });

  const [forest, setForest] = useState(() => {
    const saved = localStorage.getItem('td_v2_forest');
    return saved ? JSON.parse(saved) : [];
  });

  // 任務狀態
  const [tasks, setTasks] = useState(() => {
    const saved = localStorage.getItem('td_v2_tasks');
    return saved ? JSON.parse(saved) : [
      { id: 1, title: '喝水 2000cc', exp: 15, completed: false, type: 'water' },
      { id: 2, title: '運動 30 分鐘', exp: 20, completed: false, type: 'sun' },
      { id: 3, title: '拒絕含糖飲料', exp: 15, completed: false, type: 'wind' },
    ];
  });

  // 體重紀錄 [{ id, weight, dateStr, displayDate }]
  const [weightLogs, setWeightLogs] = useState(() => {
    const saved = localStorage.getItem('td_v2_weightLogs');
    return saved ? JSON.parse(saved) : [];
  });

  const [currentWeightInput, setCurrentWeightInput] = useState('');
  const [newTaskInput, setNewTaskInput] = useState('');
  const [showAddTask, setShowAddTask] = useState(false);

  // --- 資料同步 ---
  useEffect(() => {
    localStorage.setItem('td_v2_userProfile', JSON.stringify(userProfile));
    localStorage.setItem('td_v2_treeState', JSON.stringify(treeState));
    localStorage.setItem('td_v2_forest', JSON.stringify(forest));
    localStorage.setItem('td_v2_tasks', JSON.stringify(tasks));
    localStorage.setItem('td_v2_weightLogs', JSON.stringify(weightLogs));
    setIsInitialized(true);
  }, [userProfile, treeState, forest, tasks, weightLogs]);

  const showToast = (message, type = 'success') => setToast({ message, type });

  // --- 每日計畫邏輯計算 ---
  const planStats = useMemo(() => {
    if (!userProfile.hasOnboarded) return null;
    
    const start = new Date(userProfile.startDate);
    const target = new Date(userProfile.targetDate);
    const today = new Date();
    
    // 將時間清零以準確計算天數
    start.setHours(0,0,0,0);
    target.setHours(0,0,0,0);
    today.setHours(0,0,0,0);

    const totalDays = Math.max(1, Math.round((target - start) / (1000 * 60 * 60 * 24)));
    const daysPassed = Math.max(0, Math.round((today - start) / (1000 * 60 * 60 * 24)));
    const daysLeft = Math.max(0, totalDays - daysPassed);
    
    const totalToLose = userProfile.initialWeight - userProfile.targetWeight;
    const dailyLossGoal = totalToLose / totalDays;
    
    // 計算「今日應該要達到的體重」
    const expectedWeightToday = userProfile.initialWeight - (dailyLossGoal * daysPassed);
    
    // 取得最新一筆體重（如果還沒記錄，就用初始體重）
    const sortedLogs = [...weightLogs].sort((a, b) => new Date(b.dateStr) - new Date(a.dateStr));
    const currentWeight = sortedLogs.length > 0 ? sortedLogs[0].weight : userProfile.initialWeight;
    
    // 與今日目標的差距 (負數代表超前，正數代表落後)
    const diffFromTodayGoal = (currentWeight - expectedWeightToday).toFixed(1);

    return { totalDays, daysPassed, daysLeft, expectedWeightToday: expectedWeightToday.toFixed(1), currentWeight, diffFromTodayGoal };
  }, [userProfile, weightLogs]);

  // --- 樹木邏輯 ---
  const getTreeVisual = (level) => {
    switch(level) {
      case 1: return { emoji: '🌱', name: '小幼苗', desc: '剛發芽，需要你的細心呵護。' };
      case 2: return { emoji: '🌿', name: '生長中', desc: '長出綠葉了！繼續保持好習慣。' };
      case 3: return { emoji: '🪴', name: '小樹叢', desc: '越來越茁壯，你的身體也是！' };
      case 4: return { emoji: '🌳', name: '大樹', desc: '枝繁葉茂，快要完全長成了！' };
      default: return { emoji: '🌲', name: '神木', desc: '即將移入森林，準備迎接新生命！' };
    }
  };
  const currentTree = getTreeVisual(treeState.level);

  const addExp = (amount) => {
    let newExp = treeState.exp + amount;
    let newLevel = treeState.level;

    if (newExp >= maxExp) {
      if (newLevel < 5) {
        newLevel += 1;
        newExp -= maxExp;
        showToast(`升級了！小樹成長為 Lv.${newLevel}！`, 'success');
      } else {
        const treeTypes = ['🌲', '🌳', '🌴', '🌵', '🌸', '🍁'];
        const randomTree = treeTypes[Math.floor(Math.random() * treeTypes.length)];
        const newTree = { id: Date.now(), type: randomTree, date: new Date().toLocaleDateString() };
        setForest([newTree, ...forest]);
        newLevel = 1;
        newExp -= maxExp;
        showToast(`太棒了！成功種植一棵 ${randomTree}，已移入森林！`, 'reward');
      }
    }
    setTreeState({ level: newLevel, exp: newExp });
  };

  // --- 互動操作 ---
  const toggleTask = (id) => {
    setTasks(tasks.map(task => {
      if (task.id === id) {
        if (!task.completed) {
          addExp(task.exp);
          showToast(`完成任務！獲得 ${task.exp} 養分`, 'success');
        }
        return { ...task, completed: !task.completed };
      }
      return task;
    }));
  };

  const addTask = (e) => {
    e.preventDefault();
    if (!newTaskInput.trim()) return;
    setTasks([...tasks, { id: Date.now(), title: newTaskInput, exp: 15, completed: false, type: 'sun' }]);
    setNewTaskInput('');
    setShowAddTask(false);
    showToast('已新增專屬任務！');
  };

  const handleLogWeight = (e) => {
    e.preventDefault();
    if (!currentWeightInput || isNaN(currentWeightInput)) return;

    const weightNum = parseFloat(currentWeightInput);
    
    // 檢查同一天是否已經有紀錄，有的話覆蓋
    const existingIndex = weightLogs.findIndex(log => log.dateStr === logDate);
    let newLogs = [...weightLogs];
    
    let isWeightDown = false;
    let expBonus = 15;

    // 找前一次的體重來對比 (找日期比當前輸入日期小的最新一筆)
    const pastLogs = newLogs.filter(log => new Date(log.dateStr) < new Date(logDate)).sort((a,b) => new Date(b.dateStr) - new Date(a.dateStr));
    const lastWeight = pastLogs.length > 0 ? pastLogs[0].weight : userProfile.initialWeight;

    if (weightNum < lastWeight) {
      expBonus += 35; 
      isWeightDown = true;
    }

    const logEntry = {
      id: existingIndex >= 0 ? newLogs[existingIndex].id : Date.now(),
      weight: weightNum,
      dateStr: logDate,
      displayDate: new Date(logDate).toLocaleDateString('zh-TW', { month: 'short', day: 'numeric' })
    };

    if (existingIndex >= 0) {
      newLogs[existingIndex] = logEntry;
      showToast('已更新該日體重紀錄！', 'success');
    } else {
      newLogs.push(logEntry);
      addExp(expBonus);
      if (isWeightDown) showToast(`體重下降！獲得超級肥料 (+${expBonus} 養分) 🌱✨`, 'reward');
      else showToast(`記錄成功！獲得日常澆水 (+${expBonus} 養分) 💧`, 'success');
    }

    setWeightLogs(newLogs);
    setCurrentWeightInput('');
  };

  const handleOnboard = (e) => {
    e.preventDefault();
    const initW = parseFloat(e.target.initW.value);
    const targetW = parseFloat(e.target.targetW.value);
    const targetD = e.target.targetD.value;
    
    if (initW <= targetW) {
      showToast('目標體重必須小於目前體重喔！', 'error');
      return;
    }
    if (new Date(targetD) <= new Date()) {
      showToast('目標日期必須在今天之後喔！', 'error');
      return;
    }

    setUserProfile({ 
      initialWeight: initW, 
      targetWeight: targetW, 
      startDate: getTodayStr(),
      targetDate: targetD,
      hasOnboarded: true 
    });
    showToast('歡迎來到小樹減肥法！');
  };

  const handleUpdateProfile = (e) => {
    e.preventDefault();
    const targetW = parseFloat(e.target.editTargetW.value);
    const targetD = e.target.editTargetD.value;
    
    if (new Date(targetD) <= new Date(userProfile.startDate)) {
      showToast('目標日期必須大於開始日期！', 'error');
      return;
    }

    setUserProfile({ ...userProfile, targetWeight: targetW, targetDate: targetD });
    setShowSettings(false);
    showToast('設定已更新！', 'success');
  };

  const handleHardReset = () => {
    localStorage.removeItem('td_v2_userProfile');
    localStorage.removeItem('td_v2_treeState');
    localStorage.removeItem('td_v2_forest');
    localStorage.removeItem('td_v2_tasks');
    localStorage.removeItem('td_v2_weightLogs');
    window.location.reload();
  };

  // --- 渲染 ---
  if (!isInitialized) return null;

  // Onboarding
  if (!userProfile.hasOnboarded) {
    return (
      <div className="flex flex-col h-screen max-w-md mx-auto bg-emerald-50 text-stone-800 font-sans sm:border sm:border-stone-200 sm:rounded-3xl sm:h-[850px] sm:my-4 items-center justify-center p-6 relative">
        {toast && <Toast message={toast.message} type={toast.type} onClose={() => setToast(null)} />}
        <div className="w-28 h-28 bg-white rounded-full flex items-center justify-center shadow-lg mb-6 animate-bounce">
          <span className="text-6xl">🌱</span>
        </div>
        <h1 className="text-3xl font-bold text-emerald-700 mb-2">小樹減肥法</h1>
        <p className="text-stone-500 mb-6 text-center text-sm">每天一點點進步，種出你的專屬森林。<br/>設定一個具體的目標吧！</p>
        
        <form onSubmit={handleOnboard} className="w-full bg-white p-6 rounded-3xl shadow-sm space-y-4">
          <div>
            <label className="block text-sm font-bold text-stone-600 mb-1">目前體重 (kg)</label>
            <input type="number" step="0.1" name="initW" required className="w-full bg-stone-50 border border-stone-200 rounded-xl p-3 focus:outline-none focus:border-emerald-400" placeholder="例如: 65.0" />
          </div>
          <div className="flex space-x-3">
            <div className="flex-1">
              <label className="block text-sm font-bold text-stone-600 mb-1">目標體重</label>
              <input type="number" step="0.1" name="targetW" required className="w-full bg-stone-50 border border-stone-200 rounded-xl p-3 focus:outline-none focus:border-emerald-400" placeholder="例如: 55.0" />
            </div>
            <div className="flex-1">
              <label className="block text-sm font-bold text-stone-600 mb-1">預計達成日</label>
              <input type="date" name="targetD" required min={getTodayStr()} className="w-full bg-stone-50 border border-stone-200 rounded-xl p-3 focus:outline-none focus:border-emerald-400 text-sm" />
            </div>
          </div>
          <button type="submit" className="w-full bg-emerald-500 text-white font-bold py-3.5 rounded-xl hover:bg-emerald-600 transition-colors mt-4">
            開始我的旅程
          </button>
        </form>
      </div>
    );
  }

  // 將 weightLogs 排序以供顯示
  const sortedDisplayLogs = [...weightLogs].sort((a, b) => new Date(b.dateStr) - new Date(a.dateStr));

  return (
    <div className="flex flex-col h-screen max-w-md mx-auto bg-stone-50 text-stone-800 font-sans shadow-2xl overflow-hidden sm:border sm:border-stone-200 sm:rounded-3xl sm:h-[850px] sm:my-4 relative">
      
      {toast && <Toast message={toast.message} type={toast.type} onClose={() => setToast(null)} />}

      {/* 頂部導航 */}
      <header className="px-6 py-5 bg-white border-b border-stone-100 flex justify-between items-center z-10 shadow-sm sticky top-0">
        <div>
          <h1 className="text-xl font-bold text-emerald-700 flex items-center">
            <Leaf className="mr-2" size={24} /> 小樹減肥法
          </h1>
        </div>
        <div className="flex items-center space-x-2 bg-emerald-50 px-3 py-1.5 rounded-full border border-emerald-100 shadow-inner">
          <span className="text-sm font-bold text-emerald-600">Lv.{treeState.level}</span>
        </div>
      </header>

      {/* 主要內容區 */}
      <main className="flex-1 overflow-y-auto pb-24 scrollbar-hide bg-stone-50 relative">
        
        {/* Tab 1: 小樹養成 */}
        {activeTab === 'tree' && (
          <div className="p-6 flex flex-col items-center animate-in fade-in duration-500">
            {/* 每日計畫小看板 */}
            <div className="w-full bg-gradient-to-r from-emerald-500 to-teal-500 p-4 rounded-3xl text-white mb-8 shadow-md flex justify-between items-center">
              <div>
                <p className="text-xs text-emerald-100 font-medium mb-1 flex items-center">
                  <Target size={14} className="mr-1"/> 目標倒數 {planStats.daysLeft} 天
                </p>
                <p className="text-lg font-bold">今日目標: {planStats.expectedWeightToday} kg</p>
              </div>
              <div className="text-right">
                <span className="text-3xl font-black drop-shadow-md">
                  {planStats.currentWeight}
                </span>
                <span className="text-xs ml-1 font-medium">kg</span>
              </div>
            </div>

            <div className="relative w-full aspect-square max-h-72 bg-gradient-to-b from-blue-50 to-emerald-50 rounded-full flex flex-col items-center justify-center mb-8 shadow-inner border-4 border-white overflow-hidden">
              <div className="absolute top-8 right-8 text-amber-200 opacity-60 animate-pulse">
                <Sun size={80} fill="currentColor" />
              </div>
              <div 
                className="text-8xl relative z-10 transition-all duration-1000 ease-out hover:scale-110 cursor-pointer drop-shadow-lg"
                style={{ transform: `scale(${0.6 + (treeState.level * 0.1)})` }}
                onClick={() => addExp(1)}
              >
                {currentTree.emoji}
              </div>
              <div className="absolute bottom-10 w-48 h-8 bg-emerald-900/10 rounded-[100%] blur-md" />
            </div>

            <h2 className="text-2xl font-bold text-stone-800 mb-2">{currentTree.name}</h2>
            <p className="text-sm text-stone-500 mb-8 text-center px-4">{currentTree.desc}</p>

            <div className="w-full max-w-xs bg-white p-5 rounded-3xl shadow-sm border border-stone-100">
              <div className="flex justify-between text-xs font-bold text-emerald-700 mb-3">
                <span>成長進度</span>
                <span>{treeState.exp} / {maxExp} 養分</span>
              </div>
              <div className="h-4 bg-stone-100 rounded-full overflow-hidden">
                <div 
                  className="h-full bg-gradient-to-r from-emerald-400 to-teal-400 transition-all duration-1000 ease-out relative"
                  style={{ width: `${(treeState.exp / maxExp) * 100}%` }}
                >
                  <div className="absolute inset-0 bg-white/30 animate-[pulse_2s_ease-in-out_infinite]" />
                </div>
              </div>
            </div>
          </div>
        )}

        {/* Tab 2: 每日任務 */}
        {activeTab === 'tasks' && (
          <div className="p-6 animate-in fade-in duration-500">
            <div className="flex justify-between items-end mb-6">
              <div>
                <h2 className="text-2xl font-bold text-stone-800 mb-1">今日養分</h2>
                <p className="text-sm text-stone-500">完成健康小事，幫助小樹成長。</p>
              </div>
              <button 
                onClick={() => setShowAddTask(true)}
                className="p-2 bg-emerald-100 text-emerald-600 rounded-full hover:bg-emerald-200 transition-colors"
              >
                <Plus size={24} />
              </button>
            </div>

            {showAddTask && (
              <form onSubmit={addTask} className="mb-4 bg-white p-4 rounded-2xl border border-emerald-200 shadow-sm flex items-center space-x-2 animate-in slide-in-from-top-2">
                <input 
                  type="text" autoFocus value={newTaskInput} onChange={(e) => setNewTaskInput(e.target.value)}
                  placeholder="例如：吃一份蔬菜" className="flex-1 bg-stone-50 rounded-xl px-3 py-2 text-sm focus:outline-none focus:border-emerald-400 border border-transparent"
                />
                <button type="submit" className="text-emerald-600 font-bold text-sm px-3 py-2">新增</button>
                <button type="button" onClick={() => setShowAddTask(false)} className="text-stone-400"><X size={20}/></button>
              </form>
            )}

            <div className="space-y-3">
              {tasks.map(task => (
                <div key={task.id} className={`flex items-center justify-between p-4 rounded-2xl border-2 transition-all group ${task.completed ? 'bg-emerald-50 border-emerald-200' : 'bg-white border-stone-100 cursor-pointer'}`}>
                  <div className="flex items-center flex-1" onClick={() => toggleTask(task.id)}>
                    <div className={`mr-4 ${task.completed ? 'text-emerald-500' : 'text-stone-300'}`}>
                      {task.completed ? <CheckCircle2 size={28} fill="currentColor" className="text-white" /> : <Circle size={28} />}
                    </div>
                    <div>
                      <h3 className={`font-bold ${task.completed ? 'text-stone-400 line-through' : 'text-stone-700'}`}>{task.title}</h3>
                      <p className="text-xs text-emerald-500 font-medium mt-0.5">+{task.exp} 養分</p>
                    </div>
                  </div>
                  <button onClick={() => setTasks(tasks.filter(t => t.id !== task.id))} className="p-2 text-stone-300 hover:text-red-400">
                    <Trash2 size={18} />
                  </button>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Tab 3: 體重紀錄 */}
        {activeTab === 'weight' && (
          <div className="p-6 animate-in fade-in duration-500">
            
            {/* 折線圖 */}
            <LineChart data={weightLogs} />

            {/* 輸入區塊 (優化版面) */}
            <div className="mb-8 bg-white p-6 rounded-[2rem] shadow-md border border-emerald-100 relative overflow-hidden">
              {/* 背景裝飾 */}
              <div className="absolute -top-10 -right-10 w-32 h-32 bg-emerald-50 rounded-full opacity-50 pointer-events-none" />

              <div className="flex justify-between items-center mb-6 relative z-10">
                <h2 className="text-lg font-bold text-stone-800 flex items-center">
                  <Scale size={20} className="mr-2 text-emerald-500" /> 填寫體重紀錄
                </h2>
                {/* 日期選擇器改為精緻的徽章樣式，放在右上角 */}
                <div className="relative group">
                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <Calendar size={14} className="text-emerald-600" />
                  </div>
                  <input
                    type="date"
                    max={getTodayStr()}
                    value={logDate}
                    onChange={(e) => setLogDate(e.target.value)}
                    className="bg-emerald-50 border border-emerald-100 text-emerald-700 text-xs font-bold rounded-full py-2 pl-8 pr-3 focus:outline-none focus:ring-2 focus:ring-emerald-400 shadow-sm cursor-pointer"
                  />
                </div>
              </div>

              <form onSubmit={handleLogWeight} className="flex flex-col space-y-5 relative z-10">
                {/* 超大型的體重輸入框，提升視覺焦點與操作手感 */}
                <div className="relative w-full flex justify-center">
                  <input
                    type="number"
                    step="0.1"
                    value={currentWeightInput}
                    onChange={(e) => setCurrentWeightInput(e.target.value)}
                    placeholder="00.0"
                    className="w-full bg-stone-50 border-2 border-stone-100 rounded-[1.5rem] py-6 px-4 text-5xl font-black text-center text-stone-800 focus:outline-none focus:border-emerald-400 focus:bg-white transition-all shadow-inner placeholder:text-stone-300 tracking-wider"
                  />
                  <span className="absolute right-6 top-1/2 -translate-y-1/2 text-stone-400 font-bold text-xl">kg</span>
                </div>

                <button
                  type="submit"
                  className="w-full bg-stone-800 hover:bg-stone-900 text-white font-bold py-4 px-6 rounded-2xl shadow-lg transition-all active:scale-95 flex items-center justify-center text-lg"
                >
                  <CheckCircle2 size={22} className="mr-2 text-emerald-400" /> 儲存紀錄
                </button>
              </form>
            </div>

            <h3 className="font-bold text-stone-600 mb-3 px-2 flex items-center">
              <Activity size={18} className="mr-2" /> 歷史紀錄
            </h3>
            {sortedDisplayLogs.length === 0 ? (
              <p className="text-center text-stone-400 text-sm mt-8">還沒有記錄喔，趕快站上體重計吧！</p>
            ) : (
              <div className="space-y-3">
                {sortedDisplayLogs.map((log, index) => {
                  const prevLog = sortedDisplayLogs[index + 1];
                  let diff = 0;
                  if (prevLog) diff = (log.weight - prevLog.weight).toFixed(1);
                  else diff = (log.weight - userProfile.initialWeight).toFixed(1);
                  
                  return (
                    <div key={log.id} className="flex items-center justify-between p-4 bg-white rounded-2xl border border-stone-100 shadow-sm">
                      <span className="text-stone-500 font-medium text-sm">{log.dateStr}</span>
                      <div className="flex items-center space-x-4">
                        {diff !== "0.0" && (
                          <span className={`flex items-center text-sm font-bold bg-stone-50 px-2 py-1 rounded-lg ${diff < 0 ? 'text-emerald-500' : 'text-orange-400'}`}>
                            {diff < 0 ? <TrendingDown size={14} className="mr-1" /> : <TrendingUp size={14} className="mr-1" />}
                            {Math.abs(diff)}
                          </span>
                        )}
                        <span className="text-xl font-black text-stone-800 w-16 text-right">{log.weight}</span>
                      </div>
                    </div>
                  );
                })}
              </div>
            )}
          </div>
        )}

        {/* Tab 4: 森林與設定 */}
        {activeTab === 'profile' && (
          <div className="p-6 animate-in fade-in duration-500 pb-32">
            <div className="bg-white p-6 rounded-[2rem] shadow-sm border border-stone-100 mb-8 relative overflow-hidden">
              <div className="absolute top-0 right-0 w-32 h-32 bg-emerald-50 rounded-bl-[100px] -z-10" />
              <div className="flex items-center space-x-4 mb-6">
                <div className="w-16 h-16 bg-gradient-to-br from-emerald-400 to-teal-500 rounded-full flex items-center justify-center text-white text-2xl shadow-lg">
                  <User size={32} />
                </div>
                <div>
                  <h2 className="text-xl font-bold text-stone-800">我的成就</h2>
                  <p className="text-xs text-stone-500 mt-1">初始: {userProfile.initialWeight}kg ➔ 目標: {userProfile.targetWeight}kg</p>
                </div>
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div className="bg-stone-50 p-4 rounded-2xl border border-stone-100">
                  <p className="text-xs text-stone-500 mb-1">已減去</p>
                  <p className="text-2xl font-black text-stone-800">
                    {Math.max(0, (userProfile.initialWeight - planStats.currentWeight)).toFixed(1)} <span className="text-sm font-medium text-stone-400 ml-1">kg</span>
                  </p>
                </div>
                <div className="bg-stone-50 p-4 rounded-2xl border border-stone-100">
                  <p className="text-xs text-stone-500 mb-1">森林規模</p>
                  <p className="text-2xl font-black text-emerald-600">
                    {forest.length} <span className="text-sm font-medium text-emerald-400 ml-1">棵</span>
                  </p>
                </div>
              </div>
            </div>

            <h3 className="font-bold text-stone-800 mb-4 px-2 flex items-center justify-between">
              <span className="flex items-center"><Trees size={20} className="mr-2 text-emerald-600" /> 我的專屬森林</span>
            </h3>
            
            <div className="grid grid-cols-2 gap-4 mb-8">
              {forest.map(tree => (
                <div key={tree.id} className="bg-white p-6 rounded-3xl border border-stone-100 shadow-sm flex flex-col items-center justify-center text-center">
                  <span className="text-6xl mb-3 drop-shadow-md">{tree.type}</span>
                  <span className="text-[10px] font-bold text-stone-400 mt-2 bg-stone-50 px-2 py-1 rounded-full">{tree.date}</span>
                </div>
              ))}
              <div className="bg-stone-100/50 p-6 rounded-3xl border-2 border-dashed border-stone-200 flex flex-col items-center justify-center text-center opacity-70 min-h-[140px]">
                <span className="text-4xl mb-3 opacity-30">🌱</span>
                <span className="text-xs font-bold text-stone-400">繼續努力</span>
              </div>
            </div>

            {/* 系統設定按鈕群 */}
            <div className="bg-white rounded-2xl border border-stone-100 overflow-hidden shadow-sm">
              <button onClick={() => setShowSettings(true)} className="w-full p-4 flex items-center justify-between hover:bg-stone-50 transition-colors border-b border-stone-100 text-stone-700 font-bold">
                <span className="flex items-center"><Settings size={18} className="mr-3 text-stone-400" /> 修改目標與設定</span>
                <ChevronRight size={18} className="text-stone-300" />
              </button>
              <button onClick={() => setShowResetConfirm(true)} className="w-full p-4 flex items-center justify-between hover:bg-red-50 transition-colors text-red-500 font-bold">
                <span className="flex items-center"><Trash2 size={18} className="mr-3" /> 重置所有資料</span>
              </button>
            </div>
          </div>
        )}

      </main>

      {/* 底部導航列 */}
      <nav className="absolute bottom-0 w-full bg-white/90 backdrop-blur-md border-t border-stone-100 pb-safe z-20 shadow-[0_-10px_40px_rgba(0,0,0,0.03)]">
        <div className="flex justify-around items-center p-2 sm:pb-2 pb-6">
          <NavItem icon={<Leaf size={24} />} label="小樹" active={activeTab === 'tree'} onClick={() => setActiveTab('tree')} />
          <NavItem icon={<CheckCircle2 size={24} />} label="養分" active={activeTab === 'tasks'} onClick={() => setActiveTab('tasks')} />
          <NavItem icon={<Scale size={24} />} label="體重" active={activeTab === 'weight'} onClick={() => setActiveTab('weight')} />
          <NavItem icon={<User size={24} />} label="我與森林" active={activeTab === 'profile'} onClick={() => setActiveTab('profile')} />
        </div>
      </nav>

      {/* --- 彈出視窗 (Modals) --- */}
      
      {/* 1. 修改設定 Modal */}
      {showSettings && (
        <div className="absolute inset-0 z-50 flex items-center justify-center p-4 bg-stone-900/40 backdrop-blur-sm animate-in fade-in">
          <div className="bg-white w-full max-w-sm rounded-[2rem] p-6 shadow-2xl">
            <div className="flex justify-between items-center mb-6">
              <h3 className="text-xl font-bold text-stone-800">修改目標</h3>
              <button onClick={() => setShowSettings(false)} className="text-stone-400 hover:text-stone-600"><X size={24}/></button>
            </div>
            <form onSubmit={handleUpdateProfile} className="space-y-4">
              <div>
                <label className="block text-sm font-bold text-stone-600 mb-1">新的目標體重 (kg)</label>
                <input type="number" step="0.1" name="editTargetW" defaultValue={userProfile.targetWeight} required className="w-full bg-stone-50 border border-stone-200 rounded-xl p-3 focus:border-emerald-400 focus:outline-none" />
              </div>
              <div>
                <label className="block text-sm font-bold text-stone-600 mb-1">新的達成日期</label>
                <input type="date" name="editTargetD" defaultValue={userProfile.targetDate} min={getTodayStr()} required className="w-full bg-stone-50 border border-stone-200 rounded-xl p-3 focus:border-emerald-400 focus:outline-none" />
              </div>
              <button type="submit" className="w-full bg-stone-800 text-white font-bold py-3.5 rounded-xl hover:bg-stone-700 mt-4">儲存設定</button>
            </form>
          </div>
        </div>
      )}

      {/* 2. 重置確認 Modal */}
      {showResetConfirm && (
        <div className="absolute inset-0 z-50 flex items-center justify-center p-4 bg-stone-900/60 backdrop-blur-sm animate-in fade-in">
          <div className="bg-white w-full max-w-sm rounded-[2rem] p-6 shadow-2xl text-center">
            <div className="w-16 h-16 bg-red-100 text-red-500 rounded-full flex items-center justify-center mx-auto mb-4">
              <AlertTriangle size={32} />
            </div>
            <h3 className="text-xl font-bold text-stone-800 mb-2">確定要放棄整座森林嗎？</h3>
            <p className="text-sm text-stone-500 mb-8">此操作將會刪除你所有的樹木、體重紀錄與設定，且無法復原。真的要重頭來過嗎？</p>
            <div className="flex space-x-3">
              <button onClick={() => setShowResetConfirm(false)} className="flex-1 bg-stone-100 text-stone-600 font-bold py-3 rounded-xl hover:bg-stone-200">
                再想想
              </button>
              <button onClick={handleHardReset} className="flex-1 bg-red-500 text-white font-bold py-3 rounded-xl hover:bg-red-600 shadow-md shadow-red-500/30">
                忍痛刪除
              </button>
            </div>
          </div>
        </div>
      )}

    </div>
  );
}

function NavItem({ icon, label, active, onClick }) {
  return (
    <button 
      onClick={onClick}
      className={`flex flex-col items-center p-2 rounded-xl transition-all w-[72px] ${active ? 'text-emerald-600 -translate-y-1' : 'text-stone-400 hover:text-emerald-500'}`}
    >
      <div className={`p-1.5 rounded-xl transition-colors duration-300 ${active ? 'bg-emerald-50' : ''}`}>
        {React.cloneElement(icon, { className: active ? 'fill-emerald-100/50' : '' })}
      </div>
      <span className="text-[10px] mt-1 font-bold">{label}</span>
    </button>
  );
}