import { useState, useCallback, CSSProperties } from 'react';
import { Form, Input, Button, Card, Typography, Divider, Select, DatePicker, message } from 'antd';
import { MailOutlined, LockOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import dayjs, { Dayjs } from 'dayjs';
import { UserService } from '@/services/user';
import { parseError } from '@/utils/errorHandler';
import { ROUTES } from '@/constants/routes';

interface UserCreate {
  email: string;
  first_name: string;
  last_name: string;
  date_of_birth?: string | null;
  gender?: 'MALE' | 'FEMALE' | 'OTHER' | 'PREFER_NOT_TO_SAY' | null;
  password: string;
  role?: 'ANONYMOUS' | 'REGISTERED_USER' | 'ADMINISTRATOR';
}

interface FormValues {
  email: string;
  password: string;
  confirm_password: string;
  first_name: string;
  last_name: string;
  date_of_birth?: Dayjs;
  gender?: 'MALE' | 'FEMALE' | 'OTHER' | 'PREFER_NOT_TO_SAY';
}

const RegisterPage = () => {
  const [form] = Form.useForm<FormValues>();
  const [messageApi, contextHolder] = message.useMessage();
  const navigate = useNavigate();
  const [loading, setLoading] = useState<boolean>(false);

  const validateAge = useCallback((_: unknown, value: Dayjs | null) => {
    if (!value) {
      return Promise.resolve();
    }
    const age = dayjs().diff(value, 'year');
    if (age < 13) {
      return Promise.reject(new Error('You must be at least 13 years old to register'));
    }
    return Promise.resolve();
  }, []);

  const validatePasswordMatch = useCallback(({ getFieldValue }: { getFieldValue: (name: string) => string }) => ({
    validator(_: unknown, value: string) {
      if (!value || getFieldValue('password') === value) {
        return Promise.resolve();
      }
      return Promise.reject(new Error('Passwords do not match'));
    },
  }), []);

  const handleSubmit = useCallback(async (values: FormValues) => {
    setLoading(true);
    try {
      const payload: UserCreate = {
        email: values.email,
        first_name: values.first_name,
        last_name: values.last_name,
        date_of_birth: values.date_of_birth ? values.date_of_birth.format('YYYY-MM-DD') : null,
        gender: values.gender || null,
        password: values.password,
        role: 'REGISTERED_USER',
      };

      await UserService.create(payload);
      messageApi.success('Account created successfully! Please log in.');
      navigate(ROUTES.LOGIN);
    } catch (e) {
      const { message: errorMessage } = parseError(e);
      messageApi.error(errorMessage || 'Registration failed. Please check your details and try again.');
    } finally {
      setLoading(false);
    }
  }, [messageApi, navigate]);

  const navigateToLogin = useCallback(() => {
    navigate(ROUTES.LOGIN);
  }, [navigate]);

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

  const cardStyle: CSSProperties = {
    width: '100%',
    maxWidth: '480px',
    borderRadius: '8px',
  };

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

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

  const nameRowStyle: CSSProperties = {
    display: 'flex',
    gap: '16px',
    width: '100%',
  };

  const dobGenderRowStyle: CSSProperties = {
    display: 'flex',
    gap: '16px',
    width: '100%',
  };

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

  const loginTextContainerStyle: CSSProperties = {
    textAlign: 'center',
  };

  const genderOptions = [
    { label: 'Male', value: 'MALE' },
    { label: 'Female', value: 'FEMALE' },
    { label: 'Other', value: 'OTHER' },
    { label: 'Prefer not to say', value: 'PREFER_NOT_TO_SAY' },
  ];

  const disabledDate = (current: Dayjs) => {
    return current && current > dayjs().subtract(13, 'year');
  };

  return (
    <div style={mainContainerStyle}>
      {contextHolder}
      <Card bordered style={cardStyle}>
        <Typography.Title level={2} style={titleStyle}>
          Create Account
        </Typography.Title>
        <Typography.Text type="secondary" style={subtitleStyle}>
          Join BMI Calculator to track your health journey
        </Typography.Text>
        <Form
          form={form}
          layout="vertical"
          requiredMark
          name="register_form"
          onFinish={handleSubmit}
        >
          <Form.Item
            label="Email"
            name="email"
            rules={[
              { required: true, message: 'Please enter your email' },
              { type: 'email', message: 'Please enter a valid email address' },
            ]}
          >
            <Input
              placeholder="Enter your email"
              size="large"
              prefix={<MailOutlined />}
            />
          </Form.Item>

          <Form.Item
            label="Password"
            name="password"
            hasFeedback
            rules={[
              { required: true, message: 'Please enter a password' },
              { min: 8, message: 'Password must be at least 8 characters' },
              {
                pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$/,
                message: 'Must contain uppercase, lowercase, and a number',
              },
            ]}
          >
            <Input.Password
              placeholder="Create a password"
              size="large"
              prefix={<LockOutlined />}
            />
          </Form.Item>

          <Form.Item
            label="Confirm Password"
            name="confirm_password"
            dependencies={['password']}
            hasFeedback
            rules={[
              { required: true, message: 'Please confirm your password' },
              validatePasswordMatch,
            ]}
          >
            <Input.Password
              placeholder="Confirm your password"
              size="large"
              prefix={<LockOutlined />}
            />
          </Form.Item>

          <div style={nameRowStyle}>
            <Form.Item
              label="First Name"
              name="first_name"
              style={{ flex: 1 }}
              rules={[{ required: true, message: 'First name is required' }]}
            >
              <Input placeholder="First name" size="large" />
            </Form.Item>

            <Form.Item
              label="Last Name"
              name="last_name"
              style={{ flex: 1 }}
              rules={[{ required: true, message: 'Last name is required' }]}
            >
              <Input placeholder="Last name" size="large" />
            </Form.Item>
          </div>

          <div style={dobGenderRowStyle}>
            <Form.Item
              label="Date of Birth"
              name="date_of_birth"
              style={{ flex: 1 }}
              rules={[
                { required: true, message: 'Date of birth is required' },
                { validator: validateAge },
              ]}
            >
              <DatePicker
                placeholder="Select date"
                size="large"
                style={{ width: '100%' }}
                disabledDate={disabledDate}
              />
            </Form.Item>

            <Form.Item label="Gender" name="gender" style={{ flex: 1 }}>
              <Select
                placeholder="Select gender"
                size="large"
                allowClear
                options={genderOptions}
              />
            </Form.Item>
          </div>

          <Button
            type="primary"
            htmlType="submit"
            size="large"
            block
            loading={loading}
            style={submitButtonStyle}
          >
            Create Account
          </Button>
        </Form>

        <Divider />

        <div style={loginTextContainerStyle}>
          <Typography.Text>Already have an account? </Typography.Text>
          <Typography.Link strong onClick={navigateToLogin}>
            Log in
          </Typography.Link>
        </div>
      </Card>
    </div>
  );
};

export default RegisterPage;