'use client';

// pages/forgot-password.tsx

import React, { useState } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { useRouter } from 'next/navigation';
import { UserOutlined } from '@ant-design/icons';
import { Form, Input, Button, Typography, notification, Spin } from 'antd';
import { forgotPwPost } from '../forgotPassword/service';
const { Title } = Typography;

const ForgotPasswordPage: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const router = useRouter();
  const onFinish = (values: { email: string; }): void => {
    setLoading(true);
    const inputValues = {
      email: values.email,
      appUrl: `https://${window.location.host}/auth/login`,
    };

    forgotPwPost(inputValues)
      .then((res) => {
        notification.success({
          message: 'Success',
          description: res?.data?.message,
        });
        setLoading(false);
        router.push('/auth/login');
      })
      .catch((err) => {
        notification.error({
          message: 'Error',
          description: err?.response?.data.message,
        });
        setLoading(false);
      });
  };

  return (
    <>
      {loading ? (
        <div
          style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: '100vh',
          }}
        >
          <Spin size="large" />
        </div>
      ) : (
        <div className="auth-page">
          <div className="login-box">
            <div className="login-box-header">
              <div className="logo">
                <Image src="/images/logo.png" alt="logo" height={50} width={190} />
              </div>
            </div>
            <div className="login-box-content">
              <Title level={3} className="forgot-box-title">Forgot Password</Title>
              <Form name="forgotPassword" onFinish={onFinish}>
                <Form.Item
                  name="email"
                  rules={[
                    () => ({
                      async validator(_: unknown, value: string) {
                        if (!value) {
                          return await Promise.reject(new Error('Please Enter an Email Address'));
                        }
                        if (!/^[a-zA-Z0-9]+([_.-]+[a-zA-Z0-9]+)*@([A-Za-z0-9]+[-_]?[A-Za-z0-9]+)+(\.[a-zA-Z]{2,})+$/.test(value)) {
                          return await Promise.reject(new Error('Please Enter a Valid Email'));
                        }
                        if (value.length > 70) {
                          return await Promise.reject(new Error('Email Must be at Most 70 Characters Long'));
                        }
                        await Promise.resolve();
                      },
                    }),
                  ]}
                >
                  <Input
                    prefix={<UserOutlined className="site-form-item-icon" />}
                    placeholder="Email"
                    size="large"
                  />
                </Form.Item>
                <Form.Item>
                  <Button
                    type="primary"
                    htmlType="submit"
                    size="large"
                    className="login-form-button"
                  >
                                        Submit
                  </Button>
                </Form.Item>
                <div className="login-box-footer">
                  <Link href="./login">Login</Link>
                </div>
              </Form>
            </div>
          </div>
        </div>
      )}

    </>
  );
};

export default ForgotPasswordPage;