import { Card, Form, Input, Button, message } from 'antd';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';

const LoginPage = () => {
  const { login } = useAuth();
  const navigate = useNavigate();

  const onFinish = async (values: any) => {
    try {
      await login(values.username, values.password);
      message.success('登录成功');
      navigate('/admin/products');
    } catch (error: any) {
      message.error(error?.response?.data?.message || '登录失败');
    }
  };

  return (
    <Card title="商家后台登录" style={{ maxWidth: 420, margin: '0 auto' }}>
      <Form layout="vertical" onFinish={onFinish} initialValues={{ username: 'demo', password: 'demo123' }}>
        <Form.Item name="username" label="账号" rules={[{ required: true }]}
          extra="演示账号：demo / demo123">
          <Input placeholder="请输入账号" />
        </Form.Item>
        <Form.Item name="password" label="密码" rules={[{ required: true }]}>
          <Input.Password placeholder="请输入密码" />
        </Form.Item>
        <Button type="primary" htmlType="submit" block>
          登录
        </Button>
        <Button type="link" block onClick={() => navigate('/register')}>
          没有账号？立即注册
        </Button>
      </Form>
    </Card>
  );
};

export default LoginPage;