import {
  Box,
  Divider,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
  Typography,
} from '@mui/material'
import { StyledCardBorder } from './styles'

function FeeCard({ data, feeDetails }) {
  const studentFirstPart = [
    { label: 'Roll.No', value: data?.admission?.rollNo ?? '-' },
    { label: 'Branch', value: data?.admission?.branchCode ?? '-' },
    { label: 'Seat', value: data?.admission?.quota?.name ?? '-' },
    { label: 'Student Mobile', value: data?.admission?.mobile ?? '-' },
  ]

  const studentSecondPart = [
    { label: 'Name', value: data?.admission?.fullName ?? '-' },
    {
      label: 'Semester',
      value: data?.admission?.detained
        ? 'Detained'
        : data?.admission?.discontinued
        ? 'Discontinued'
        : data?.admission?.semNo ?? '-',
    },
    {
      label: 'ScholarShip',
      value: data?.admission?.hasScholarship ? 'Yes' : 'No',
    },
    { label: 'Parent Mobile', value: data?.admission?.parentMobile ?? '-' },
  ]

  const totalLateFinesPaid = feeDetails?.map((row) => {
    const latefines = row[1]?.map((latefee) => {
      const fines = latefee?.debits?.reduce((acc, curr) => {
        if (curr.isFine && curr.debit > 0) {
          return acc + curr.debit
        }
        return acc
      }, 0)
      return fines
    })
    return latefines
  })

  const lateFines = feeDetails?.map((row) => {
    const latefine = row[1]?.map((latefee) => {
      const fines = latefee?.credits?.reduce((acc, curr) => {
        if (curr.isFine && curr.credit > 0) {
          return acc + curr.credit
        }
        return acc
      }, 0)
      return fines
    })
    return latefine
  })

  function amountDue(row: any) {
    const debitTotal = row?.debits?.reduce((acc, curr) => {
      if (!curr.isFine) {
        acc += curr.debit
      }
      return acc
    }, 0)

    const creditTotal = row?.credits?.reduce((acc, curr) => {
      if (!curr.isFine) {
        acc += curr.credit
      }
      return acc
    }, 0)

    const difference = Math.abs(creditTotal - debitTotal)
    return difference
  }
  return (
    <StyledCardBorder>
      <Box
        className='school-details'
        sx={{
          display: 'flex',
          flexDirection: 'column',
          padding: '20px',
          alignItems: 'center',
          gap: '10px',
        }}
      >
        <Box>
          <img
            src={data?.institution?.images?.url}
            alt='school-logo'
            width={'200px'}
          />
        </Box>

        <Typography variant='h6' sx={{ fontSize: '22px' }}>
          {data?.institution?.name}
        </Typography>
        <Typography variant='h6' textAlign={'center'} sx={{ fontSize: '16px' }}>
          {data?.institution?.recognitionDetails}
        </Typography>
        <Typography variant='h6' textAlign={'center'} sx={{ fontSize: '16px' }}>
          {data?.institution?.address}
        </Typography>
      </Box>
      <Divider />
      <Typography
        variant='h6'
        textAlign={'center'}
        sx={{ margin: '10px', fontSize: '22px' }}
      >
        STUDENT FEE CARD
      </Typography>
      <Divider />
      <Box
        className='student-details'
        sx={{
          display: 'flex',
          padding: '10px',
          gap: '30px',
          justifyContent: 'space-around',
        }}
      >
        <Box sx={{ display: 'flex', gap: '22px' }}>
          <Box>
            {studentFirstPart?.map((item, index) => (
              <Box key={index} sx={{ mt: '10px' }}>
                <Typography variant='h6'>{item.label}</Typography>
              </Box>
            ))}
          </Box>
          <Box>
            {studentFirstPart?.map((item, index) => (
              <Box key={index} sx={{ mt: '10px' }}>
                <Typography variant='subtitle1'>{item.value}</Typography>
              </Box>
            ))}
          </Box>
        </Box>

        <Box sx={{ display: 'flex', gap: '12px' }}>
          <Box>
            {studentSecondPart?.map((item, index) => (
              <Box key={index} sx={{ mt: '10px' }}>
                <Typography variant='h6'>{item.label}</Typography>
              </Box>
            ))}
          </Box>
          <Box>
            {studentSecondPart?.map((item, index) => (
              <Box key={index} sx={{ mt: '10px' }}>
                <Typography variant='subtitle1'>{item.value}</Typography>
              </Box>
            ))}
          </Box>
        </Box>

        <img
          src={data?.admission?.photo}
          alt='student-photo'
          width={'150px'}
          height={'120px'}
        />
      </Box>

      <Divider />

      <Box>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell>SI.No</TableCell>
              <TableCell>Fee</TableCell>
              <TableCell>Payable</TableCell>
              <TableCell>Paid</TableCell>
              <TableCell>Rec.No(s)</TableCell>
              <TableCell>Rec.Date(s)</TableCell>
              <TableCell>Bank Details</TableCell>
              <TableCell>Due</TableCell>
              <TableCell>Excess paid</TableCell>
            </TableRow>
          </TableHead>

          {feeDetails?.map((fee, index) => (
            <>
              <TableRow>
                <TableCell colSpan={9}>{fee[0]} Year</TableCell>
              </TableRow>
              <>
                {fee[1]?.map((item, i) => (
                  <TableBody key={i}>
                    <TableCell>{i + 1}</TableCell>
                    <TableCell>{item.feeName}</TableCell>
                    <TableCell>
                      {item?.credits?.reduce((acc, curr) => {
                        if (!curr.isFine) {
                          acc = acc + curr.credit
                        }
                        return acc
                      }, 0)}
                    </TableCell>
                    <TableCell>
                      {item?.debits?.reduce((acc, curr) => {
                        if (!curr.isFine) {
                          acc = acc + curr.debit
                        }
                        return acc
                      }, 0)}
                    </TableCell>
                    <TableCell>{item?.receipts.join(', ')}</TableCell>
                    <TableCell>{item?.receiptDates?.join(', ')}</TableCell>
                    <TableCell>{item.bankDetails?.join(' ')}</TableCell>
                    <TableCell>
                      {amountDue(item)}
                      {lateFines[index][i] > 0 &&
                        totalLateFinesPaid[index][i] == 0 && (
                          <Typography variant='caption' color={'red'}>
                            {'(+' +
                              `${
                                lateFines[index][i] -
                                totalLateFinesPaid[index][i]
                              }` +
                              ' Late fee)'}
                          </Typography>
                        )}
                    </TableCell>
                    <TableCell>
                      {item?.debits?.reduce((acc, curr) => {
                        if (curr.isFine) {
                          acc = acc + curr.debit
                        }
                        return acc
                      }, 0)}
                    </TableCell>
                  </TableBody>
                ))}
              </>
              <TableHead>
                <TableRow>
                  <TableCell colSpan={2}>
                    <Typography variant='h6'>{fee[0]} year total</Typography>
                  </TableCell>
                  <TableCell>
                    <Typography variant='h6'>
                      {data?.totalFeesByYear[index]?.amount}
                    </Typography>
                  </TableCell>
                  <TableCell colSpan={4}>
                    <Typography variant='h6'>
                      {data?.totalFeesPaidByYear[index]?.amount}{' '}
                    </Typography>
                  </TableCell>
                  <TableCell>
                    <Typography variant='h6'>
                      {data?.totalFeesDueByYear[index]?.amount}
                    </Typography>
                  </TableCell>
                  <TableCell>
                    <Typography variant='h6'>
                      {data?.totalFeesExcessiveByYear[index]?.amount}
                    </Typography>
                  </TableCell>
                </TableRow>
              </TableHead>
            </>
          ))}

          <TableHead>
            <TableRow>
              <TableCell colSpan={2}>
                <Typography variant='h6'>Grand total</Typography>
              </TableCell>
              <TableCell>
                <Typography variant='h6'>{data?.grandFeeTotal}</Typography>
              </TableCell>
              <TableCell colSpan={4}>
                <Typography variant='h6'>{data?.grandFeePaidTotal} </Typography>
              </TableCell>
              <TableCell>
                <Typography variant='h6'>{data?.grandFeeDueTotal}</Typography>
              </TableCell>
              <TableCell>
                <Typography variant='h6'>
                  {data?.grandFeeExcessiveTotal}
                </Typography>
              </TableCell>
            </TableRow>
          </TableHead>
        </Table>
      </Box>
    </StyledCardBorder>
  )
}

export default FeeCard
