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

import React, { useEffect, useRef, useState } from "react";
import { Alert, Box, Button, FormControlLabel, Skeleton, Switch, Typography } from "@mui/material";
import { PageSection } from "../layout/PageLayout";
import { api } from "../api";
import { useI18n } from "../i18n/I18nProvider";
import { useToast } from "../toast";
import { checkSessionCookie, getSessionContext, isSessionInvalidated } from "../sessionBoundary";

type AiSettings = {
  enabled: boolean;
  externalProcessingAllowed: boolean;
  externalProcessingAvailable: boolean;
  effectiveExternalProcessing: boolean;
  provider: string;
};

export default function AiPrivacySettingsCard() {
  const { t } = useI18n();
  const { toast } = useToast();
  const [settings, setSettings] = useState<AiSettings | null>(null);
  const [savedSettings, setSavedSettings] = useState<AiSettings | null>(null);
  const [failed, setFailed] = useState(false);
  const [saving, setSaving] = useState(false);
  const [readAttempt, setReadAttempt] = useState(0);
  const [loading, setLoading] = useState(true);
  const session = useRef({ mounted: true, generation: 0, saving: false });
  const currentTranslation = useRef(t);
  const body = useRef<HTMLDivElement>(null);
  const retryFocus = useRef<HTMLElement | null>(null);
  const dirty = Boolean(settings && savedSettings && (settings.enabled !== savedSettings.enabled || settings.externalProcessingAllowed !== savedSettings.externalProcessingAllowed));
  useEffect(() => { currentTranslation.current = t; }, [t]);
  useEffect(() => {
    if (!loading && settings && retryFocus.current) {
      if (document.activeElement === document.body || document.activeElement === retryFocus.current) body.current?.focus();
      retryFocus.current = null;
    }
  }, [loading, settings]);

  useEffect(() => {
    const owner = session.current;
    owner.mounted = true;
    const generation = ++owner.generation;
    const context = getSessionContext();
    const active = () => owner.mounted && owner.generation === generation && !isSessionInvalidated() && getSessionContext() === context;
    api.get<AiSettings>("/ai/settings")
      .then((response) => { if (active()) { setSettings(response.data); setSavedSettings(response.data); } })
      .catch(() => { if (active()) setFailed(true); })
      .finally(() => { if (active()) setLoading(false); });
    return () => { owner.mounted = false; owner.generation += 1; };
  }, [readAttempt]);

  const save = async () => {
    checkSessionCookie();
    const owner = session.current;
    if (!settings || !owner.mounted || owner.saving || isSessionInvalidated()) return;
    const submitted = settings;
    const context = getSessionContext();
    const generation = owner.generation;
    const active = () => owner.mounted && owner.generation === generation && !isSessionInvalidated() && getSessionContext() === context;
    owner.saving = true;
    if (body.current?.contains(document.activeElement)) body.current.focus();
    setSaving(true);
    setFailed(false);
    try {
      const response = await api.put<AiSettings>("/ai/settings", {
        enabled: settings.enabled,
        externalProcessingAllowed: settings.externalProcessingAllowed,
      });
      if (!active()) return;
      setSavedSettings(response.data);
      setSettings(current => current === submitted || !current ? response.data : { ...response.data, enabled: current.enabled, externalProcessingAllowed: current.externalProcessingAllowed });
      toast(currentTranslation.current("settingsAiSaved"), "success");
    } catch {
      if (active()) setFailed(true);
    } finally {
      if (active()) { owner.saving = false; setSaving(false); }
    }
  };

  return (
    <PageSection surface title={t("settingsAiPrivacyTitle")} description={t("settingsAiPrivacyBody")}>
      {failed ? <Alert severity="error" sx={{ mb: 1.5 }} action={!settings ? <Button color="inherit" disabled={loading} onClick={() => { retryFocus.current = document.activeElement as HTMLElement; setFailed(false); setLoading(true); setReadAttempt(value => value + 1); }}>{t("retry")}</Button> : undefined}>{t(settings ? "settingsAiSaveFailed" : "settingsAiPrivacyUnavailable")}</Alert> : null}
      {!settings ? loading ? <Box role="status" aria-label={t("loading")}><Skeleton variant="rounded" height={96} /></Box> : null : <Box ref={body} role="group" aria-label={t("settingsAiPrivacyTitle")} aria-busy={saving} tabIndex={-1} sx={{ display: "grid", gap: 1 }}>
        <FormControlLabel
          control={<Switch checked={settings.enabled} onChange={(event) => setSettings({ ...settings, enabled: event.target.checked })} />}
          label={t("settingsAiEnabled")}
        />
        <FormControlLabel
          control={<Switch
            checked={settings.externalProcessingAllowed}
            disabled={!settings.externalProcessingAvailable && !settings.externalProcessingAllowed}
            onChange={(event) => setSettings({ ...settings, externalProcessingAllowed: event.target.checked })}
          />}
          label={t("settingsAiExternalAllowed")}
        />
        <Typography variant="caption" sx={{ color: "text.secondary" }}>
          {settings.externalProcessingAvailable
            ? t("settingsAiExternalAvailable")
            : t("settingsAiExternalLocalOnly")}
        </Typography>
        {dirty ? <Typography role="status" variant="body2" color="text.secondary">{t("assetsUnsavedChanges")}</Typography> : null}
        <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}><Button variant="contained" disabled={saving} onClick={() => void save()}>{t(saving ? "saving" : "settingsAiSave")}</Button>
          {dirty ? <Button disabled={saving} onClick={() => { body.current?.focus(); setSettings(savedSettings); setFailed(false); }}>{t("assetsDiscardChanges")}</Button> : null}
        </Box>
      </Box>}
    </PageSection>
  );
}