import React, { useEffect, useState } from 'react';
import { Capacitor } from '@capacitor/core';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Skeleton } from '@/components/ui/skeleton';

// 네이티브 이미지를 보여주는 컴포넌트
interface NativeImageProps {
  resourceName: string; // 안드로이드 리소스 이름 (확장자 없이)
  className?: string;
  alt?: string;
  fallback?: string;
}

const NativeImage: React.FC<NativeImageProps> = ({ 
  resourceName, 
  className,
  alt = "이미지",
  fallback = "ZY"
}) => {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
  const [imageSrc, setImageSrc] = useState<string>("");

  useEffect(() => {
    const loadImage = async () => {
      try {
        if (Capacitor.isNativePlatform()) {
          // 안드로이드에서는 리소스 ID를 사용
          if (Capacitor.getPlatform() === 'android') {
            // 웹뷰가 resource:// 프로토콜을 지원하는 경우를 위한 코드
            setImageSrc(`file:///android_res/drawable/${resourceName}`);
          } else {
            // iOS - 다른 방식 적용 (추후 구현)
            setImageSrc('/zellyy.png');
          }
        } else {
          // 웹에서는 일반 경로 사용
          setImageSrc(`/${resourceName}.png`);
        }
        setLoading(false);
      } catch (err) {
        console.error('이미지 로드 오류:', err);
        setError(true);
        setLoading(false);
      }
    };

    loadImage();
  }, [resourceName]);

  return (
    <Avatar className={className}>
      {loading ? (
        <div className="h-full w-full flex items-center justify-center">
          <Skeleton className="h-full w-full rounded-full" />
        </div>
      ) : (
        <>
          {!error && (
            <img 
              src={imageSrc} 
              alt={alt}
              className="h-full w-full object-cover" 
              onError={() => setError(true)}
            />
          )}
          {error && (
            <AvatarFallback delayMs={100}>{fallback}</AvatarFallback>
          )}
        </>
      )}
    </Avatar>
  );
};

export default NativeImage;