import Button from '@/components/Button';
import Card from '@/components/Card';
import Dropdown from '@/components/Dropdown';
import DateInput from '@/components/input/DateInput';
import { useSelect } from '@/components/input/SelectInput';
import Modal, { useModal } from '@/components/Modal';
import Table from '@/components/Table';
import { isResponseSuccess } from '@/lib/api-helper';
import { cn, formatCurrency, formatDate, formatNumber } from '@/lib/helper';
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 {
  LogisticPurchasePerSupplierReport,
  LogisticPurchasePerSupplierSummary,
} from '@/types/api/report/logistic-stock';
import { generatePurchasesPerSupplierExcel } from '@/components/pages/report/logistic-stock/export/PurchasesPerSupplierExportXLSX';
import { generatePurchasesPerSupplierPDF } from '@/components/pages/report/logistic-stock/export/PurchasesPerSupplierExportPDF';
import { Icon } from '@iconify/react';
import { ColumnDef } from '@tanstack/react-table';
import { useCallback, useEffect, useMemo, useState } from 'react';
import toast from 'react-hot-toast';
import useSWR from 'swr';
import { useFormik } from 'formik';
import {
  PurchasesPerSupplierFilterSchema,
  PurchasesPerSupplierFilterType,
} from '@/components/pages/report/logistic-stock/filter/PurchasesPerSupplierFilter';
import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
import SelectInputRadio from '@/components/input/SelectInputRadio';
import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
import PurchasePerSupplierSkeleton from '@/components/pages/report/logistic-stock/skeleton/PurchasePerSupplierSkeleton';
import ButtonFilter from '@/components/helper/ButtonFilter';

interface PurchasesPerSupplierTabProps {
  tabId: string;
}

interface FilterParams {
  area_id?: string;
  supplier_id?: string;
  product_id?: string;
  product_category_id?: string;
  start_date?: string;
  end_date?: string;
  sort_by?: string;
  filter_by?: string;
}

