'use client';

import { useEffect, useState } from 'react';
import WorkerStatusListClient from '@/components/business/construction/worker-status/WorkerStatusListClient';
import { getWorkerStatusList, getWorkerStatusStats } from '@/components/business/construction/worker-status/actions';
import type { WorkerStatus, WorkerStatusStats } from '@/components/business/construction/worker-status/types';
import { ListPageSkeleton } from '@/components/ui/skeleton';

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

  useEffect(() => {
    Promise.all([getWorkerStatusList(), getWorkerStatusStats()])
      .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 <ListPageSkeleton showHeader={false} showStats={true} statsCount={4} />;
  }

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