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

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

export function ForgetPasswordForm({ onSwitchLogin }: ForgetPasswordFormProps) {
  const { t } = useTranslation('login');
  const { message } = App.useApp();
  const [loading, setLoading] = useState(false);
  const [codeSent, setCodeSent] = useState(false);
  const [countdown, setCountdown] = useState(0);
  const [form] = Form.useForm();

  const sendCode = async () => {
    try {
      const mobile = form.getFieldValue('mobile');
      if (!mobile || !/^\d{11}$/.test(mobile)) {
        message.error(t('mobileInvalid'));
        return;
      }
      setCodeSent(true);
      message.success(t('sendCodeSuccess'));
      setCountdown(60);
      const timer = setInterval(() => {
        setCountdown((prev) => {
          if (prev <= 1) {
            clearInterval(timer);
            return 0;
          }
          return prev - 1;
        });
      }, 1000);
    } catch {
      // ignore
    }
  };

  const onFinish = async (values: { mobile: string; code: string; password: string }) => {
    setLoading(true);
    try {
      await resetPasswordApi({ mobile: values.mobile, code: values.code, password: values.password });
      message.success(t('resetSuccess'));
      onSwitchLogin();
    } catch {
      message.error(t('resetFail'));
    } finally {
      setLoading(false);
    }
  };

  return (
    <Form form={form} onFinish={onFinish} size="large">
      <Form.Item name="mobile" rules={[{ required: true, message: t('enterMobile') }, { pattern: /^\d{11}$/, message: t('mobileInvalid') }]}>
        <Input prefix={<MobileOutlined />} placeholder={t('mobilePlaceholder')} />
      </Form.Item>
      <Form.Item name="code" rules={[{ required: true, message: t('enterCode') }]}>
        <Input
          prefix={<SafetyOutlined />}
          placeholder={t('codePlaceholder')}
          suffix={
            <a onClick={sendCode} style={{ pointerEvents: countdown > 0 ? 'none' : 'auto', color: countdown > 0 ? '#999' : undefined }}>
              {countdown > 0 ? `${countdown}s` : t('getCode')}
            </a>
          }
        />
      </Form.Item>
      <Form.Item name="password" rules={[{ required: true, message: t('enterNewPassword') }, { min: 6, message: t('passwordLength') }]}>
        <Input.Password prefix={<LockOutlined />} placeholder={t('newPasswordPlaceholder')} />
      </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('resetPassword')}
        </Button>
      </Form.Item>
      <div style={{ textAlign: 'center' }}>
        <a onClick={onSwitchLogin}>{t('backToAccount')}</a>
      </div>
      {codeSent && <div style={{ display: 'none' }}>{/* codeSent flag for mock handler */}</div>}
    </Form>
  );
}