import React, { useState } from 'react';
import { useAppData } from '../context/AppDataContext';
import { useNavigate } from 'react-router-dom';
import { generateProfile } from '../utils/calculations';
import './Settings.css';

const Settings: React.FC = () => {
  const { profile, saveProfile, clearData } = useAppData();
  const navigate = useNavigate();

  if (!profile) return null;

  const [weight, setWeight] = useState(profile.weight.toString());
  const [activity, setActivity] = useState(profile.activityLevel);
  const [goal, setGoal] = useState(profile.goal);

  const handleUpdate = () => {
    if (window.confirm('更新體重/活動量會重新計算您的 TDEE 與每日營養目標，確定要更新嗎？')) {
      const newProfile = generateProfile(
        profile.height,
        Number(weight),
        profile.age,
        profile.gender,
        activity,
        goal
      );
      saveProfile(newProfile);
      alert('已更新您的營養目標！');
    }
  };

  const handleReset = () => {
    if (window.confirm('確定要清除所有資料嗎？這將會刪除您的個人檔案與所有歷史紀錄。')) {
      clearData();
      navigate('/onboarding');
    }
  };

  return (
    <div className="settings-container page-container animate-fade-in">
      <header className="mb-4">
        <h1>設定</h1>
      </header>

      <section className="glass-card mb-4">
        <h2>個人狀態更新</h2>
        <p style={{ fontSize: 13 }}>當前目標：{profile.targetCalories} kcal / 飲水：{profile.targetWater} ml</p>
        
        <div className="form-group mt-4">
          <label>目前體重 (kg)</label>
          <input 
            type="number" 
            className="input-field" 
            value={weight} 
            onChange={(e) => setWeight(e.target.value)} 
          />
        </div>

        <div className="form-group">
          <label>活動量</label>
          <select className="input-field" value={activity} onChange={(e) => setActivity(e.target.value as any)}>
            <option value="sedentary">久坐 (辦公室/少運動)</option>
            <option value="light">輕度活動 (每週運動1-3天)</option>
            <option value="moderate">中度活動 (每週運動3-5天)</option>
            <option value="active">高度活動 (每週運動6-7天)</option>
            <option value="very_active">極度活動 (體力勞動/每天訓練2次)</option>
          </select>
        </div>

        <div className="form-group">
          <label>目標</label>
          <select className="input-field" value={goal} onChange={(e) => setGoal(e.target.value as any)}>
            <option value="lose">減脂</option>
            <option value="maintain">維持</option>
            <option value="gain">增肌</option>
          </select>
        </div>

        <button className="btn-primary mt-2" onClick={handleUpdate}>重新計算目標</button>
      </section>

      <section className="glass-card danger-zone">
        <h2>危險區域</h2>
        <button className="btn-secondary danger-btn mt-2" onClick={handleReset}>清除所有資料並重新開始</button>
      </section>
    </div>
  );
};

export default Settings;