'use client';

import { useEffect, useState } from 'react';
import { ExpectedExpenseManagement } from '@/components/accounting/ExpectedExpenseManagement';
import { getExpectedExpenses } from '@/components/accounting/ExpectedExpenseManagement/actions';
import { ListPageSkeleton } from '@/components/ui/skeleton';

const DEFAULT_PAGINATION = {
  currentPage: 1,
  lastPage: 1,
  perPage: 50,
  total: 0,
};

export default function ExpectedExpensesPage() {
  const [data, setData] = useState<Awaited<ReturnType<typeof getExpectedExpenses>>['data']>([]);
  const [pagination, setPagination] = useState(DEFAULT_PAGINATION);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    getExpectedExpenses({
      page: 1,
      perPage: 50,
      sortBy: 'expected_payment_date',
      sortDir: 'asc',
    })
      .then(result => {
        setData(result.data);
        setPagination(result.pagination);
      })
      .finally(() => setIsLoading(false));
  }, []);

  if (isLoading) return <ListPageSkeleton showStats statsCount={2} tableColumns={7} />;

  return (
    <ExpectedExpenseManagement
      initialData={data}
      pagination={pagination}
    />
  );
}