'use client';

import { useEffect, useState } from 'react';
import ProgressBillingManagementListClient from '@/components/business/construction/progress-billing/ProgressBillingManagementListClient';
import { getProgressBillingList, getProgressBillingStats } from '@/components/business/construction/progress-billing/actions';
import type { ProgressBilling, ProgressBillingStats } from '@/components/business/construction/progress-billing/types';
import { GenericPageSkeleton } from '@/components/ui/skeleton';

export default function ProgressBillingManagementPage() {
  const [data, setData] = useState<ProgressBilling[]>([]);
  const [stats, setStats] = useState<ProgressBillingStats | undefined>(undefined);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    Promise.all([
      getProgressBillingList({ size: 1000 }),
      getProgressBillingStats(),
    ])
      .then(([listResult, statsResult]) => {
        if (listResult.success && listResult.data) {
          setData(listResult.data.items);
        }
        if (statsResult.success && statsResult.data) {
          setStats(statsResult.data);
        }
      })
      .finally(() => setIsLoading(false));
  }, []);

  if (isLoading) return <GenericPageSkeleton />;

  return <ProgressBillingManagementListClient initialData={data} initialStats={stats} />;
}