import React from 'react';
import { Box, Link, Typography, Avatar, Grid, SxProps, CardActions } from '@mui/material';
import { 
  Card,
  CardContent,
  Divider,
  useTheme,
} from '@mui/material';
import DeleteIcon from '@mui/icons-material/Delete';
import { useMediaQuery } from '@mui/material';
import { JobFull } from 'types/types';
import { CopyBubble } from "components/CopyBubble";
import { rest } from 'lodash';
import { AIBanner } from 'components/ui/AIBanner';
import { useAuth } from 'hooks/AuthContext';
import { DeleteConfirmation } from '../DeleteConfirmation';

interface JobInfoProps {
  job: JobFull;
  sx?: SxProps;
  action?: string;
  elevation?: number;
  variant?: "small" | "normal" | null
};

const JobInfo: React.FC<JobInfoProps> = (props: JobInfoProps) => {
  const { job } = props;
  const { user, apiClient } = useAuth();
    const {
      sx,
      action = '',
      elevation = 1,
      variant = "normal"
    } = props;
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
  const isAdmin = user?.isAdmin;

  const deleteJob = async (jobId: string | undefined) => {
    if (jobId) {
      await apiClient.deleteJob(jobId);
    }
  }

  if (!job) {
    return <Box>No user loaded.</Box>;
  }
  console.log(job);
  return (
    <Card 
      elevation={elevation}
      sx={{ 
        display: "flex",
        borderColor: 'transparent',
        borderWidth: 2,
        borderStyle: 'solid',
        transition: 'all 0.3s ease',
        flexDirection: "column",
        ...sx
      }}
      {...rest}
    >
      <CardContent sx={{ display: "flex", flexGrow: 1, p: 3, height: '100%', flexDirection: 'column', alignItems: 'stretch', position: "relative" }}>
        {variant !== "small" && <>
            {job.location &&
            <Typography variant="body2" sx={{ mb: 1 }}>
                <strong>Location:</strong> {job.location.city}, {job.location.state || job.location.country}
            </Typography>
            }
          {job.title &&
            <Typography variant="body2" sx={{ mb: 1 }}>
              <strong>Title:</strong> {job.title}
            </Typography>
          }
          {/* {job.datePosted &&
            <Typography variant="body2" sx={{ mb: 1 }}>
              <strong>Posted:</strong> {job.datePosted.toISOString()}
            </Typography>
          } */}
            {job.company &&
            <Typography variant="body2" sx={{ mb: 1 }}>
                <strong>Company:</strong> {job.company}
            </Typography>
            }
            {job.summary && <Typography variant="body2">
            <strong>Summary:</strong> {job.summary}
            </Typography>
            }
        </>}
      </CardContent>
        <CardActions>
          {isAdmin &&
            <DeleteConfirmation
              onDelete={() => { deleteJob(job.id); }}
              sx={{ minWidth: 'auto', px: 2, maxHeight: "min-content", color: "red" }}
              action="delete"
              label="job"
              title="Delete job"
              icon=<DeleteIcon />
              message={`Are you sure you want to delete ${job.id}? This action cannot be undone.`}
            />}
        </CardActions>
    </Card>
  );
};

export { JobInfo };