import { useState, useMemo, useCallback } from 'react';
import { ChangeEventHandler } from 'react';
import useSWR from 'swr';
import Card from '@/components/Card';
import SelectInput, {
  useSelect,
  OptionType,
} from '@/components/input/SelectInput';
import DateInput from '@/components/input/DateInput';
import { AreaApi } from '@/services/api/master-data';
import { SupplierApi } from '@/services/api/master-data';
import { ProductApi } from '@/services/api/master-data';
import { ProductCategoryApi } from '@/services/api/master-data';
import { LogisticApi } from '@/services/api/report/logistic-stock';
import Table from '@/components/Table';
import { ColumnDef } from '@tanstack/react-table';
import { formatCurrency, formatDate, formatNumber } from '@/lib/helper';
import { LogisticPurchasePerSupplierReport } from '@/types/api/report/logistic-stock';
import { isResponseSuccess } from '@/lib/api-helper';
import { useTableFilter } from '@/services/hooks/useTableFilter';
import Pagination from '@/components/Pagination';
import Button from '@/components/Button';
import Dropdown from '@/components/Dropdown';
import MenuItem from '@/components/menu/MenuItem';
import Menu from '@/components/menu/Menu';
import { generatePurchasesPerSupplierPDF } from '@/components/pages/report/logistic-stock/export/PurchasesPerSupplierExport';
import toast from 'react-hot-toast';
import * as XLSX from 'xlsx';
import { Supplier } from '@/types/api/master-data/supplier';

interface Totals {
  total_qty: number;
  total_price: number;
  total_purchase_amount: number;
  total_transport: number;
  total_value_transport: number;
  total_jumlah: number;
}

interface GroupedSupplierData {
  id: number;
  supplier: Supplier;
  items: LogisticPurchasePerSupplierReport['rows'];
}

