'use client'

import React from 'react'
import {
  Button,
  IconButton,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
  MenuItem
} from '@mui/material'
import Grid from '@mui/material/Grid2'
import { ExpenseFormData, ExpenseItem, ExpenseAccount, ExpenseTax } from '@/types/apps/expenseTypes'
import CustomTextField from '@core/components/mui/TextField'
import CustomAutocomplete from '@core/components/mui/Autocomplete'

interface ExpenseAddAccountProps {
  formData: ExpenseFormData
  mockAccounts: ExpenseAccount[]
  mockTaxes: ExpenseTax[]
  onExpenseItemChange: (index: number, field: keyof ExpenseItem, value: any) => void
  onAddExpenseItem: () => void
  onRemoveExpenseItem: (index: number) => void
}

const ExpenseAddAccount: React.FC<ExpenseAddAccountProps> = ({
  formData,
  mockAccounts,
  mockTaxes,
  onExpenseItemChange,
  onAddExpenseItem,
  onRemoveExpenseItem
}) => {
  return (
    <Grid size={{ xs: 12 }}>
      <TableContainer component={Paper} variant='outlined'>
        <Table>
          <TableHead>
            <TableRow sx={{ backgroundColor: 'grey.50' }}>
              <TableCell sx={{ fontWeight: 'bold' }}>Akun Biaya</TableCell>
              <TableCell sx={{ fontWeight: 'bold' }}>Deskripsi</TableCell>
              <TableCell sx={{ fontWeight: 'bold' }}>Pajak</TableCell>
              <TableCell sx={{ fontWeight: 'bold', textAlign: 'right' }}>Total</TableCell>
              <TableCell sx={{ width: 50 }}></TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {formData.expenseItems.map((item, index) => (
              <TableRow key={item.id}>
                <TableCell sx={{ width: '25%' }}>
                  <CustomAutocomplete
                    size='small'
                    options={mockAccounts}
                    getOptionLabel={option => `${option.code} ${option.name}`}
                    value={item.account}
                    onChange={(_, value) => onExpenseItemChange(index, 'account', value)}
                    renderInput={params => <CustomTextField {...params} placeholder='Pilih akun' />}
                  />
                </TableCell>
                <TableCell sx={{ width: '30%' }}>
                  <CustomTextField
                    fullWidth
                    size='small'
                    value={item.description}
                    onChange={e => onExpenseItemChange(index, 'description', e.target.value)}
                  />
                </TableCell>
                <TableCell sx={{ width: '20%' }}>
                  <CustomTextField
                    fullWidth
                    size='small'
                    select
                    value={item.tax?.id || ''}
                    onChange={e => {
                      const tax = mockTaxes.find(t => t.id === e.target.value)
                      onExpenseItemChange(index, 'tax', tax || null)
                    }}
                    SelectProps={{
                      displayEmpty: true
                    }}
                  >
                    <MenuItem value=''>...</MenuItem>
                    {mockTaxes.map(tax => (
                      <MenuItem key={tax.id} value={tax.id}>
                        {tax.name}
                      </MenuItem>
                    ))}
                  </CustomTextField>
                </TableCell>
                <TableCell sx={{ width: '20%' }}>
                  <CustomTextField
                    fullWidth
                    size='small'
                    type='number'
                    value={item.total}
                    onChange={e => onExpenseItemChange(index, 'total', parseFloat(e.target.value) || 0)}
                    sx={{
                      '& .MuiInputBase-input': {
                        textAlign: 'right'
                      }
                    }}
                  />
                </TableCell>
                <TableCell>
                  <IconButton
                    size='small'
                    color='error'
                    onClick={() => onRemoveExpenseItem(index)}
                    disabled={formData.expenseItems.length === 1}
                  >
                    <i className='tabler-trash' />
                  </IconButton>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>

      <Button
        startIcon={<i className='tabler-plus' />}
        onClick={onAddExpenseItem}
        variant='outlined'
        size='small'
        sx={{ mt: 1 }}
      >
        Tambah baris
      </Button>
    </Grid>
  )
}

export default ExpenseAddAccount
