jobtrackingapp/job-tracker-ui/src/components/RemindersView.tsx

import React, { useMemo } from "react";
import { useNavigate } from "react-router-dom";

import { Box, Button, Chip, Divider, Paper, Typography } from "@mui/material";

import { api } from "../api";
import ViewStateNotice from "./ViewStateNotice";
import { JobApplication } from "../types";
import { buildWorkflowPath, getReminderGroup, getWorkflowAction } from "../jobWorkflowSignals";
import { useToast } from "../toast";
import { useI18n } from "../i18n/I18nProvider";
import { useViewResource } from "../hooks/useViewResource";

type ReminderGroups = {
  missingCv: JobApplication[];
  missingInterviewNotes: JobApplication[];
  overdueFollowUp: JobApplication[];
  other: JobApplication[];
};

function groupItems(items: JobApplication[]): ReminderGroups {
  const groups: ReminderGroups = { missingCv: [], missingInterviewNotes: [], overdueFollowUp: [], other: [] };
  items.forEach((item) => {
    const group = getReminderGroup(item);
    groups[group].push(item);
  });
  return groups;
}

function ReminderSection({ title, items, onOpen, onSetFollowUp }: { title: string; items: JobApplication[]; onOpen: (job: JobApplication) => void; onSetFollowUp: (id: number, days: number | null) => void }) {
  const { t } = useI18n();
  if (items.length === 0) return null;

  return (
    <Box sx={{ display: "flex", flexDirection: "column", gap: 1.25 }}>
      <Typography variant="h6">{title}</Typography>
      {items.map((j) => {
        const action = getWorkflowAction(j, {
          packageWork: t("jobTablePackageWork"),
          followUp: t("jobTableFollowUp"),
          interviewPrep: t("jobTableInterviewStage"),
          readiness: t("jobTableReadiness"),
        });

        return (
          <Paper key={j.id} sx={{ p: 1.5, display: "grid", gridTemplateColumns: "1fr auto", gap: 1, alignItems: "center" }}>
            <Box>
              <Typography sx={{ fontWeight: 900, lineHeight: 1.25 }}>
                {j.company?.name ?? ""} <span style={{ fontWeight: 700, opacity: 0.7 }}>•</span> {j.jobTitle}
              </Typography>
              <Box sx={{ display: "flex", gap: 1, mt: 0.5, flexWrap: "wrap" }}>
                {j.needsFollowUp ? <Chip size="small" color="warning" label={t("remindersFollowUpLabel")} /> : null}
                {(j.workflowSignal?.reason ?? j.followUpReason) ? <Chip size="small" label={j.workflowSignal?.reason ?? j.followUpReason} variant="outlined" /> : null}
                {j.followUpAt ? <Chip size="small" label={t("remindersFollowUpDate", { date: new Date(j.followUpAt).toLocaleDateString() })} variant="outlined" /> : null}
                <Chip size="small" label={j.status} variant="outlined" />
              </Box>
            </Box>
            <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", justifyContent: "flex-end" }}>
              <Button size="small" variant="outlined" onClick={() => onOpen(j)}>{action?.label ?? t("remindersOpen")}</Button>
              <Button size="small" variant="outlined" onClick={() => onSetFollowUp(j.id, 3)}>+3d</Button>
              <Button size="small" variant="outlined" onClick={() => onSetFollowUp(j.id, 7)}>+7d</Button>
              <Button size="small" onClick={() => onSetFollowUp(j.id, null)}>{t("remindersClear")}</Button>
            </Box>
          </Paper>
        );
      })}
    </Box>
  );
}

export default function RemindersView() {
  const navigate = useNavigate();
  const { toast } = useToast();
  const { t } = useI18n();

  const remindersResource = useViewResource(
    async () => {
      const res = await api.get<JobApplication[]>("/jobapplications/reminders", { params: { upcomingDays: 14 } });
      return Array.isArray(res.data) ? res.data : [];
    },
    {
      initialData: [],
      errorMessage: "Unable to load reminders right now.",
      deps: [],
    },
  );

  const items = remindersResource.data;
  const grouped = useMemo(() => groupItems(items), [items]);

  const openJob = (job: JobApplication) => {
    navigate(buildWorkflowPath(job));
  };

  const setFollowUp = async (id: number, daysFromNow: number | null) => {
    try {
      const d = daysFromNow === null ? null : new Date(Date.now() + daysFromNow * 24 * 60 * 60 * 1000).toISOString().slice(0, 10);
      await api.patch(`/jobapplications/${id}/followup`, { followUpAt: d });
      toast(daysFromNow === null ? t("remindersFollowUpCleared") : t("remindersFollowUpSet"), "success");
      await remindersResource.reload();
    } catch {
      toast(t("remindersFollowUpFailed"), "error");
    }
  };

  return (
    <Paper sx={{ mt: 0, p: 2 }}>
      <Typography variant="h6" sx={{ mb: 1 }}>{t("remindersTitle")}</Typography>
      <Typography variant="body2" sx={{ color: "text.secondary", mb: 2 }}>
        {t("remindersSubtitle")}
      </Typography>

      <ViewStateNotice
        loading={remindersResource.loading}
        error={remindersResource.error}
        title="Unable to load reminders"
        description="The reminders view cannot reach the API right now."
        onRetry={remindersResource.reload}
      />

      {!remindersResource.loading && !remindersResource.error ? (
        <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
          <ReminderSection title={t("remindersMissingTailoredCv")} items={grouped.missingCv} onOpen={openJob} onSetFollowUp={setFollowUp} />
          <ReminderSection title={t("remindersMissingInterviewPrep")} items={grouped.missingInterviewNotes} onOpen={openJob} onSetFollowUp={setFollowUp} />
          <ReminderSection title={t("remindersFollowUpDue")} items={grouped.overdueFollowUp} onOpen={openJob} onSetFollowUp={setFollowUp} />
          <ReminderSection title={t("remindersOther")} items={grouped.other} onOpen={openJob} onSetFollowUp={setFollowUp} />

          {items.length === 0 ? <Typography sx={{ color: "text.secondary", textAlign: "center", py: 3 }}>{t("remindersNothing")}</Typography> : null}
        </Box>
      ) : null}

      <Divider sx={{ my: 2 }} />
      <Typography variant="caption" sx={{ color: "text.secondary" }}>
        {t("remindersTip")}
      </Typography>
    </Paper>
  );
}