'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 LinearProgress from '@mui/material/LinearProgress'
import Button from '@mui/material/Button'
import Divider from '@mui/material/Divider'
import Box from '@mui/material/Box'
import Chip from '@mui/material/Chip'
import type { RetainerAlert } from './types'

interface BillingData {
  monthlyRevenue: number
  monthlyTarget: number
  outstanding: number
  overdue: number
  currency: string
  retainerAlerts: RetainerAlert[]
}

const fmt = (n: number, currency = 'THB') =>
  new Intl.NumberFormat('th-TH', {
    style: 'currency',
    currency,
    maximumFractionDigits: 0,
    notation: n >= 100000 ? 'compact' : 'standard',
  }).format(n)

const BillingSnapshotCard = ({ data }: { data: BillingData }) => {
  const t = useT()
  const progress = Math.min(100, Math.round((data.monthlyRevenue / data.monthlyTarget) * 100))

  return (
    <Card className='bs-full'>
      <CardHeader
        title={t.dashboard.billingSnapshot}
        titleTypographyProps={{ variant: 'h6' }}
        avatar={<i className='ri-money-baht-circle-line text-success-main text-xl' />}
        action={
          <Button size='small' endIcon={<i className='ri-arrow-right-line' />} href='/billing'>
            {t.dashboard.fullReport}
          </Button>
        }
      />
      <CardContent className='flex flex-col gap-4 pt-0'>
        {/* Monthly revenue vs target */}
        <Box>
          <div className='flex justify-between items-end mb-1'>
            <Typography variant='body2' color='text.secondary'>
              {t.dashboard.thisMonth}
            </Typography>
            <Typography variant='h6' className='font-semibold'>
              {fmt(data.monthlyRevenue, data.currency)}
            </Typography>
          </div>
          <LinearProgress
            variant='determinate'
            value={progress}
            color='success'
            sx={{ borderRadius: 4, height: 6 }}
          />
          <Typography variant='caption' color='text.secondary' className='mt-1 block'>
            {t.dashboard.targetProgress(progress, fmt(data.monthlyTarget, data.currency))}
          </Typography>
        </Box>

        {/* Outstanding + overdue */}
        <Box className='flex gap-4'>
          <Box className='flex-1 p-3 rounded-lg' sx={{ bgcolor: 'warning.lighter' }}>
            <Typography variant='caption' color='warning.dark' className='font-medium'>
              {t.dashboard.outstanding}
            </Typography>
            <Typography variant='h6' color='warning.main' className='font-semibold'>
              {fmt(data.outstanding, data.currency)}
            </Typography>
          </Box>
          <Box className='flex-1 p-3 rounded-lg' sx={{ bgcolor: 'error.lighter' }}>
            <Typography variant='caption' color='error.dark' className='font-medium'>
              {t.dashboard.overdueLabel}
            </Typography>
            <Typography variant='h6' color='error.main' className='font-semibold'>
              {fmt(data.overdue, data.currency)}
            </Typography>
          </Box>
        </Box>

        <Divider />

        {/* Retainer alerts */}
        <Box>
          <Typography variant='overline' color='text.secondary' className='tracking-wider'>
            {t.dashboard.lowRetainers}
          </Typography>
          <Box className='flex flex-col gap-2 mt-2'>
            {data.retainerAlerts.length === 0 ? (
              <Typography variant='caption' color='text.secondary'>
                {t.dashboard.allRetainersOk}
              </Typography>
            ) : (
              data.retainerAlerts.map((r, i) => (
                <Box key={i} className='flex items-center justify-between gap-2'>
                  <Typography variant='body2' noWrap className='flex-1'>
                    {r.client}
                  </Typography>
                  <Chip
                    label={fmt(r.balance, r.currency)}
                    size='small'
                    color='warning'
                    variant='outlined'
                    sx={{ fontSize: '0.7rem' }}
                  />
                  <Button size='small' variant='outlined' color='warning' sx={{ minWidth: 'auto', px: 1, fontSize: '0.65rem' }}>
                    {t.common.request}
                  </Button>
                </Box>
              ))
            )}
          </Box>
        </Box>
      </CardContent>
    </Card>
  )
}

export default BillingSnapshotCard
