import { useState, useMemo, useCallback, useEffect } from 'react';
import useSWR from 'swr';
import { Icon } from '@iconify/react';
import Card from '@/components/Card';
import Badge from '@/components/Badge';
import { useSelect } from '@/components/input/SelectInput';
import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
import SelectInputRadio from '@/components/input/SelectInputRadio';
import DateInput from '@/components/input/DateInput';
import { CustomerApi } from '@/services/api/master-data';
import { FinanceApi } from '@/services/api/report/finance-report';
// import { UserApi } from '@/services/api/user';
import Table from '@/components/Table';
import { ColumnDef } from '@tanstack/react-table';
import { formatCurrency, formatDate, formatNumber, cn } from '@/lib/helper';
import {
  CustomerPaymentReport,
  CustomerPaymentSummary,
} from '@/types/api/report/customer-payment';
import { isResponseSuccess } from '@/lib/api-helper';
import Button from '@/components/Button';
import Dropdown from '@/components/Dropdown';
import MenuItem from '@/components/menu/MenuItem';
import Menu from '@/components/menu/Menu';
import Modal from '@/components/Modal';
import { useModal } from '@/components/Modal';
import toast from 'react-hot-toast';
import { generateCustomerPaymentExcel } from '@/components/pages/report/finance/export/CustomerPaymentExportXLSX';
import { generateCustomerPaymentPDF } from '@/components/pages/report/finance/export/CustomerPaymentExportPDF';
import { useFinanceTabStore } from '@/stores/finance-tab/finance-tab.store';
import CustomerSupplierSkeleton from '@/components/pages/report/finance/skeleton/CustomerSupplierSkeleton';

interface CustomerPaymentTabProps {
  tabId: string;
}

