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';

interface CandidateDashboardProps extends 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 };