import { useState } from 'react'
import { Button, Card, Form, Input, message } from 'antd'
import { LockOutlined } from '@ant-design/icons'
import { authApi, authToken } from '../api'
import { colors } from '../tokens'

export default function LoginPage({ onSuccess }: { onSuccess: () => void }) {
  const [loading, setLoading] = useState(false)

  const submit = async ({ password }: { password: string }) => {
    setLoading(true)
    try {
      const res = await authApi.login(password)
      authToken.set(res.data.token)
      message.success('登录成功')
      onSuccess()
    } catch {
      // 错误提示由 axios 拦截器统一弹出（如"密码错误"）
    } finally {
      setLoading(false)
    }
  }

  return (
    <div style={{
      height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center',
      background: `linear-gradient(160deg, ${colors.sider} 0%, #2e3250 100%)`,
    }}>
      <Card style={{ width: 360, boxShadow: '0 8px 32px rgba(0,0,0,0.35)' }}>
        <div style={{ textAlign: 'center', marginBottom: 24 }}>
          <div style={{ fontSize: 22, fontWeight: 700, color: colors.text }}>AgentEvalTool</div>
          <div style={{ fontSize: 13, color: colors.textSecondary, marginTop: 4 }}>
            智能体质量评估平台
          </div>
        </div>
        <Form onFinish={submit} autoComplete="off">
          <Form.Item name="password" rules={[{ required: true, message: '请输入访问密码' }]}>
            <Input.Password
              size="large"
              prefix={<LockOutlined style={{ color: colors.textMuted }} />}
              placeholder="访问密码"
              autoFocus
            />
          </Form.Item>
          <Button type="primary" htmlType="submit" size="large" block loading={loading}>
            登录
          </Button>
        </Form>
      </Card>
    </div>
  )
}
