import { useState, CSSProperties } from 'react';
import { Form, Input, Button, Card, Typography, Avatar, Alert, Divider, message } from 'antd';
import { LockOutlined, MailOutlined, ArrowLeftOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { ROUTES } from '../router/routes.constant';

const { Title, Text } = Typography;

export default function ForgotPasswordPage() {
  const [form] = Form.useForm();
  const [messageApi, contextHolder] = message.useMessage();
  const navigate = useNavigate();

  const [loading, setLoading] = useState<boolean>(false);
  const [submitted, setSubmitted] = useState<boolean>(false);

  const mainContainerStyle: CSSProperties = {
    minHeight: '100vh',
    width: '100%',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#f5f5f5',
    padding: '24px'
  };

  const formCardStyle: CSSProperties = {
    width: '100%',
    maxWidth: '400px',
    borderRadius: '6px'
  };

  const cardContentStyle: CSSProperties = {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center'
  };

  const lockIconStyle: CSSProperties = {
    marginBottom: '16px'
  };

  const pageTitleStyle: CSSProperties = {
    textAlign: 'center',
    marginBottom: '8px'
  };

  const pageDescriptionStyle: CSSProperties = {
    textAlign: 'center',
    marginBottom: '24px',
    display: 'block'
  };

  const successAlertStyle: CSSProperties = {
    marginBottom: '16px',
    width: '100%'
  };

  const resetFormStyle: CSSProperties = {
    width: '100%'
  };

  const submitButtonStyle: CSSProperties = {
    marginTop: '8px'
  };

  const backToLoginLinkStyle: CSSProperties = {
    textAlign: 'center'
  };

  const submitResetRequest = async () => {
    try {
      setLoading(true);
      const values = await form.validateFields();
      
      setSubmitted(true);
      setLoading(false);
      messageApi.success('If an account exists with this email, a reset link has been sent.');
    } catch (error) {
      setLoading(false);
      if (error instanceof Error) {
        messageApi.error('Something went wrong. Please try again later.');
      }
    }
  };

  const navigateToLogin = () => {
    navigate(ROUTES.LOGIN);
  };

  return (
    <div style={mainContainerStyle}>
      {contextHolder}
      <Card bordered={true} style={formCardStyle}>
        <div style={cardContentStyle}>
          <Avatar
            size={64}
            icon={<LockOutlined />}
            style={{ backgroundColor: '#1677ff', ...lockIconStyle }}
          />
          <Title level={3} style={pageTitleStyle}>
            Forgot Password
          </Title>
          <Text type="secondary" style={pageDescriptionStyle}>
            Enter your email address and we'll send you a link to reset your password.
          </Text>
          {submitted && (
            <Alert
              type="success"
              message="Reset Link Sent"
              description="If an account exists with this email address, you will receive a password reset link shortly. Please check your inbox and spam folder."
              showIcon
              style={successAlertStyle}
            />
          )}
          <Form
            form={form}
            layout="vertical"
            name="forgot_password_form"
            onFinish={submitResetRequest}
            style={resetFormStyle}
          >
            <Form.Item
              label="Email Address"
              name="email"
              rules={[
                { required: true, message: 'Please enter your email address' },
                { type: 'email', message: 'Please enter a valid email address' }
              ]}
            >
              <Input
                prefix={<MailOutlined />}
                placeholder="Enter your email address"
                size="large"
                allowClear
              />
            </Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              block
              size="large"
              loading={loading}
              style={submitButtonStyle}
            >
              Send Reset Link
            </Button>
          </Form>
          <Divider />
          <Button
            type="link"
            block
            icon={<ArrowLeftOutlined />}
            onClick={navigateToLogin}
            style={backToLoginLinkStyle}
          >
            Back to Login
          </Button>
        </div>
      </Card>
    </div>
  );
}