import React, { useState, useEffect } from 'react';

export function SettingsPage() {
  const [user, setUser] = useState<any>(null);
  const [serverUrl, setServerUrl] = useState('http://localhost:3001');

  useEffect(() => {
    window.electronAPI.getMe().then((res) => {
      if (res.success) setUser(res.data);
    });
  }, []);

  return (
    <div className="page">
      <h1>设置</h1>

      <div className="card">
        <h3>账户信息</h3>
        {user && (
          <div className="settings-info">
            <div className="info-row">
              <span className="info-label">邮箱</span>
              <span>{user.email}</span>
            </div>
            <div className="info-row">
              <span className="info-label">角色</span>
              <span>{user.role === 'admin' ? '管理员' : '普通用户'}</span>
            </div>
            <div className="info-row">
              <span className="info-label">注册时间</span>
              <span>{user.created_at}</span>
            </div>
          </div>
        )}
      </div>

      <div className="card">
        <h3>服务器配置</h3>
        <div className="form-group">
          <label>Control Server 地址</label>
          <input
            type="text"
            value={serverUrl}
            onChange={(e) => setServerUrl(e.target.value)}
            placeholder="http://localhost:3001"
          />
        </div>
        <p className="hint-text">服务器地址在启动时通过环境变量 SERVER_URL 配置</p>
      </div>

      <div className="card">
        <h3>关于</h3>
        <div className="settings-info">
          <div className="info-row">
            <span className="info-label">应用名称</span>
            <span>Network Tool - 异地组网工具</span>
          </div>
          <div className="info-row">
            <span className="info-label">版本</span>
            <span>0.1.0 MVP</span>
          </div>
        </div>
      </div>
    </div>
  );
}
