'use client'
import { useT } from '@/contexts/LangContext'
import Card from '@mui/material/Card'
import CardHeader from '@mui/material/CardHeader'
import Button from '@mui/material/Button'
import Table from '@mui/material/Table'
import TableBody from '@mui/material/TableBody'
import TableCell from '@mui/material/TableCell'
import TableContainer from '@mui/material/TableContainer'
import TableHead from '@mui/material/TableHead'
import TableRow from '@mui/material/TableRow'
import Chip from '@mui/material/Chip'
import Typography from '@mui/material/Typography'
import type { Hearing } from './types'

const STATUS_COLOR = {
  confirmed: 'success' as const,
  pending: 'warning' as const,
  adjourned: 'secondary' as const,
}

function formatDate(dateStr: string) {
  return new Date(dateStr).toLocaleDateString('en-GB', {
    weekday: 'short',
    day: 'numeric',
    month: 'short',
  })
}

const UpcomingHearingsTable = ({ hearings }: { hearings: Hearing[] }) => {
  const t = useT()
  return (
    <Card>
      <CardHeader
        title={t.dashboard.upcomingHearings}
        titleTypographyProps={{ variant: 'h6' }}
        avatar={<i className='ri-bank-line text-primary-main text-xl' />}
        action={
          <Button size='small' variant='contained' startIcon={<i className='ri-add-line' />}>
            {t.dashboard.addHearing}
          </Button>
        }
      />
      <TableContainer>
        <Table size='small'>
          <TableHead>
            <TableRow>
              <TableCell>{t.dashboard.colDateTime}</TableCell>
              <TableCell>{t.dashboard.colMatter}</TableCell>
              <TableCell>{t.dashboard.colClient}</TableCell>
              <TableCell>{t.dashboard.colCourt}</TableCell>
              <TableCell>{t.dashboard.colJudge}</TableCell>
              <TableCell>{t.dashboard.colStatus}</TableCell>
              <TableCell />
            </TableRow>
          </TableHead>
          <TableBody>
            {hearings.length === 0 ? (
              <TableRow>
                <TableCell colSpan={7} align='center' sx={{ py: 4 }}>
                  <Typography variant='body2' color='text.secondary'>
                    {t.dashboard.noUpcomingHearings}
                  </Typography>
                </TableCell>
              </TableRow>
            ) : (
              hearings.map(h => (
                <TableRow key={h.id} hover>
                  <TableCell>
                    <Typography variant='body2' className='font-medium'>
                      {formatDate(h.date)}
                    </Typography>
                    <Typography variant='caption' color='text.secondary'>
                      {h.time}
                    </Typography>
                  </TableCell>
                  <TableCell>
                    <Typography variant='body2' className='font-medium'>
                      {h.matter}
                    </Typography>
                  </TableCell>
                  <TableCell>
                    <Typography variant='body2'>{h.client}</Typography>
                  </TableCell>
                  <TableCell>
                    <Typography variant='body2'>{h.court}</Typography>
                    {h.room && (
                      <Typography variant='caption' color='text.secondary'>
                        {t.common.room} {h.room}
                      </Typography>
                    )}
                  </TableCell>
                  <TableCell>
                    <Typography variant='body2'>{h.judge ?? '—'}</Typography>
                  </TableCell>
                  <TableCell>
                    <Chip
                      label={h.status === 'confirmed' ? t.common.confirmed : h.status === 'pending' ? t.common.pending : t.common.adjourned}
                      size='small'
                      color={STATUS_COLOR[h.status]}
                      variant='outlined'
                    />
                  </TableCell>
                  <TableCell align='right'>
                    <Button size='small' variant='text'>
                      {t.common.view}
                    </Button>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </TableContainer>
    </Card>
  )
}

export default UpcomingHearingsTable
