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

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

import {
  Alert,
  Box,
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  IconButton,
  List,
  ListItem,
  ListItemSecondaryAction,
  ListItemText,
  Paper,
  Typography,
} from "@mui/material";
import DeleteIcon from "@mui/icons-material/Delete";

import { api, getApiErrorMessage } from "../api";
import { useToast } from "../toast";
import { useI18n } from "../i18n/I18nProvider";
import { clearAuthClientState } from "../auth";

type Session = {
  id: string;
  deviceLabel: string | null;
  createdAtUtc: string;
  lastSeenAtUtc: string;
  expiresAtUtc: string;
  isCurrentSession: boolean;
};

function apiErrorMessage(e: any, t: (k: any) => string) {
  return getApiErrorMessage(e, t("twoFactorGenericError"));
}

export default function SessionsSettingsCard() {
  const { toast } = useToast();
  const { t } = useI18n();
  const [sessions, setSessions] = useState<Session[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [confirmRevokeOthers, setConfirmRevokeOthers] = useState(false);

  const loadSessions = () => {
    setLoading(true);
    setError(null);
    api
      .get<Session[]>("/auth/sessions")
      .then((r) => setSessions(r.data))
      .catch((e) => setError(apiErrorMessage(e, t)))
      .finally(() => setLoading(false));
  };

  useEffect(() => { loadSessions(); }, []);

  async function revokeSession(id: string, isCurrentSession: boolean) {
    try {
      await api.delete(`/auth/sessions/${id}`);
      if (isCurrentSession) {
        // Same pattern as AuthStatusCard's sign-out: clearing local auth state emits
        // "auth-changed", which App.tsx's listener picks up to refetch /auth/me (now 401,
        // since the server already deleted the session cookie) and redirect to /login.
        clearAuthClientState();
        return;
      }
      toast(t("sessionsRevoked"), "success");
      loadSessions();
    } catch (e: any) {
      setError(apiErrorMessage(e, t));
    }
  }

  async function revokeOthers() {
    try {
      await api.post("/auth/sessions/revoke-others");
      toast(t("sessionsRevokedOthers"), "success");
      setConfirmRevokeOthers(false);
      loadSessions();
    } catch (e: any) {
      setError(apiErrorMessage(e, t));
    }
  }

  return (
    <Paper sx={{ mt: 2, p: 2 }}>
      <Typography variant="h6" sx={{ mb: 1 }}>
        {t("sessionsSectionTitle")}
      </Typography>

      {error ? <Alert severity="error" role="alert" sx={{ mb: 1 }}>{error}</Alert> : null}
      {!loading && sessions.length === 0 && !error ? (
        <Typography sx={{ color: "text.secondary", mb: 1 }}>{t("sessionsEmpty")}</Typography>
      ) : null}

      {sessions.length > 0 ? (
        <List dense disablePadding>
          {sessions.map((s) => (
            <ListItem key={s.id} divider>
              <ListItemText
                primary={
                  <>
                    {s.deviceLabel || t("sessionsUnknownDevice")}
                    {s.isCurrentSession ? (
                      <Typography component="span" variant="caption" sx={{ ml: 1, color: "primary.main", fontWeight: 700 }}>
                        {t("sessionsCurrentDevice")}
                      </Typography>
                    ) : null}
                  </>
                }
                secondary={t("sessionsMeta", {
                  lastSeen: new Date(s.lastSeenAtUtc).toLocaleString(),
                  expires: new Date(s.expiresAtUtc).toLocaleDateString(),
                })}
              />
              <ListItemSecondaryAction>
                <IconButton edge="end" aria-label={t("sessionsRevoke")} onClick={() => revokeSession(s.id, s.isCurrentSession)}>
                  <DeleteIcon fontSize="small" />
                </IconButton>
              </ListItemSecondaryAction>
            </ListItem>
          ))}
        </List>
      ) : null}

      {sessions.length > 1 ? (
        <Button variant="text" color="warning" size="small" sx={{ mt: 1 }} onClick={() => setConfirmRevokeOthers(true)}>
          {t("sessionsRevokeOthers")}
        </Button>
      ) : null}

      <Dialog open={confirmRevokeOthers} onClose={() => setConfirmRevokeOthers(false)} maxWidth="sm" fullWidth>
        <DialogTitle>{t("sessionsRevokeOthersConfirmTitle")}</DialogTitle>
        <DialogContent>
          <Typography>{t("sessionsRevokeOthersConfirmBody")}</Typography>
        </DialogContent>
        <DialogActions>
          <Button type="button" onClick={() => setConfirmRevokeOthers(false)}>{t("cancel")}</Button>
          <Button variant="contained" color="warning" onClick={revokeOthers}>
            {t("sessionsRevokeOthers")}
          </Button>
        </DialogActions>
      </Dialog>
    </Paper>
  );
}