sam-react-prod/src/app/[locale]/(protected)/vehicle-management/vehicle-log/[id]/page.tsx

'use client';

/**
 * 차량일지 상세 페이지
 */

import { useEffect, useState } from 'react';
import { useParams } from 'next/navigation';
import { VehicleLogDetail } from '@/components/vehicle-management/VehicleLogDetail';
import { getVehicleLogById } from '@/components/vehicle-management/VehicleLogList/actions';
import type { VehicleLog } from '@/components/vehicle-management/types';

export default function VehicleLogDetailPage() {
  const params = useParams();
  const id = params.id as string;

  const [data, setData] = useState<VehicleLog | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (!id) return;

    getVehicleLogById(id)
      .then((result) => {
        if (result.success && result.data) {
          setData(result.data);
        } else {
          setError(result.error || '데이터를 불러올 수 없습니다.');
        }
      })
      .finally(() => setIsLoading(false));
  }, [id]);

  if (isLoading) {
    return (
      <div className="flex items-center justify-center min-h-[400px]">
        <div className="text-muted-foreground">로딩 중...</div>
      </div>
    );
  }

  if (error || !data) {
    return (
      <div className="flex items-center justify-center min-h-[400px]">
        <div className="text-red-500">{error || '차량일지를 찾을 수 없습니다.'}</div>
      </div>
    );
  }

  return <VehicleLogDetail mode="view" initialData={data} id={id} />;
}