backstory/frontend/src/pages/candidate/Dashboard.tsx

import React from 'react';
import { Box, Card, CardContent, Typography, Button, LinearProgress, Stack } from '@mui/material';
import {
  Add as AddIcon,
  Visibility as VisibilityIcon,
  Download as DownloadIcon,
  ContactMail as ContactMailIcon,
  Edit as EditIcon,
  TipsAndUpdates as TipsIcon,
} from '@mui/icons-material';
import { useAuth } from 'hooks/AuthContext';
import { LoginRequired } from 'components/ui/LoginRequired';
import { BackstoryElementProps } from 'components/BackstoryTab';
import { useNavigate } from 'react-router-dom';
import { ComingSoon } from 'components/ui/ComingSoon';
import { useAppState } from 'hooks/GlobalContext';

type CandidateDashboardProps = BackstoryElementProps;

const CandidateDashboard = (_props: CandidateDashboardProps) => {
  const { setSnack } = useAppState();
  const navigate = useNavigate();
  const { user } = useAuth();
  const profileCompletion = 75;

  if (!user) {
    return <LoginRequired asset="candidate dashboard" />;
  }

  if (user?.userType !== 'candidate') {
    setSnack(
      `The page you were on is only available for candidates (you are a ${user.userType}`,
      'warning'
    );
    navigate('/');
    return <></>;
  }

  return (
    <>
      {/* Main Content */}
      <ComingSoon>
        <Box sx={{ flex: 1, p: 3 }}>
          {/* Welcome Section */}
          <Box sx={{ mb: 4 }}>
            <Typography variant="h4" sx={{ mb: 2, fontWeight: 'bold' }}>
              Welcome back, {user.firstName}!
            </Typography>

            <Box sx={{ mb: 2 }}>
              <Typography variant="body1" sx={{ mb: 1 }}>
                Your profile is {profileCompletion}% complete
              </Typography>
              <LinearProgress
                variant="determinate"
                value={profileCompletion}
                sx={{
                  height: 8,
                  borderRadius: 4,
                  backgroundColor: '#e0e0e0',
                  '& .MuiLinearProgress-bar': {
                    backgroundColor: '#4caf50',
                  },
                }}
              />
            </Box>

            <Button
              variant="contained"
              color="primary"
              sx={{ mt: 1 }}
              onClick={e => {
                e.stopPropagation();
                navigate('/candidate/profile');
              }}
            >
              Complete Your Profile
            </Button>
          </Box>

          {/* Cards Grid */}
          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
            {/* Top Row */}
            <Box sx={{ display: 'flex', gap: 3 }}>
              {/* Resume Builder Card */}
              <Card sx={{ flex: 1, minHeight: 200 }}>
                <CardContent>
                  <Typography variant="h6" sx={{ mb: 2, fontWeight: 'bold' }}>
                    Resume Builder
                  </Typography>

                  <Typography variant="body2" sx={{ mb: 1, color: '#666' }}>
                    3 custom resumes
                  </Typography>

                  <Typography variant="body2" sx={{ mb: 3, color: '#666' }}>
                    Last created: May 15, 2025
                  </Typography>

                  <Button variant="outlined" startIcon={<AddIcon />} fullWidth>
                    Create New
                  </Button>
                </CardContent>
              </Card>

              {/* Recent Activity Card */}
              <Card sx={{ flex: 1, minHeight: 200 }}>
                <CardContent>
                  <Typography variant="h6" sx={{ mb: 2, fontWeight: 'bold' }}>
                    Recent Activity
                  </Typography>

                  <Stack spacing={1} sx={{ mb: 3 }}>
                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                      <VisibilityIcon sx={{ fontSize: 16, color: '#666' }} />
                      <Typography variant="body2">5 profile views</Typography>
                    </Box>

                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                      <DownloadIcon sx={{ fontSize: 16, color: '#666' }} />
                      <Typography variant="body2">2 resume downloads</Typography>
                    </Box>

                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                      <ContactMailIcon sx={{ fontSize: 16, color: '#666' }} />
                      <Typography variant="body2">1 direct contact</Typography>
                    </Box>
                  </Stack>

                  <Button variant="outlined" fullWidth>
                    View All Activity
                  </Button>
                </CardContent>
              </Card>
            </Box>

            {/* Bottom Row */}
            <Box sx={{ display: 'flex', gap: 3 }}>
              {/* Complete Your Backstory Card */}
              <Card sx={{ flex: 1, minHeight: 200 }}>
                <CardContent>
                  <Typography variant="h6" sx={{ mb: 2, fontWeight: 'bold' }}>
                    Complete Your Backstory
                  </Typography>

                  <Stack spacing={1} sx={{ mb: 3 }}>
                    <Typography variant="body2" sx={{ display: 'flex', alignItems: 'center' }}>
                      • Add projects
                    </Typography>
                    <Typography variant="body2" sx={{ display: 'flex', alignItems: 'center' }}>
                      • Detail skills
                    </Typography>
                    <Typography variant="body2" sx={{ display: 'flex', alignItems: 'center' }}>
                      • Work history
                    </Typography>
                  </Stack>

                  <Button variant="outlined" startIcon={<EditIcon />} fullWidth>
                    Edit Backstory
                  </Button>
                </CardContent>
              </Card>

              {/* Improvement Suggestions Card */}
              <Card sx={{ flex: 1, minHeight: 200 }}>
                <CardContent>
                  <Typography variant="h6" sx={{ mb: 2, fontWeight: 'bold' }}>
                    Improvement Suggestions
                  </Typography>

                  <Stack spacing={1} sx={{ mb: 3 }}>
                    <Typography variant="body2" sx={{ display: 'flex', alignItems: 'center' }}>
                      • Add certifications
                    </Typography>
                    <Typography variant="body2" sx={{ display: 'flex', alignItems: 'center' }}>
                      • Enhance your project details
                    </Typography>
                  </Stack>

                  <Button variant="outlined" startIcon={<TipsIcon />} fullWidth>
                    View All Tips
                  </Button>
                </CardContent>
              </Card>
            </Box>
          </Box>
        </Box>
      </ComingSoon>
    </>
  );
};

export { CandidateDashboard };