import { Box, Button, Typography } from '@mui/material'
import { Clock } from 'lucide-react'
import { useNavigate } from 'react-router'
import { useSessionStore } from '../../stores/sessionStore'
import { DS_BRAND, DS_SLATE } from '../../lib/ds'

export function SessionExpired() {
  const { logout } = useSessionStore()
  const navigate = useNavigate()

  function handleRelogin() {
    logout()
    navigate('/auth/login')
  }

  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        minHeight: '100vh',
        gap: 2,
        bgcolor: DS_SLATE[50],
        p: 4,
      }}
    >
      <Box
        sx={{
          width: 56,
          height: 56,
          borderRadius: '50%',
          bgcolor: 'rgba(245,158,11,0.1)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <Clock size={28} color="#f59e0b" />
      </Box>

      <Box sx={{ textAlign: 'center', maxWidth: 380 }}>
        <Typography variant="h6" sx={{ fontWeight: 600, mb: 0.5 }}>
          Sitzung abgelaufen
        </Typography>
        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
          Ihre Sitzung ist abgelaufen. Bitte melden Sie sich erneut an.
        </Typography>
      </Box>

      <Button
        variant="contained"
        onClick={handleRelogin}
        sx={{ mt: 1, bgcolor: DS_BRAND.main, textTransform: 'none' }}
      >
        Erneut anmelden
      </Button>
    </Box>
  )
}