pos-dashboard-v2/src/views/apps/purchase/purchase-detail/PurchaseDetailInformation.tsx

'use client'

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'
import { PurchaseOrder } from '@/types/services/purchaseOrder'

interface Props {
  data?: PurchaseOrder
}

const PurchaseDetailInformation = ({ data }: Props) => {
  const purchaseOrder = data

  // Helper functions
  const formatDate = (dateString: string): string => {
    const date = new Date(dateString)
    return date.toLocaleDateString('id-ID', {
      day: '2-digit',
      month: '2-digit',
      year: 'numeric'
    })
  }

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

  const getStatusLabel = (status: string): string => {
    const statusMap: Record<string, string> = {
      draft: 'Draft',
      sent: 'Dikirim',
      approved: 'Disetujui',
      received: 'Diterima',
      cancelled: 'Dibatalkan'
    }
    return statusMap[status] || status
  }

  const getStatusColor = (status: string): 'error' | 'success' | 'warning' | 'info' | 'default' => {
    const colorMap: Record<string, 'error' | 'success' | 'warning' | 'info' | 'default'> = {
      draft: 'default',
      sent: 'warning',
      approved: 'success',
      received: 'info',
      cancelled: 'error'
    }
    return colorMap[status] || 'info'
  }

  // Calculations
  const totalQuantity = (purchaseOrder?.items ?? []).reduce((sum, item) => sum + (item?.quantity ?? 0), 0)
  const total = (purchaseOrder?.items ?? []).reduce((sum, item) => sum + (item?.amount ?? 0) * item?.quantity, 0)

  return (
    <Card sx={{ width: '100%' }}>
      <CardHeader
        title={
          <Box display='flex' justifyContent='space-between' alignItems='center'>
            <Typography variant='h5' color={getStatusColor(purchaseOrder?.status ?? '')} sx={{ fontWeight: 'bold' }}>
              {getStatusLabel(purchaseOrder?.status ?? '')}
            </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' }}>
                {purchaseOrder?.vendor?.name ?? ''}
              </Typography>
            </Box>

            <Box>
              <Typography variant='subtitle2' color='text.secondary'>
                Tgl. Transaksi
              </Typography>
              <Typography variant='body1'>{formatDate(purchaseOrder?.transaction_date ?? '')}</Typography>
            </Box>
          </Grid>

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

            <Box>
              <Typography variant='subtitle2' color='text.secondary'>
                Tgl. Jatuh Tempo
              </Typography>
              <Typography variant='body1'>{formatDate(purchaseOrder?.due_date ?? '')}</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='right'>Harga</TableCell>
                <TableCell align='right'>Jumlah</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {(purchaseOrder?.items ?? []).map((item, index) => {
                return (
                  <TableRow key={item.id}>
                    <TableCell>
                      <Typography variant='body2' color='primary' sx={{ cursor: 'pointer' }}>
                        {item.ingredient.name}
                      </Typography>
                    </TableCell>
                    <TableCell>{item.description}</TableCell>
                    <TableCell align='center'>{item.quantity}</TableCell>
                    <TableCell align='center'>{item.unit.name}</TableCell>
                    <TableCell align='right'>{formatCurrency(item.amount)}</TableCell>
                    <TableCell align='right'>{formatCurrency(item.amount * item.quantity)}</TableCell>
                  </TableRow>
                )
              })}

              {/* Total Quantity 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' }}>
                  {totalQuantity}
                </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,
                    '&:hover': {
                      backgroundColor: 'rgba(0, 0, 0, 0.04)',
                      transition: 'background-color 0.15s ease'
                    }
                  }}
                >
                  <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
                    Total
                  </Typography>
                  <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
                    {formatCurrency(total)}
                  </Typography>
                </Box>
              </Box>
            </Grid>
          </Grid>
        </Box>
      </CardContent>
    </Card>
  )
}

export default PurchaseDetailInformation