const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
  // ===== 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] = useState(10);

  // ===== SUBMISSION STATE =====
  const [filterParams, setFilterParams] = useState<FilterParams>({});
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [dateErrorShown, setDateErrorShown] = useState(false);
  const [hasDateError, setHasDateError] = useState(false);

  const filterModal = useModal();

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

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

  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 handleFilterModalOpen = () => {
    filterModal.openModal();
    formik.validateForm();
  };

  // ===== FORMIK SETUP =====
  const formik = useFormik<PurchasesPerSupplierFilterType>({
    initialValues: {
      start_date: null,
      end_date: null,
      area_ids: null,
      supplier_ids: null,
      product_ids: null,
      product_category_ids: null,
      filter_by: null,
      sort_by: null,
    },
    validationSchema: PurchasesPerSupplierFilterSchema,
    onSubmit: (values, { setSubmitting }) => {
      setFilterParams({
        start_date: values.start_date || undefined,
        end_date: values.end_date || undefined,
        area_id: values.area_ids || undefined,
        supplier_id: values.supplier_ids || undefined,
        product_id: values.product_ids || undefined,
        product_category_id: values.product_category_ids || undefined,
        filter_by: values.filter_by || undefined,
        sort_by: values.sort_by || undefined,
      });
      filterModal.closeModal();
      setIsSubmitted(true);
      setCurrentPage(1);
      setSubmitting(false);
    },
    onReset: () => {
      setFilterParams({});
      setIsSubmitted(false);
      setCurrentPage(1);
      setHasDateError(false);
      if (dateErrorShown) {
        toast.dismiss();
        setDateErrorShown(false);
      }
    },
  });

  // ===== DATE CHANGE HANDLERS =====
  const handleStartDateChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      const value = e.target.value;
      formik.setFieldValue('start_date', value || null);

      if (value && formik.values.end_date) {
        const startDate = new Date(value);
        const endDateObj = new Date(formik.values.end_date);

        if (endDateObj < startDate) {
          setHasDateError(true);
          if (!dateErrorShown) {
            toast.error('Tanggal akhir tidak boleh masa lampau', {
              duration: Infinity,
            });
            setDateErrorShown(true);
          }
        } else {
          setHasDateError(false);
          if (dateErrorShown) {
            toast.dismiss();
            setDateErrorShown(false);
          }
        }
      } else {
        setHasDateError(false);
      }
    },
    [formik, dateErrorShown]
  );

  const handleEndDateChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      const value = e.target.value;
      formik.setFieldValue('end_date', value || null);

      if (value && formik.values.start_date) {
        const startDateObj = new Date(formik.values.start_date);
        const endDate = new Date(value);

        if (endDate < startDateObj) {
          setHasDateError(true);
          if (!dateErrorShown) {
            toast.error('Tanggal akhir tidak boleh masa lampau', {
              duration: Infinity,
            });
            setDateErrorShown(true);
          }
          return;
        }
      }

      setHasDateError(false);
      if (dateErrorShown) {
        toast.dismiss();
        setDateErrorShown(false);
      }
    },
    [formik, dateErrorShown]
  );

  // ===== DERIVED VALUES =====
  const areaIdsValue = useMemo(() => {
    if (!formik.values.area_ids) return [];
    const ids = formik.values.area_ids.split(',');
    return areaOptions.filter((opt) => ids.includes(String(opt.value)));
  }, [formik.values.area_ids, areaOptions]);

  const supplierIdsValue = useMemo(() => {
    if (!formik.values.supplier_ids) return [];
    const ids = formik.values.supplier_ids.split(',');
    return supplierOptions.filter((opt) => ids.includes(String(opt.value)));
  }, [formik.values.supplier_ids, supplierOptions]);

  const productIdsValue = useMemo(() => {
    if (!formik.values.product_ids) return [];
    const ids = formik.values.product_ids.split(',');
    return productOptions.filter((opt) => ids.includes(String(opt.value)));
  }, [formik.values.product_ids, productOptions]);

  const productCategoryIdsValue = useMemo(() => {
    if (!formik.values.product_category_ids) return [];
    const ids = formik.values.product_category_ids.split(',');
    return productCategoryOptions.filter((opt) =>
      ids.includes(String(opt.value))
    );
  }, [formik.values.product_category_ids, productCategoryOptions]);

  const filterByValue = useMemo(() => {
    if (!formik.values.filter_by) return null;
    return (
      dataTypeOptions.find((opt) => opt.value === formik.values.filter_by) ||
      null
    );
  }, [formik.values.filter_by, dataTypeOptions]);

  const sortByValue = useMemo(() => {
    if (!formik.values.sort_by) return null;
    return (
      sortByOptions.find((opt) => opt.value === formik.values.sort_by) || null
    );
  }, [formik.values.sort_by, sortByOptions]);

  // ===== DATA FETCHING =====
  const { data: purchasePerSupplier, isLoading } = useSWR(
    isSubmitted
      ? () => {
          const params = {
            area_id: filterParams.area_id,
            supplier_id: filterParams.supplier_id,
            product_id: filterParams.product_id,
            product_category_id: filterParams.product_category_id,
            start_date: filterParams.start_date,
            end_date: filterParams.end_date,
            sort_by: filterParams.sort_by,
            filter_by: filterParams.filter_by,
            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.filter_by === 'received_date' ? params.start_date : undefined,
        params.filter_by === 'po_date' ? params.start_date : undefined,
        params.start_date,
        params.end_date,
        params.sort_by,
        params.filter_by,
        params.page,
        params.limit
      )
  );

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

  // ===== EXPORT DATA FETCHER =====
  const logisticPurchasePerSupplierExport = useCallback(async (): Promise<
    LogisticPurchasePerSupplierReport[] | null
  > => {
    const params = {
      area_id: filterParams.area_id,
      supplier_id: filterParams.supplier_id,
      product_id: filterParams.product_id,
      product_category_id: filterParams.product_category_id,
      start_date: filterParams.start_date,
      end_date: filterParams.end_date,
      sort_by: filterParams.sort_by,
      filter_by: filterParams.filter_by,
      limit: 100,
      page: 1,
    };

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

    return isResponseSuccess(response)
      ? (response.data as unknown as LogisticPurchasePerSupplierReport[])
      : null;
  }, [filterParams]);

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

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

      await generatePurchasesPerSupplierExcel({ data: allDataForExport });
      toast.success('Excel berhasil dibuat dan diunduh.');
    } catch {
      toast.error('Gagal membuat Excel. Silakan coba lagi.');
    } finally {
      setIsExcelExportLoading(false);
    }
  }, [logisticPurchasePerSupplierExport]);

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

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

      const areaName = filterParams.area_id
        ? areaOptions
            .filter((opt) =>
              filterParams.area_id?.split(',').includes(String(opt.value))
            )
            .map((opt) => opt.label)
            .join(', ') || 'Semua Area'
        : 'Semua Area';

      const supplierName = filterParams.supplier_id
        ? supplierOptions
            .filter((opt) =>
              filterParams.supplier_id?.split(',').includes(String(opt.value))
            )
            .map((opt) => opt.label)
            .join(', ') || 'Semua Supplier'
        : 'Semua Supplier';

      const productName = filterParams.product_id
        ? productOptions
            .filter((opt) =>
              filterParams.product_id?.split(',').includes(String(opt.value))
            )
            .map((opt) => opt.label)
            .join(', ') || 'Semua Produk'
        : 'Semua Produk';

      const productCategoryName = filterParams.product_category_id
        ? productCategoryOptions
            .filter((opt) =>
              filterParams.product_category_id
                ?.split(',')
                .includes(String(opt.value))
            )
            .map((opt) => opt.label)
            .join(', ') || 'Semua Kategori Produk'
        : 'Semua Kategori Produk';

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

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

  // ===== REGISTER TAB ACTIONS TO STORE =====
  const setTabActions = useTabActionsStore((state) => state.setTabActions);
  const clearTabActions = useTabActionsStore((state) => state.clearTabActions);

  useEffect(() => {
    setTabActions(
      tabId,
      <div className='flex flex-row gap-3'>
        <ButtonFilter
          values={formik.values}
          fieldGroups={[['start_date', 'end_date']]}
          onClick={handleFilterModalOpen}
          variant='outline'
          className='px-3 py-2.5'
        />

        <Dropdown
          align='end'
          direction='bottom'
          className={{
            content:
              'mt-1 rounded-xl border border-base-content/5 shadow-sm overflow-hidden',
          }}
          trigger={
            <Button
              variant='outline'
              color='none'
              isLoading={isAnyExportLoading}
              className='px-3 py-2.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
            >
              <div className='flex flex-row items-center gap-1.5'>
                <Icon
                  icon='heroicons:cloud-arrow-down'
                  width={20}
                  height={20}
                />

                <span>Export</span>

                <div className='w-px self-stretch bg-base-content/10' />

                <Icon icon='heroicons:chevron-down' width={14} height={14} />
              </div>
            </Button>
          }
        >
          <Button
            variant='ghost'
            color='none'
            onClick={handleExportExcel}
            isLoading={isExcelExportLoading}
            className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
          >
            <Icon icon='heroicons:table-cells' width={20} height={20} />
            Export to Excel
          </Button>
          <Button
            variant='ghost'
            color='none'
            onClick={handleExportPdf}
            isLoading={isPdfExportLoading}
            className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
          >
            <Icon icon='heroicons:document' width={20} height={20} />
            Export to PDF
          </Button>
        </Dropdown>
      </div>
    );
  }, [
    tabId,
    formik.values,
    isAnyExportLoading,
    filterModal.open,
    setTabActions,
  ]);

  useEffect(() => {
    return () => {
      clearTabActions(tabId);
    };
  }, [tabId, clearTabActions]);

  const getTableColumns = (
    summary: LogisticPurchasePerSupplierSummary
  ): 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',
        enableSorting: false,
        cell: (props) => {
          const value = props.row.original.receive_date;
          return formatDate(value, 'DD MMM YYYY');
        },
      },
      {
        id: 'po_date',
        header: 'Tanggal PO',
        accessorKey: 'po_date',
        enableSorting: false,
        cell: (props) => {
          const value = props.row.original.po_date;
          return formatDate(value, 'DD MMM YYYY');
        },
      },
      {
        id: 'po_number',
        header: 'No. Referensi',
        accessorKey: 'po_number',
        enableSorting: false,
        cell: (props) => {
          const value = props.row.original.po_number;
          return value || '-';
        },
      },
      {
        id: 'product_name',
        header: 'Nama Produk',
        accessorKey: 'product.name',
        enableSorting: false,
        cell: (props) => {
          const product = props.row.original.product;
          return product?.name || '-';
        },
      },
      {
        id: 'destination_warehouse',
        header: 'Tujuan',
        accessorKey: 'warehouse.name',
        enableSorting: false,
        cell: (props) => {
          const warehouse = props.row.original.warehouse;
          return warehouse?.name || '-';
        },
      },
      {
        id: 'qty',
        header: 'QTY',
        accessorKey: 'qty',
        enableSorting: false,
        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(summary.total_qty) || '-'}
          </div>
        ),
      },
      {
        id: 'price',
        header: 'Harga Beli (Rp)',
        accessorKey: 'unit_price',
        enableSorting: false,
        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(summary.total_unit_price) || '-'}
          </div>
        ),
      },
      {
        id: 'purchase_amount',
        header: 'Value Harga Beli (Rp)',
        accessorKey: 'purchase_value',
        enableSorting: false,
        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(summary.total_purchase_value) || '-'}
          </div>
        ),
      },
      {
        id: 'transport',
        header: 'Transport (Rp)',
        accessorKey: 'transport_unit_price',
        enableSorting: false,
        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(summary.total_transport_unit_price) || '-'}
          </div>
        ),
      },
      {
        id: 'value_transport',
        header: 'Value Transport (Rp)',
        accessorKey: 'transport_value',
        enableSorting: false,
        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(summary.total_transport_value) || '-'}
          </div>
        ),
      },
      {
        id: 'total',
        header: 'Jumlah (Rp)',
        accessorKey: 'total_amount',
        enableSorting: false,
        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(summary.total_amount) || '-'}
          </div>
        ),
      },
      {
        id: 'expedition_vendor_name',
        header: 'Ekspedisi',
        accessorKey: 'expedition',
        enableSorting: false,
        cell: (props) => {
          const value = props.row.original.expedition;
          return value || '-';
        },
      },
      {
        id: 'travel_number',
        header: 'Surat Jalan',
        accessorKey: 'delivery_number',
        enableSorting: false,
        cell: (props) => {
          const value = props.row.original.delivery_number;
          return value || '-';
        },
      },
    ];
    return tableColumns;
  };

  return (
    <>
      <div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
        {!isSubmitted ? (
          <PurchasePerSupplierSkeleton
            columns={getTableColumns({} as LogisticPurchasePerSupplierSummary)}
            icon={
              <Icon
                icon='heroicons:funnel'
                className='text-white'
                width={20}
                height={20}
              />
            }
            title='No Filters Selected'
            subtitle='Please choose filters to narrow down your results and make your search easier.'
          />
        ) : isLoading ? (
          <PurchasePerSupplierSkeleton
            columns={getTableColumns({} as LogisticPurchasePerSupplierSummary)}
            icon={
              <Icon
                icon='heroicons:document-report'
                className='text-white'
                width={20}
                height={20}
              />
            }
            title='Memuat Data Pembelian Per Supplier'
            subtitle='Silakan tunggu sebentar...'
          />
        ) : data.length === 0 ? (
          <PurchasePerSupplierSkeleton
            columns={getTableColumns({} as LogisticPurchasePerSupplierSummary)}
            icon={
              <Icon
                icon='heroicons:chart-bar'
                className='text-white'
                width={20}
                height={20}
              />
            }
            title='Data Not Yet Available'
            subtitle='Please change your filters to get the data.'
          />
        ) : (
          data.map((supplierReport) => {
            const summary = supplierReport.summary || {
              total_qty: 0,
              total_unit_price: 0,
              total_purchase_value: 0,
              total_transport_unit_price: 0,
              total_transport_value: 0,
              total_amount: 0,
            };

            const totalPurchase = summary.total_amount;
            const tableColumns = getTableColumns(summary);

            return (
              <Card
                key={supplierReport.supplier.id}
                title={supplierReport.supplier.name}
                subtitle={`Total Pembelian: ${formatCurrency(totalPurchase)}`}
                className={{
                  wrapper: 'w-full rounded-lg border-none',
                  body: 'p-0',
                  title:
                    'px-2 py-1.5 font-normal text-sm bg-primary text-white',
                  subtitle:
                    'px-2 pb-1.5 bg-primary text-white text-xs font-normal',
                  collapsible: 'rounded-lg',
                }}
                variant='bordered'
                collapsible={true}
                defaultCollapsed={true}
              >
                <Table
                  data={supplierReport.rows}
                  columns={tableColumns}
                  pageSize={supplierReport.rows.length}
                  renderFooter={supplierReport.rows.length > 0}
                  className={{
                    containerClassName: 'w-full mb-0!',
                    tableWrapperClassName:
                      'overflow-x-auto rounded-tr-none rounded-tl-none',
                    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>
            );
          })
        )}
      </div>

      {/* Filter Modal */}
      <Modal
        ref={filterModal.ref}
        className={{
          modal: 'p-0',
          modalBox: 'p-0 rounded-[0.875rem] xl:max-w-4/12 max-w-sm',
        }}
      >
        {/* Modal Header */}
        <div className='flex items-center justify-between gap-2 border-b border-base-content/10 p-4'>
          <div className='flex items-center gap-2 text-primary'>
            <Icon icon='heroicons:funnel' width={20} height={20} />
            <h3 className='font-medium text-sm'>Filter Data</h3>
          </div>
          <Button
            variant='link'
            onClick={filterModal.closeModal}
            className='text-base-content/50 hover:text-base-content transition-colors cursor-pointer'
          >
            <Icon icon='heroicons:x-mark' width={20} height={20} />
          </Button>
        </div>
        <form onSubmit={formik.handleSubmit} onReset={formik.handleReset}>
          <div className='p-4 flex flex-col gap-3'>
            {/* Date Filter */}
            <div>
              <label className='block text-xs font-semibold text-base-content py-2'>
                Tanggal
              </label>
              <div className='flex flex-row gap-1.5 items-center justify-between'>
                <DateInput
                  name='start_date'
                  value={formik.values.start_date || ''}
                  errorMessage={formik.errors.start_date}
                  onChange={handleStartDateChange}
                  className={{ wrapper: 'w-full' }}
                  isNestedModal
                  isError={
                    formik.touched.start_date &&
                    Boolean(formik.errors.start_date)
                  }
                />
                <hr className='w-full max-w-3 h-px border-base-content/10' />
                <DateInput
                  name='end_date'
                  value={formik.values.end_date || ''}
                  errorMessage={formik.errors.end_date}
                  onChange={handleEndDateChange}
                  className={{ wrapper: 'w-full' }}
                  isNestedModal
                  isError={
                    (formik.touched.end_date &&
                      Boolean(formik.errors.end_date)) ||
                    hasDateError
                  }
                />
              </div>
            </div>

            {/* Area Filter */}
            <SelectInputCheckbox
              label='Area'
              placeholder='Pilih Area'
              options={areaOptions}
              value={areaIdsValue}
              onChange={(val) => {
                formik.setFieldValue(
                  'area_ids',
                  Array.isArray(val) && val.length > 0
                    ? val.map((v) => String(v.value)).join(',')
                    : null
                );
              }}
              isLoading={isLoadingAreas}
              isClearable
              className={{ wrapper: 'w-full' }}
            />

            {/* Supplier Filter */}
            <SelectInputCheckbox
              label='Supplier'
              placeholder='Pilih Supplier'
              options={supplierOptions}
              value={supplierIdsValue}
              onChange={(val) => {
                formik.setFieldValue(
                  'supplier_ids',
                  Array.isArray(val) && val.length > 0
                    ? val.map((v) => String(v.value)).join(',')
                    : null
                );
              }}
              isLoading={isLoadingSuppliers}
              isClearable
              className={{ wrapper: 'w-full' }}
            />

            {/* Product Filter */}
            <SelectInputCheckbox
              label='Produk'
              placeholder='Pilih Produk'
              options={productOptions}
              value={productIdsValue}
              onChange={(val) => {
                formik.setFieldValue(
                  'product_ids',
                  Array.isArray(val) && val.length > 0
                    ? val.map((v) => String(v.value)).join(',')
                    : null
                );
              }}
              isLoading={isLoadingProducts}
              isClearable
              className={{ wrapper: 'w-full' }}
            />

            {/* Product Category Filter */}
            <SelectInputCheckbox
              label='Kategori Produk'
              placeholder='Pilih Kategori Produk'
              options={productCategoryOptions}
              value={productCategoryIdsValue}
              onChange={(val) => {
                formik.setFieldValue(
                  'product_category_ids',
                  Array.isArray(val) && val.length > 0
                    ? val.map((v) => String(v.value)).join(',')
                    : null
                );
              }}
              isLoading={isLoadingProductCategories}
              isClearable
              className={{ wrapper: 'w-full' }}
            />

            {/* Filter By Type */}
            <SelectInputRadio
              label='Filter Berdasarkan'
              placeholder='Pilih Filter Berdasarkan'
              options={dataTypeOptions}
              value={filterByValue}
              onChange={(val) => {
                if (!Array.isArray(val)) {
                  formik.setFieldValue(
                    'filter_by',
                    val?.value?.toString() || null
                  );
                }
              }}
              className={{ wrapper: 'w-full' }}
              isClearable={true}
            />

            {/* Sort By */}
            <SelectInputRadio
              label='Urutkan Berdasarkan'
              placeholder='Pilih Urutkan Berdasarkan'
              options={sortByOptions}
              value={sortByValue}
              onChange={(val) => {
                if (!Array.isArray(val)) {
                  formik.setFieldValue(
                    'sort_by',
                    val?.value?.toString() || null
                  );
                }
              }}
              className={{ wrapper: 'w-full' }}
              isClearable={true}
            />
          </div>

          {/* Modal Footer */}
          <div className='flex justify-between items-center gap-4 p-4 border-t border-base-content/10 bg-gray-50'>
            <Button
              type='reset'
              variant='soft'
              className='rounded-lg text-base-content/65 bg-transparent border-none hover:bg-base-content/10 hover:text-base-content/65 transition-colors px-3 py-2'
            >
              Reset Filter
            </Button>
            <Button
              type='submit'
              className='min-w-40 text-sm rounded-lg py-3 text-white font-semibold'
              disabled={hasDateError || !formik.isValid || formik.isSubmitting}
            >
              Apply Filter
            </Button>
          </div>
        </form>
      </Modal>
    </>
  );
};

export default PurchasesPerSupplierTab;