import React from 'react';
import { useNavigate } from 'react-router-dom';
import {
  Box,
  Button,
  Container,
  Grid,
  Paper,
  Stack,
  Typography
} from '@mui/material';
import { useAuth } from '../../contexts/AuthContext';
import { useUser } from '../../contexts/UserContext';

const DashboardPage: React.FC = () => {
  const navigate = useNavigate();
  const { user: authUser } = useAuth();
  const { profile, loading } = useUser();

  const displayName = profile?.display_name || authUser?.display_name || authUser?.username || 'Member';
  const emailAddress = profile?.email || authUser?.email || '';
  const userType = profile?.user_type || authUser?.user_type || '';

  return (
    <Container maxWidth="lg" sx={{ py: 6 }}>
      <Stack spacing={6}>
        <Box>
          <Typography variant="h3" component="h1" gutterBottom>
            Welcome back{displayName ? `, ${displayName}` : ''}!
          </Typography>
          <Typography variant="body1" color="text.secondary" sx={{ maxWidth: 560 }}>
            This is your starting point inside ClassroomCopilot. We keep things simple here so you
            can decide what to explore next.
          </Typography>
        </Box>

        <Grid container spacing={3}>
          <Grid item xs={12} md={6}>
            <Paper elevation={2} sx={{ p: 3 }}>
              <Typography variant="h6" gutterBottom>
                Account overview
              </Typography>
              <Stack spacing={1}>
                <Typography variant="body2" color="text.secondary">
                  Signed in as
                </Typography>
                <Typography variant="body1">
                  {emailAddress || 'No email on file'}
                </Typography>
                {userType && (
                  <Typography variant="body2" color="text.secondary">
                    Role: {userType}
                  </Typography>
                )}
                <Typography variant="body2" color="text.secondary">
                  {loading ? 'Checking profile details...' : 'Profile ready'}
                </Typography>
              </Stack>
            </Paper>
          </Grid>

          <Grid item xs={12} md={6}>
            <Paper elevation={2} sx={{ p: 3, height: '100%' }}>
              <Typography variant="h6" gutterBottom>
                Quick actions
              </Typography>
              <Stack spacing={2}>
                <Button
                  variant="contained"
                  color="primary"
                  onClick={() => navigate('/single-player')}
                >
                  Open workspace
                </Button>
                <Button
                  variant="outlined"
                  onClick={() => navigate('/calendar')}
                >
                  View calendar
                </Button>
                <Button
                  variant="outlined"
                  onClick={() => navigate('/settings')}
                >
                  Update settings
                </Button>
              </Stack>
            </Paper>
          </Grid>
        </Grid>
      </Stack>
    </Container>
  );
};

export default DashboardPage;
