'use client'

import React, { useState } from 'react'
import { Card, CardHeader, CardContent, Typography, Box, Button, IconButton } from '@mui/material'
import Grid from '@mui/material/Grid2'
import CashBankDetailTransactionReconciliationDrawer from './CashBankDetailTransactionReconsiled'

interface PaymentData {
  dari: string
  nomor: string
  tglTransaksi: string
  referensi: string
  status: string
}

interface TransactionItem {
  deskripsi: string
  total: number
}

const CashBankDetailTransactionInformation: React.FC = () => {
  const [open, setOpen] = useState(false)

  const paymentData: PaymentData = {
    dari: 'POS Customer',
    nomor: 'IP/00030',
    tglTransaksi: '10/09/2025',
    referensi: 'Pembayaran INV/01/59A/4CY/00003',
    status: 'Unreconciled'
  }

  const transactionItems: TransactionItem[] = [
    {
      deskripsi: 'Terima pembayaran tagihan INV/01/59A/4CY/00003',
      total: 220890
    }
  ]

  const totalAmount: number = transactionItems.reduce((sum, item) => sum + item.total, 0)

  const formatCurrency = (amount: number): string => {
    return new Intl.NumberFormat('id-ID').format(amount)
  }

  return (
    <>
      <Card sx={{ width: '100%' }}>
        <CardHeader
          title={
            <Box display='flex' justifyContent='space-between' alignItems='center'>
              <Typography variant='h5' color='error' sx={{ fontWeight: 'bold' }}>
                Unreconciled
              </Typography>
              <Box>
                <Button variant='outlined' size='small' sx={{ mr: 1 }} onClick={() => setOpen(true)}>
                  Rekonsiliasi
                </Button>
                <Button startIcon={<i className='tabler-share' />} variant='outlined' size='small' sx={{ mr: 1 }}>
                  Bagikan
                </Button>
                <Button startIcon={<i className='tabler-printer' />} variant='outlined' size='small' sx={{ mr: 1 }}>
                  Print
                </Button>
              </Box>
            </Box>
          }
        />

        <CardContent>
          {/* Payment Information */}
          <Grid container spacing={3} sx={{ mb: 4 }}>
            <Grid size={{ xs: 12, md: 6 }}>
              <Box sx={{ mb: 2 }}>
                <Typography variant='subtitle2' color='text.secondary'>
                  Dari
                </Typography>
                <Typography variant='body1' color='primary' sx={{ fontWeight: 'medium', cursor: 'pointer' }}>
                  {paymentData.dari}
                </Typography>
              </Box>

              <Box sx={{ mb: 2 }}>
                <Typography variant='subtitle2' color='text.secondary'>
                  Tanggal Transaksi
                </Typography>
                <Typography variant='body1'>{paymentData.tglTransaksi}</Typography>
              </Box>
            </Grid>

            <Grid size={{ xs: 12, md: 6 }}>
              <Box sx={{ mb: 2 }}>
                <Typography variant='subtitle2' color='text.secondary'>
                  Nomor
                </Typography>
                <Typography variant='body1'>{paymentData.nomor}</Typography>
              </Box>

              <Box>
                <Typography variant='subtitle2' color='text.secondary'>
                  Referensi
                </Typography>
                <Typography variant='body1'>{paymentData.referensi}</Typography>
              </Box>
            </Grid>
          </Grid>

          {/* Transaction Items Header */}
          <Box
            sx={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
              py: 2,
              borderBottom: '2px solid #e0e0e0',
              mb: 2
            }}
          >
            <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
              Deskripsi
            </Typography>
            <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
              Total
            </Typography>
          </Box>

          {/* Transaction Items */}
          <Box sx={{ mb: 4 }}>
            {transactionItems.map((item, index) => (
              <Box
                key={index}
                sx={{
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  py: 2,
                  borderBottom: index === transactionItems.length - 1 ? 'none' : '1px solid #f0f0f0'
                }}
              >
                <Box sx={{ flex: 1 }}>
                  <Typography variant='body1' color='primary' sx={{ cursor: 'pointer' }}>
                    {item.deskripsi}
                  </Typography>
                </Box>
                <Box sx={{ textAlign: 'right', ml: 3 }}>
                  <Typography variant='body1' sx={{ fontWeight: 'medium' }}>
                    {formatCurrency(item.total)}
                  </Typography>
                </Box>
              </Box>
            ))}
          </Box>

          {/* Total Section */}
          <Box sx={{ mt: 4, pt: 3, borderTop: '2px solid #e0e0e0' }}>
            <Box
              sx={{
                display: 'flex',
                justifyContent: 'flex-end',
                alignItems: 'center'
              }}
            >
              <Typography variant='h5' sx={{ fontWeight: 'bold', mr: 4 }}>
                Total
              </Typography>
              <Typography variant='h5' sx={{ fontWeight: 'bold' }}>
                {formatCurrency(totalAmount)}
              </Typography>
            </Box>
          </Box>
        </CardContent>
      </Card>
      <CashBankDetailTransactionReconciliationDrawer open={open} handleClose={() => setOpen(!open)} />
    </>
  )
}

export default CashBankDetailTransactionInformation