import {
  DashboardOutlined,
  LockOutlined,
  SafetyCertificateOutlined,
  SettingOutlined,
  UserOutlined,
} from '@ant-design/icons'
import { App, Button, Form, Input } from 'antd'
import { useState } from 'react'
import { useNavigate } from 'react-router'

import { loginAdmin } from '@/services/admin'
import { setAdminSession } from '@/utils/admin-auth'

type LoginForm = {
  username: string
  password: string
}

const brandFeatures = [
  {
    icon: <DashboardOutlined />,
    title: '运营看板',
    desc: '订单、打手、财务数据一目了然',
  },
  {
    icon: <SafetyCertificateOutlined />,
    title: '权限管控',
    desc: '按角色开放操作，操作可审计',
  },
  {
    icon: <SettingOutlined />,
    title: '灵活配置',
    desc: '平台、规则、费率在线可调',
  },
]

export default function AdminLoginPage() {
  const navigate = useNavigate()
  const { message } = App.useApp()
  const [loading, setLoading] = useState(false)

  async function submitLogin(values: LoginForm) {
    setLoading(true)

    try {
      const response = await loginAdmin({
        username: values.username.trim(),
        password: values.password.trim(),
      })
      setAdminSession(response.data.token, response.data.expiresAt, response.data.user)
      message.success('登录成功')
      navigate('/admin/dashboard', { replace: true })
    } catch (error) {
      message.error(error instanceof Error ? error.message : '后台登录失败')
    } finally {
      setLoading(false)
    }
  }

  return (
    <main className="auth-page">
      <div className="auth-shell">
        {/* 品牌信息区：移动端隐藏 */}
        <aside className="auth-brand">
          <div className="auth-brand-logo">
            <span className="auth-logo-mark">
              <DashboardOutlined />
            </span>
            <strong>Order Site Admin</strong>
          </div>

          <div className="auth-brand-body">
            <h2>运营后台管理中心</h2>
            <p>统一管理订单履约、打手调度与财务结算，按角色开放不同操作权限。</p>
            <div className="auth-brand-features">
              {brandFeatures.map((item) => (
                <div className="auth-brand-feature" key={item.title}>
                  <span className="auth-feature-icon">{item.icon}</span>
                  <div className="auth-brand-feature-text">
                    <strong>{item.title}</strong>
                    <span>{item.desc}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="auth-brand-footer">
            © {new Date().getFullYear()} Order Site · 保留所有权利
          </div>
        </aside>

        {/* 登录表单区 */}
        <section className="auth-form-side">
          <div className="auth-form-card">
            {/* 移动端精简品牌栏 */}
            <div className="auth-mobile-brand">
              <span className="auth-logo-mark">
                <DashboardOutlined />
              </span>
              <strong>Order Site Admin</strong>
            </div>

            <div className="auth-form-header">
              <h1>运营后台登录</h1>
              <p>使用账号密码进入后台，并按角色开放不同操作权限</p>
            </div>

            <Form<LoginForm> layout="vertical" requiredMark={false} onFinish={submitLogin}>
              <Form.Item
                name="username"
                label="账号"
                rules={[{ required: true, message: '请输入账号' }]}
              >
                <Input prefix={<UserOutlined />} placeholder="输入账号" autoComplete="username" />
              </Form.Item>
              <Form.Item
                name="password"
                label="密码"
                rules={[{ required: true, message: '请输入密码' }]}
              >
                <Input.Password
                  prefix={<LockOutlined />}
                  placeholder="输入密码"
                  autoComplete="current-password"
                />
              </Form.Item>
              <Button type="primary" htmlType="submit" block loading={loading} size="large">
                登录后台
              </Button>
            </Form>

            <div className="auth-form-footer">仅限授权运营人员访问</div>
          </div>
        </section>
      </div>
    </main>
  )
}