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

export default function LoginPage() {

    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 full_name = decodedToken.payload.username;
                        const role = decodedToken.payload.roles;
                        const expiryTime = decodedToken.payload.exp;
                        DataStorage.set('expiryDate', expiryTime, {expiryDate:expiryTime});
                        DataStorage.set('username', full_name);
                        DataStorage.set('role', role);
                        DataStorage.set('isLoggedIn', 'true');
                        DataStorage.set('accessToken', response.data.access_token);
                        DataStorage.set('cart', '{}');
                        navigate('/');
                    } 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 (
        <BasicTemplate content={
            (<Container fluid className="d-flex justify-content-center align-items-center mt-5" 
                style={{
                    maxWidth: "100%",
                    minHeight: "70vh",
                    backgroundImage: "linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('/about-us.jpg')", // Thay đường dẫn ảnh nền
                    backgroundSize: 'cover',
                    backgroundPosition: 'center',
                    backgroundAttachment: 'fixed',
                    width: '100%',
                    padding: '50px 0',
                }}>
                <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</Card.Title>
                            </Card.Header>
                            <Card.Body>
                                <Form onSubmit={handleSubmit} >
                                    {error && <Alert variant="danger">{error}</Alert>}

                                    <Form.Group controlId="username" className='mb-3'>
                                        <Form.Label>Email/Số điện thoại</Form.Label>
                                        <Form.Control
                                            type="text"
                                            placeholder="Email/số điện thoại"
                                            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>)
        }>
        </BasicTemplate>
    );
}