'use client';

/**
 * 구조검토 V2 클라이언트 컴포넌트
 *
 * V2 라우팅 패턴:
 * - /structure-review/[id] → 조회 모드 (기본)
 * - /structure-review/[id]?mode=edit → 수정 모드
 *
 * 기존 /structure-review/[id]/edit → /structure-review/[id]?mode=edit 으로 리다이렉트
 */

import { useState, useEffect } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import StructureReviewDetailForm from './StructureReviewDetailForm';
import type { StructureReview } from './types';
import { DetailPageSkeleton } from '@/components/ui/skeleton';
import { ErrorCard } from '@/components/ui/error-card';

type DetailMode = 'view' | 'edit';

interface StructureReviewDetailClientV2Props {
  reviewId: string;
  initialMode?: DetailMode;
}

// 목업 데이터 (추후 API 연동 시 제거)
const MOCK_REVIEW: StructureReview = {
  id: '1',
  reviewNumber: '123123',
  partnerId: '1',
  partnerName: '거래처명A',
  siteId: '1',
  siteName: '현장A',
  requestDate: '2025-12-12',
  reviewCompany: '회사명',
  reviewerName: '홍길동',
  reviewDate: '2025-12-15',
  completionDate: null,
  status: 'pending',
  createdAt: '2025-12-01T00:00:00Z',
  updatedAt: '2025-12-01T00:00:00Z',
};

const BASE_PATH = '/ko/construction/order/structure-review';

export function StructureReviewDetailClientV2({
  reviewId,
  initialMode,
}: StructureReviewDetailClientV2Props) {
  const router = useRouter();
  const searchParams = useSearchParams();

  // URL의 mode 쿼리 파라미터 확인
  const modeFromQuery = searchParams.get('mode') as DetailMode | null;

  // 모드 결정: initialMode > query param > 기본값 'view'
  const [mode, setMode] = useState<DetailMode>(() => {
    if (initialMode) return initialMode;
    if (modeFromQuery === 'edit') return 'edit';
    return 'view';
  });

  // 데이터 상태
  const [review, setReview] = useState<StructureReview | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  // 데이터 로드
  useEffect(() => {
    async function fetchData() {
      setIsLoading(true);
      setError(null);

      try {
        // TODO: API 연동
        // const result = await getStructureReviewById(reviewId);
        // if (result.success && result.data) {
        //   setReview(result.data);
        // } else {
        //   setError(result.error || '구조검토를 찾을 수 없습니다.');
        // }

        // 임시: 목업 데이터 사용
        await new Promise((resolve) => setTimeout(resolve, 300));

        // ID가 숫자가 아니거나 너무 큰 경우 에러
        const numericId = parseInt(reviewId, 10);
        if (isNaN(numericId) || numericId > 100) {
          setError('구조검토를 찾을 수 없습니다.');
        } else {
          setReview({ ...MOCK_REVIEW, id: reviewId });
        }
      } catch {
        setError('데이터를 불러오는 중 오류가 발생했습니다.');
      } finally {
        setIsLoading(false);
      }
    }

    fetchData();
  }, [reviewId]);

  // URL 쿼리 파라미터 변경 감지
  useEffect(() => {
    if (modeFromQuery === 'edit') {
      setMode('edit');
    } else if (!modeFromQuery && mode !== 'view') {
      setMode('view');
    }
  }, [modeFromQuery, mode]);

  // ===== 로딩 상태 =====
  if (isLoading) {
    return <DetailPageSkeleton sections={2} fieldsPerSection={6} />;
  }

  // ===== 에러 상태 =====
  if (error) {
    return (
      <ErrorCard
        type="not-found"
        title="구조검토를 찾을 수 없습니다"
        message={error}
        actionLabel="목록으로"
        onAction={() => router.push(BASE_PATH)}
      />
    );
  }

  // ===== 데이터 없음 =====
  if (!review) {
    return (
      <ErrorCard
        type="error"
        title="오류가 발생했습니다"
        message="잠시 후 다시 시도해주세요."
        actionLabel="목록으로"
        onAction={() => router.push(BASE_PATH)}
      />
    );
  }

  // ===== 정상 렌더링 =====
  return <StructureReviewDetailForm review={review} mode={mode} />;
}

export default StructureReviewDetailClientV2;
