import React, { useContext } from 'react';
import { Container, Typography, Paper, Box, Avatar, Grid, Divider } from '@mui/material';
import { AccountContext } from 'contexts/AccountContext';
import DashboardLoading from 'components/sections/dashboard/Home/Dashboard/DashboardLoading';
import DashboardErrorPage from 'components/sections/dashboard/Home/Dashboard/DashboardErrorPage';

const SupportAgentProfile: React.FC = () => {
    const { account, accountLoading } = useContext(AccountContext);

    if (accountLoading) {
        return <DashboardLoading />;
    }

    if (!account) {
        return <DashboardErrorPage />;
    }

    return (
        <Container maxWidth="md" sx={{ mt: 4, mb: 4 }}>
            <Paper elevation={3} sx={{ p: 4, borderRadius: 2 }}>
                <Grid container spacing={3} alignItems="center">
                    <Grid item>
                        <Avatar
                            sx={{ width: 100, height: 100, bgcolor: 'primary.main', fontSize: 40 }}
                        >
                            {account.first_name?.[0]}{account.last_name?.[0]}
                        </Avatar>
                    </Grid>
                    <Grid item xs>
                        <Typography variant="h4" gutterBottom>
                            {account.first_name} {account.last_name}
                        </Typography>
                        <Typography variant="subtitle1" color="textSecondary" gutterBottom>
                            Support Agent
                        </Typography>
                        <Box sx={{ mt: 2 }}>
                            <Typography variant="body1">
                                <strong>Email:</strong> {account.email}
                            </Typography>
                            <Typography variant="body1">
                                <strong>User ID:</strong> {account.id}
                            </Typography>
                            <Typography variant="body1">
                                <strong>Date Joined:</strong> {new Date(account.date_joined).toLocaleDateString()}
                            </Typography>
                        </Box>
                    </Grid>
                </Grid>

                <Divider sx={{ my: 3 }} />

                <Box>
                    <Typography variant="h6" gutterBottom>
                        Account Status
                    </Typography>
                    <Typography variant="body1">
                        Active: {account.is_active ? 'Yes' : 'No'}
                    </Typography>
                </Box>
            </Paper>
        </Container>
    );
};

export default SupportAgentProfile;
