mobile_adaptive_learning/lib/features/settings/widgets/user_avatar.dart

import 'dart:io';
import 'package:bootstrap_icons/bootstrap_icons.dart';
import 'package:flutter/material.dart';
import 'package:english_learning/core/utils/styles/theme.dart';

class UserAvatar extends StatelessWidget {
  final String? pictureUrl;
  final double radius;
  final String baseUrl;
  final Function()? onImageSelected;
  final File? selectedImage;
  final bool showCameraIcon;

  const UserAvatar({
    super.key,
    this.pictureUrl,
    this.radius = 55,
    required this.baseUrl,
    this.onImageSelected,
    this.selectedImage,
    this.showCameraIcon = false,
  });

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        // Avatar with detail view
        GestureDetector(
          onTap: () {
            showDialog(
              context: context,
              builder: (BuildContext context) {
                return Dialog(
                  child: Container(
                    width: double.infinity,
                    height: 400,
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(12),
                    ),
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Expanded(
                          child: ClipRRect(
                            borderRadius: const BorderRadius.vertical(
                              top: Radius.circular(12),
                            ),
                            child: _getDetailAvatarContent(),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(16.0),
                          child: TextButton(
                            style: TextButton.styleFrom(
                              foregroundColor: AppColors.primaryColor,
                            ),
                            onPressed: () => Navigator.pop(context),
                            child: const Text('Close'),
                          ),
                        ),
                      ],
                    ),
                  ),
                );
              },
            );
          },
          child: CircleAvatar(
            radius: radius,
            backgroundColor: AppColors.primaryColor,
            child: _getAvatarContent(),
          ),
        ),
        // Camera icon
        if (showCameraIcon)
          Positioned(
            right: 0,
            bottom: 0,
            child: GestureDetector(
              onTap: onImageSelected,
              child: Container(
                padding: const EdgeInsets.all(6),
                decoration: BoxDecoration(
                  color: AppColors.primaryColor,
                  shape: BoxShape.circle,
                  border: Border.all(
                    color: Colors.white,
                    width: 2,
                  ),
                ),
                child: Icon(
                  BootstrapIcons.camera,
                  color: AppColors.whiteColor,
                  size: radius * 0.3,
                ),
              ),
            ),
          ),
      ],
    );
  }

  Widget _getAvatarContent() {
    if (selectedImage != null) {
      return ClipOval(
        child: Image.file(
          selectedImage!,
          fit: BoxFit.cover,
          width: radius * 2,
          height: radius * 2,
        ),
      );
    } else if (pictureUrl != null && pictureUrl!.isNotEmpty) {
      return ClipOval(
        child: Image.network(
          '$baseUrl$pictureUrl',
          fit: BoxFit.cover,
          width: radius * 2,
          height: radius * 2,
          errorBuilder: (context, error, stackTrace) {
            print('Error loading avatar image: $error');
            return _buildDefaultIcon();
          },
        ),
      );
    } else {
      return _buildDefaultIcon();
    }
  }

  Widget _getDetailAvatarContent() {
    if (selectedImage != null) {
      return Image.file(
        selectedImage!,
        fit: BoxFit.cover,
      );
    } else if (pictureUrl != null && pictureUrl!.isNotEmpty) {
      return Image.network(
        '$baseUrl$pictureUrl',
        fit: BoxFit.cover,
        errorBuilder: (context, error, stackTrace) {
          return Center(
            child: Icon(
              BootstrapIcons.person,
              color: AppColors.primaryColor,
              size: 120,
            ),
          );
        },
      );
    } else {
      return Center(
        child: Icon(
          BootstrapIcons.person,
          color: AppColors.primaryColor,
          size: 120,
        ),
      );
    }
  }

  Widget _buildDefaultIcon() {
    return Icon(
      BootstrapIcons.person,
      color: AppColors.whiteColor,
      size: radius * 1.2,
    );
  }
}