'use client'

import React from 'react'
import { Switch, FormControlLabel, Box } from '@mui/material'
import Grid from '@mui/material/Grid2'
import { ExpenseFormData, ExpenseAccount, ExpenseRecipient, ExpenseTag } from '@/types/apps/expenseTypes'
import CustomTextField from '@core/components/mui/TextField'
import CustomAutocomplete from '@core/components/mui/Autocomplete'

interface ExpenseAddBasicInfoProps {
  formData: ExpenseFormData
  mockAccounts: ExpenseAccount[]
  mockRecipients: ExpenseRecipient[]
  mockTags: ExpenseTag[]
  onInputChange: (field: keyof ExpenseFormData, value: any) => void
}

const ExpenseAddBasicInfo: React.FC<ExpenseAddBasicInfoProps> = ({
  formData,
  mockAccounts,
  mockRecipients,
  mockTags,
  onInputChange
}) => {
  return (
    <>
      {/* Row 1: Dibayar Dari (6) + Bayar Nanti (6) */}
      <Grid size={{ xs: 12, md: 6 }}>
        <CustomAutocomplete
          size='small'
          options={mockAccounts}
          getOptionLabel={option => `${option.code} ${option.name}`}
          value={mockAccounts.find(acc => `${acc.code} ${acc.name}` === formData.paidFrom) || null}
          onChange={(_, value) => onInputChange('paidFrom', value ? `${value.code} ${value.name}` : '')}
          renderInput={params => <CustomTextField {...params} label='Dibayar Dari' required />}
        />
      </Grid>
      <Grid size={{ xs: 12, md: 6 }}>
        <Box
          sx={{
            display: 'flex',
            justifyContent: { xs: 'flex-start', md: 'flex-end' },
            alignItems: 'end',
            height: '100%'
          }}
        >
          <FormControlLabel
            control={
              <Switch
                checked={formData.payLater}
                onChange={e => onInputChange('payLater', e.target.checked)}
                size='small'
              />
            }
            label='Bayar Nanti'
          />
        </Box>
      </Grid>

      {/* Row 2: Penerima (6) */}
      <Grid size={{ xs: 12, md: 6 }}>
        <CustomAutocomplete
          size='small'
          options={mockRecipients}
          getOptionLabel={option => option.name}
          value={formData.recipient}
          onChange={(_, value) => onInputChange('recipient', value)}
          renderInput={params => <CustomTextField {...params} label='Penerima' required placeholder='Pilih penerima' />}
        />
      </Grid>

      {/* Row 3: Tgl. Transaksi (6) */}
      <Grid size={{ xs: 12, md: 6 }}>
        <CustomTextField
          fullWidth
          size='small'
          type='date'
          label='Tgl. Transaksi'
          required
          value={formData.transactionDate.split('/').reverse().join('-')}
          onChange={e => {
            const date = new Date(e.target.value)
            const formattedDate = `${date.getDate().toString().padStart(2, '0')}/${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getFullYear()}`
            onInputChange('transactionDate', formattedDate)
          }}
          slotProps={{
            input: {
              endAdornment: <i className='tabler-calendar' style={{ fontSize: 20 }} />
            }
          }}
        />
      </Grid>

      {/* Row 4: Nomor, Referensi, Tag */}
      <Grid size={{ xs: 12 }}>
        <Grid container spacing={2}>
          <Grid size={{ xs: 12, md: 4 }}>
            <CustomTextField
              fullWidth
              size='small'
              label={
                <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
                  Nomor
                  <i className='tabler-help' style={{ fontSize: 16 }} />
                </Box>
              }
              value={formData.number}
              onChange={e => onInputChange('number', e.target.value)}
            />
          </Grid>
          <Grid size={{ xs: 12, md: 4 }}>
            <CustomTextField
              fullWidth
              size='small'
              label={
                <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
                  Referensi
                  <i className='tabler-help' style={{ fontSize: 16 }} />
                </Box>
              }
              placeholder='Referensi'
              value={formData.reference}
              onChange={e => onInputChange('reference', e.target.value)}
            />
          </Grid>
          <Grid size={{ xs: 12, md: 4 }}>
            <CustomTextField
              fullWidth
              size='small'
              label={
                <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
                  Tag
                  <i className='tabler-help' style={{ fontSize: 16 }} />
                </Box>
              }
              placeholder='Pilih Tag'
              value={formData.tag?.name || ''}
              onChange={e => {
                const tag = mockTags.find(t => t.name === e.target.value)
                onInputChange('tag', tag || null)
              }}
            />
          </Grid>
        </Grid>
      </Grid>

      {/* Row 5: Harga termasuk pajak */}
      <Grid size={{ xs: 12 }}>
        <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
          <FormControlLabel
            control={
              <Switch
                checked={formData.includeTax}
                onChange={e => onInputChange('includeTax', e.target.checked)}
                size='small'
              />
            }
            label='Harga termasuk pajak'
          />
        </Box>
      </Grid>
    </>
  )
}

export default ExpenseAddBasicInfo
