import React, { useState } from 'react';
import { useNavigate,useLocation } from 'react-router-dom';
import './personalSubpage.css';

const Setting = ({ onLogout }) => {
  const navigate = useNavigate();
  const location = useLocation();
  // 模拟数据
  const [formData, setFormData] = useState({
    username: 'user123',
    email: 'user@example.com',
    notification: true
  });

  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    alert('设置已保存');
  };

  const handleBack = () => {
    // 返回个人中心，并携带来源标记
    navigate('/personal', { 
      state: { 
        fromSubpage: true,  // 标记来自子页面
        dashboardTab: location.state?.dashboardTab // 保留Dashboard的标签页状态
      },
      replace: true  // 替换当前历史记录
    });
  };

  return (
    <div className="subpage-container">
      <button className="back-button" onClick={(handleBack)}>
        ← 返回个人中心
      </button>

      <h2 className="page-title">账号设置</h2>
      
      <form onSubmit={handleSubmit}>
        <div className="form-group">
          <label className="form-label">用户名</label>
          <input
            type="text"
            name="username"
            value={formData.username}
            onChange={handleChange}
            className="form-input"
          />
        </div>

        <div className="form-group">
          <label className="form-label">电子邮箱</label>
          <input
            type="email"
            name="email"
            value={formData.email}
            onChange={handleChange}
            className="form-input"
          />
        </div>

        <div className="form-group">
          <label className="form-label">
            <input
              type="checkbox"
              name="notification"
              checked={formData.notification}
              onChange={handleChange}
            />
            接收邮件通知
          </label>
        </div>

        <div className="form-actions">
          <button type="submit" className="action-btn">
            保存设置
          </button>
          <button 
            type="button" 
            className="action-btn danger-btn"
            onClick={onLogout}
          >
            退出登录
          </button>
        </div>
      </form>
    </div>
  );
};

export default Setting;