import { useState } from "react";
import { Alert, Container, Form, Row, Col, Button, Card } from "react-bootstrap";
import AdminTemplate from "../templates/AdminTemplate";
import { useNavigate } from "react-router-dom";
import axios from 'axios';
import jwtDecoder from "../organisms/jwtDecoder";
import DataStorage from "../organisms/DataStorage";

export default function AdminLoginPage() {

    const domain = process.env.REACT_APP_API_URL;

    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [error, setError] = useState('');

    const navigate = useNavigate();

    const handleSubmit = (e) => {
        e.preventDefault();
        // Validate password and confirm password match
        if (password.length === 0) {
            setError('Hãy nhập mật khẩu');
        } else if (username.trim().length === 0) {
            setError('Tên đăng nhập không thể trống')
        } else {
            setError('');

            let data = {
                'username': username,
                'password': password
            }

            axios.post(domain + '/authentication/login', data)
                .then((response) => {
                    if (response.status === 200) {
                        // setError(JSON.stringify(jwtDecoder(response.data.access_token)));
                        const decodedToken = jwtDecoder(response.data.access_token);
                        const role = decodedToken.payload.roles;

                        if (role !== 'ADMIN' && role !== 'AREA_MANAGER' && role !== 'BRANCH_MANAGER') {
                            setError('TÀI KHOẢN KHÔNG HỢP LỆ');
                        } else {
                            const full_name = decodedToken.payload.username;
                            const expiryTime = decodedToken.payload.exp;
                            DataStorage.set('expiryDateAdmin', expiryTime, { expiryDate: expiryTime });
                            DataStorage.set('usernameAdmin', full_name);
                            DataStorage.set('roleAdmin', role);
                            DataStorage.set('isLoggedInAdmin', 'true');
                            DataStorage.set('accessTokenAdmin', response.data.access_token);
                            navigate('/admin');
                        }
                    } else {
                        setError(JSON.stringify(response));
                    }
                })
                .catch((error) => {
                    // if (error.status === 400) {
                    //     setError('Lỗi đăng nhập, vui lòng kiểm tra lại tài khoản và mật khẩu');
                    // } else if (error.status === 500) {
                    //     setError('Server đang tạm gặp vấn đề');
                    // }
                    setError(JSON.stringify(error));
                })
        }
    };

    return (
        <AdminTemplate content={
            (<Container fluid className="d-flex justify-content-center align-items-center mt-5"
                style={{
                    maxWidth: "100%",
                    minHeight: "70vh",
                    }}>
                <Row style={{ maxWidth: "90vw" }}>
                    {/* <Col xs={1} md={2}></Col> */}
                    <Col xs={10} md={8}>
                        <Card style={{ width: '35vw' }} className='justify-content-center card-nospan'>
                            <Card.Header>
                                <Card.Title className='mt-1 text-center'>Đăng nhập quyền quản lý</Card.Title>
                            </Card.Header>
                            <Card.Body>
                                <Form onSubmit={handleSubmit} >
                                    {error && <Alert variant="danger">{error}</Alert>}

                                    <Form.Group controlId="username" className='mb-3'>
                                        <Form.Label>Administration credential</Form.Label>
                                        <Form.Control
                                            type="text"
                                            placeholder="Administrator email"
                                            onChange={(e) => setUsername(e.target.value)}
                                        />
                                    </Form.Group>

                                    <Form.Group controlId="password" className='mb-4'>
                                        <Form.Label>Mật khẩu</Form.Label>
                                        <Form.Control
                                            type="password"
                                            placeholder="Mật khẩu"
                                            onChange={(e) => setPassword(e.target.value)}
                                        />
                                    </Form.Group>
                                    <div className='d-flex justify-content-center align-items-center'>
                                        {/* <Button as='a' variant='outline-primary' href="/register" className='m-2'>Đăng ký</Button> */}
                                        <Button type="submit" className='m-2'>Đăng nhập</Button>
                                        {/* <Button as='a' variant='outline-primary' href="/forgot-password" className='m-2'>Quên mật khẩu</Button> */}
                                    </div>

                                </Form>
                            </Card.Body>
                        </Card>

                    </Col>
                    {/* <Col xs={1} md={2}></Col> */}
                </Row>
            </Container>)
        }>
        </AdminTemplate>
    );
}