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

import React, { useEffect, useRef, useState } from "react";

import {
  Box,
  Alert,
  Button,
  Checkbox,
  FormControl,
  FormControlLabel,
  InputLabel,
  MenuItem,
  Select,
  Skeleton,
  Tab,
  Tabs,
  Typography,
} from "@mui/material";

import { useNavigate } from "react-router-dom";

import { JobTableColumns } from "./JobTable";
import ImportExportJobs from "./ImportExportJobs";
import RulesSettingsCard, { RULE_FIELDS, RuleDraft, RuleField, RuleSettings } from "./RulesSettingsCard";
import BackupCard from "./BackupCard";
import QuickCaptureCard from "./QuickCaptureCard";
import AiUsageCard from "./AiUsageCard";
import AiPrivacySettingsCard from "./AiPrivacySettingsCard";
import { ThemeModePref } from "../themePrefs";
import { useI18n } from "../i18n/I18nProvider";
import { api, getApiErrorMessage } from "../api";
import { useToast } from "../toast";
import { PageSection } from "../layout/PageLayout";

interface Props {
  pageSize: 15 | 20 | 25;
  onPageSizeChange: (n: 15 | 20 | 25) => void;
  columns: JobTableColumns;
  onColumnsChange: (next: JobTableColumns) => void;
  themeMode: ThemeModePref;
  onThemeModeChange: (v: ThemeModePref) => void;
}

function TabPanel({ value, index, label, children }: { value: number; index: number; label: string; children: React.ReactNode }) {
  if (value !== index) return null;
  return <Box role="tabpanel" id={`settings-panel-${index}`} aria-labelledby={`settings-tab-${index}`} aria-label={label} sx={{ mt: "var(--app-section-gap)", minWidth: 0 }}>{children}</Box>;
}

type NotificationPrefs = {
  emailFollowUpRemindersEnabled: boolean;
};

function ruleDraft(settings: RuleSettings): RuleDraft {
  return Object.fromEntries(RULE_FIELDS.map(field => [field, String(settings[field])])) as RuleDraft;
}

