/**
 * Componente de Imagem Otimizada
 * Wrapper do Next.js Image com configurações padrão otimizadas
 */

'use client';

import Image from 'next/image';
import { ImageProps } from 'next/image';
import { useState } from 'react';
import { Avatar, Spin } from 'antd';
import { User } from 'lucide-react';

interface OptimizedImageProps extends Omit<ImageProps, 'src'> {
    src: string | null | undefined;
    alt: string;
    // Tamanhos responsivos
    width?: number;
    height?: number;
    // Prioridade de carregamento (para imagens acima da dobra)
    priority?: boolean;
    // Placeholder enquanto carrega
    placeholder?: 'blur' | 'empty';
    blurDataURL?: string;
    // Fallback quando imagem não carrega
    fallback?: React.ReactNode;
    // Modo de exibição
    mode?: 'default' | 'avatar' | 'cover' | 'contain';
    // Classes CSS customizadas
    className?: string;
    // Estilos inline
    style?: React.CSSProperties;
}

export default function OptimizedImage({
    src,
    alt,
    width = 200,
    height = 200,
    priority = false,
    placeholder = 'empty',
    blurDataURL,
    fallback,
    mode = 'default',
    className = '',
    style,
    ...props
}: OptimizedImageProps) {
    const [isLoading, setIsLoading] = useState(true);
    const [hasError, setHasError] = useState(false);

    // Se não houver src, mostrar fallback
    if (!src || hasError) {
        if (fallback) {
            return <>{fallback}</>;
        }

        // Fallback padrão baseado no modo
        if (mode === 'avatar') {
            return (
                <Avatar size={width} icon={<User size={width / 2} aria-hidden />} className={className} style={style} />
            );
        }

        return (
            <div
                className={`flex items-center justify-center bg-gray-100 ${className}`}
                style={{ width, height, ...style }}
            >
                <User size={width / 2} style={{ color: '#999' }} aria-hidden />
            </div>
        );
    }

    // Configurações baseadas no modo
    const objectFit = mode === 'cover' ? 'cover' : mode === 'contain' ? 'contain' : 'fill';
    const borderRadius = mode === 'avatar' ? '50%' : '0';

    return (
        <div
            className={`relative overflow-hidden ${className}`}
            style={{ width, height, borderRadius, ...style }}
        >
            {isLoading && (
                <div className="absolute inset-0 flex items-center justify-center bg-gray-100">
                    <Spin size="small" />
                </div>
            )}
            <Image
                src={src}
                alt={alt}
                width={width}
                height={height}
                priority={priority}
                placeholder={placeholder}
                blurDataURL={blurDataURL}
                className={`transition-opacity duration-300 ${isLoading ? 'opacity-0' : 'opacity-100'}`}
                style={{
                    objectFit,
                    borderRadius,
                }}
                onLoad={() => setIsLoading(false)}
                onError={() => {
                    setIsLoading(false);
                    setHasError(true);
                }}
                {...props}
            />
        </div>
    );
}

/**
 * Componente Avatar Otimizado
 * Especializado para avatares de usuários
 */
export function OptimizedAvatar({
    src,
    alt,
    size = 40,
    ...props
}: {
    src?: string | null;
    alt?: string;
    size?: number;
    [key: string]: unknown;
}) {
    return (
        <OptimizedImage
            src={src}
            alt={alt || 'Avatar'}
            width={size}
            height={size}
            mode="avatar"
            className="rounded-full"
            {...props}
        />
    );
}

/**
 * Componente Imagem de Capa Otimizada
 * Para imagens de capa/banner
 */
export function OptimizedCoverImage({
    src,
    alt,
    width = 1200,
    height = 400,
    priority = true,
    ...props
}: {
    src?: string | null;
    alt?: string;
    width?: number;
    height?: number;
    priority?: boolean;
    [key: string]: unknown;
}) {
    return (
        <OptimizedImage
            src={src}
            alt={alt || 'Capa'}
            width={width}
            height={height}
            mode="cover"
            priority={priority}
            className="w-full"
            {...props}
        />
    );
}