import { useFileUpload } from '@/lib/hooks/useFileUpload';
import { useAuth } from '@/components/context';
import {
	Avatar,
	AvatarFallback,
	AvatarImage,
	CardContent,
} from '@/components/ui';
import { Loader2, Pencil, Upload, User } from 'lucide-react';

type AvatarUploadProps = {
	onAvatarUploaded: (path: string) => Promise<void>;
};

export const AvatarUpload = ({ onAvatarUploaded }: AvatarUploadProps) => {
	const { profile, avatarUrl } = useAuth();
	const { isUploading, fileInputRef, uploadToStorage } = useFileUpload();

	const handleAvatarClick = () => {
		fileInputRef.current?.click();
	};

	const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
		const file = e.target.files?.[0];
		if (!file) return;

		const result = await uploadToStorage({
			file,
			bucket: 'avatars',
			resize: true,
			options: {
				maxWidth: 500,
				maxHeight: 500,
				quality: 0.8,
			},
			replace: { replace: true, path: profile?.avatar_url ?? file.name },
		});
		if (result.success && result.data) {
			await onAvatarUploaded(result.data);
		}
	};

	const getInitials = (name: string | null | undefined): string => {
		if (!name) return '';
		return name
			.split(' ')
			.map((n) => n[0])
			.join('')
			.toUpperCase();
	};

	return (
		<CardContent>
			<div className='flex flex-col items-center'>
				<div
					className='relative group cursor-pointer mb-4'
					onClick={handleAvatarClick}
				>
					<Avatar className='h-32 w-32'>
						{avatarUrl ? (
							<AvatarImage
								src={avatarUrl}
								alt={getInitials(profile?.full_name)}
								width={128}
								height={128}
							/>
						) : (
							<AvatarFallback className='text-4xl'>
								{profile?.full_name ? (
									getInitials(profile.full_name)
								) : (
									<User size={32} />
								)}
							</AvatarFallback>
						)}
					</Avatar>
					<div
						className='absolute inset-0 rounded-full bg-black/0 group-hover:bg-black/50
              transition-all flex items-center justify-center'
					>
						<Upload
							className='text-white opacity-0 group-hover:opacity-100
                transition-opacity'
							size={24}
						/>
					</div>
					<div className='absolute inset-1 transition-all flex items-end justify-end'>
						<Pencil
							className='text-white opacity-100 group-hover:opacity-0
                transition-opacity'
							size={24}
						/>
					</div>
				</div>
				<input
					ref={fileInputRef}
					type='file'
					accept='image/*'
					className='hidden'
					onChange={handleFileChange}
					disabled={isUploading}
				/>
				{isUploading && (
					<div className='flex items-center text-sm text-gray-500 mt-2'>
						<Loader2 className='h-4 w-4 mr-2 animate-spin' />
						Uploading...
					</div>
				)}
			</div>
		</CardContent>
	);
};