'use client';

import React, { useEffect, use } from 'react'; // Added 'use'
import { useDispatch } from 'react-redux';
import { AppDispatch } from '@/store/store';
import { resetFilters } from '@/store/slices/filtersSlice';
import TableContainer from '@/components/common/table-view/TableContainer';
import { IBucketConfig } from '@/lib/bucketInterfaces';
import {
  useVcmCommissionBonusReceived,
  useVcmCommissionContracts,
  useVcmCommissionEnquiry,
  useVcmCommissionReceived,
} from '@/hooks/bucket/visa-commission';
import { useCommonMasters } from '@/hooks/bucket/masters';
import { useVcmCommon } from '@/hooks/bucket/visa-commission/useVcmCommon';
import NotFound from '../not-found';

interface PageProps {
  params: Promise<{ slug: string[] }>;
}

const DynamicPage = ({ params }: PageProps) => {
  // In Next.js 15, we must unwrap params using React.use()
  const resolvedParams = use(params);
  const dispatch = useDispatch<AppDispatch>();

  const slug = resolvedParams?.slug || [];
  const route = slug.join('/');

  useEffect(() => {
    if (route) {
      dispatch(resetFilters());
    }
  }, [dispatch, route]);

  // Determine which bucket to use based on route
  // Note: These hooks should ideally be called inside sub-components
  // to follow "Rules of Hooks" strictly, but this fix handles the build crash.
  let bucket: IBucketConfig | null = null;

  const vcmContracts1 = useVcmCommissionContracts('1');
  const vcmContracts2 = useVcmCommissionContracts('2');
  const vcmContracts3 = useVcmCommissionContracts('3');
  const vcmEnquiry1 = useVcmCommissionEnquiry('1');
  const vcmEnquiry2 = useVcmCommissionEnquiry('2');
  const vcmReceived1 = useVcmCommissionReceived('1');
  const vcmReceived2 = useVcmCommissionReceived('2');
  const vcmBonusReceivedInstitute = useVcmCommissionBonusReceived('1');
  const bonusReceivedMasterAgent = useVcmCommissionBonusReceived('2');
  const subAgentBonus = useVcmCommon('sub-agent-bonus-paid');
  const subAgentComm = useVcmCommon('sub-agent-commission');
  const masterReason = useCommonMasters('commission-response-reason');
  const diffReason = useCommonMasters('commission-difference-reason');
  const menuGroups = useCommonMasters('menu_groups');
  const menus = useCommonMasters('menus');

  switch (route) {
    case 'institute-commission-contracts/index':
      bucket = vcmContracts1;
      break;
    case 'master-agent-commission-contracts/index':
      bucket = vcmContracts2;
      break;
    case 'sub-agent-commission-contracts/index':
      bucket = vcmContracts3;
      break;
    case 'visa-commission-enquiry-institute/index':
      bucket = vcmEnquiry1;
      break;
    case 'visa-commission-enquiry-master-agent/index':
      bucket = vcmEnquiry2;
      break;
    case 'visa-commission-received-institute/index':
      bucket = vcmReceived1;
      break;
    case 'visa-commission-received-master-agent/index':
      bucket = vcmReceived2;
      break;
    case 'visa-bonus-received-institute/index':
      bucket = vcmBonusReceivedInstitute;
      break;
    case 'visa-bonus-received-master-agent/index':
      bucket = bonusReceivedMasterAgent;
      break;
    case 'sub-agent-bonus-paid/index':
      bucket = subAgentBonus;
      break;
    case 'sub-agent-commission/index':
      bucket = subAgentComm;
      break;
    case 'commission-response-reason/index':
      bucket = masterReason;
      break;
    case 'commission-difference-reason/index':
      bucket = diffReason;
      break;
    case 'menu_groups/index':
      bucket = menuGroups;
      break;
    case 'menus/index':
      bucket = menus;
      break;
    default:
      bucket = null;
      break;
  }

  if (!bucket) return <NotFound />;

  return (
    <div>
      <TableContainer bucket={bucket} />
    </div>
  );
};

export default DynamicPage;