import { useState } from 'react'
import { Card, Form, Input, Button, Typography, message, Result } from 'antd'
import { LockOutlined } from '@ant-design/icons'
import { useNavigate } from 'react-router-dom'
import { useAppStore } from '../store'
import api from '../api/client'

const { Title, Text } = Typography

export default function ForceChangePassword() {
  const [loading, setLoading] = useState(false)
  const [done, setDone] = useState(false)
  const navigate = useNavigate()
  const { user, setAuth, token } = useAppStore()

  const handleSubmit = async (values: { old_password: string; new_password: string; confirm: string }) => {
    if (values.new_password !== values.confirm) {
      message.error('两次密码不一致')
      return
    }
    setLoading(true)
    try {
      await api.put('/auth/password', {
        old_password: values.old_password,
        new_password: values.new_password,
      })
      // Update user in store to clear must_change_password
      if (user && token) {
        setAuth(token, { ...user, must_change_password: false })
      }
      setDone(true)
    } catch (err: any) {
      message.error(err?.response?.data?.message || err?.data?.message || '修改失败')
    } finally {
      setLoading(false)
    }
  }

  if (done) {
    return (
      <div style={{ minHeight: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center', background: '#f0f2f5' }}>
        <Card style={{ width: 420, borderRadius: 12 }}>
          <Result
            status="success"
            title="密码已修改"
            subTitle="请使用新密码登录系统"
            extra={
              <Button type="primary" onClick={() => navigate('/dashboard')}>
                进入系统
              </Button>
            }
          />
        </Card>
      </div>
    )
  }

  return (
    <div style={{ minHeight: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center', background: '#f0f2f5' }}>
      <Card style={{ width: 420, borderRadius: 12, boxShadow: '0 4px 16px rgba(0,0,0,0.1)' }}>
        <div style={{ textAlign: 'center', marginBottom: 24 }}>
          <LockOutlined style={{ fontSize: 40, color: '#faad14', marginBottom: 12 }} />
          <Title level={4} style={{ margin: 0 }}>首次登录需修改密码</Title>
          <Text type="secondary">为确保账号安全，请设置新密码</Text>
        </div>
        <Form onFinish={handleSubmit} layout="vertical">
          <Form.Item name="old_password" label="当前密码" rules={[{ required: true }]}>
            <Input.Password placeholder="输入当前密码" />
          </Form.Item>
          <Form.Item name="new_password" label="新密码"
            rules={[{ required: true, min: 8, message: '至少8位，包含大小写和数字' }]}>
            <Input.Password placeholder="至少8位，包含大小写字母和数字" />
          </Form.Item>
          <Form.Item name="confirm" label="确认新密码" rules={[{ required: true }]}>
            <Input.Password placeholder="再次输入新密码" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" loading={loading} block style={{ height: 44 }}>
              修改密码
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}