zellyy-finance/src/components/AppVersionInfo.tsx

import React, { useCallback, useEffect, useState, useRef } from 'react';
import { getAppVersionInfo, isAndroidPlatform } from '@/utils/platform';
import { Label } from '@/components/ui/label';
interface AppVersionInfoProps {
  className?: string;
  showDevInfo?: boolean;
  editable?: boolean;
}
const AppVersionInfo: React.FC<AppVersionInfoProps> = ({
  className,
  showDevInfo = true,
  editable = false
}) => {
  const [versionInfo, setVersionInfo] = useState<{
    versionName: string;
    buildNumber: number;
    versionCode?: number;
  }>({
    versionName: '1.0.1',
    buildNumber: 2
  });
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
  const [retries, setRetries] = useState(0);

  // 편집 가능한 필드를 위한 상태
  const [editableVersionName, setEditableVersionName] = useState('1.0.1');
  const [editableBuildNumber, setEditableBuildNumber] = useState('2');

  // 버전 정보 가져오기
  const fetchVersionInfo = useCallback(async () => {
    if (!editable) {
      setLoading(true);
      setError(false);
      try {
        console.log('앱 버전 정보 요청 시작... (retries:', retries, ')');
        console.log('현재 플랫폼은', isAndroidPlatform() ? 'Android' : '기타');

        // 재시도를 하는 경우 짤은 지연 추가
        if (retries > 0) {
          await new Promise(resolve => setTimeout(resolve, 300));
        }
        const info = await getAppVersionInfo();
        console.log('받은 앱 버전 정보:', info);

        // 데이터 검증 - 유효한 버전 정보인지 확인
        if (!info || typeof info !== 'object') {
          throw new Error('유효하지 않은 응답 형식');
        }
        setVersionInfo({
          versionName: info.versionName,
          buildNumber: info.buildNumber,
          versionCode: info.versionCode
        });

        // 편집 가능한 필드도 업데이트
        setEditableVersionName(info.versionName);
        setEditableBuildNumber(String(info.buildNumber));
        setLoading(false);
        console.log('앱 버전 정보 표시 준비 완료');
      } catch (error) {
        console.error('버전 정보 가져오기 실패:', error);
        setError(true);
        setLoading(false);
      }
    }
  }, [retries, editable]);

  // 재시도 처리
  const handleRetry = useCallback(() => {
    setRetries(prev => prev + 1);
    fetchVersionInfo();
  }, [fetchVersionInfo]);

  // 초기화 완료 후 한번 더 시도하도록 설정
  const initialLoadAttemptedRef = useRef(false);

  // 컴포넌트 마운트 시 즉시 실행 (IIFE)
  useEffect(() => {
    if (!editable) {
      (async () => {
        // 즉시 버전 정보 가져오기 시도
        await fetchVersionInfo();

        // 300ms 후에 한번 더 시도 (네이티브 플러그인이 완전히 로드되지 않았을 경우 대비)
        setTimeout(() => {
          if (error || loading) {
            fetchVersionInfo();
            initialLoadAttemptedRef.current = true;
          }
        }, 1000);
      })();

      // 개발 모드에서는 버전 정보 변경을 쉽게 확인하기 위해 주기적 갱신
      if (process.env.NODE_ENV === 'development') {
        const interval = setInterval(() => {
          fetchVersionInfo();
        }, 30000); // 30초마다 새로 가져오기

        return () => clearInterval(interval);
      }
    }
  }, [fetchVersionInfo, error, loading, editable]);
  if (editable) {
    return <div className={className}>
        <div className="space-y-3">
          <div>
            <Label htmlFor="versionName" className="text-gray-600 text-center block">앱 버전</Label>
            <div className="p-2 text-base mt-1 py-0 text-center">
              {editableVersionName} (build {editableBuildNumber})
            </div>
          </div>
          
          <div>
            <Label htmlFor="notes" className="text-gray-600 text-center block">세부 설명</Label>
            <div className="p-2 text-base mt-1 py-0 text-center">The first build</div>
          </div>
          
          <div className="mt-[70px] text-center">
            <p className="text-gray-400 font-semibold text-lg my-[50px]">ZELLYY CLOUD</p>
          </div>
        </div>
      </div>;
  }
  return <div className={className}>
      {loading ? <div className="py-1 text-center">
          <p className="text-sm text-gray-400 animate-pulse">버전 정보 로딩 중...</p>
        </div> : error ? <div className="py-1 text-center">
          <p className="text-sm text-red-500">빌드 정보 로딩 오류</p>
          <button onClick={handleRetry} className="text-xs text-blue-500 underline mt-1 px-2 py-0.5 rounded hover:bg-blue-50">
            재시도
          </button>
        </div> : <div className="py-1 text-center">
          <p className="text-sm">{versionInfo.versionName} (build {versionInfo.buildNumber})</p>
          {showDevInfo && versionInfo.versionCode && <p className="text-xs text-gray-400 mt-1 font-mono">versionCode: {versionInfo.versionCode}</p>}
        </div>}
    </div>;
};
export default AppVersionInfo;