import Layout from 'emailer/emails/layouts/MainLayout.jsx';
import { Container, Text } from '@react-email/components';

type JobEmailData = {
  job: { type: string; completedAt?: number; meta?: { gmailSyncPartial?: boolean; gmailSyncEmailCount?: number } };
};

const Email = ({ job }: JobEmailData) => {
  const isPartialGmail = job?.type === 'gmail-sync' && job.meta?.gmailSyncPartial;

  return (
    <Layout>
      <Container>
        <Text className="pt-4 text-2xl">{isPartialGmail ? 'Gmail Sync Paused' : 'Job Completed'}</Text>
        {job?.type === 'gmail-sync' ? (
          isPartialGmail ? (
            <>
              <Text>
                Gmail throttled the connection after downloading too many emails at once. This is normal for large
                mailboxes — your emails have been imported successfully.
              </Text>
              {job.meta?.gmailSyncEmailCount ? (
                <Text className="text-sm text-gray-600">
                  {job.meta.gmailSyncEmailCount.toLocaleString()} emails downloaded so far.
                </Text>
              ) : null}
              <Text className="text-sm text-gray-600">
                Wait a few hours and run the sync again to continue downloading the rest. It will pick up where it left
                off.
              </Text>
            </>
          ) : (
            <Text>Your Google account is now completely synced.</Text>
          )
        ) : (
          <Text>Your {job?.type ?? 'unknown'} job has finished successfully.</Text>
        )}
      </Container>
    </Layout>
  );
};

export default Email;
