import { useState } from 'react'
import { Avatar, Button, Card, Col, Form, Input, Row, Typography, message } from 'antd'
import { authApi } from '@/lib/api'
import { useAuthStore } from '@/store/auth'

export function ProfilePage() {
  const user = useAuthStore((state) => state.user)
  const setUser = useAuthStore((state) => state.setUser)
  const [profileForm] = Form.useForm()
  const [passwordForm] = Form.useForm()
  const [savingProfile, setSavingProfile] = useState(false)
  const [savingPassword, setSavingPassword] = useState(false)

  const submitProfile = async () => {
    const values = await profileForm.validateFields()
    setSavingProfile(true)
    try {
      await authApi.setSelfInfo({
        ID: user?.ID,
        nickName: values.nickName,
        phone: values.phone,
        email: values.email,
        headerImg: values.headerImg,
      })
      setUser({
        ...(user || {}),
        nickName: values.nickName,
        phone: values.phone,
        email: values.email,
        headerImg: values.headerImg,
      } as typeof user)
      message.success('个人资料已更新')
    } finally {
      setSavingProfile(false)
    }
  }

  const submitPassword = async () => {
    const values = await passwordForm.validateFields()
    setSavingPassword(true)
    try {
      await authApi.changePassword({
        password: values.password,
        newPassword: values.newPassword,
      })
      passwordForm.resetFields()
      message.success('密码已修改')
    } finally {
      setSavingPassword(false)
    }
  }

  return (
    <div className="page-stack">
      <Card className="glass-panel page-panel">
        <div className="section-heading">
          <div>
            <Typography.Title level={2} style={{ marginBottom: 8 }}>
              个人中心
            </Typography.Title>
            <Typography.Paragraph className="text-muted" style={{ marginBottom: 0 }}>
              当前页面使用后端自身资料接口，不依赖额外菜单配置。
            </Typography.Paragraph>
          </div>
          <Avatar src={user?.headerImg} size={72}>
            {user?.nickName?.[0] || user?.userName?.[0]}
          </Avatar>
        </div>
      </Card>
      <Row gutter={[20, 20]}>
        <Col xs={24} xl={14}>
          <Card className="glass-panel page-panel" title="资料维护">
            <Form
              layout="vertical"
              form={profileForm}
              initialValues={{
                userName: user?.userName,
                nickName: user?.nickName,
                phone: user?.phone,
                email: user?.email,
                headerImg: user?.headerImg,
              }}
            >
              <Form.Item label="用户名" name="userName">
                <Input disabled />
              </Form.Item>
              <Form.Item label="昵称" name="nickName" rules={[{ required: true, message: '请输入昵称' }]}>
                <Input />
              </Form.Item>
              <Form.Item label="手机号" name="phone">
                <Input />
              </Form.Item>
              <Form.Item label="邮箱" name="email">
                <Input />
              </Form.Item>
              <Form.Item label="头像 URL" name="headerImg">
                <Input />
              </Form.Item>
              <Button type="primary" loading={savingProfile} onClick={submitProfile}>
                保存资料
              </Button>
            </Form>
          </Card>
        </Col>
        <Col xs={24} xl={10}>
          <Card className="glass-panel page-panel" title="修改密码">
            <Form layout="vertical" form={passwordForm}>
              <Form.Item label="原密码" name="password" rules={[{ required: true, message: '请输入原密码' }]}>
                <Input.Password />
              </Form.Item>
              <Form.Item label="新密码" name="newPassword" rules={[{ required: true, min: 6, message: '新密码至少 6 位' }]}>
                <Input.Password />
              </Form.Item>
              <Button type="primary" loading={savingPassword} onClick={submitPassword}>
                更新密码
              </Button>
            </Form>
          </Card>
        </Col>
      </Row>
    </div>
  )
}
