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

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

  const [isSubmitted, setIsSubmitted] = useState<boolean>(false);
  const [isLoading, setIsLoading] = useState<boolean>(false);

  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      setIsLoading(true);

      await new Promise(resolve => setTimeout(resolve, 1000));

      setIsSubmitted(true);
      setIsLoading(false);
      messageApi.success('If an account exists with that email, a reset link has been sent.');
    } catch (error) {
      setIsLoading(false);
      if (error instanceof Error && 'errorFields' in error) {
        return;
      }
      messageApi.error('Something went wrong. Please try again later.');
    }
  };

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

  const pageContainerStyle: CSSProperties = {
    minHeight: '100vh',
    width: '100%',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    background: 'linear-gradient(135deg, #fafafa 0%, #f0f0f0 100%)',
    padding: '24px'
  };

  const formCardStyle: CSSProperties = {
    width: '100%',
    maxWidth: '440px',
    borderRadius: '12px',
    boxShadow: '0 4px 24px rgba(0,0,0,0.08)'
  };

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

  const logoTextStyle: CSSProperties = {
    color: '#E3350D',
    marginBottom: '0px',
    fontWeight: '700'
  };

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

  const pageTitleStyle: CSSProperties = {
    textAlign: 'center',
    marginBottom: '4px',
    fontWeight: '600'
  };

  const pageDescriptionStyle: CSSProperties = {
    textAlign: 'center',
    marginBottom: '24px',
    fontSize: '14px'
  };

  const submitButtonStyle: CSSProperties = {
    height: '48px',
    fontWeight: '600',
    fontSize: '16px',
    borderRadius: '8px'
  };

  const successResultStyle: CSSProperties = {
    padding: '0'
  };

  const successBackButtonStyle: CSSProperties = {
    height: '48px',
    fontWeight: '600',
    borderRadius: '8px'
  };

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

  const rememberPasswordTextStyle: CSSProperties = {
    fontSize: '14px'
  };

  const backToLoginLinkStyle: CSSProperties = {
    color: '#E3350D',
    fontSize: '14px',
    fontWeight: '600'
  };

  return (
    <div style={pageContainerStyle}>
      {contextHolder}
      <Card bordered={true} style={formCardStyle}>
        <div style={logoSectionStyle}>
          <Typography.Title level={3} style={logoTextStyle}>
            PokeResell
          </Typography.Title>
        </div>

        <div style={lockIconStyle}>
          <Avatar
            size={64}
            icon={<LockOutlined />}
            style={{ backgroundColor: '#FFF1F0', color: '#E3350D' }}
          />
        </div>

        <Typography.Title level={3} style={pageTitleStyle}>
          Forgot Password
        </Typography.Title>

        <Typography.Paragraph type="secondary" style={pageDescriptionStyle}>
          Enter the email address associated with your account and we'll send you a link to reset your password.
        </Typography.Paragraph>

        {!isSubmitted ? (
          <Form
            form={form}
            layout="vertical"
            requiredMark={false}
            onFinish={handleSubmit}
            style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}
          >
            <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
                placeholder="Enter your email address"
                prefix={<MailOutlined />}
                size="large"
                allowClear
              />
            </Form.Item>

            <Button
              type="primary"
              htmlType="submit"
              block
              size="large"
              loading={isLoading}
              style={submitButtonStyle}
            >
              Send Reset Link
            </Button>
          </Form>
        ) : (
          <Result
            status="success"
            title="Check Your Email"
            subTitle="If an account exists with that email address, we've sent a password reset link. Please check your inbox and spam folder."
            style={successResultStyle}
            extra={
              <Button
                type="primary"
                size="large"
                block
                onClick={handleNavigateToLogin}
                style={successBackButtonStyle}
              >
                Back to Login
              </Button>
            }
          />
        )}

        <Divider style={{ margin: '16px 0' }} />

        <div style={backToLoginSectionStyle}>
          <Typography.Text type="secondary" style={rememberPasswordTextStyle}>
            Remember your password?{' '}
          </Typography.Text>
          <Typography.Link
            strong
            onClick={handleNavigateToLogin}
            style={backToLoginLinkStyle}
          >
            Back to Login
          </Typography.Link>
        </div>
      </Card>
    </div>
  );
};

export default ForgotPasswordPage;