import React, { useState, useEffect } from 'react';
import { Bell } from 'lucide-react';
import { useAuth } from '@/contexts/auth';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Skeleton } from '@/components/ui/skeleton';
import { useIsMobile } from '@/hooks/use-mobile';

const Header: React.FC = () => {
  const {
    user
  } = useAuth();
  const userName = user?.user_metadata?.username || '익명';
  const [imageLoaded, setImageLoaded] = useState(false);
  const [imageError, setImageError] = useState(false);
  const isMobile = useIsMobile();

  // 이미지 프리로딩 처리
  useEffect(() => {
    const preloadImage = new Image();
    preloadImage.src = '/zellyy.png';
    preloadImage.onload = () => {
      setImageLoaded(true);
    };
    preloadImage.onerror = () => {
      console.error('아바타 이미지 로드 실패');
      setImageError(true);
    };
  }, []);

  return <header className="py-4">
      <div className="flex justify-between items-center">
        <div className="flex items-center">
          <Avatar className="h-12 w-12 mr-3">
            {!imageLoaded && !imageError ? <div className="h-full w-full flex items-center justify-center">
                <Skeleton className="h-full w-full rounded-full" />
              </div> : <>
                <AvatarImage src="/zellyy.png" alt="Zellyy" className={imageLoaded ? 'opacity-100' : 'opacity-0'} onLoad={() => setImageLoaded(true)} onError={() => setImageError(true)} />
                {(imageError || !imageLoaded) && <AvatarFallback delayMs={100}>ZY</AvatarFallback>}
              </>}
          </Avatar>
          <div>
            <h1 className="font-bold neuro-text text-xl">
              {user ? `${userName}님, 반갑습니다` : '반갑습니다'}
            </h1>
            <p className="text-gray-500 text-left">젤리의 적자탈출</p>
          </div>
        </div>
        <button className="neuro-flat p-2.5 rounded-full">
          <Bell size={20} className="text-gray-600" />
        </button>
      </div>
    </header>;
};

export default Header;