'use client';

/**
 * 지게차 상세 페이지
 */

import { useEffect, useState } from 'react';
import { useParams } from 'next/navigation';
import { ForkliftDetail } from '@/components/vehicle-management/ForkliftDetail';
import { getForkliftById } from '@/components/vehicle-management/ForkliftList/actions';
import type { Forklift } from '@/components/vehicle-management/types';

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

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

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

    getForkliftById(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 <ForkliftDetail mode="view" initialData={data} id={id} />;
}
