import { useState } from 'react';
import { Form, Input, Button, Checkbox, App } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { useNavigate, useLocation } from 'react-router';
import { useTranslation } from 'react-i18next';
import { useAuthStore } from '@/stores/useAuthStore';
import { useDictStore } from '@/stores/useDictStore';
import { getLoginForm, setLoginForm, removeLoginForm } from '@/utils/token';

interface LoginFormProps {
  onSwitchRegister: () => void;
  onSwitchForget: () => void;
}

export function LoginForm({ onSwitchRegister, onSwitchForget }: LoginFormProps) {
  const { t } = useTranslation('login');
  const { message } = App.useApp();
  const navigate = useNavigate();
  const location = useLocation();
  const login = useAuthStore((s) => s.login);
  const fetchDictData = useDictStore((s) => s.fetchDictData);
  const [loading, setLoading] = useState(false);

  const cached = getLoginForm();
  const [form] = Form.useForm();

  const onFinish = async (values: { username: string; password: string; rememberMe?: boolean }) => {
    setLoading(true);
    try {
      if (values.rememberMe) {
        setLoginForm({ username: values.username, password: values.password, rememberMe: true });
      } else {
        removeLoginForm();
      }
      await login({ username: values.username, password: values.password }, values.rememberMe);
      await fetchDictData();
      message.success(t('loginSuccess'));
      const searchParams = new URLSearchParams(location.search);
      const redirect = searchParams.get('redirect') || '/dashboard';
      navigate(redirect);
    } catch {
      message.error(t('loginFail'));
    } finally {
      setLoading(false);
    }
  };

  return (
    <Form
      form={form}
      onFinish={onFinish}
      initialValues={{
        username: cached?.username || 'admin',
        password: cached?.password || 'admin123',
        rememberMe: cached?.rememberMe ?? true,
      }}
      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') }]}>
        <Input.Password prefix={<LockOutlined />} placeholder={t('enterPassword')} />
      </Form.Item>
      <Form.Item>
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <Form.Item name="rememberMe" valuePropName="checked" noStyle>
            <Checkbox>{t('rememberMe')}</Checkbox>
          </Form.Item>
          <a onClick={onSwitchForget}>{t('forgotPasswordWithQ')}</a>
        </div>
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit" loading={loading} block>
          {t('loginBtn')}
        </Button>
      </Form.Item>
      <div style={{ textAlign: 'center' }}>
        <a onClick={onSwitchRegister}>{t('register')}</a>
      </div>
    </Form>
  );
}