import React from 'react'
import {
  Card,
  CardHeader,
  CardContent,
  Typography,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  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 PurchaseDetailInformation: 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: 'CB1 - Chelsea Boots',
      deskripsi: 'Ukuran XS',
      kuantitas: 3,
      satuan: 'Pcs',
      discount: '0%',
      harga: 299000,
      pajak: 'PPN',
      jumlah: 897000
    },
    {
      produk: 'CB1 - Chelsea Boots',
      deskripsi: 'Ukuran M',
      kuantitas: 1,
      satuan: 'Pcs',
      discount: '0%',
      harga: 299000,
      pajak: 'PPN',
      jumlah: 299000
    },
    {
      produk: 'KH1 - Kneel High Boots',
      deskripsi: 'Ukuran XL',
      kuantitas: 1,
      satuan: 'Pcs',
      discount: '0%',
      harga: 299000,
      pajak: 'PPN',
      jumlah: 299000
    }
  ]

  const totalKuantitas: number = products.reduce((sum, product) => sum + product.kuantitas, 0)
  const subTotal: number = 1495000
  const ppn: number = 98670
  const total: number = 1593670
  const sisaTagihan: number = 1593670

  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'>
                Vendor
              </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>

            <Box>
              <Typography variant='subtitle2' color='text.secondary'>
                Gudang
              </Typography>
              <Typography variant='body1' color='primary' sx={{ cursor: 'pointer' }}>
                {purchaseData.gudang}
              </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 Table */}
        <TableContainer>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell>Produk</TableCell>
                <TableCell>Deskripsi</TableCell>
                <TableCell align='center'>Kuantitas</TableCell>
                <TableCell align='center'>Satuan</TableCell>
                <TableCell align='center'>Discount</TableCell>
                <TableCell align='right'>Harga</TableCell>
                <TableCell align='center'>Pajak</TableCell>
                <TableCell align='right'>Jumlah</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {products.map((product, index) => (
                <TableRow key={index}>
                  <TableCell>
                    <Typography variant='body2' color='primary' sx={{ cursor: 'pointer' }}>
                      {product.produk}
                    </Typography>
                  </TableCell>
                  <TableCell>{product.deskripsi}</TableCell>
                  <TableCell align='center'>{product.kuantitas}</TableCell>
                  <TableCell align='center'>{product.satuan}</TableCell>
                  <TableCell align='center'>{product.discount}</TableCell>
                  <TableCell align='right'>{formatCurrency(product.harga)}</TableCell>
                  <TableCell align='center'>{product.pajak}</TableCell>
                  <TableCell align='right'>{formatCurrency(product.jumlah)}</TableCell>
                </TableRow>
              ))}

              {/* Total Kuantitas Row */}
              <TableRow>
                <TableCell colSpan={2} sx={{ fontWeight: 'bold', borderTop: '2px solid #e0e0e0' }}>
                  Total Kuantitas
                </TableCell>
                <TableCell align='center' sx={{ fontWeight: 'bold', borderTop: '2px solid #e0e0e0' }}>
                  {totalKuantitas}
                </TableCell>
                <TableCell sx={{ borderTop: '2px solid #e0e0e0' }}></TableCell>
                <TableCell sx={{ borderTop: '2px solid #e0e0e0' }}></TableCell>
                <TableCell sx={{ borderTop: '2px solid #e0e0e0' }}></TableCell>
                <TableCell sx={{ borderTop: '2px solid #e0e0e0' }}></TableCell>
                <TableCell sx={{ borderTop: '2px solid #e0e0e0' }}></TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </TableContainer>

        {/* 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 PurchaseDetailInformation