import { Card, Form, Input, Button, message } from 'antd';
import { useNavigate } from 'react-router-dom';
import { register as registerApi } from '../api';

const RegisterPage = () => {
  const navigate = useNavigate();

  const onFinish = async (values: any) => {
    try {
      await registerApi(values);
      message.success('注册成功，请登录');
      navigate('/login');
    } catch (error: any) {
      message.error(error?.response?.data?.message || '注册失败');
    }
  };

  return (
    <Card title="创建商家账号" style={{ maxWidth: 420, margin: '0 auto' }}>
      <Form layout="vertical" onFinish={onFinish}>
        <Form.Item name="username" label="账号" rules={[{ required: true, min: 3 }]}
          extra="用于登录后台的管理员账号">
          <Input />
        </Form.Item>
        <Form.Item name="email" label="邮箱">
          <Input />
        </Form.Item>
        <Form.Item name="password" label="密码" rules={[{ required: true, min: 6 }]}>
          <Input.Password />
        </Form.Item>
        <Button type="primary" htmlType="submit" block>
          注册
        </Button>
        <Button type="link" block onClick={() => navigate('/login')}>
          已有账号？返回登录
        </Button>
      </Form>
    </Card>
  );
};

export default RegisterPage;