'use client'
import { Box, Card, CardActions, CardContent, Grid2, Typography, Button } from '@mui/material';
import Link from 'next/link';
import * as React from 'react';

export default function AdminHome() {
    const [usersLength, setUsersLength] = React.useState(0);

    React.useEffect(() => {
        const fetchUsersLength = async () => {
            const response = await fetch('/api/admin/users?length=true');
            if (response.ok) {
                const data = await response.json();
                setUsersLength(data);
            }
        }
        fetchUsersLength();
    }, []);

    return (
        <>
            <Box sx={{ flexGrow: 1, textAlign: 'center', margin: '25px' }}>
                <Typography variant="h3" component="div" sx={{ flexGrow: 1 }}>Administration</Typography>
                <Typography variant="h5" component="div" sx={{ flexGrow: 1 }}>Bienvenue sur la page d&apos;dministration d&apos;InfoGare</Typography>
                <Box display='flex' flexDirection='column' sx={{ marginTop: '25px' }}>
                    <Grid2 container spacing={2} justifyContent="center">
                        <Box sx={{ maxWidth: '500px' }}>
                            <Card variant='outlined'>
                                <CardContent>
                                    <Typography variant="h5" component="div" sx={{ flexGrow: 1 }}>Utilisateurs</Typography>
                                    <Typography variant="body1" component="div" sx={{ flexGrow: 1 }}>Gestion des utilisateurs</Typography>
                                    <Typography variant="body2" component="div" sx={{ flexGrow: 1 }}>Il y a actuellement {usersLength} utilisateurs enregistrés</Typography>
                                </CardContent>
                                <CardActions>
                                    <Link href='/admin/users'><Button variant='text'>Gérer</Button></Link>
                                </CardActions>
                            </Card>
                        </Box>
                    </Grid2>
                </Box>
            </Box>
        </>
    );
}