import { useState, useMemo, useEffect, CSSProperties } from 'react';
import { Form, Input, Button, Card, Typography, Alert, Checkbox, Divider, Modal, message } from 'antd';
import { BookOutlined, MailOutlined, LockOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { request } from '../api/client';
import { ROUTES } from '../router/routes.constant';

interface LoginRequest {
  email: string;
  password: string;
}

interface LoginResponse {
  user: {
    id: string;
    email: string;
    first_name: string;
    last_name: string;
  };
  access_token: string;
  token_type: string;
}

interface ForgotPasswordRequest {
  email: string;
}

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

  const [loginLoading, setLoginLoading] = useState<boolean>(false);
  const [loginError, setLoginError] = useState<string>('');
  const [failedAttempts, setFailedAttempts] = useState<number>(0);
  const [accountLocked, setAccountLocked] = useState<boolean>(false);
  const [forgotPasswordModalVisible, setForgotPasswordModalVisible] = useState<boolean>(false);
  const [forgotPasswordLoading, setForgotPasswordLoading] = useState<boolean>(false);
  const [forgotPasswordSuccess, setForgotPasswordSuccess] = useState<boolean>(false);

  const isLockedOut = useMemo(() => {
    return failedAttempts >= 5 || accountLocked;
  }, [failedAttempts, accountLocked]);

  const openForgotPasswordModal = () => {
    setForgotPasswordModalVisible(true);
    setForgotPasswordSuccess(false);
  };

  const closeForgotPasswordModal = () => {
    setForgotPasswordModalVisible(false);
    setForgotPasswordSuccess(false);
    forgotPasswordForm.resetFields();
  };

  const handleLoginSubmit = async () => {
    try {
      const values = await loginForm.validateFields();
      setLoginLoading(true);
      setLoginError('');

      const result = await request<LoginResponse>({
        method: 'POST',
        path: '/auth/login',
        body: {
          email: values.email,
          password: values.password
        }
      });

      setLoginLoading(false);
      messageApi.success('Login successful! Redirecting...');
      navigate(ROUTES.DASHBOARD || '/dashboard');
    } catch (error) {
      setLoginLoading(false);
      setFailedAttempts(prev => prev + 1);
      setLoginError('Invalid email or password. Please try again.');
      messageApi.error('Invalid email or password. Please try again.');
    }
  };

  const handleForgotPasswordSubmit = async () => {
    try {
      const values = await forgotPasswordForm.validateFields();
      setForgotPasswordLoading(true);

      await request({
        method: 'POST',
        path: '/auth/forgot-password',
        body: {
          email: values.reset_email
        }
      });

      setForgotPasswordLoading(false);
      setForgotPasswordSuccess(true);
      messageApi.success('Password reset link sent to your email');
    } catch (error) {
      setForgotPasswordLoading(false);
      messageApi.error('Failed to send reset email. Please try again.');
    }
  };

  const navigateToRegister = () => {
    navigate(ROUTES.REGISTER || '/register');
  };

  const navigateToCatalog = () => {
    navigate(ROUTES.HOME || '/');
  };

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

  const loginCardStyle: CSSProperties = {
    width: '100%',
    maxWidth: '420px',
    borderRadius: '8px',
    boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
  };

  const headerSectionStyle: CSSProperties = {
    textAlign: 'center',
    marginBottom: '24px'
  };

  const iconStyle: CSSProperties = {
    fontSize: '48px',
    color: '#1677ff',
    marginBottom: '12px'
  };

  const titleStyle: CSSProperties = {
    marginBottom: '4px'
  };

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

  const rememberForgotRowStyle: CSSProperties = {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: '24px'
  };

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

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

  const browseCatalogStyle: CSSProperties = {
    display: 'block',
    marginTop: '8px'
  };

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

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

  return (
    <div style={mainContainerStyle}>
      {contextHolder}
      <Card bordered={true} style={loginCardStyle}>
        <div style={headerSectionStyle}>
          <BookOutlined style={iconStyle} />
          <Typography.Title level={3} style={titleStyle}>
            Library Management System
          </Typography.Title>
          <Typography.Text type="secondary">
            Sign in to your account
          </Typography.Text>
        </div>

        {loginError && (
          <Alert
            type="error"
            showIcon
            message={loginError}
            closable
            style={alertStyle}
            onClose={() => setLoginError('')}
          />
        )}

        {isLockedOut && (
          <Alert
            type="warning"
            showIcon
            message="Account Locked"
            description="Your account has been locked due to too many failed login attempts. Please reset your password or contact support."
            style={alertStyle}
          />
        )}

        <Form
          form={loginForm}
          layout="vertical"
          name="login_form"
          autoComplete="on"
          onFinish={handleLoginSubmit}
        >
          <Form.Item
            label="Email"
            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"
              size="large"
              allowClear
            />
          </Form.Item>

          <Form.Item
            label="Password"
            name="password"
            rules={[
              { required: true, message: 'Please enter your password' }
            ]}
          >
            <Input.Password
              prefix={<LockOutlined />}
              placeholder="Enter your password"
              size="large"
            />
          </Form.Item>

          <div style={rememberForgotRowStyle}>
            <Form.Item name="remember" valuePropName="checked" noStyle>
              <Checkbox>Remember me</Checkbox>
            </Form.Item>
            <Typography.Link onClick={openForgotPasswordModal}>
              Forgot Password?
            </Typography.Link>
          </div>

          <Button
            type="primary"
            htmlType="submit"
            size="large"
            block
            loading={loginLoading}
            disabled={isLockedOut}
            style={loginButtonStyle}
          >
            Sign In
          </Button>
        </Form>

        <Divider plain />

        <div style={footerSectionStyle}>
          <Typography.Text type="secondary">
            Don't have an account?{' '}
          </Typography.Text>
          <Typography.Link strong onClick={navigateToRegister}>
            Register as a Member
          </Typography.Link>
          <Typography.Link onClick={navigateToCatalog} style={browseCatalogStyle}>
            Browse Catalog as Guest
          </Typography.Link>
        </div>
      </Card>

      <Modal
        title="Reset Password"
        open={forgotPasswordModalVisible}
        onCancel={closeForgotPasswordModal}
        footer={null}
        destroyOnClose
      >
        <Typography.Paragraph type="secondary" style={forgotPasswordDescStyle}>
          Enter your email address and we'll send you a link to reset your password.
        </Typography.Paragraph>

        {forgotPasswordSuccess && (
          <Alert
            type="success"
            showIcon
            message="Reset link sent! Check your email inbox."
            style={alertStyle}
          />
        )}

        <Form
          form={forgotPasswordForm}
          layout="vertical"
          name="forgot_password_form"
          onFinish={handleForgotPasswordSubmit}
        >
          <Form.Item
            label="Email Address"
            name="reset_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 registered email"
              size="large"
            />
          </Form.Item>

          <Button
            type="primary"
            htmlType="submit"
            size="large"
            block
            loading={forgotPasswordLoading}
            style={resetButtonStyle}
          >
            Send Reset Link
          </Button>

          <Button
            size="large"
            block
            onClick={closeForgotPasswordModal}
            style={resetButtonStyle}
          >
            Cancel
          </Button>
        </Form>
      </Modal>
    </div>
  );
}