import 'package:flutter/material.dart';
import 'package:core_localization/core_localization.dart';
import 'package:design_system/design_system.dart';


/// A widget displaying the staff member's profile photo with an edit option.
///
/// Shows either the photo URL or an initial avatar if no photo is available.
/// Includes a camera icon button for changing the photo.
/// Uses only design system tokens for colors, typography, and spacing.
class ProfilePhotoWidget extends StatelessWidget {
  /// The URL of the staff member's photo.
  final String? photoUrl;

  /// The staff member's full name (used for initial avatar).
  final String fullName;

  /// Callback when the photo/camera button is tapped.
  final VoidCallback? onTap;

  /// Creates a [ProfilePhotoWidget].
  const ProfilePhotoWidget({
    super.key,
    required this.photoUrl,
    required this.fullName,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    final TranslationsStaffOnboardingPersonalInfoEn i18n = t.staff.onboarding.personal_info;

    return Column(
      children: <Widget>[
        GestureDetector(
          onTap: onTap,
          child: Stack(
            children: <Widget>[
              Container(
                width: 96,
                height: 96,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: UiColors.primary.withOpacity(0.1),
                ),
                child: photoUrl != null
                    ? ClipOval(
                        child: Image.network(
                          photoUrl!,
                          fit: BoxFit.cover,
                        ),
                      )
                    : Center(
                        child: Text(
                          fullName.isNotEmpty ? fullName[0].toUpperCase() : '?',
                          style: UiTypography.displayL.copyWith(
                            color: UiColors.primary,
                          ),
                        ),
                      ),
              ),
              Positioned(
                bottom: 0,
                right: 0,
                child: Container(
                  width: 32,
                  height: 32,
                  decoration: BoxDecoration(
                    color: UiColors.bgPopup,
                    shape: BoxShape.circle,
                    border: Border.all(color: UiColors.border),
                    boxShadow: <BoxShadow>[
                      BoxShadow(
                        color: UiColors.textPrimary.withOpacity(0.1),
                        blurRadius: UiConstants.space1,
                        offset: const Offset(0, 2),
                      ),
                    ],
                  ),
                  child: const Center(
                    child: Icon(
                      UiIcons.camera,
                      size: 16,
                      color: UiColors.primary,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
        const SizedBox(height: UiConstants.space3),
        Text(
          i18n.change_photo_hint,
          style: UiTypography.body2r.copyWith(color: UiColors.textSecondary),
        ),
      ],
    );
  }
}
