/**
 * 个人设置页面
 * P1-2: 添加 PageHead
 * P1-3: antd Form/Input/Button/Alert → 自定义 UI 组件
 */
import React, { useState } from "react";
import { Button, Input, Modal } from "@/components/ui";
import { useAuthStore } from "@/store/authStore";
import PageHead from "@/components/layout/PageHead";
import "./ProfileSettings.css";

const Settings: React.FC = () => {
  const user = useAuthStore((state) => state.user);
  const [displayName, setDisplayName] = useState(user?.display_name || "");

  const handleSave = () => {
    Modal.info({
      title: "提示",
      content: "个人资料修改接口暂未开放，保存功能即将上线。",
    });
  };

  return (
    <div className="xx-settings-page">
      <PageHead title="个人设置" description="管理您的账户信息" />

      <div className="xx-settings-card">
        <h3>个人信息</h3>
        <div className="xx-settings-notice">
          <span className="xx-settings-notice-icon">ℹ️</span>
          <div>
            <strong>个人资料编辑暂未开放</strong>
            <p>当前仅展示登录用户信息，资料修改接口接入后再开放保存。</p>
          </div>
        </div>

        <div className="xx-settings-form">
          <div className="xx-settings-field">
            <label className="xx-settings-label">用户名</label>
            <Input value={user?.username || ""} disabled placeholder="用户名" />
          </div>

          <div className="xx-settings-field">
            <label className="xx-settings-label">邮箱</label>
            <Input value={user?.email || ""} disabled placeholder="邮箱" />
          </div>

          <div className="xx-settings-field">
            <label className="xx-settings-label">显示名称</label>
            <Input
              value={displayName}
              onChange={(e) => setDisplayName(e.target.value)}
              placeholder="请输入显示名称"
            />
          </div>

          <div className="xx-settings-field">
            <Button
              buttonType="primary"
              buttonSize="md"
              onClick={handleSave}
              disabled
            >
              保存暂未开放
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Settings;
export const Component = Settings;
