"use client";

import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import {
  selectExpiresInHours,
  selectTimeUntilExpiration,
} from "@/app/redux/auth/selectors";
import { Alert, AlertTitle, Box, Typography } from "@mui/material";

export default function TokenExpirationInfo() {
  const expiresInHours = useSelector(selectExpiresInHours);
  const timeUntilExpiration = useSelector(selectTimeUntilExpiration);
  const [showWarning, setShowWarning] = useState(false);

  useEffect(() => {
    // Show warning when token expires in less than 1 hour
    if (expiresInHours > 0 && expiresInHours <= 1) {
      setShowWarning(true);
    } else {
      setShowWarning(false);
    }
  }, [expiresInHours]);

  if (expiresInHours <= 0) {
    return null; // Don't show anything if not logged in or no token info
  }

  const formatTime = (seconds: number) => {
    const hours = Math.floor(seconds / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);

    if (hours > 0) {
      return `${hours}h ${minutes}m`;
    }
    return `${minutes}m`;
  };

  return (
    <Box sx={{ mb: 2 }}>
      {showWarning ? (
        <Alert severity="warning" sx={{ mb: 2 }}>
          <AlertTitle>Session Expiring Soon</AlertTitle>
          Your session will expire in {formatTime(timeUntilExpiration)}. Please
          save your work and log in again if needed.
        </Alert>
      ) : (
        <Typography variant="caption" color="text.secondary">
          Session expires in {formatTime(timeUntilExpiration)}
        </Typography>
      )}
    </Box>
  );
}