import Card from '@/components/Card';
import { FormHeader } from '@/components/helper/form/FormHeader';
import StockLogTable from '@/components/pages/inventory/product/detail/StockLogTable';
import StockProductWarehouseTable from '@/components/pages/inventory/product/detail/StockProductWarehouseTable';
import { formatCurrency, formatNumber } from '@/lib/helper';
import { InventoryProduct } from '@/types/api/inventory/product';
import { useMemo } from 'react';

const InventoryProductDetail = ({
  inventoryProduct,
}: {
  inventoryProduct?: InventoryProduct;
}) => {
  const stockLogs = useMemo(() => {
    return (
      inventoryProduct?.product_warehouses?.flatMap((warehouse) =>
        warehouse.stock_logs.map((log) => ({
          ...log,
          warehouse_name: warehouse.warehouse_name,
          warehouse_id: warehouse.warehouse_id,
        }))
      ) || []
    );
  }, [inventoryProduct]);

  return (
    <div className='flex flex-col gap-4 p-4'>
      <FormHeader
        title='Detail Persediaan Produk'
        backUrl='/inventory/product'
      />

      <Card
        title='Informasi Produk'
        variant='bordered'
        className={{
          wrapper: 'w-full mt-4',
        }}
      >
        <div className='grid grid-cols-2 gap-4'>
          <div className='overflow-x-auto rounded-box border border-base-content/5 bg-base-100 mt-3'>
            <table className='table'>
              <tbody>
                <tr>
                  <td className='font-semibold'>SKU</td>
                  <td>:</td>
                  <td>{inventoryProduct?.sku}</td>
                </tr>
                <tr>
                  <td className='font-semibold'>Nama Produk</td>
                  <td>:</td>
                  <td>{inventoryProduct?.name}</td>
                </tr>
                <tr>
                  <td className='font-semibold'>Kategory</td>
                  <td>:</td>
                  <td>{inventoryProduct?.product_category.name}</td>
                </tr>
                <tr>
                  <td className='font-semibold'>Satuan</td>
                  <td>:</td>
                  <td>{inventoryProduct?.uom.name}</td>
                </tr>
              </tbody>
            </table>
          </div>

          <div className='overflow-x-auto rounded-box border border-base-content/5 bg-base-100 mt-3'>
            <table className='table'>
              <tbody>
                <tr>
                  <td className='font-semibold'>Harga Jual</td>
                  <td>:</td>
                  <td>
                    {inventoryProduct?.selling_price
                      ? formatCurrency(inventoryProduct.selling_price)
                      : '-'}
                  </td>
                </tr>
                <tr>
                  <td className='font-semibold'>Harga Beli</td>
                  <td>:</td>
                  <td>
                    {inventoryProduct?.product_price
                      ? formatCurrency(inventoryProduct?.product_price)
                      : '-'}
                  </td>
                </tr>
                <tr>
                  <td className='font-semibold'>Pajak</td>
                  <td>:</td>
                  <td>
                    {inventoryProduct?.tax
                      ? formatNumber(inventoryProduct?.tax) + '%'
                      : '-'}
                  </td>
                </tr>
                <tr>
                  <td className='font-semibold'>Total Stok</td>
                  <td>:</td>
                  <td>
                    {inventoryProduct?.total_stock
                      ? formatNumber(inventoryProduct?.total_stock)
                      : '0'}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </Card>

      <StockProductWarehouseTable
        productWarehouseStock={inventoryProduct?.product_warehouses ?? []}
      />

      <StockLogTable stockLogs={stockLogs} />
    </div>
  );
};

export default InventoryProductDetail;
