'use client'

import React from 'react'
import {
  Card,
  CardContent,
  CardHeader,
  Typography,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Link,
  Box
} from '@mui/material'

interface TransactionData {
  id: string
  tanggal: string
  transaksi: string
  nomor: string
  tag: string
  referensi: string
  jumlah: number
}

const PurchaseDetailTransaction: React.FC = () => {
  const transactions: TransactionData[] = [
    {
      id: '1',
      tanggal: '10/09/2025',
      transaksi: 'Pembayaran Pembelian',
      nomor: 'PP/00024',
      tag: '',
      referensi: '',
      jumlah: 1593670
    }
  ]

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

  return (
    <Card sx={{ width: '100%' }}>
      <CardHeader
        title={
          <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
            Transaksi
          </Typography>
        }
        sx={{ pb: 1 }}
      />
      <CardContent>
        <TableContainer>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell>
                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
                    <Typography variant='body2' sx={{ fontWeight: 'medium' }}>
                      Tanggal
                    </Typography>
                    <i className='tabler-chevron-up' style={{ fontSize: '14px', color: '#666' }} />
                  </Box>
                </TableCell>
                <TableCell>
                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
                    <Typography variant='body2' sx={{ fontWeight: 'medium' }}>
                      Transaksi
                    </Typography>
                    <i className='tabler-chevron-up' style={{ fontSize: '14px', color: '#666' }} />
                  </Box>
                </TableCell>
                <TableCell>
                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
                    <Typography variant='body2' sx={{ fontWeight: 'medium' }}>
                      Nomor
                    </Typography>
                    <i className='tabler-chevron-up' style={{ fontSize: '14px', color: '#666' }} />
                  </Box>
                </TableCell>
                <TableCell>
                  <Typography variant='body2' sx={{ fontWeight: 'medium' }}>
                    Tag
                  </Typography>
                </TableCell>
                <TableCell>
                  <Typography variant='body2' sx={{ fontWeight: 'medium' }}>
                    Referensi
                  </Typography>
                </TableCell>
                <TableCell align='right'>
                  <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 0.5 }}>
                    <Typography variant='body2' sx={{ fontWeight: 'medium' }}>
                      Jumlah
                    </Typography>
                    <i className='tabler-chevron-up' style={{ fontSize: '14px', color: '#666' }} />
                  </Box>
                </TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {transactions.map(transaction => (
                <TableRow key={transaction.id}>
                  <TableCell>
                    <Typography variant='body2'>{transaction.tanggal}</Typography>
                  </TableCell>
                  <TableCell>
                    <Link
                      href='#'
                      underline='hover'
                      color='primary'
                      sx={{
                        textDecoration: 'none',
                        '&:hover': {
                          textDecoration: 'underline'
                        }
                      }}
                    >
                      {transaction.transaksi}
                    </Link>
                  </TableCell>
                  <TableCell>
                    <Typography variant='body2'>{transaction.nomor}</Typography>
                  </TableCell>
                  <TableCell>
                    <Typography variant='body2'>{transaction.tag || '-'}</Typography>
                  </TableCell>
                  <TableCell>
                    <Typography variant='body2'>{transaction.referensi || '-'}</Typography>
                  </TableCell>
                  <TableCell align='right'>
                    <Typography variant='body2' sx={{ fontWeight: 'medium' }}>
                      {formatCurrency(transaction.jumlah)}
                    </Typography>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      </CardContent>
    </Card>
  )
}

export default PurchaseDetailTransaction
