'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 { Matter } from './types'

const ACTION_COLORS: Record<Matter['nextActionType'], 'error' | 'warning' | 'primary' | 'info'> = {
  hearing: 'primary',
  deadline: 'error',
  filing: 'info',
  review: 'warning',
}

const AREA_ICONS: Record<Matter['practiceArea'], string> = {
  civil_litigation: 'ri-scales-3-line',
  immigration: 'ri-passport-line',
  corporate: 'ri-building-2-line',
  property: 'ri-home-3-line',
  family: 'ri-team-line',
  employment: 'ri-user-settings-line',
}

function daysUntil(dateStr: string): number {
  const diff = new Date(dateStr).getTime() - Date.now()
  return Math.ceil(diff / 86400000)
}

const ActiveMattersCard = ({ matters }: { matters: Matter[] }) => {
  const t = useT()
  return (
    <Card className='bs-full'>
      <CardHeader
        title={t.dashboard.activeMatters}
        titleTypographyProps={{ variant: 'h6' }}
        action={
          <Button size='small' endIcon={<i className='ri-arrow-right-line' />} href='/matters'>
            {t.common.viewAll}
          </Button>
        }
      />
      <CardContent className='flex flex-col gap-0 pt-0'>
        {matters.slice(0, 6).map((matter, i) => {
          const days = daysUntil(matter.nextActionDate)
          return (
            <Box
              key={matter.id}
              className='flex items-center gap-3 py-3'
              sx={{
                borderBottom: i < matters.slice(0, 6).length - 1 ? '1px solid' : 'none',
                borderColor: 'divider',
              }}
            >
              <Box
                className='flex items-center justify-center rounded-lg'
                sx={{ width: 38, height: 38, bgcolor: 'action.hover', flexShrink: 0 }}
              >
                <i className={`${AREA_ICONS[matter.practiceArea]} text-lg text-textSecondary`} />
              </Box>

              <Box className='flex-1 min-w-0'>
                <Typography variant='body2' className='font-semibold' noWrap>
                  {matter.reference}
                </Typography>
                <Typography variant='caption' color='text.secondary' noWrap>
                  {matter.client}
                </Typography>
              </Box>

              <Box className='flex flex-col items-end gap-0.5 shrink-0'>
                <Chip
                  label={matter.nextAction}
                  size='small'
                  color={ACTION_COLORS[matter.nextActionType]}
                  variant='outlined'
                  sx={{ fontSize: '0.65rem', height: 20 }}
                />
                <Typography
                  variant='caption'
                  color={days <= 2 ? 'error.main' : days <= 7 ? 'warning.main' : 'text.disabled'}
                  className='font-medium'
                >
                  {days === 0 ? t.common.today : days < 0 ? t.common.overdue : `${days}${t.common.days}`}
                </Typography>
              </Box>
            </Box>
          )
        })}
      </CardContent>
    </Card>
  )
}

export default ActiveMattersCard