const PurchasesPerSupplierTab = () => {
  // ===== STATE MANAGEMENT =====
  const [isPdfExportLoading, setIsPdfExportLoading] = useState(false);
  const [isExcelExportLoading, setIsExcelExportLoading] = useState(false);
  const isAnyExportLoading = isPdfExportLoading || isExcelExportLoading;

  // ===== PAGINATION STATE =====
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);

  // ===== SUBMISSION STATE =====
  const [isSubmitted, setIsSubmitted] = useState(false);

  // ===== TABLE FILTER STATE =====
  const { state: tableFilterState, updateFilter } = useTableFilter({
    initial: {
      area_id: [] as string[],
      supplier_id: [] as string[],
      product_id: [] as string[],
      product_category_id: [] as string[],
      received_date: '',
      po_date: '',
      start_date: '',
      end_date: '',
      sort_by: '',
      filter_by: 'received_date',
    },
    paramMap: {
      page: 'page',
      pageSize: 'limit',
    },
  });

  const { options: areaOptions, isLoadingOptions: isLoadingAreas } = useSelect(
    AreaApi.basePath,
    'id',
    'name',
    'search'
  );

  const { options: supplierOptions, isLoadingOptions: isLoadingSuppliers } =
    useSelect(SupplierApi.basePath, 'id', 'name', 'search');

  const { options: productOptions, isLoadingOptions: isLoadingProducts } =
    useSelect(ProductApi.basePath, 'id', 'name', 'search');

  const {
    options: productCategoryOptions,
    isLoadingOptions: isLoadingProductCategories,
  } = useSelect(ProductCategoryApi.basePath, 'id', 'name', 'search');

  const dataTypeOptions = useMemo(
    () => [
      { value: 'received_date', label: 'Tanggal Terima' },
      { value: 'po_date', label: 'Tanggal PO' },
    ],
    []
  );

  const sortByOptions = useMemo(
    () => [
      { value: 'ASC', label: 'Ascending' },
      { value: 'DESC', label: 'Descending' },
    ],
    []
  );

  const areaChangeHandler = useCallback(
    (val: OptionType | OptionType[] | null) => {
      const arr = Array.isArray(val) ? val : val ? [val] : [];
      updateFilter(
        'area_id',
        arr.map((v) => String((v as OptionType).value))
      );
      setIsSubmitted(false);
    },
    [updateFilter]
  );

  const supplierChangeHandler = useCallback(
    (val: OptionType | OptionType[] | null) => {
      const arr = Array.isArray(val) ? val : val ? [val] : [];
      updateFilter(
        'supplier_id',
        arr.map((v) => String((v as OptionType).value))
      );
      setIsSubmitted(false);
    },
    [updateFilter]
  );

  const productChangeHandler = useCallback(
    (val: OptionType | OptionType[] | null) => {
      const arr = Array.isArray(val) ? val : val ? [val] : [];
      updateFilter(
        'product_id',
        arr.map((v) => String((v as OptionType).value))
      );
      setIsSubmitted(false);
    },
    [updateFilter]
  );

  const productCategoryChangeHandler = useCallback(
    (val: OptionType | OptionType[] | null) => {
      const arr = Array.isArray(val) ? val : val ? [val] : [];
      updateFilter(
        'product_category_id',
        arr.map((v) => String((v as OptionType).value))
      );
      setIsSubmitted(false);
    },
    [updateFilter]
  );

  const dataTypeChangeHandler = useCallback(
    (val: OptionType | OptionType[] | null) => {
      const newVal = val as OptionType;
      const filterValue =
        (newVal?.value as 'received_date' | 'po_date') || 'received_date';
      updateFilter('filter_by', filterValue);
      updateFilter('received_date', '');
      updateFilter('po_date', '');
      setIsSubmitted(false);
    },
    [updateFilter]
  );

  const sortByHandler = useCallback(
    (val: OptionType | OptionType[] | null) => {
      const newVal = val as OptionType;
      const sortValue = (newVal?.value as 'ASC' | 'DESC') || 'ASC';
      updateFilter('sort_by', sortValue);
      setIsSubmitted(false);
    },
    [updateFilter]
  );

  const startDateChangeHandler = useCallback<
    ChangeEventHandler<HTMLInputElement>
  >(
    (e) => {
      const val = e.target.value;
      updateFilter('start_date', val || '');
      setIsSubmitted(false);
    },
    [updateFilter]
  );

  const endDateChangeHandler = useCallback<
    ChangeEventHandler<HTMLInputElement>
  >(
    (e) => {
      const val = e.target.value;
      updateFilter('end_date', val || '');
      setIsSubmitted(false);
    },
    [updateFilter]
  );

  const resetFilters = useCallback(() => {
    updateFilter('area_id', []);
    updateFilter('supplier_id', []);
    updateFilter('product_id', []);
    updateFilter('product_category_id', []);
    updateFilter('received_date', '');
    updateFilter('po_date', '');
    updateFilter('start_date', '');
    updateFilter('end_date', '');
    updateFilter('sort_by', '');
    updateFilter('filter_by', 'received_date');
    setIsSubmitted(false);
  }, [updateFilter]);

  const handleSubmit = useCallback(() => {
    setIsSubmitted(true);
    setCurrentPage(1);
  }, []);

  // ===== DATA FETCHING =====
  const { data: purchasePerSupplier, isLoading } = useSWR(
    isSubmitted
      ? () => {
          const params = {
            area_id:
              tableFilterState.area_id.length > 0
                ? tableFilterState.area_id.join(',')
                : undefined,
            supplier_id:
              tableFilterState.supplier_id.length > 0
                ? tableFilterState.supplier_id.join(',')
                : undefined,
            product_id:
              tableFilterState.product_id.length > 0
                ? tableFilterState.product_id.join(',')
                : undefined,
            product_category_id:
              tableFilterState.product_category_id.length > 0
                ? tableFilterState.product_category_id.join(',')
                : undefined,
            received_date:
              tableFilterState.filter_by === 'received_date'
                ? tableFilterState.start_date || undefined
                : undefined,
            po_date:
              tableFilterState.filter_by === 'po_date'
                ? tableFilterState.start_date || undefined
                : undefined,
            start_date: tableFilterState.start_date || undefined,
            end_date: tableFilterState.end_date || undefined,
            sort_by: tableFilterState.sort_by || undefined,
            filter_by: tableFilterState.filter_by || undefined,
            page: currentPage,
            limit: pageSize,
          };

          return ['logistic-purchase-report', params];
        }
      : null,
    ([, params]) =>
      LogisticApi.getLogisticPurchasePerSupplierReport(
        params.area_id,
        params.supplier_id,
        params.product_id,
        params.product_category_id,
        params.received_date,
        params.po_date,
        params.start_date,
        params.end_date,
        params.sort_by,
        params.filter_by,
        params.page,
        params.limit
      )
  );

  const data: LogisticPurchasePerSupplierReport['rows'] = useMemo(
    () =>
      isResponseSuccess(purchasePerSupplier)
        ? (purchasePerSupplier?.data
            ?.rows as LogisticPurchasePerSupplierReport['rows']) || []
        : [],
    [purchasePerSupplier]
  );

  const meta =
    isResponseSuccess(purchasePerSupplier) && purchasePerSupplier?.meta
      ? purchasePerSupplier.meta
      : null;

  // ===== EXPORT DATA FETCHER =====
  const logisticPurchasePerSupplierExport =
    useCallback(async (): Promise<LogisticPurchasePerSupplierReport | null> => {
      const params = {
        area_id:
          tableFilterState.area_id.length > 0
            ? tableFilterState.area_id.join(',')
            : undefined,
        supplier_id:
          tableFilterState.supplier_id.length > 0
            ? tableFilterState.supplier_id.join(',')
            : undefined,
        product_id:
          tableFilterState.product_id.length > 0
            ? tableFilterState.product_id.join(',')
            : undefined,
        product_category_id:
          tableFilterState.product_category_id.length > 0
            ? tableFilterState.product_category_id.join(',')
            : undefined,
        received_date:
          tableFilterState.filter_by === 'received_date'
            ? tableFilterState.start_date || undefined
            : undefined,
        po_date:
          tableFilterState.filter_by === 'po_date'
            ? tableFilterState.start_date || undefined
            : undefined,
        start_date: tableFilterState.start_date || undefined,
        end_date: tableFilterState.end_date || undefined,
        sort_by: tableFilterState.sort_by || undefined,
        filter_by: tableFilterState.filter_by || undefined,
        limit: 10000,
        page: 1,
      };

      const response = await LogisticApi.getLogisticPurchasePerSupplierReport(
        params.area_id,
        params.supplier_id,
        params.product_id,
        params.product_category_id,
        params.received_date,
        params.po_date,
        params.start_date,
        params.end_date,
        params.sort_by,
        params.filter_by,
        params.page,
        params.limit
      );

      return isResponseSuccess(response) ? response.data : null;
    }, [tableFilterState]);

  // ===== EXPORT HANDLERS =====
  const handleExportExcel = useCallback(async () => {
    setIsExcelExportLoading(true);
    try {
      const allDataForExport = await logisticPurchasePerSupplierExport();

      if (
        !allDataForExport ||
        !allDataForExport?.rows ||
        allDataForExport.rows.length === 0
      ) {
        toast.error('Tidak ada data untuk diekspor.');
        return;
      }

      const allExportData =
        allDataForExport.rows as LogisticPurchasePerSupplierReport['rows'];
      const groupedBySupplier: { [key: string]: typeof allExportData } = {};

      allExportData.forEach((item) => {
        const supplierName = item.supplier?.name || 'Unknown Supplier';
        if (!groupedBySupplier[supplierName]) {
          groupedBySupplier[supplierName] = [];
        }
        groupedBySupplier[supplierName].push(item);
      });

      const workbook = XLSX.utils.book_new();

      Object.entries(groupedBySupplier).forEach(
        ([supplierName, supplierData]) => {
          const totals = supplierData.reduce(
            (acc, item) => ({
              total_qty: acc.total_qty + (item.qty || 0),
              total_price: acc.total_price + (item.unit_price || 0),
              total_purchase_amount:
                acc.total_purchase_amount + (item.purchase_value || 0),
              total_transport:
                acc.total_transport + (item.transport_unit_price || 0),
              total_value_transport:
                acc.total_value_transport + (item.transport_value || 0),
              total_jumlah: acc.total_jumlah + (item.total_amount || 0),
            }),
            {
              total_qty: 0,
              total_price: 0,
              total_purchase_amount: 0,
              total_transport: 0,
              total_value_transport: 0,
              total_jumlah: 0,
            }
          );

          const excelData: { [key: string]: string | number }[] =
            supplierData.map((item, index) => ({
              No: index + 1,
              'Tanggal Terima': item.receive_date
                ? formatDate(item.receive_date, 'DD MMM YYYY')
                : '',
              'Tanggal PO': item.po_date
                ? formatDate(item.po_date, 'DD MMM YYYY')
                : '',
              'No. Referensi': item.po_number || '',
              'Nama Produk': item.product?.name || '',
              Tujuan: item.warehouse?.name || '',
              QTY: item.qty || 0,
              'Harga Beli (Rp)': item.unit_price || 0,
              'Value Harga Beli (Rp)': item.purchase_value || 0,
              'Transport (Rp)': item.transport_unit_price || 0,
              'Value Transport (Rp)': item.transport_value || 0,
              'Jumlah (Rp)': item.total_amount || 0,
              Ekspedisi: item.expedition || '',
              'Surat Jalan': item.delivery_number || '',
            }));

          excelData.push({
            No: 'Total',
            'Tanggal Terima': '',
            'Tanggal PO': '',
            'No. Referensi': '',
            'Nama Produk': '',
            Tujuan: '',
            QTY: totals.total_qty,
            'Harga Beli (Rp)': totals.total_price,
            'Value Harga Beli (Rp)': totals.total_purchase_amount,
            'Transport (Rp)': totals.total_transport,
            'Value Transport (Rp)': totals.total_value_transport,
            'Jumlah (Rp)': totals.total_jumlah,
            Ekspedisi: '',
            'Surat Jalan': '',
          });

          const worksheet = XLSX.utils.json_to_sheet(excelData);

          const colWidths = [
            { wch: 5 }, // No
            { wch: 15 }, // Tanggal Terima
            { wch: 15 }, // Tanggal PO
            { wch: 15 }, // No. Referensi
            { wch: 30 }, // Nama Produk
            { wch: 20 }, // Tujuan
            { wch: 10 }, // QTY
            { wch: 18 }, // Harga Beli
            { wch: 20 }, // Value Harga Beli
            { wch: 15 }, // Transport
            { wch: 20 }, // Value Transport
            { wch: 18 }, // Jumlah
            { wch: 15 }, // Ekspedisi
            { wch: 15 }, // Surat Jalan
          ];
          worksheet['!cols'] = colWidths;

          const sheetName =
            supplierName.length > 31
              ? supplierName.substring(0, 31)
              : supplierName;
          XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);
        }
      );

      const filename = `laporan-pembelian-per-supplier-dicetak-pada-${formatDate(new Date(), 'YYYY-MM-DD-HHmm')}.xlsx`;

      XLSX.writeFile(workbook, filename);
      toast.success('Excel berhasil dibuat dan diunduh.');
    } catch {
      toast.error('Gagal membuat Excel. Silakan coba lagi.');
    } finally {
      setIsExcelExportLoading(false);
    }
  }, [
    logisticPurchasePerSupplierExport,
    tableFilterState,
    areaOptions,
    supplierOptions,
  ]);

  const handleExportPdf = useCallback(async () => {
    setIsPdfExportLoading(true);
    try {
      const allDataForExport = await logisticPurchasePerSupplierExport();

      if (
        !allDataForExport ||
        !allDataForExport?.rows ||
        allDataForExport.rows.length === 0
      ) {
        toast.error('Tidak ada data untuk diekspor.');
        return;
      }
      const areaName =
        tableFilterState.area_id.length > 0
          ? tableFilterState.area_id
              .map(
                (id) =>
                  areaOptions.find((opt) => opt.value === Number(id))?.label
              )
              .filter(Boolean)
              .join(', ') || 'Semua Area'
          : 'Semua Area';

      const supplierName =
        tableFilterState.supplier_id.length > 0
          ? tableFilterState.supplier_id
              .map(
                (id) =>
                  supplierOptions.find((opt) => opt.value === Number(id))?.label
              )
              .filter(Boolean)
              .join(', ') || 'Semua Supplier'
          : 'Semua Supplier';

      const productName =
        tableFilterState.product_id.length > 0
          ? tableFilterState.product_id
              .map(
                (id) =>
                  productOptions.find((opt) => opt.value === Number(id))?.label
              )
              .filter(Boolean)
              .join(', ') || 'Semua Produk'
          : 'Semua Produk';

      const productCategoryName =
        tableFilterState.product_category_id.length > 0
          ? tableFilterState.product_category_id
              .map(
                (id) =>
                  productCategoryOptions.find((opt) => opt.value === Number(id))
                    ?.label
              )
              .filter(Boolean)
              .join(', ') || 'Semua Kategori Produk'
          : 'Semua Kategori Produk';

      const exportParams = {
        area_name: areaName,
        supplier_name: supplierName,
        product_name: productName,
        product_category_name: productCategoryName,
        filter_by: tableFilterState.filter_by || 'received_date',
        start_date: tableFilterState.start_date || '',
        end_date: tableFilterState.end_date || '',
      };

      await generatePurchasesPerSupplierPDF(
        allDataForExport.rows,
        exportParams
      );
      toast.success('PDF berhasil dibuat dan diunduh.');
    } catch {
      toast.error('Gagal membuat PDF. Silakan coba lagi.');
    } finally {
      setIsPdfExportLoading(false);
    }
  }, [
    logisticPurchasePerSupplierExport,
    tableFilterState,
    areaOptions,
    supplierOptions,
    productOptions,
    productCategoryOptions,
  ]);

  // ===== PAGINATION HANDLERS =====
  const handlePageChange = (page: number) => {
    setCurrentPage(page);
  };

  const handleRowChange = (pageSize: number) => {
    setPageSize(pageSize);
  };

  const handleNextPage = () => {
    if (meta && currentPage < meta.total_pages) {
      setCurrentPage(currentPage + 1);
    }
  };

  const handlePrevPage = () => {
    if (currentPage > 1) {
      setCurrentPage(currentPage - 1);
    }
  };

  // ===== TABLE COLUMNS DEFINITION =====
  const groupedData = useMemo(() => {
    const groups: { [key: number]: GroupedSupplierData } = {};

    data.forEach((item) => {
      const supplierId = item.supplier?.id;
      if (supplierId && !groups[supplierId]) {
        groups[supplierId] = {
          id: supplierId,
          supplier: item.supplier,
          items: [],
        };
      }
      if (groups[supplierId]) {
        groups[supplierId].items.push(item);
      }
    });

    return Object.values(groups);
  }, [data]);
  const getTableColumns = (
    totals: Totals
  ): ColumnDef<LogisticPurchasePerSupplierReport['rows'][0]>[] => {
    const tableColumns: ColumnDef<
      LogisticPurchasePerSupplierReport['rows'][0]
    >[] = [
      {
        id: 'no',
        header: 'No',
        cell: (props) => props.row.index + 1,
        footer: () => <div className='font-semibold text-gray-900'>Total</div>,
      },

      {
        id: 'received_date',
        header: 'Tanggal Terima',
        accessorKey: 'receive_date',
        cell: (props) => {
          const value = props.row.original.receive_date;
          return formatDate(value, 'DD MMM YYYY');
        },
      },
      {
        id: 'po_date',
        header: 'Tanggal PO',
        accessorKey: 'po_date',
        cell: (props) => {
          const value = props.row.original.po_date;
          return formatDate(value, 'DD MMM YYYY');
        },
      },
      {
        id: 'po_number',
        header: 'No. Referensi',
        accessorKey: 'po_number',
        cell: (props) => {
          const value = props.row.original.po_number;
          return value || '-';
        },
      },
      {
        id: 'product_name',
        header: 'Nama Produk',
        accessorKey: 'product.name',
        cell: (props) => {
          const product = props.row.original.product;
          return product?.name || '-';
        },
      },
      {
        id: 'destination_warehouse',
        header: 'Tujuan',
        accessorKey: 'warehouse.name',
        cell: (props) => {
          const warehouse = props.row.original.warehouse;
          return warehouse?.name || '-';
        },
      },
      {
        id: 'qty',
        header: 'QTY',
        accessorKey: 'qty',
        cell: (props) => {
          const value = props.row.original.qty;
          return <div className='text-right'>{formatNumber(value)}</div>;
        },
        footer: () => (
          <div className='text-right font-semibold text-gray-900'>
            {formatNumber(totals.total_qty)}
          </div>
        ),
      },
      {
        id: 'price',
        header: 'Harga Beli (Rp)',
        accessorKey: 'unit_price',
        cell: (props) => {
          const value = props.row.original.unit_price;
          return <div className='text-right'>{formatCurrency(value)}</div>;
        },
        footer: () => (
          <div className='text-right font-semibold text-gray-900'>
            {formatCurrency(totals.total_price)}
          </div>
        ),
      },
      {
        id: 'purchase_amount',
        header: 'Value Harga Beli (Rp)',
        accessorKey: 'purchase_value',
        cell: (props) => {
          const value = props.row.original.purchase_value;
          return <div className='text-right'>{formatCurrency(value)}</div>;
        },
        footer: () => (
          <div className='text-right font-semibold text-gray-900'>
            {formatCurrency(totals.total_purchase_amount)}
          </div>
        ),
      },
      {
        id: 'transport',
        header: 'Transport (Rp)',
        accessorKey: 'transport_unit_price',
        cell: (props) => {
          const value = props.row.original.transport_unit_price;
          return <div className='text-right'>{formatCurrency(value)}</div>;
        },
        footer: () => (
          <div className='text-right font-semibold text-gray-900'>
            {formatCurrency(totals.total_transport)}
          </div>
        ),
      },
      {
        id: 'value_transport',
        header: 'Value Transport (Rp)',
        accessorKey: 'transport_value',
        cell: (props) => {
          const value = props.row.original.transport_value;
          return <div className='text-right'>{formatCurrency(value)}</div>;
        },
        footer: () => (
          <div className='text-right font-semibold text-gray-900'>
            {formatCurrency(totals.total_value_transport)}
          </div>
        ),
      },
      {
        id: 'total',
        header: 'Jumlah (Rp)',
        accessorKey: 'total_amount',
        cell: (props) => {
          const value = props.row.original.total_amount;
          return <div className='text-right'>{formatCurrency(value)}</div>;
        },
        footer: () => (
          <div className='text-right font-semibold text-gray-900'>
            {formatCurrency(totals.total_jumlah)}
          </div>
        ),
      },
      {
        id: 'expedition_vendor_name',
        header: 'Ekspedisi',
        accessorKey: 'expedition',
        cell: (props) => {
          const value = props.row.original.expedition;
          return value || '-';
        },
      },
      {
        id: 'travel_number',
        header: 'Surat Jalan',
        accessorKey: 'delivery_number',
        cell: (props) => {
          const value = props.row.original.delivery_number;
          return value || '-';
        },
      },
    ];
    return tableColumns;
  };

  return (
    <div className='w-full p-0 sm:p-4'>
      <Card
        subtitle='Laporan > Rekapitulasi Pembelian Per Supplier'
        className={{ wrapper: 'w-full', body: 'p-1!' }}
      >
        <div className='mb-4 flex justify-end gap-2 [&_button]:px-4'>
          <Button color='primary' onClick={handleSubmit}>
            Cari
          </Button>
          <Button color='warning' onClick={resetFilters}>
            Reset
          </Button>
          <Dropdown
            trigger={
              <Button color='success' isLoading={isAnyExportLoading}>
                Export
              </Button>
            }
            align='end'
          >
            <Menu className='w-32'>
              <MenuItem title='Excel' onClick={handleExportExcel} />
              <MenuItem title='PDF' onClick={handleExportPdf} />
            </Menu>
          </Dropdown>
        </div>
        <div className='grid md:grid-cols-3 grid-cols-1 gap-4'>
          <SelectInput
            label='Area'
            placeholder='Pilih Area'
            isMulti
            options={areaOptions}
            value={areaOptions.filter((opt) =>
              (tableFilterState.area_id || [])
                .map(String)
                .includes(String(opt.value))
            )}
            onChange={areaChangeHandler}
            isLoading={isLoadingAreas}
            isClearable
          />
          <SelectInput
            label='Supplier'
            placeholder='Pilih Supplier'
            isMulti
            options={supplierOptions}
            value={supplierOptions.filter((opt) =>
              (tableFilterState.supplier_id || [])
                .map(String)
                .includes(String(opt.value))
            )}
            onChange={supplierChangeHandler}
            isLoading={isLoadingSuppliers}
            isClearable
          />
          <SelectInput
            label='Produk'
            placeholder='Pilih Produk'
            isMulti
            options={productOptions}
            value={productOptions.filter((opt) =>
              (tableFilterState.product_id || [])
                .map(String)
                .includes(String(opt.value))
            )}
            onChange={productChangeHandler}
            isLoading={isLoadingProducts}
            isClearable
          />
        </div>
        <div className='grid md:grid-cols-3 grid-cols-1 gap-4'>
          <SelectInput
            label='Kategori Produk'
            placeholder='Pilih Kategori Produk'
            isMulti
            options={productCategoryOptions}
            value={productCategoryOptions.filter((opt) =>
              (tableFilterState.product_category_id || [])
                .map(String)
                .includes(String(opt.value))
            )}
            onChange={productCategoryChangeHandler}
            isLoading={isLoadingProductCategories}
            isClearable
          />
          <div className='md:flex md:flex-row grid grid-cols-1 gap-4'>
            <SelectInput
              label='Filter Berdasarkan'
              placeholder='Pilih Filter Berdasarkan'
              options={dataTypeOptions}
              value={
                dataTypeOptions?.find(
                  (option) => option.value === tableFilterState.filter_by
                ) || null
              }
              onChange={dataTypeChangeHandler}
              isLoading={false}
              isClearable={false}
            />
            <SelectInput
              label='Urutkan Berdasarkan'
              placeholder='Pilih Urutkan Berdasarkan'
              options={sortByOptions}
              value={
                sortByOptions?.find(
                  (option) => option.value === tableFilterState.sort_by
                ) || null
              }
              onChange={sortByHandler}
              isLoading={false}
              isClearable={false}
            />
          </div>
          <div className='md:flex md:flex-row grid grid-cols-1 gap-4'>
            <DateInput
              label='Tanggal Awal'
              name='start_date'
              placeholder='Pilih Tanggal Awal'
              value={tableFilterState.start_date}
              onChange={startDateChangeHandler}
            />
            <DateInput
              label='Tanggal Akhir'
              name='end_date'
              placeholder='Pilih Tanggal Akhir'
              value={tableFilterState.end_date}
              onChange={endDateChangeHandler}
            />
          </div>
        </div>

        {!isSubmitted ? (
          <div className='mt-6 text-center text-gray-500'>
            Silakan pilih filter dan klik tombol Submit untuk menampilkan data.
          </div>
        ) : isLoading ? (
          <div className='w-full flex flex-row justify-center items-center p-4'>
            <span className='loading loading-spinner loading-xl' />
          </div>
        ) : data.length === 0 ? (
          <div className='mt-6 text-center text-gray-500'>
            Tidak ada data yang dapat ditampilkan...
          </div>
        ) : (
          groupedData.map((supplier) => {
            const total_qty = supplier.items.reduce(
              (sum, item) => sum + (item.qty || 0),
              0
            );
            const total_price = supplier.items.reduce(
              (sum, item) => sum + (item.purchase_value || 0),
              0
            );
            const total_transport = supplier.items.reduce(
              (sum, item) => sum + (item.transport_value || 0),
              0
            );
            const total_value_transport = supplier.items.reduce(
              (sum, item) => sum + (item.transport_value || 0),
              0
            );
            const total_jumlah = supplier.items.reduce(
              (sum, item) => sum + (item.total_amount || 0),
              0
            );

            const totals = {
              total_qty,
              total_price,
              total_purchase_amount: total_price,
              total_transport,
              total_value_transport,
              total_jumlah,
            };

            const totalPurchase = totals.total_jumlah;
            const tableColumns = getTableColumns(totals);

            return (
              <Card
                key={supplier.id}
                title={supplier.supplier.name}
                subtitle={`Total Pembelian: ${formatCurrency(totalPurchase)}`}
                className={{ wrapper: 'w-full' }}
                variant='bordered'
                collapsible={true}
              >
                <Table
                  data={supplier.items}
                  columns={tableColumns}
                  pageSize={10}
                  renderFooter={supplier.items.length > 0}
                  className={{
                    containerClassName: 'w-full',
                    tableWrapperClassName: 'overflow-x-auto mt-4',
                    tableClassName: 'w-full table-auto text-sm',
                    headerRowClassName: 'border-b border-b-gray-200 bg-gray-50',
                    headerColumnClassName:
                      'px-4 py-3 text-xs font-semibold text-gray-700 text-left border border-gray-200',
                    bodyRowClassName:
                      'hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200',
                    bodyColumnClassName:
                      'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
                    tableFooterClassName:
                      'bg-gray-100 font-semibold border border-gray-200',
                    footerRowClassName: 'border-t-2 border-gray-300',
                    footerColumnClassName:
                      'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
                    paginationClassName: 'hidden',
                  }}
                />
              </Card>
            );
          })
        )}
      </Card>
      {meta && data.length > 0 && (
        <div className='mt-6'>
          <Pagination
            currentPage={meta.page}
            totalItems={meta.total_results}
            onPageChange={handlePageChange}
            onRowChange={handleRowChange}
            onNextPage={handleNextPage}
            onPrevPage={handlePrevPage}
            rowOptions={[10, 25, 50, 100]}
            itemsPerPage={meta.limit}
          />
        </div>
      )}
    </div>
  );
};

export default PurchasesPerSupplierTab;