import { useState } from 'react'
import { Alert, App, Button, Form, Input, Typography } from 'antd'
import { LockOutlined } from '@ant-design/icons'
import { Navigate, useNavigate } from 'react-router-dom'

import { BrandLogo } from '@/components/BrandLogo'
import { getAdminBasePath, getAdminLoginPath } from '@/shared/api/adminClient'
import { useAdminSessionStore } from '@/stores/adminSession'

interface ChangePasswordForm {
  old_password: string
  new_password: string
  confirm_password: string
}

export function AdminChangePasswordPage() {
  const { message } = App.useApp()
  const navigate = useNavigate()
  const admin = useAdminSessionStore(state => state.admin)
  const logout = useAdminSessionStore(state => state.logout)
  const changePassword = useAdminSessionStore(state => state.changePassword)
  const [submitting, setSubmitting] = useState(false)
  const [error, setError] = useState('')
  const basePath = getAdminBasePath()

  if (!admin) return <Navigate to={getAdminLoginPath()} replace />
  if (!admin.password_must_change) return <Navigate to={basePath} replace />

  const onFinish = async (values: ChangePasswordForm) => {
    setSubmitting(true)
    setError('')
    try {
      await changePassword(values.old_password, values.new_password)
      message.success('初始密码已更新')
      navigate(basePath, { replace: true })
    } catch (err) {
      setError(err instanceof Error ? err.message : '密码没有更新，请检查原密码')
    } finally {
      setSubmitting(false)
    }
  }

  return (
    <main className="admin-login-page">
      <section className="admin-login-brand">
        <div className="admin-login-brand__inner">
          <BrandLogo height={56} variant="dark" />
          <div className="admin-login-brand__eyebrow">FIRST RUN · SECURITY</div>
          <Typography.Title className="brand-title admin-login-brand__title">
            先把钥匙
            <br />
            换掉。
          </Typography.Title>
          <Typography.Paragraph className="admin-login-brand__copy">
            初始密码只用于第一次进入。修改完成后，这个后台会话才能打开订单、财务和分销操作。
          </Typography.Paragraph>
        </div>
      </section>

      <section className="admin-login-form-panel">
        <div className="admin-login-card">
          <div className="admin-login-card__head">
            <BrandLogo height={34} />
            <Typography.Title level={2} className="brand-title">
              修改初始密码
            </Typography.Title>
            <Typography.Text type="secondary">
              当前账号：{admin.nickname || admin.username}（{admin.username}）
            </Typography.Text>
          </div>

          {error ? <Alert type="error" showIcon message={error} className="login-alert" /> : null}

          <Form<ChangePasswordForm>
            layout="vertical"
            size="large"
            requiredMark={false}
            onFinish={onFinish}
          >
            <Form.Item
              label="原密码"
              name="old_password"
              rules={[{ required: true, message: '请输入原密码' }]}
            >
              <Input.Password prefix={<LockOutlined />} placeholder="请输入原密码" />
            </Form.Item>
            <Form.Item
              label="新密码"
              name="new_password"
              rules={[
                { required: true, message: '请输入新密码' },
                { min: 8, max: 20, message: '密码长度需为 8–20 位' },
              ]}
            >
              <Input.Password prefix={<LockOutlined />} placeholder="8–20 位新密码" />
            </Form.Item>
            <Form.Item
              label="确认新密码"
              name="confirm_password"
              dependencies={['new_password']}
              rules={[
                { required: true, message: '请再次输入新密码' },
                ({ getFieldValue }) => ({
                  validator(_, value) {
                    if (!value || getFieldValue('new_password') === value) {
                      return Promise.resolve()
                    }
                    return Promise.reject(new Error('两次输入的新密码不一致'))
                  },
                }),
              ]}
            >
              <Input.Password prefix={<LockOutlined />} placeholder="再次输入新密码" />
            </Form.Item>

            <Button type="primary" htmlType="submit" block loading={submitting}>
              更新密码并进入后台
            </Button>
          </Form>

          <div className="admin-login-card__foot">
            <span>改密后旧会话会按后端规则刷新</span>
            <Button
              type="link"
              onClick={async () => {
                await logout()
                navigate(getAdminLoginPath(), { replace: true })
              }}
            >
              退出登录
            </Button>
          </div>
        </div>
      </section>
    </main>
  )
}