// ============================================================
// PasswordSetting — 账号安全区块（密码操作入口）
//
// 提供两种密码操作，用户自选：
//   1. 修改密码 — 通过当前密码验证后设置新密码
//   2. 忘记密码 — 通过手机短信验证码重置密码
// ============================================================

import { useState } from 'react';
import { Card, Button, Typography } from 'antd';
import { LockOutlined, PhoneOutlined } from '@ant-design/icons';

import { ChangePasswordModal } from '@/modules/auth/views/components/ChangePasswordModal';
import { ForgotPasswordModal } from '@/modules/auth/views/components/ForgotPasswordModal';

const { Text } = Typography;

export function PasswordSetting() {
   const [changePwdOpen, setChangePwdOpen] = useState(false);
   const [forgotPwdOpen, setForgotPwdOpen] = useState(false);

   return (
      <>
         <Card size="small" title="账号安全" className="rounded-md!">
            <div className="flex flex-col gap-3">
               {/* 修改密码：通过旧密码 */}
               <div className="flex items-center justify-between">
                  <Text type="secondary" className="text-sm">
                     通过当前密码修改
                  </Text>
                  <Button icon={<LockOutlined />} onClick={() => setChangePwdOpen(true)}>
                     修改密码
                  </Button>
               </div>

               {/* 忘记密码：通过手机验证码重置 */}
               <div className="flex items-center justify-between">
                  <Text type="secondary" className="text-sm">
                     忘记密码？通过手机验证码重置
                  </Text>
                  <Button icon={<PhoneOutlined />} onClick={() => setForgotPwdOpen(true)}>
                     短信验证码重置
                  </Button>
               </div>
            </div>
         </Card>

         <ChangePasswordModal open={changePwdOpen} onClose={() => setChangePwdOpen(false)} />
         <ForgotPasswordModal open={forgotPwdOpen} onClose={() => setForgotPwdOpen(false)} />
      </>
   );
}
