import React, { useState } from 'react'
import {
  Drawer,
  Typography,
  Box,
  IconButton,
  Button,
  TextField,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Checkbox,
  Paper,
  MenuItem,
  Select,
  FormControl
} from '@mui/material'
import Grid from '@mui/material/Grid2'

interface Props {
  open: boolean
  handleClose: () => void
}

const CashBankDetailTransactionReconciliationDrawer: React.FC<Props> = ({ open, handleClose }) => {
  const [tanggalDari, setTanggalDari] = useState('10/09/2025')
  const [tanggalSampai, setTanggalSampai] = useState('10/09/2025')
  const [totalDari, setTotalDari] = useState('220.890')
  const [totalSampai, setTotalSampai] = useState('220.890')
  const [cari, setCari] = useState('')

  const transactionData = {
    detil: '10/09/2025',
    kirim: 'Terima pembayaran tagihan: POS Customer INV/01/59A/4CY/00003',
    terima: '220.890'
  }

  return (
    <Drawer
      open={open}
      anchor='right'
      variant='temporary'
      onClose={handleClose}
      ModalProps={{ keepMounted: true }}
      sx={{
        '& .MuiDrawer-paper': {
          width: { xs: '90%', sm: '80%', md: '80%', lg: '80%' },
          display: 'flex',
          flexDirection: 'column',
          height: '100%'
        }
      }}
    >
      {/* Header */}
      <Box
        sx={{
          position: 'sticky',
          top: 0,
          zIndex: 10,
          backgroundColor: 'background.paper',
          borderBottom: 1,
          borderColor: 'divider',
          p: 3
        }}
      >
        <div className='flex items-center justify-between'>
          <Typography variant='h5' sx={{ fontWeight: 'bold' }}>
            Rekonsiliasi
          </Typography>
          <IconButton size='small' onClick={handleClose}>
            <i className='tabler-x text-2xl' />
          </IconButton>
        </div>
      </Box>

      {/* Content */}
      <Box sx={{ flex: 1, overflowY: 'auto', p: 3 }}>
        <Grid container spacing={2}>
          <Grid size={6}>
            {/* Mutasi Bank Section */}
            <Box sx={{ mb: 4 }}>
              <Typography variant='h6' sx={{ fontWeight: 'bold', mb: 1 }}>
                Mutasi Bank
              </Typography>
              <Typography variant='body2' color='text.secondary' sx={{ mb: 3 }}>
                Cari mutasi bank yang sesuai dengan transaksi di Kledo
              </Typography>

              {/* Filter Section */}
              <Grid container spacing={3} sx={{ mb: 3 }}>
                {/* Tanggal */}
                <Grid size={12}>
                  <Typography variant='body2' sx={{ mb: 1, fontWeight: 'medium' }}>
                    Tanggal
                  </Typography>
                  <div className='flex items-center gap-3'>
                    <TextField
                      size='small'
                      value={tanggalDari}
                      onChange={e => setTanggalDari(e.target.value)}
                      sx={{ width: '150px' }}
                    />
                    <Typography variant='body2'>s/d</Typography>
                    <TextField
                      size='small'
                      value={tanggalSampai}
                      onChange={e => setTanggalSampai(e.target.value)}
                      sx={{ width: '150px' }}
                    />
                  </div>
                </Grid>

                {/* Total */}
                <Grid size={12}>
                  <Typography variant='body2' sx={{ mb: 1, fontWeight: 'medium' }}>
                    Total
                  </Typography>
                  <div className='flex items-center gap-3'>
                    <TextField
                      size='small'
                      value={totalDari}
                      onChange={e => setTotalDari(e.target.value)}
                      sx={{ width: '150px' }}
                    />
                    <Typography variant='body2'>s/d</Typography>
                    <TextField
                      size='small'
                      value={totalSampai}
                      onChange={e => setTotalSampai(e.target.value)}
                      sx={{ width: '150px' }}
                    />
                  </div>
                </Grid>

                {/* Cari */}
                <Grid size={12}>
                  <Typography variant='body2' sx={{ mb: 1, fontWeight: 'medium' }}>
                    Cari
                  </Typography>
                  <div className='flex items-center gap-3'>
                    <TextField
                      size='small'
                      placeholder='Cari'
                      value={cari}
                      onChange={e => setCari(e.target.value)}
                      sx={{ width: '300px' }}
                    />
                    <Button variant='contained' size='small'>
                      Go
                    </Button>
                  </div>
                </Grid>
              </Grid>

              {/* Table */}
              <TableContainer component={Paper} sx={{ mb: 3 }}>
                <Table size='small'>
                  <TableHead>
                    <TableRow sx={{ backgroundColor: 'grey.50' }}>
                      <TableCell padding='checkbox'>
                        <Checkbox />
                      </TableCell>
                      <TableCell>Detil</TableCell>
                      <TableCell>Kirim</TableCell>
                      <TableCell>Terima</TableCell>
                    </TableRow>
                  </TableHead>
                  <TableBody>
                    <TableRow>
                      <TableCell colSpan={4} sx={{ textAlign: 'center', py: 4 }}>
                        <div className='flex flex-col items-center gap-2'>
                          <i className='tabler-folder-open text-gray-400 text-4xl' />
                          <Typography variant='body2' color='text.secondary'>
                            Tidak ada data
                          </Typography>
                        </div>
                      </TableCell>
                    </TableRow>
                  </TableBody>
                </Table>
              </TableContainer>

              {/* Information Text */}
              <Typography variant='body2' color='text.secondary' sx={{ mb: 2 }}>
                Transaksi yang sudah dipilih, tambah transaksi baru sesuai kebutuhan.
              </Typography>

              {/* Table */}
              <TableContainer component={Paper} sx={{ mb: 3 }}>
                <Table size='small'>
                  <TableHead>
                    <TableRow sx={{ backgroundColor: 'grey.50' }}>
                      <TableCell padding='checkbox'>
                        <Checkbox />
                      </TableCell>
                      <TableCell>Detil</TableCell>
                      <TableCell>Kirim</TableCell>
                      <TableCell>Terima</TableCell>
                    </TableRow>
                  </TableHead>
                  <TableBody>
                    <TableRow>
                      <TableCell colSpan={4} sx={{ textAlign: 'center', py: 4 }}>
                        <div className='flex flex-col items-center gap-2'>
                          <i className='tabler-folder-open text-gray-400 text-4xl' />
                          <Typography variant='body2' color='text.secondary'>
                            Tidak ada data
                          </Typography>
                        </div>
                      </TableCell>
                    </TableRow>
                  </TableBody>
                </Table>
              </TableContainer>
            </Box>

            {/* Summary Section */}
            <Box sx={{ mb: 4 }}>
              <Typography variant='body2' sx={{ mb: 3, fontWeight: 'medium' }}>
                Total transaksi di Kledo harus sama dengan total mutasi
              </Typography>

              <Grid container spacing={3} sx={{ mb: 3 }}>
                <Grid size={6}>
                  <Typography variant='body2' color='text.secondary'>
                    Total transaksi di Kledo
                  </Typography>
                </Grid>
                <Grid size={6}>
                  <Typography variant='body2' sx={{ textAlign: 'right' }}>
                    220.890
                  </Typography>
                </Grid>
              </Grid>

              <Grid container spacing={3} sx={{ mb: 3 }}>
                <Grid size={6}>
                  <Typography variant='body2' color='text.secondary'>
                    Total mutasi
                  </Typography>
                </Grid>
                <Grid size={6}>
                  <Typography variant='body2' sx={{ textAlign: 'right' }}>
                    0
                  </Typography>
                </Grid>
              </Grid>

              <Grid container spacing={3}>
                <Grid size={6}>
                  <Typography variant='body2' sx={{ fontWeight: 'bold' }}>
                    Selisih
                  </Typography>
                </Grid>
                <Grid size={6}>
                  <Typography variant='body2' sx={{ textAlign: 'right', fontWeight: 'bold' }}>
                    220.890
                  </Typography>
                </Grid>
              </Grid>
            </Box>
          </Grid>
          <Grid size={6}>
            {/* Transaction Summary */}
            <Box
              sx={{
                backgroundColor: 'grey.50',
                p: 3,
                borderRadius: 1,
                border: '1px solid',
                borderColor: 'grey.200'
              }}
            >
              <Grid container spacing={3}>
                <Grid size={4}>
                  <Typography variant='body2' sx={{ fontWeight: 'bold', mb: 1 }}>
                    Detil
                  </Typography>
                  <Typography variant='body2'>{transactionData.detil}</Typography>
                </Grid>
                <Grid size={4}>
                  <Typography variant='body2' sx={{ fontWeight: 'bold', mb: 1 }}>
                    Kirim
                  </Typography>
                  <Typography variant='body2' color='primary' sx={{ cursor: 'pointer' }}>
                    {transactionData.kirim}
                  </Typography>
                </Grid>
                <Grid size={4}>
                  <Typography variant='body2' sx={{ fontWeight: 'bold', mb: 1 }}>
                    Terima
                  </Typography>
                  <Typography variant='body2' color='primary' sx={{ fontWeight: 'bold' }}>
                    {transactionData.terima}
                  </Typography>
                </Grid>
              </Grid>

              <Box sx={{ mt: 3, pt: 2, borderTop: '1px solid', borderColor: 'grey.300' }}>
                <Box sx={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
                  <Typography variant='h6' sx={{ fontWeight: 'bold', mr: 2 }}>
                    Total
                  </Typography>
                  <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
                    220.890
                  </Typography>
                </Box>
              </Box>
            </Box>
          </Grid>
        </Grid>
      </Box>

      {/* Footer Buttons */}
      <Box
        sx={{
          position: 'sticky',
          bottom: 0,
          zIndex: 10,
          backgroundColor: 'background.paper',
          borderTop: 1,
          borderColor: 'divider',
          p: 3
        }}
      >
        <div className='flex items-center justify-end gap-3'>
          <Button variant='outlined' color='error' onClick={handleClose}>
            Batal
          </Button>
          <Button variant='outlined' disabled>
            Rekonsiliasi
          </Button>
        </div>
      </Box>
    </Drawer>
  )
}

export default CashBankDetailTransactionReconciliationDrawer