'use client';

import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import Tabs from '@/components/Tabs';
import CustomerPaymentTab from '@/components/pages/report/finance/tab/CustomerPaymentTab';
import DebtSupplierTab from '@/components/pages/report/finance/tab/DebtSupplierTab';
import BalanceMonitoringTab from '@/components/pages/report/finance/tab/BalanceMonitoringTab';
import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';

const VALID_TAB_IDS = [
  'debt-supplier',
  'customer-payment',
  'balance-monitoring',
];

const FinanceTabs = () => {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const tabParam = searchParams.get('tab') ?? 'debt-supplier';
  const activeTabId = VALID_TAB_IDS.includes(tabParam)
    ? tabParam
    : 'debt-supplier';
  const tabActions = useTabActionsStore((state) => state.tabActions);

  const handleTabChange = (tabId: string) => {
    router.push(`${pathname}?tab=${tabId}`);
  };

  const tabs = [
    {
      id: 'debt-supplier',
      label: 'Rekapitulasi Hutang Ke Supplier',
      content: <DebtSupplierTab tabId={'debt-supplier'} />,
    },
    {
      id: 'customer-payment',
      label: 'Kontrol Pembayaran Customer',
      content: <CustomerPaymentTab tabId={'customer-payment'} />,
    },
    {
      id: 'balance-monitoring',
      label: 'Monitoring Saldo',
      content: <BalanceMonitoringTab tabId={'balance-monitoring'} />,
    },
  ];

  return (
    <section className='w-full'>
      <Tabs
        tabs={tabs}
        variant='boxed'
        activeTabId={activeTabId}
        onTabChange={handleTabChange}
        className={{
          tabHeaderWrapper:
            'justify-between items-center p-3 border-b border-base-content/10',
          tab: 'w-fit',
          content: 'p-0 m-0',
        }}
        sideContent={tabActions[activeTabId] || null}
      />
    </section>
  );
};

export default FinanceTabs;