export default function SettingsView({
  pageSize,
  onPageSizeChange,
  columns,
  onColumnsChange,
  themeMode,
  onThemeModeChange,
}: Props) {
  const navigate = useNavigate();
  const [tab, setTab] = useState(0);
  const { language, setLanguage, t } = useI18n();
  const { toast } = useToast();
  const [notificationPrefs, setNotificationPrefs] = useState<NotificationPrefs | null>(null);
  const [notificationError, setNotificationError] = useState<string | null>(null);
  const [savingNotifications, setSavingNotifications] = useState(false);
  const [savedRules, setSavedRules] = useState<RuleSettings | null>(null);
  const [rulesDraft, setRulesDraft] = useState<RuleDraft | null>(null);
  const [rulesLoadError, setRulesLoadError] = useState<string | null>(null);
  const [rulesSaveError, setRulesSaveError] = useState(false);
  const [invalidRules, setInvalidRules] = useState<RuleField[]>([]);
  const [savingRules, setSavingRules] = useState(false);
  const rulesSession = useRef({ mounted: true, loading: false, saving: false });
  const rulesDirty = Boolean(rulesDraft && savedRules && RULE_FIELDS.some(field => rulesDraft[field] !== String(savedRules[field])));

  useEffect(() => {
    const session = rulesSession.current;
    session.mounted = true;
    return () => { session.mounted = false; };
  }, []);

  const loadRules = async () => {
    const session = rulesSession.current;
    if (rulesDraft || session.loading) return;
    session.loading = true;
    setRulesLoadError(null);
    try {
      const { data } = await api.get<RuleSettings>("/rules");
      if (!session.mounted) return;
      setSavedRules(data);
      setRulesDraft(ruleDraft(data));
    } catch (error) {
      if (session.mounted) setRulesLoadError(getApiErrorMessage(error, t("rulesLoadFailed")));
    } finally { session.loading = false; }
  };

  const selectSection = (next: number) => {
    setTab(next);
    if (next === 1) void loadRules();
  };

  const saveRules = async () => {
    const session = rulesSession.current;
    if (!rulesDraft || !savedRules || session.saving) return;
    const invalid = RULE_FIELDS.filter(field => !rulesDraft[field].trim() || !Number.isInteger(Number(rulesDraft[field])) || Number(rulesDraft[field]) < 1 || Number(rulesDraft[field]) > 365);
    setInvalidRules(invalid);
    if (invalid.length) return;
    const submittedDraft = rulesDraft;
    const submitted = { id: savedRules.id, ...Object.fromEntries(RULE_FIELDS.map(field => [field, Number(submittedDraft[field])])) } as RuleSettings;
    session.saving = true;
    setSavingRules(true);
    setRulesSaveError(false);
    try {
      await api.put("/rules", submitted);
      if (!session.mounted) return;
      setSavedRules(submitted);
      // A completed save acknowledges its snapshot, not edits made while it was pending.
      setRulesDraft(current => current && RULE_FIELDS.every(field => current[field] === submittedDraft[field]) ? ruleDraft(submitted) : current);
      toast(t("rulesSaved"), "success");
    } catch {
      if (session.mounted) setRulesSaveError(true);
    } finally {
      session.saving = false;
      if (session.mounted) setSavingRules(false);
    }
  };

  const discardRules = () => {
    if (!savedRules || savingRules) return;
    setRulesDraft(ruleDraft(savedRules));
    setInvalidRules([]);
    setRulesSaveError(false);
  };

  useEffect(() => {
    let active = true;
    api.get<NotificationPrefs>("/notification-settings")
      .then(({ data }) => { if (active) setNotificationPrefs(data); })
      .catch((error) => { if (active) setNotificationError(getApiErrorMessage(error, t("settingsNotificationsLoadFailed"))); });
    return () => { active = false; };
  }, [t]);

  const saveNotifications = async () => {
    if (!notificationPrefs) return;
    setSavingNotifications(true);
    setNotificationError(null);
    try {
      const { data } = await api.put<NotificationPrefs>("/notification-settings", notificationPrefs);
      setNotificationPrefs(data);
      toast(t("settingsNotificationsSaved"), "success");
    } catch (error) {
      setNotificationError(getApiErrorMessage(error, t("settingsNotificationsSaveFailed")));
    } finally { setSavingNotifications(false); }
  };

  return (
    <Box sx={{ minWidth: 0 }}>
      <FormControl fullWidth sx={{ display: { xs: "flex", sm: "none" }, mb: 1 }}>
        <InputLabel id="settings-section-label">{t("settingsNavigation")}</InputLabel>
        <Select
          labelId="settings-section-label"
          value={tab}
          label={t("settingsNavigation")}
          onChange={(event) => selectSection(Number(event.target.value))}
        >
          <MenuItem value={0}>{t("settingsTabGeneral")}</MenuItem>
          <MenuItem value={1}>{t("settingsTabFollowUps")}</MenuItem>
          <MenuItem value={2}>{t("settingsTabNotifications")}</MenuItem>
          <MenuItem value={3}>{t("settingsTabBackup")}</MenuItem>
        </Select>
      </FormControl>

      <Tabs aria-label={t("settings")} value={tab} onChange={(_, v) => selectSection(v)} variant="scrollable" scrollButtons="auto" sx={{ display: { xs: "none", sm: "flex" }, mb: 1 }}>
        <Tab id="settings-tab-0" aria-controls="settings-panel-0" label={t("settingsTabGeneral")} />
        <Tab id="settings-tab-1" aria-controls="settings-panel-1" label={t("settingsTabFollowUps")} />
        <Tab id="settings-tab-2" aria-controls="settings-panel-2" label={t("settingsTabNotifications")} />
        <Tab id="settings-tab-3" aria-controls="settings-panel-3" label={t("settingsTabBackup")} />
      </Tabs>

      {rulesDirty ? <Typography role="status" variant="body2" sx={{ mt: 1, color: "text.secondary" }}>{t("assetsUnsavedChanges")}. {t("rulesDraftScope")}</Typography> : null}

      <TabPanel value={tab} index={0} label={t("settingsTabGeneral")}>
        <Box sx={{ display: "grid", gap: "var(--app-section-gap)", minWidth: 0 }}>
          <Box sx={{ display: "grid", gridTemplateColumns: { xs: "minmax(0, 1fr)", md: "repeat(2, minmax(0, 1fr))" }, gap: "var(--app-section-gap)" }}>
            <PageSection surface title={t("settingsAppearance")}>
              <FormControl fullWidth>
                <InputLabel id="theme-mode-label">{t("settingsTheme")}</InputLabel>
                <Select
                  labelId="theme-mode-label"
                  value={themeMode}
                  label={t("settingsTheme")}
                  onChange={(e) => onThemeModeChange(e.target.value as ThemeModePref)}
                >
                  <MenuItem value="system">{t("settingsThemeSystem")}</MenuItem>
                  <MenuItem value="dark">{t("settingsThemeDark")}</MenuItem>
                  <MenuItem value="light">{t("settingsThemeLight")}</MenuItem>
                </Select>
              </FormControl>
            </PageSection>

            <PageSection surface title={t("settingsLanguageTitle")} description={t("settingsLanguageBody")}>
              <FormControl fullWidth>
                <InputLabel id="language-label">{t("settingsPreferredLanguage")}</InputLabel>
                <Select
                  labelId="language-label"
                  value={language}
                  label={t("settingsPreferredLanguage")}
                  onChange={(e) => setLanguage(e.target.value as "en" | "nb")}
                >
                  <MenuItem value="en">{t("settingsEnglish")}</MenuItem>
                  <MenuItem value="nb">{t("settingsNorwegian")}</MenuItem>
                </Select>
              </FormControl>
            </PageSection>
          </Box>

          <PageSection surface title={t("settingsJobs")}>
            <Box sx={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
              <Box sx={{ flex: "1 1 15rem", minWidth: 0 }}>
                <Typography component="h3" variant="subtitle2" sx={{ mb: 1, fontWeight: 700 }}>
                  {t("settingsPagination")}
                </Typography>
                <FormControl fullWidth>
                  <InputLabel id="page-size-label">{t("settingsRowsPerPage")}</InputLabel>
                  <Select
                    labelId="page-size-label"
                    value={pageSize}
                    label={t("settingsRowsPerPage")}
                    onChange={(e) => onPageSizeChange(e.target.value as 15 | 20 | 25)}
                  >
                    <MenuItem value={15}>15</MenuItem>
                    <MenuItem value={20}>20</MenuItem>
                    <MenuItem value={25}>25</MenuItem>
                  </Select>
                </FormControl>
              </Box>

              <Box sx={{ flex: "1 1 15rem", minWidth: 0 }}>
                <Typography component="h3" variant="subtitle2" sx={{ mb: 1, fontWeight: 700 }}>
                  {t("settingsColumns")}
                </Typography>
                {(
                  [
                    ["status", t("settingsColumnStatus")],
                    ["dateApplied", t("settingsColumnDateApplied")],
                    ["daysSince", t("settingsColumnDays")],
                    ["jobUrl", t("settingsColumnJobUrl")],
                  ] as const
                ).map(([key, label]) => (
                  <FormControlLabel
                    key={key}
                    control={<Checkbox checked={columns[key]} onChange={() => onColumnsChange({ ...columns, [key]: !columns[key] })} />}
                    label={label}
                  />
                ))}
              </Box>
            </Box>

            <Box sx={{ mt: 2 }}>
              <ImportExportJobs />
            </Box>
          </PageSection>

          <AiPrivacySettingsCard />
          <AiUsageCard />
          <QuickCaptureCard />
          <PageSection surface title={t("connectedAccounts")} description={t("settingsConnectedAccountsBody")}
            actions={<Button variant="outlined" onClick={() => navigate("/settings/connected-accounts")}>{t("settingsManageConnectedAccounts")}</Button>} />
        </Box>
      </TabPanel>

      <TabPanel value={tab} index={1} label={t("settingsTabFollowUps")}>
        <RulesSettingsCard draft={rulesDraft} loadError={rulesLoadError} saveError={rulesSaveError} invalid={invalidRules}
          saving={savingRules} dirty={rulesDirty} onSave={() => void saveRules()} onRetry={() => void loadRules()} onDiscard={discardRules}
          onChange={(field, value) => {
            setRulesDraft(current => current ? { ...current, [field]: value } : current);
            setInvalidRules(current => current.filter(key => key !== field));
          }} />
      </TabPanel>

      <TabPanel value={tab} index={2} label={t("settingsTabNotifications")}>
        <PageSection surface title={t("settingsNotificationsTitle")} description={t("settingsNotificationsBody")}>
          {notificationError ? <Alert severity="error" sx={{ mb: 1.5 }}>{notificationError}</Alert> : null}
          {!notificationPrefs ? <Skeleton variant="rounded" height={70} /> : <Box sx={{ display: "grid", gap: 1 }}>
            <FormControlLabel
              control={<Checkbox checked={notificationPrefs.emailFollowUpRemindersEnabled} onChange={(e) => setNotificationPrefs({ emailFollowUpRemindersEnabled: e.target.checked })} />}
              label={t("settingsNotificationsFollowUpReminders")}
            />
            <Typography variant="caption" color="text.secondary">{t("settingsNotificationsEmailBody")}</Typography>
            <Box><Button variant="contained" disabled={savingNotifications} onClick={() => void saveNotifications()}>{savingNotifications ? t("settingsSaving") : t("settingsNotificationsSave")}</Button></Box>
          </Box>}
          <Typography variant="caption" sx={{ color: "text.secondary", display: "block", mt: 1.5 }}>
            {t("settingsNotificationsDelivery")}
          </Typography>
          <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", mt: 1.5 }}>
            <Button variant="outlined" onClick={() => navigate("/reminders")}>{t("settingsOpenReminderInbox")}</Button>
          </Box>
        </PageSection>
      </TabPanel>

      <TabPanel value={tab} index={3} label={t("settingsTabBackup")}>
        <BackupCard />
      </TabPanel>
    </Box>
  );
}