'use client';

/**
 * 단계 상세 클라이언트 컴포넌트
 *
 * 라우팅:
 * - /[id]/steps/[stepId] → 상세 보기
 * - /[id]/steps/[stepId]?mode=edit → 수정
 * - /[id]/steps/new → 등록
 */

import { useState, useEffect } from 'react';
import { useSearchParams } from 'next/navigation';
import { StepDetail } from './StepDetail';
import { StepForm } from './StepForm';
import { getProcessStepById } from './actions';
import type { ProcessStep } from '@/types/process';
import { DetailPageSkeleton } from '@/components/ui/skeleton';
import { ErrorCard } from '@/components/ui/error-card';
import { toast } from 'sonner';

type DetailMode = 'view' | 'edit' | 'create';

interface StepDetailClientProps {
  processId: string;
  stepId: string;
}

export function StepDetailClient({ processId, stepId }: StepDetailClientProps) {
  const searchParams = useSearchParams();
  const modeFromQuery = searchParams.get('mode') as DetailMode | null;
  const isNewMode = stepId === 'new';

  const [mode] = useState<DetailMode>(() => {
    if (isNewMode) return 'create';
    if (modeFromQuery === 'edit') return 'edit';
    return 'view';
  });

  const [stepData, setStepData] = useState<ProcessStep | null>(null);
  const [isLoading, setIsLoading] = useState(!isNewMode);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (isNewMode) {
      setIsLoading(false);
      return;
    }

    const loadData = async () => {
      setIsLoading(true);
      setError(null);
      try {
        const result = await getProcessStepById(processId, stepId);
        if (result.success && result.data) {
          setStepData(result.data);
        } else {
          setError(result.error || '단계 정보를 찾을 수 없습니다.');
          toast.error('단계를 불러오는데 실패했습니다.');
        }
      } catch (err) {
        console.error('단계 조회 실패:', err);
        setError('단계 정보를 불러오는 중 오류가 발생했습니다.');
        toast.error('단계를 불러오는데 실패했습니다.');
      } finally {
        setIsLoading(false);
      }
    };

    loadData();
  }, [processId, stepId, isNewMode]);

  if (isLoading) {
    return <DetailPageSkeleton sections={1} fieldsPerSection={4} />;
  }

  if (error && !isNewMode) {
    return (
      <ErrorCard
        type="network"
        title="단계 정보를 불러올 수 없습니다"
        description={error}
        tips={[
          '해당 단계가 존재하는지 확인해주세요',
          '인터넷 연결 상태를 확인해주세요',
        ]}
        homeButtonLabel="공정 상세로 이동"
        homeButtonHref={`/ko/master-data/process-management/${processId}`}
      />
    );
  }

  if (mode === 'create') {
    return <StepForm mode="create" processId={processId} />;
  }

  if (mode === 'edit' && stepData) {
    return <StepForm mode="edit" processId={processId} initialData={stepData} />;
  }

  if (mode === 'view' && stepData) {
    return <StepDetail step={stepData} processId={processId} />;
  }

  return (
    <ErrorCard
      type="not-found"
      title="단계를 찾을 수 없습니다"
      description="요청하신 단계 정보가 존재하지 않습니다."
      homeButtonLabel="공정 상세로 이동"
      homeButtonHref={`/ko/master-data/process-management/${processId}`}
    />
  );
}