'use client'

import React from 'react'
import { Button, Accordion, AccordionSummary, AccordionDetails, Typography, Box } from '@mui/material'
import Grid from '@mui/material/Grid2'
import { ExpenseFormData } from '@/types/apps/expenseTypes'
import CustomTextField from '@core/components/mui/TextField'
import ImageUpload from '@/components/ImageUpload'

interface ExpenseAddSummaryProps {
  formData: ExpenseFormData
  onInputChange: (field: keyof ExpenseFormData, value: any) => void
  formatCurrency: (amount: number) => string
}

const ExpenseAddSummary: React.FC<ExpenseAddSummaryProps> = ({ formData, onInputChange, formatCurrency }) => {
  const handleUpload = async (file: File): Promise<string> => {
    // Simulate upload
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(URL.createObjectURL(file))
      }, 1000)
    })
  }

  return (
    <Grid size={12} sx={{ mt: 4 }}>
      <Grid container spacing={3}>
        {/* Left Side - Pesan and Attachment */}
        <Grid size={{ xs: 12, md: 7 }}>
          {/* Pesan Section */}
          <Box sx={{ mb: 3 }}>
            <Button
              variant='text'
              color='inherit'
              onClick={() => onInputChange('showMessage', !formData.showMessage)}
              sx={{
                textTransform: 'none',
                fontSize: '14px',
                fontWeight: 500,
                padding: '12px 16px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'flex-start',
                width: '100%',
                backgroundColor: '#f5f5f5',
                border: '1px solid #e0e0e0',
                borderRadius: '4px',
                color: 'text.primary',
                '&:hover': {
                  backgroundColor: '#eeeeee'
                }
              }}
            >
              <Box component='span' sx={{ mr: 1 }}>
                {formData.showMessage ? (
                  <i className='tabler-chevron-down w-4 h-4' />
                ) : (
                  <i className='tabler-chevron-right w-4 h-4' />
                )}
              </Box>
              Pesan
            </Button>
            {formData.showMessage && (
              <Box sx={{ mt: 2 }}>
                <CustomTextField
                  fullWidth
                  multiline
                  rows={3}
                  placeholder='Tambahkan pesan...'
                  value={formData.message || ''}
                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => onInputChange('message', e.target.value)}
                />
              </Box>
            )}
          </Box>

          {/* Attachment Section */}
          <Box>
            <Button
              variant='text'
              color='inherit'
              onClick={() => onInputChange('showAttachment', !formData.showAttachment)}
              sx={{
                textTransform: 'none',
                fontSize: '14px',
                fontWeight: 500,
                padding: '12px 16px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'flex-start',
                width: '100%',
                backgroundColor: '#f5f5f5',
                border: '1px solid #e0e0e0',
                borderRadius: '4px',
                color: 'text.primary',
                '&:hover': {
                  backgroundColor: '#eeeeee'
                }
              }}
            >
              <Box component='span' sx={{ mr: 1 }}>
                {formData.showAttachment ? (
                  <i className='tabler-chevron-down w-4 h-4' />
                ) : (
                  <i className='tabler-chevron-right w-4 h-4' />
                )}
              </Box>
              Attachment
            </Button>
            {formData.showAttachment && (
              <ImageUpload
                onUpload={handleUpload}
                maxFileSize={1 * 1024 * 1024} // 1MB
                showUrlOption={false}
                dragDropText='Drop your image here'
                browseButtonText='Choose Image'
              />
            )}
          </Box>
        </Grid>

        {/* Right Side - Totals */}
        <Grid size={{ xs: 12, md: 5 }}>
          <Box sx={{ backgroundColor: '#ffffff', p: 3, borderRadius: '8px' }}>
            {/* Sub Total */}
            <Box
              sx={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                py: 2,
                borderBottom: '1px solid #e0e0e0',
                '&:hover': {
                  backgroundColor: '#f8f8f8'
                }
              }}
            >
              <Typography variant='body1' color='text.secondary' sx={{ fontSize: '16px' }}>
                Sub Total
              </Typography>
              <Typography variant='body1' fontWeight={600} sx={{ fontSize: '16px', textAlign: 'right' }}>
                {new Intl.NumberFormat('id-ID', {
                  style: 'currency',
                  currency: 'IDR',
                  minimumFractionDigits: 0
                }).format(formData.subtotal || 0)}
              </Typography>
            </Box>

            {/* Additional Options */}

            {/* Total */}
            <Box
              sx={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                py: 2,
                borderBottom: '1px solid #e0e0e0',
                '&:hover': {
                  backgroundColor: '#f8f8f8'
                }
              }}
            >
              <Typography variant='h6' fontWeight={600} sx={{ fontSize: '18px' }}>
                Total
              </Typography>
              <Typography variant='h6' fontWeight={600} sx={{ fontSize: '18px', textAlign: 'right' }}>
                RP. 120.000
              </Typography>
            </Box>

            {/* Save Button */}
            <Button
              variant='contained'
              color='primary'
              fullWidth
              sx={{
                textTransform: 'none',
                fontWeight: 600,
                py: 1.5,
                boxShadow: 'none',
                '&:hover': {
                  boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
                }
              }}
            >
              Simpan
            </Button>
          </Box>
        </Grid>
      </Grid>
    </Grid>
  )
}

export default ExpenseAddSummary
