import { Button, Card, Col, Form, Input, Modal, Row, Space, Typography, Result } from "antd";
import { EditOutlined } from "@ant-design/icons";
import LoadingIndicator from "../../Widgets/LoadingIndicator/LoadingIndicator.jsx";
import useProfilePage from "./useProfilePage.js";
import useProfilePageUI from "./useProfilePageUI.js";
import { useSelector } from "react-redux";

const ProfilePage = () => {
    const { userData, isLoading, isError, isUpdating, handleEditProfile, handleCancelEdit, handleSubmitProfile, handleSubmitPassword } = useProfilePage();
    const { containerStyle, cardStyle, buttonStyle, formStyle, profileFormRules, passwordFormRules, isMobile } = useProfilePageUI();
    const editProfileModalVisible = useSelector((state) => state.usersUI.editProfileModalVisible);
    const [profileForm] = Form.useForm();
    const [passwordForm] = Form.useForm();

    if (isError) {
        return (
            <Result
                status="error"
                title="Ошибка"
                subTitle="Произошла ошибка при загрузке данных профиля"
            />
        );
    }

    return (
        <div style={containerStyle}>
            {isLoading ? (
                <LoadingIndicator />
            ) : (
                <>
                    <Typography.Title level={1}>Профиль</Typography.Title>
                    <Card style={cardStyle}>
                        <Row gutter={[16, 16]}>
                            <Col span={24}>
                                <Typography.Text strong>Фамилия: </Typography.Text>
                                <Typography.Text>{userData.last_name || "-"}</Typography.Text>
                            </Col>
                            <Col span={24}>
                                <Typography.Text strong>Имя: </Typography.Text>
                                <Typography.Text>{userData.first_name || "-"}</Typography.Text>
                            </Col>
                            <Col span={24}>
                                <Typography.Text strong>Отчество: </Typography.Text>
                                <Typography.Text>{userData.patronymic || "-"}</Typography.Text>
                            </Col>
                            <Col span={24}>
                                <Typography.Text strong>Логин: </Typography.Text>
                                <Typography.Text>{userData.login || "-"}</Typography.Text>
                            </Col>
                        </Row>
                        <Button
                            type="primary"
                            icon={<EditOutlined />}
                            onClick={handleEditProfile}
                            style={{ ...buttonStyle, marginTop: 16 }}
                        >
                            Редактировать
                        </Button>
                    </Card>

                    <Modal
                        title="Редактировать профиль"
                        open={editProfileModalVisible}
                        onCancel={handleCancelEdit}
                        footer={null}
                    >
                        <Form
                            form={profileForm}
                            layout="vertical"
                            onFinish={handleSubmitProfile}
                            initialValues={{
                                first_name: userData.first_name,
                                last_name: userData.last_name,
                                patronymic: userData.patronymic,
                                login: userData.login,
                            }}
                            style={formStyle}
                        >
                            <Form.Item label="Фамилия" name="last_name" rules={profileFormRules.last_name}>
                                <Input />
                            </Form.Item>
                            <Form.Item label="Имя" name="first_name" rules={profileFormRules.first_name}>
                                <Input />
                            </Form.Item>
                            <Form.Item label="Отчество" name="patronymic" rules={profileFormRules.patronymic}>
                                <Input />
                            </Form.Item>
                            <Form.Item label="Логин" name="login" rules={profileFormRules.login}>
                                <Input disabled />
                            </Form.Item>
                            <Form.Item>
                                <Space>
                                    <Button type="primary" htmlType="submit" loading={isUpdating}>
                                        Сохранить
                                    </Button>
                                    <Button onClick={handleCancelEdit}>Отмена</Button>
                                </Space>
                            </Form.Item>
                        </Form>

                        <Form
                            form={passwordForm}
                            layout="vertical"
                            onFinish={handleSubmitPassword}
                            style={formStyle}
                        >
                            <Typography.Title level={4}>Смена пароля</Typography.Title>
                            <Form.Item label="Текущий пароль" name="current_password" rules={passwordFormRules.current_password}>
                                <Input.Password />
                            </Form.Item>
                            <Form.Item label="Новый пароль" name="new_password" rules={passwordFormRules.new_password}>
                                <Input.Password />
                            </Form.Item>
                            <Form.Item label="Подтвердите пароль" name="confirm_password" rules={passwordFormRules.confirm_password}>
                                <Input.Password />
                            </Form.Item>
                            <Form.Item>
                                <Space>
                                    <Button type="primary" htmlType="submit" loading={isUpdating}>
                                        Изменить пароль
                                    </Button>
                                    <Button onClick={() => passwordForm.resetFields()}>Сбросить</Button>
                                </Space>
                            </Form.Item>
                        </Form>
                    </Modal>
                </>
            )}
        </div>
    );
};

export default ProfilePage;