import { useState } from 'react';
import { Form, Input, Button, App } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';
import { registerApi } from '@/api/auth';

interface RegisterFormProps {
  onSwitchLogin: () => void;
}

export function RegisterForm({ onSwitchLogin }: RegisterFormProps) {
  const { t } = useTranslation('login');
  const { message } = App.useApp();
  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();

  const onFinish = async (values: { username: string; password: string }) => {
    setLoading(true);
    try {
      await registerApi({ username: values.username, password: values.password });
      message.success(t('registerSuccess'));
      onSwitchLogin();
    } catch {
      message.error(t('registerFail'));
    } finally {
      setLoading(false);
    }
  };

  return (
    <Form form={form} onFinish={onFinish} size="large">
      <Form.Item name="username" rules={[{ required: true, message: t('enterUsername') }]}>
        <Input prefix={<UserOutlined />} placeholder={t('enterUsername')} />
      </Form.Item>
      <Form.Item
        name="password"
        rules={[
          { required: true, message: t('enterPassword') },
          { min: 6, message: t('passwordLength') },
        ]}
      >
        <Input.Password prefix={<LockOutlined />} placeholder={t('enterPassword')} />
      </Form.Item>
      <Form.Item
        name="confirmPassword"
        dependencies={['password']}
        rules={[
          { required: true, message: t('confirmPwd') },
          ({ getFieldValue }) => ({
            validator(_, value) {
              if (!value || getFieldValue('password') === value) return Promise.resolve();
              return Promise.reject(new Error(t('passwordMismatch')));
            },
          }),
        ]}
      >
        <Input.Password prefix={<LockOutlined />} placeholder={t('confirmPasswordPlaceholder')} />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit" loading={loading} block>
          {t('registerBtn')}
        </Button>
      </Form.Item>
      <div style={{ textAlign: 'center' }}>
        <a onClick={onSwitchLogin}>{t('backToAccount')}</a>
      </div>
    </Form>
  );
}