'use client'
import { useT } from '@/contexts/LangContext'
import Card from '@mui/material/Card'
import CardContent from '@mui/material/CardContent'
import Typography from '@mui/material/Typography'
import Grid from '@mui/material/Grid'
import type { DashboardStats } from './types'

const StatCard = ({
  icon,
  label,
  value,
  sub,
  color,
}: {
  icon: string
  label: string
  value: string
  sub?: string
  color: 'primary' | 'success' | 'warning' | 'info'
}) => (
  <Card className='bs-full'>
    <CardContent className='flex items-center gap-4'>
      <div
        className={`flex items-center justify-center rounded-xl p-3 bg-${color}-lighter`}
        style={{ minWidth: 52, minHeight: 52 }}
      >
        <i className={`${icon} text-2xl text-${color}-main`} />
      </div>
      <div>
        <Typography variant='h4' className='font-semibold'>
          {value}
        </Typography>
        <Typography variant='body2' color='text.secondary' className='font-medium'>
          {label}
        </Typography>
        {sub && (
          <Typography variant='caption' color='text.disabled'>
            {sub}
          </Typography>
        )}
      </div>
    </CardContent>
  </Card>
)

const StatsBar = ({ stats }: { stats: DashboardStats }) => {
  const t = useT()
  const fmt = (n: number) =>
    new Intl.NumberFormat('th-TH', { notation: 'compact', maximumFractionDigits: 1 }).format(n)

  return (
    <Grid container spacing={2}>
      <Grid size={{ xs: 12, sm: 6, md: 3 }}>
        <StatCard icon='ri-briefcase-4-line' label={t.dashboard.statActiveMatters} value={String(stats.activeMatters)} sub={t.dashboard.statAllAreas} color='primary' />
      </Grid>
      <Grid size={{ xs: 12, sm: 6, md: 3 }}>
        <StatCard icon='ri-bank-line' label={t.dashboard.statHearings} value={String(stats.hearingsThisWeek)} sub={t.dashboard.statHearingsSub} color='info' />
      </Grid>
      <Grid size={{ xs: 12, sm: 6, md: 3 }}>
        <StatCard icon='ri-timer-line' label={t.dashboard.statUnbilled} value={`${stats.unbilledHours} ${t.billing.hours}`} sub={t.dashboard.statUnbilledSub} color='warning' />
      </Grid>
      <Grid size={{ xs: 12, sm: 6, md: 3 }}>
        <StatCard icon='ri-money-baht-circle-line' label={t.dashboard.statRevenue} value={`฿ ${fmt(stats.monthlyRevenue)}`} sub={t.dashboard.statRevenueSub} color='success' />
      </Grid>
    </Grid>
  )
}

export default StatsBar
