import React from 'react';
import { Form, Input, Button, Typography, message } from 'antd';
import {
  EyeInvisibleOutlined,
  EyeTwoTone,
  UserOutlined,
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { AuthService } from '@/services/authService';
import { Auth } from '@/types/auth';

const { Text, Link } = Typography;

export default function LoginPage() {
  const navigate = useNavigate();

  const onFinish = async (values: any) => {
    await AuthService.login(values as Auth);
    navigate('/');
  };

  return (
    <div
      style={{
        height: '100vh',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <div
        style={{
          width: '100%',
          maxWidth: 472,
          padding: 24,
          background: '#fff',
          textAlign: 'center',
        }}
      >
        <div style={{ marginBottom: 32 }}>
          <img
            src="./icons/logo.svg"
            alt="logo"
            style={{ width: 128, height: 128, marginBottom: 16 }}
          />
        </div>

        <Form
          name="login"
          onFinish={onFinish}
          layout="vertical"
        >
          <Form.Item
            name="login"
            rules={[{ required: true, message: 'Введите login' }]}
          >
            <Input size="large" placeholder="Логин" prefix={<UserOutlined />} />
          </Form.Item>

          <Form.Item
            name="password"
            rules={[{ required: true, message: 'Введите пароль' }]}
          >
            <Input.Password
              size="large"
              placeholder="Пароль"
              iconRender={(visible) =>
                visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
              }
            />
          </Form.Item>

          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              block
              size="large"
              style={{
                backgroundColor: '#C2DA3D',
                borderColor: '#C2DA3D',
                color: '#000',
              }}
            >
              Войти
            </Button>
          </Form.Item>

          <Text type="secondary" style={{ fontSize: 12 }}>
            Нажимая кнопку Войти, Вы полностью принимаете{' '}
            <Link href="/offer" target="_blank">
              Публичную оферту
            </Link>{' '}
            и{' '}
            <Link href="/privacy" target="_blank">
              Политику обработки персональных данных
            </Link>
          </Text>
        </Form>

        <div style={{ marginTop: 256 }}>
          <Link href="/forgot-password">Забыли пароль?</Link>
        </div>
      </div>
    </div>
  );
}