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

interface Product {
  produk: string
  deskripsi: string
  kuantitas: number
  satuan: string
  discount: string
  harga: number
  pajak: string
  jumlah: number
}

interface PurchaseData {
  vendor: string
  nomor: string
  tglTransaksi: string
  tglJatuhTempo: string
  gudang: string
  status: string
}

const ExpenseDetailInformation: React.FC = () => {
  const purchaseData: PurchaseData = {
    vendor: 'Bagas Rizki Sihotang S.Farm Widodo',
    nomor: 'PI/00053',
    tglTransaksi: '08/09/2025',
    tglJatuhTempo: '06/10/2025',
    gudang: 'Unassigned',
    status: 'Belum Dibayar'
  }

  const products: Product[] = [
    {
      produk: 'Komisi penjualan tim IT',
      deskripsi: '6-60002 - Komisi & Fee (PPN)',
      kuantitas: 1,
      satuan: 'Pcs',
      discount: '0%',
      harga: 810000,
      pajak: 'PPN',
      jumlah: 810000
    },
    {
      produk: 'Hotel Ibis 3 Malam, Surabaya',
      deskripsi: '6-60004 - Perjalanan Dinas - Penjualan (PPN)',
      kuantitas: 1,
      satuan: 'Pcs',
      discount: '0%',
      harga: 400000,
      pajak: 'PPN',
      jumlah: 400000
    },
    {
      produk: 'Biaya telp fixed',
      deskripsi: '6-60005 - Komunikasi - Penjualan',
      kuantitas: 1,
      satuan: 'Pcs',
      discount: '0%',
      harga: 950000,
      pajak: 'PPN',
      jumlah: 950000
    }
  ]

  const subTotal: number = products.reduce((sum, product) => sum + product.jumlah, 0)
  const ppn: number = Math.round(subTotal * 0.11)
  const total: number = subTotal + ppn
  const sisaTagihan: number = total

  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' }}>
              Belum Dibayar
            </Typography>
            <Box>
              <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>
              <IconButton>
                <i className='tabler-dots-vertical' />
              </IconButton>
            </Box>
          </Box>
        }
      />

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

            <Box sx={{ mb: 2 }}>
              <Typography variant='subtitle2' color='text.secondary'>
                Tgl. Transaksi
              </Typography>
              <Typography variant='body1'>{purchaseData.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'>{purchaseData.nomor}</Typography>
            </Box>

            <Box>
              <Typography variant='subtitle2' color='text.secondary'>
                Tgl. Jatuh Tempo
              </Typography>
              <Typography variant='body1'>{purchaseData.tglJatuhTempo}</Typography>
            </Box>
          </Grid>
        </Grid>

        {/* Products List */}
        <Box sx={{ mb: 4 }}>
          {products.map((product, index) => (
            <Box
              key={index}
              sx={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'flex-start',
                py: 2,
                borderBottom: index === products.length - 1 ? 'none' : '1px solid #f0f0f0'
              }}
            >
              <Box sx={{ flex: 1 }}>
                <Typography variant='body1' sx={{ fontWeight: 'medium', mb: 0.5 }}>
                  {product.produk}
                </Typography>
                <Typography variant='body2' color='primary' sx={{ cursor: 'pointer' }}>
                  {product.deskripsi}
                </Typography>
              </Box>
              <Box sx={{ textAlign: 'right', ml: 3 }}>
                <Typography variant='body1' sx={{ fontWeight: 'medium' }}>
                  {formatCurrency(product.jumlah)}
                </Typography>
              </Box>
            </Box>
          ))}
        </Box>

        {/* Summary Section */}
        <Box sx={{ mt: 3 }}>
          <Grid container spacing={2}>
            <Grid size={{ xs: 12, md: 6 }}>{/* Empty space for left side */}</Grid>
            <Grid size={{ xs: 12, md: 6 }}>
              <Box sx={{ display: 'flex', flexDirection: 'column' }}>
                <Box
                  sx={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    py: 2,
                    borderBottom: '1px solid #e0e0e0',
                    '&:hover': {
                      backgroundColor: 'rgba(0, 0, 0, 0.04)',
                      transition: 'background-color 0.15s ease'
                    }
                  }}
                >
                  <Typography variant='body1' sx={{ fontWeight: 'medium' }}>
                    Sub Total
                  </Typography>
                  <Typography variant='body1' sx={{ fontWeight: 'medium' }}>
                    {formatCurrency(subTotal)}
                  </Typography>
                </Box>

                <Box
                  sx={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    py: 2,
                    borderBottom: '1px solid #e0e0e0',
                    '&:hover': {
                      backgroundColor: 'rgba(0, 0, 0, 0.04)',
                      transition: 'background-color 0.15s ease'
                    }
                  }}
                >
                  <Typography variant='body1' sx={{ fontWeight: 'medium' }}>
                    PPN
                  </Typography>
                  <Typography variant='body1' sx={{ fontWeight: 'medium' }}>
                    {formatCurrency(ppn)}
                  </Typography>
                </Box>

                <Box
                  sx={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    py: 2,
                    borderBottom: '1px solid #e0e0e0',
                    '&:hover': {
                      backgroundColor: 'rgba(0, 0, 0, 0.04)',
                      transition: 'background-color 0.15s ease'
                    }
                  }}
                >
                  <Typography variant='body1' sx={{ fontWeight: 'bold' }}>
                    Total
                  </Typography>
                  <Typography variant='body1' sx={{ fontWeight: 'bold' }}>
                    {formatCurrency(total)}
                  </Typography>
                </Box>

                <Box
                  sx={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    py: 2,
                    '&:hover': {
                      backgroundColor: 'rgba(0, 0, 0, 0.04)',
                      transition: 'background-color 0.15s ease'
                    }
                  }}
                >
                  <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
                    Sisa Tagihan
                  </Typography>
                  <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
                    {formatCurrency(sisaTagihan)}
                  </Typography>
                </Box>
              </Box>
            </Grid>
          </Grid>
        </Box>
      </CardContent>
    </Card>
  )
}

export default ExpenseDetailInformation
