import React, { useState } from 'react';
import {
  SxProps,
  Dialog,
  DialogContent,
  DialogTitle,
  useTheme,
  useMediaQuery,
  Typography,
  LinearProgress,
} from '@mui/material';
import * as Types from 'types/types'; // Adjust the import path as necessary
import { useAuth } from 'hooks/AuthContext';
import { JobsView } from 'components/ui/JobsView';
import { StatusBox, StatusIcon } from 'components/ui/StatusIcon';

interface JobsViewPageProps {
  sx?: SxProps;
}

interface ProgressDialogProps {
  isOpen: boolean;
  title: string;
  status: string;
  statusType: Types.ApiActivityType;
}

const ProgressDialog: React.FC<ProgressDialogProps> = (props: ProgressDialogProps) => {
  const { isOpen, title, status, statusType } = props;
  const theme = useTheme();
  const fullScreen = useMediaQuery(theme.breakpoints.down('md'));
  return (
    <Dialog fullScreen={fullScreen} open={isOpen} aria-labelledby="responsive-dialog-title">
      <DialogTitle id="responsive-dialog-title">{title}</DialogTitle>
      <DialogContent>
        <StatusBox>
          {statusType && <StatusIcon type={statusType} />}
          <Typography variant="body2" sx={{ ml: 1, minWidth: '200px', maxWidth: '200px' }}>
            {status || 'Processing...'}
          </Typography>
        </StatusBox>
        {status && <LinearProgress sx={{ mt: 1 }} />}
      </DialogContent>
    </Dialog>
  );
};

const JobsViewPage: React.FC<JobsViewPageProps> = (props: JobsViewPageProps) => {
  const { sx } = props;
  const { apiClient } = useAuth();
  const [status, setStatus] = useState<string | null>(null);
  const [statusType, setStatusType] = useState<Types.ApiActivityType | null>(null);

  return (
    <>
      <JobsView
        onJobSelect={(selectedJobs: Types.Job[]): void => console.log('Selected:', selectedJobs)}
        onJobView={(job: Types.Job): void => console.log('View job:', job)}
        onJobEdit={(job: Types.Job): void => console.log('Edit job:', job)}
        onJobRegenerate={async (job: Types.Job): Promise<Types.Job> => {
          setStatus('Re-extracting Job information...');
          const jobStatusHandlers = {
            onStatus: (status: Types.ChatMessageStatus): void => {
              console.log('status:', status.content);
              setStatusType(status.activity);
              setStatus(status.content);
            },
            onMessage: async (
              jobRequirementsMessage: Types.JobRequirementsMessage
            ): Promise<void> => {
              console.log('onMessage - job', jobRequirementsMessage);
              setStatusType(null);
              setStatus(null);
            },
            onError: (error: Types.ChatMessageError): void => {
              console.log('onError', error);
              setStatusType(null);
              setStatus(null);
            },
            onComplete: (): void => {
              setStatusType(null);
              setStatus(null);
            },
          };
          const result = apiClient.regenerateJob(job, jobStatusHandlers);
          return (await result.promise).job;
        }}
        onJobDelete={async (job: Types.Job): Promise<void> => {
          await apiClient.deleteJob(job.id || '');
        }}
        selectable={true}
        showActions={true}
        sx={{ maxHeight: '100%', ...sx }}
      />
      <ProgressDialog
        isOpen={!!status}
        title="Job Processing"
        status={status || ''}
        statusType={statusType || 'info'}
      />
    </>
  );
};

export { JobsViewPage };