'use client';

import { useEffect, useState } from 'react';
import ConstructionManagementListClient from '@/components/business/construction/management/ConstructionManagementListClient';
import {
  getConstructionManagementList,
  getConstructionManagementStats,
} from '@/components/business/construction/management/actions';
import type {
  ConstructionManagement,
  ConstructionManagementStats,
} from '@/components/business/construction/management/types';
import { GenericPageSkeleton } from '@/components/ui/skeleton';

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

  useEffect(() => {
    const loadData = async () => {
      try {
        const [listResult, statsResult] = await Promise.all([
          getConstructionManagementList({ size: 1000 }),
          getConstructionManagementStats(),
        ]);

        if (listResult.success && listResult.data) {
          setData(listResult.data.items);
        }
        if (statsResult.success && statsResult.data) {
          setStats(statsResult.data);
        }
      } catch (error) {
        console.error('Failed to load construction management data:', error);
      } finally {
        setIsLoading(false);
      }
    };

    loadData();
  }, []);

  if (isLoading) return <GenericPageSkeleton />;

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