'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 Avatar from '@mui/material/Avatar'

const EMAILS = [
  { id: 'e1', from: 'opposing@lawfirm.th', subject: 'Re: Smith v. Nexus — Settlement Proposal', matter: 'TM.7 — Smith', time: '08:14', unread: true, tag: 'opposing' },
  { id: 'e2', from: 'dbd@moc.go.th', subject: 'DBD Circular — Foreign Business Act amendment', matter: undefined, time: 'Yesterday', unread: true, tag: 'government' },
  { id: 'e3', from: 'kenji.tanaka@email.com', subject: 'Question about visa renewal timeline', matter: 'Visa — Tanaka', time: 'Yesterday', unread: false, tag: 'client' },
  { id: 'e4', from: 'court3.bangkok@judiciary.go.th', subject: 'Hearing rescheduled — Div 3 notice', matter: 'TM.7 — Smith', time: 'Mon', unread: false, tag: 'court' },
]

const TAG_COLORS: Record<string, { bg: string; color: string }> = {
  opposing: { bg: '#FFECEC', color: '#FF4C51' },
  government: { bg: '#E5F6FF', color: '#16B1FF' },
  client: { bg: '#E8F7F7', color: '#0D9394' },
  court: { bg: '#FFF5DB', color: '#FFB400' },
}

function initials(email: string) { return email.split('@')[0].slice(0, 2).toUpperCase() }

export default function EmailsCard() {
  const t = useT()
  const unreadCount = EMAILS.filter(e => e.unread).length
  return (
    <Card sx={{ height: '100%' }}>
      <CardHeader
        title={t.dashboard.inbox}
        avatar={<i className='ri-mail-line' style={{ color: '#0D9394', fontSize: '1.25rem' }} />}
        subheader={<Typography variant='caption' sx={{ color: '#FF4C51', fontWeight: 600 }}>{t.dashboard.unread(unreadCount)}</Typography>}
        action={<Button size='small' endIcon={<i className='ri-arrow-right-line' />} href='/comms'>{t.dashboard.openInbox}</Button>}
      />
      <CardContent sx={{ pt: 0, display: 'flex', flexDirection: 'column', gap: 0 }}>
        {EMAILS.map((email, i) => (
          <Box key={email.id} sx={{ display: 'flex', alignItems: 'flex-start', gap: 1.5, py: 1.5, borderBottom: i < EMAILS.length - 1 ? '1px solid' : 'none', borderColor: 'divider', cursor: 'pointer', '&:hover': { bgcolor: 'action.hover', mx: -2, px: 2, borderRadius: 1 } }}>
            <Avatar sx={{ width: 34, height: 34, fontSize: '0.7rem', bgcolor: TAG_COLORS[email.tag].bg, color: TAG_COLORS[email.tag].color, fontWeight: 700, flexShrink: 0 }}>
              {initials(email.from)}
            </Avatar>
            <Box sx={{ flex: 1, minWidth: 0 }}>
              <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 1 }}>
                <Typography variant='body2' sx={{ fontWeight: email.unread ? 700 : 400, color: email.unread ? 'text.primary' : 'text.secondary' }} noWrap>
                  {email.from.split('@')[0]}
                </Typography>
                <Typography variant='caption' color='text.disabled' sx={{ flexShrink: 0 }}>{email.time}</Typography>
              </Box>
              <Typography variant='caption' sx={{ fontWeight: email.unread ? 600 : 400, color: email.unread ? 'text.primary' : 'text.secondary', display: 'block' }} noWrap>
                {email.subject}
              </Typography>
              <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mt: 0.25 }}>
                <Chip label={email.tag} size='small' sx={{ height: 16, fontSize: '0.6rem', bgcolor: TAG_COLORS[email.tag].bg, color: TAG_COLORS[email.tag].color, fontWeight: 600 }} />
                {email.matter && <Typography variant='caption' color='text.disabled' noWrap>{email.matter}</Typography>}
              </Box>
            </Box>
            {email.unread && <Box sx={{ width: 8, height: 8, borderRadius: '50%', bgcolor: '#0D9394', flexShrink: 0, mt: 1 }} />}
          </Box>
        ))}
      </CardContent>
    </Card>
  )
}