const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
  // ===== 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 [isSubmitted, setIsSubmitted] = useState(false);

  // ===== FILTER STATE =====
  const [appliedFilterCustomer, setAppliedFilterCustomer] = useState<
    typeof customerOptions
  >([]);
  // TODO: Uncomment when BE is ready
  // const [appliedFilterSales, setAppliedFilterSales] = useState<
  //   typeof salesOptions
  // >([]);
  const [appliedFilterByType, setAppliedFilterByType] = useState<
    (typeof dataTypeOptions)[0] | null
  >(null);
  const [appliedFilterStartDate, setAppliedFilterStartDate] = useState('');
  const [appliedFilterEndDate, setAppliedFilterEndDate] = useState('');
  const [dateErrorShown, setDateErrorShown] = useState(false);
  const [hasDateError, setHasDateError] = useState(false);

  const [filterCustomer, setFilterCustomer] = useState<typeof customerOptions>(
    []
  );
  // TODO: Uncomment when BE is ready
  // const [filterSales, setFilterSales] = useState<typeof salesOptions>([]);
  const [filterStartDate, setFilterStartDate] = useState('');
  const [filterEndDate, setFilterEndDate] = useState('');

  const filterModal = useModal();

  const dataTypeOptions = useMemo(
    () => [
      { value: 'trans_date', label: 'Tanggal Jual/Bayar' },
      { value: 'realization_date', label: 'Tanggal Realisasi' },
    ],
    []
  );

  const [filterByType, setFilterByType] = useState<
    (typeof dataTypeOptions)[0] | null
  >(null);

  const {
    options: customerOptions,
    setInputValue: setCustomerInputValue,
    isLoadingOptions: isLoadingCustomers,
    loadMore: loadMoreCustomers,
  } = useSelect(CustomerApi.basePath, 'id', 'name', 'search');

  // TODO: Uncomment when BE is ready
  // const {
  //   options: salesOptions,
  //   setInputValue: setSalesInputValue,
  //   isLoadingOptions: isLoadingSales,
  //   loadMore: loadMoreSales,
  //   hasMore: hasMoreSales,
  // } = useSelect(UserApi.basePath, 'id', 'name', 'search');

  const getPaymentStatusColor = (notes: string) => {
    const normalizedValue = notes.toLowerCase();

    if (normalizedValue === 'lunas') {
      return 'bg-info/10 text-black border-info';
    }

    if (normalizedValue.includes('belum')) {
      return 'bg-warning/10 text-black border-warning';
    }

    return 'bg-gray-100 text-black border-gray-300';
  };

  const getPaymentStatusIndicatorColor = (notes: string) => {
    const normalizedValue = notes.toLowerCase();

    if (normalizedValue === 'lunas') {
      return 'bg-info';
    }

    if (normalizedValue.includes('belum')) {
      return 'bg-warning';
    }

    return 'bg-gray-400';
  };

  const getPaymentStatusText = (notes: string) => {
    return notes
      .toLowerCase()
      .split(' ')
      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
      .join(' ');
  };

  // ===== FILTER HANDLERS =====
  const handleFilterModalOpen = useCallback(() => {
    setFilterCustomer(appliedFilterCustomer);
    // setFilterSales(appliedFilterSales);
    setFilterByType(appliedFilterByType);
    setFilterStartDate(appliedFilterStartDate);
    setFilterEndDate(appliedFilterEndDate);
    filterModal.openModal();
  }, [
    filterModal,
    appliedFilterCustomer,
    appliedFilterByType,
    appliedFilterStartDate,
    appliedFilterEndDate,
  ]);

  const handleResetFilters = useCallback(() => {
    setIsSubmitted(false);
    setFilterCustomer([]);
    setFilterByType(null);
    setFilterStartDate('');
    setFilterEndDate('');
    setAppliedFilterCustomer([]);
    setAppliedFilterByType(null);
    setAppliedFilterStartDate('');
    setAppliedFilterEndDate('');
    setHasDateError(false);
    if (dateErrorShown) {
      toast.dismiss();
      setDateErrorShown(false);
    }
  }, [dateErrorShown]);

  const handleApplyFilters = useCallback(() => {
    setAppliedFilterCustomer(filterCustomer);
    setAppliedFilterByType(filterByType);
    setAppliedFilterStartDate(filterStartDate);
    setAppliedFilterEndDate(filterEndDate);
    setIsSubmitted(true);
    setCurrentPage(1);
    filterModal.closeModal();
  }, [
    filterModal,
    filterCustomer,
    filterByType,
    filterStartDate,
    filterEndDate,
  ]);

  const handleStartDateChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      const value = e.target.value;
      setFilterStartDate(value);

      if (value && filterEndDate) {
        const startDate = new Date(value);
        const endDateObj = new Date(filterEndDate);

        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);
      }
    },
    [filterEndDate, dateErrorShown]
  );

  const handleEndDateChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      const value = e.target.value;
      setFilterEndDate(value);

      if (value && filterStartDate) {
        const startDateObj = new Date(filterStartDate);
        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);
      }
    },
    [filterStartDate, dateErrorShown]
  );

  // ===== ACTIVE FILTERS COUNT =====
  const activeFiltersCount = useMemo(() => {
    let count = 0;

    // Date filter (start_date + end_date = 1 filter)
    if (appliedFilterStartDate || appliedFilterEndDate) {
      count += 1;
    }

    // Customer filter
    if (appliedFilterCustomer.length > 0) {
      count += 1;
    }

    // Filter by type filter (hanya dihitung jika ada nilai yang dipilih)
    if (appliedFilterByType) {
      count += 1;
    }

    // TODO: Uncomment when BE is ready
    // // Sales filter
    // if (appliedFilterSales.length > 0) {
    //   count += 1;
    // }

    return count;
  }, [
    appliedFilterStartDate,
    appliedFilterEndDate,
    appliedFilterCustomer,
    appliedFilterByType,
  ]);

  const hasFilters = activeFiltersCount > 0;

  // ===== DATA FETCHING =====
  const { data: customerPayment, isLoading } = useSWR(
    isSubmitted
      ? () => {
          const params = {
            customer_ids:
              appliedFilterCustomer.length > 0
                ? appliedFilterCustomer.map((v) => String(v.value)).join(',')
                : undefined,
            // TODO: Uncomment when BE is ready
            // sales_id:
            //   appliedFilterSales.length > 0
            //     ? appliedFilterSales.map((v) => String(v.value)).join(',')
            //     : undefined,
            filter_by: appliedFilterByType?.value as
              | 'trans_date'
              | 'realization_date'
              | undefined,
            start_date: appliedFilterStartDate || undefined,
            end_date: appliedFilterEndDate || undefined,
            page: currentPage,
            limit: pageSize,
          };

          return ['customer-payment-report', params];
        }
      : null,
    ([, params]) =>
      FinanceApi.getCustomerPaymentReport(
        params.customer_ids,
        params.filter_by,
        params.start_date,
        params.end_date,
        params.page,
        params.limit
      )
  );

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

  // ===== EXPORT DATA FETCHER =====
  const customerPaymentExport = useCallback(async (): Promise<
    CustomerPaymentReport[] | null
  > => {
    const params = {
      customer_ids:
        appliedFilterCustomer.length > 0
          ? appliedFilterCustomer.map((v) => String(v.value)).join(',')
          : undefined,
      // TODO: Uncomment when BE is ready
      // sales_id:
      //   appliedFilterSales.length > 0
      //     ? appliedFilterSales.map((v) => String(v.value)).join(',')
      //     : undefined,
      filter_by: appliedFilterByType?.value as
        | 'trans_date'
        | 'realization_date'
        | undefined,
      start_date: appliedFilterStartDate || undefined,
      end_date: appliedFilterEndDate || undefined,
      limit: 100,
      page: 1,
    };

    const response = await FinanceApi.getCustomerPaymentReport(
      params.customer_ids,
      params.filter_by,
      params.start_date,
      params.end_date,
      params.page,
      params.limit
    );

    return isResponseSuccess(response)
      ? (response.data as unknown as CustomerPaymentReport[])
      : null;
  }, [
    appliedFilterCustomer,
    // appliedFilterSales,
    appliedFilterStartDate,
    appliedFilterEndDate,
    appliedFilterByType,
  ]);

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

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

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

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

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

      await generateCustomerPaymentPDF({
        data: allDataForExport,
        params: {
          customer_name:
            appliedFilterCustomer.length > 0
              ? appliedFilterCustomer.map((c) => c.label).join(', ')
              : undefined,
          // TODO: Uncomment when BE is ready
          // sales:
          //   appliedFilterSales.length > 0
          //     ? appliedFilterSales.map((s) => s.label).join(', ')
          //     : undefined,
          start_date: appliedFilterStartDate || undefined,
          end_date: appliedFilterEndDate || undefined,
          filter_by: appliedFilterByType?.value as
            | 'trans_date'
            | 'realization_date'
            | undefined,
        },
      });
      toast.success('PDF berhasil dibuat dan diunduh.');
    } catch {
      toast.error('Gagal membuat PDF. Silakan coba lagi.');
    } finally {
      setIsPdfExportLoading(false);
    }
  }, [customerPaymentExport]);

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

  useEffect(() => {
    setTabActions(
      tabId,
      <div className='flex flex-row gap-3'>
        <Button
          variant='outline'
          color='none'
          onClick={handleFilterModalOpen}
          className={cn(
            'px-3 py-2.5',
            'rounded-lg! font-semibold text-sm gap-1.5',
            'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft',
            hasFilters && 'border-primary-gradient text-primary'
          )}
        >
          <Icon icon='heroicons:funnel' width={18} height={18} />
          Filter
          {hasFilters && (
            <span className='w-5 h-5 text-white bg-[#FF3535] rounded-lg border border-base-300 flex items-center justify-center text-xs'>
              {activeFiltersCount}
            </span>
          )}
        </Button>

        <Dropdown
          trigger={
            <Button
              variant='outline'
              color='none'
              isLoading={isAnyExportLoading}
              className={cn(
                'px-3 py-2.5',
                'rounded-lg font-semibold text-sm gap-1.5',
                'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft'
              )}
            >
              <Icon icon='heroicons:cloud-arrow-down' width={20} height={20} />
              Export
              <div className='w-6.5 h-5 flex items-center justify-center border-l border-base-content/10'>
                <Icon width={14} height={14} icon='heroicons:chevron-down' />
              </div>
            </Button>
          }
          align='end'
          className={{
            content:
              'mt-1 p-0 w-full shadow-button-soft border border-base-content/10 rounded-lg',
          }}
        >
          <Menu className='p-0 w-full'>
            <MenuItem
              className='text-sm p-3'
              title='Excel'
              onClick={handleExportExcel}
            />
            <MenuItem
              className='text-sm p-3'
              title='PDF'
              onClick={handleExportPdf}
            />
          </Menu>
        </Dropdown>
      </div>
    );
  }, [
    tabId,
    hasFilters,
    activeFiltersCount,
    isAnyExportLoading,
    handleExportExcel,
    handleExportPdf,
    filterModal.open,
    setTabActions,
  ]);

  // Cleanup on unmount
  useEffect(() => {
    return () => {
      clearTabActions(tabId);
    };
  }, [tabId, clearTabActions]);

  const getTableColumns = (
    summary: CustomerPaymentSummary
  ): ColumnDef<CustomerPaymentReport['rows'][0]>[] => {
    const tableColumns: ColumnDef<CustomerPaymentReport['rows'][0]>[] = [
      {
        id: 'no',
        header: 'No',
        cell: (props) => props.row.index,
        footer: () => <div className='font-semibold text-gray-900'>Total</div>,
      },
      {
        id: 'trans_date',
        header: 'Tanggal Jual/Bayar',
        accessorKey: 'trans_date',
        enableSorting: false,
        cell: (props) => {
          const value = props.row.original.trans_date;
          return value ? formatDate(value, 'DD MMM YYYY') : '-';
        },
      },
      {
        id: 'realization_date',
        header: 'Tanggal Realisasi',
        accessorKey: 'delivery_date',
        enableSorting: false,
        cell: (props) => {
          const value = props.row.original.delivery_date;
          return value ? formatDate(value, 'DD MMM YYYY') : '-';
        },
      },
      {
        id: 'aging',
        header: 'Aging',
        accessorKey: 'aging_day',
        enableSorting: false,
        cell: (props) => {
          const value = props.row.original.aging_day;
          return (
            <div className='text-center'>
              {value !== null && value !== undefined
                ? `${formatNumber(value)} hari`
                : '-'}
            </div>
          );
        },
      },
      {
        id: 'reference',
        header: 'Referensi',
        accessorKey: 'reference',
        enableSorting: false,
        cell: (props) => {
          const value = props.row.original.reference;
          return value || '-';
        },
      },
      {
        id: 'vehicle_plate',
        header: 'Nomor Polisi',
        accessorKey: 'vehicle_numbers',
        enableSorting: false,
        cell: (props) => {
          const value = props.row.original.vehicle_numbers;
          return Array.isArray(value)
            ? value.length > 0
              ? value.join(', ')
              : '-'
            : '-';
        },
      },
      {
        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: 'weight',
        header: 'Berat (Kg)',
        accessorKey: 'weight',
        enableSorting: false,
        cell: (props) => {
          const value = props.row.original.weight;
          return <div className='text-right'>{formatNumber(value)}</div>;
        },
        footer: () => (
          <div className='text-right font-semibold text-gray-900'>
            {formatNumber(summary.total_weight) || '-'}
          </div>
        ),
      },
      {
        id: 'average_weight',
        header: 'AVG',
        accessorKey: 'average_weight',
        enableSorting: false,
        cell: (props) => {
          const value = props.row.original.average_weight;
          return <div className='text-right'>{formatNumber(value)}</div>;
        },
        footer: () => (
          <div className='text-right font-semibold text-gray-900'>-</div>
        ),
      },
      {
        id: 'unit_price',
        header: 'Harga/Unit',
        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'>-</div>
        ),
      },
      {
        id: 'final_price',
        header: 'Harga Akhir',
        accessorKey: 'final_price',
        enableSorting: false,
        cell: (props) => {
          const value = props.row.original.final_price;
          return <div className='text-right'>{formatCurrency(value)}</div>;
        },
        footer: () => (
          <div className='text-right font-semibold text-gray-900'>
            {formatCurrency(summary.total_final_amount) || '-'}
          </div>
        ),
      },
      {
        id: 'total',
        header: 'Total',
        accessorKey: 'total_price',
        enableSorting: false,
        cell: (props) => {
          const value = props.row.original.total_price;
          return <div className='text-right'>{formatCurrency(value)}</div>;
        },
        footer: () => (
          <div className='text-right font-semibold text-gray-900'>
            {formatCurrency(summary.total_grand_amount) || '-'}
          </div>
        ),
      },
      {
        id: 'payment',
        header: 'Pembayaran',
        accessorKey: 'payment_amount',
        enableSorting: false,
        cell: (props) => {
          const value = props.row.original.payment_amount;
          return <div className='text-right'>{formatCurrency(value)}</div>;
        },
        footer: () => (
          <div className='text-right font-semibold text-gray-900'>
            {formatCurrency(summary.total_payment) || '-'}
          </div>
        ),
      },
      {
        id: 'accounts_receivable',
        header: 'Saldo Piutang',
        accessorKey: 'accounts_receivable',
        enableSorting: false,
        cell: (props) => {
          const value = props.row.original.accounts_receivable;
          return (
            <div
              className={`text-right font-semibold ${
                value < 0 ? 'text-error' : ''
              }`}
            >
              {formatCurrency(value)}
            </div>
          );
        },
        footer: () => (
          <div
            className={`text-right font-semibold ${
              summary.total_accounts_receivable < 0 ? 'text-error' : ''
            }`}
          >
            {formatCurrency(summary.total_accounts_receivable) || '-'}
          </div>
        ),
      },
      {
        id: 'notes',
        header: 'Keterangan',
        accessorKey: 'status',
        enableSorting: false,
        cell: (props) => {
          const value = props.row.original.status;

          if (!value) {
            return '-';
          }

          return (
            <Badge
              statusIndicator={true}
              size='sm'
              variant='soft'
              className={{
                badge: `py-2.5 px-2 font-thin text-xs border border-gray-200 rounded-xl justify-start ${getPaymentStatusColor(value)}`,
                status: getPaymentStatusIndicatorColor(value),
              }}
            >
              {getPaymentStatusText(value)}
            </Badge>
          );
        },
      },
      {
        id: 'pickup_info',
        header: 'Pengambilan',
        accessorKey: 'pickup_info',
        enableSorting: false,
        cell: (props) => {
          const value = props.row.original.pickup_info;
          return Array.isArray(value)
            ? value.length > 0
              ? value.join(', ')
              : '-'
            : '-';
        },
      },
      {
        id: 'sales_marketing',
        header: 'Sales/Marketing',
        accessorKey: 'sales_person',
        enableSorting: false,
        cell: (props) => {
          const value = props.row.original.sales_person;
          return value || '-';
        },
      },
    ];
    return tableColumns;
  };

  return (
    <>
      <div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
        {!isSubmitted ? (
          <CustomerSupplierSkeleton
            columns={getTableColumns({} as CustomerPaymentSummary)}
            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 ? (
          <div className='w-full flex flex-row justify-center items-center p-4'>
            <span className='loading loading-spinner loading-xl' />
          </div>
        ) : data.length === 0 ? (
          <CustomerSupplierSkeleton
            columns={getTableColumns({} as CustomerPaymentSummary)}
            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((customerReport) => {
            const summary = customerReport.summary || {
              total_qty: 0,
              total_weight: 0,
              total_final_amount: 0,
              total_grand_amount: 0,
              total_payment: 0,
              total_accounts_receivable: 0,
            };

            const tableColumns = getTableColumns(summary);

            return (
              <Card
                key={customerReport.customer.id}
                title={customerReport.customer.name}
                subtitle={`(${customerReport.customer.address})`}
                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={[
                    {
                      accounts_receivable: customerReport.initial_balance,
                    } as CustomerPaymentReport['rows'][0],
                    ...customerReport.rows,
                  ]}
                  columns={tableColumns}
                  pageSize={customerReport.rows.length + 1}
                  renderFooter={customerReport.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',
                  }}
                  renderCustomRow={(row) => {
                    if (row.index === 0) {
                      return (
                        <tr
                          key={row.index}
                          className='hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200'
                        >
                          <td
                            className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap'
                            colSpan={13}
                          ></td>
                          <td className='px-4 py-3 text-xs whitespace-nowrap'>
                            <div
                              className={`text-right ${
                                row.original.accounts_receivable < 0
                                  ? 'text-error'
                                  : ''
                              }`}
                            >
                              {formatCurrency(row.original.accounts_receivable)}
                            </div>
                          </td>
                          <td
                            className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap'
                            colSpan={4}
                          ></td>
                        </tr>
                      );
                    }
                  }}
                />
              </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>
        <div className='p-4 flex flex-col gap-1.5'>
          <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={filterStartDate}
                onChange={handleStartDateChange}
                className={{ wrapper: 'w-full' }}
                isNestedModal
              />
              <hr className='w-full max-w-3 h-px border-base-content/10' />

              <DateInput
                name='end_date'
                value={filterEndDate}
                onChange={handleEndDateChange}
                className={{ wrapper: 'w-full' }}
                isNestedModal
              />
            </div>
          </div>

          <SelectInputCheckbox
            label='Customer'
            placeholder='Pilih Customer'
            options={customerOptions}
            value={filterCustomer}
            onChange={(val) => {
              setFilterCustomer(Array.isArray(val) ? val : val ? [val] : []);
            }}
            onInputChange={setCustomerInputValue}
            isLoading={isLoadingCustomers}
            isClearable
            onMenuScrollToBottom={loadMoreCustomers}
            className={{ wrapper: 'w-full' }}
          />

          {/* TODO: Uncomment when BE is ready */}
          {/* <div>
                <SelectInputCheckbox
                  label='Sales'
                  placeholder='Pilih Sales'
                  options={salesOptions}
                  value={filterSales}
                  onChange={(val) => {
                    setFilterSales(Array.isArray(val) ? val : val ? [val] : []);
                  }}
                  onInputChange={setSalesInputValue}
                  isLoading={isLoadingSales}
                  isClearable
                  onMenuScrollToBottom={loadMoreSales}
                  className={{ wrapper: 'w-full' }}
                />
              </div> */}

          <SelectInputRadio
            label='Filter Berdasarkan'
            placeholder='Pilih Filter Berdasarkan'
            options={dataTypeOptions}
            value={filterByType}
            onChange={(val) => {
              if (val && !Array.isArray(val)) {
                setFilterByType(val);
              }
            }}
            className={{ wrapper: 'w-full' }}
          />

          {/* Action Buttons */}
        </div>
        <div className='flex justify-between items-center gap-4 p-4 border-t border-base-content/10 bg-gray-50'>
          <Button
            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'
            onClick={handleResetFilters}
          >
            Reset Filter
          </Button>
          <Button
            className='min-w-40 text-sm rounded-lg py-3 text-white font-semibold'
            onClick={handleApplyFilters}
            disabled={hasDateError}
          >
            Apply Filter
          </Button>
        </div>
      </Modal>
    </>
  );
};

export default CustomerPaymentTab;