'use client'
import { useT } from '@/contexts/LangContext'
import Card from '@mui/material/Card'
import CardHeader from '@mui/material/CardHeader'
import CardContent from '@mui/material/CardContent'
import Typography from '@mui/material/Typography'
import Chip from '@mui/material/Chip'
import Button from '@mui/material/Button'
import Box from '@mui/material/Box'
import type { Alert } from './types'

const ALERT_ICONS: Record<Alert['type'], string> = {
  deadline: 'ri-alarm-warning-line',
  retainer_low: 'ri-wallet-3-line',
  response_required: 'ri-mail-open-line',
  hearing_soon: 'ri-bank-line',
  document_received: 'ri-file-received-line',
}

const ALERT_COLORS: Record<Alert['severity'], 'error' | 'warning' | 'info'> = {
  urgent: 'error',
  warning: 'warning',
  info: 'info',
}

const UrgentAlertsCard = ({ alerts, onAlertClick }: { alerts: Alert[]; onAlertClick?: (alert: Alert) => void }) => {
  const t = useT()
  const sorted = [...alerts]
    .sort((a, b) => ({ urgent: 0, warning: 1, info: 2 }[a.severity] - { urgent: 0, warning: 1, info: 2 }[b.severity]))
    .slice(0, 3)

  return (
    <Card>
      <CardHeader
        title={t.dashboard.urgentAlerts}
        titleTypographyProps={{ variant: 'subtitle2' }}
        avatar={<i className='ri-alarm-warning-line' style={{ color: 'var(--mui-palette-error-main)', fontSize: '1rem' }} />}
        action={
          <Button size='small' endIcon={<i className='ri-arrow-right-line' />} sx={{ fontSize: '0.72rem' }}>
            {t.common.viewAll}
          </Button>
        }
        sx={{ pb: 0.5, pt: 1.5, px: 2 }}
      />
      <CardContent sx={{ pt: 0.5, px: 2, pb: '12px !important' }}>
        {sorted.length === 0 ? (
          <Typography variant='caption' color='text.disabled' sx={{ display: 'block', py: 1, textAlign: 'center' }}>
            {t.common.allClear}
          </Typography>
        ) : (
          <Box sx={{ display: 'flex', flexDirection: 'column' }}>
            {sorted.map((alert, i) => (
              <Box
                key={alert.id}
                onClick={() => onAlertClick?.(alert)}
                sx={{
                  display: 'flex', alignItems: 'center', gap: 1.5,
                  py: 0.75,
                  borderBottom: i < sorted.length - 1 ? '1px solid' : 'none',
                  borderColor: 'divider',
                  cursor: onAlertClick ? 'pointer' : 'default',
                  '&:hover': onAlertClick ? { bgcolor: 'action.hover', mx: -2, px: 2, borderRadius: 1 } : {},
                }}
              >
                <i
                  className={ALERT_ICONS[alert.type]}
                  style={{ fontSize: '0.95rem', color: `var(--mui-palette-${ALERT_COLORS[alert.severity]}-main)`, flexShrink: 0 }}
                />
                <Typography variant='body2' sx={{ flex: 1, minWidth: 0 }} noWrap>
                  {alert.message}
                </Typography>
                {alert.daysUntil !== undefined && (
                  <Chip
                    label={alert.daysUntil === 0 ? t.common.today : `${alert.daysUntil}${t.common.days}`}
                    size='small'
                    color={ALERT_COLORS[alert.severity]}
                    sx={{ height: 18, fontSize: '0.68rem', flexShrink: 0 }}
                  />
                )}
              </Box>
            ))}
          </Box>
        )}
      </CardContent>
    </Card>
  )
}

export default UrgentAlertsCard
