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

/// The header section of the staff profile page, containing avatar, name, level,
/// and a sign-out button.
///
/// Uses design system tokens for all colors, typography, and spacing.
class ProfileHeader extends StatelessWidget {
  /// The staff member's full name
  final String fullName;
  
  /// The staff member's level (e.g., "Krower I")
  final String level;
  
  /// Optional photo URL for the avatar
  final String? photoUrl;
  
  /// Callback when sign out is tapped
  final VoidCallback onSignOutTap;

  /// Creates a [ProfileHeader].
  const ProfileHeader({
    super.key,
    required this.fullName,
    required this.level,
    this.photoUrl,
    required this.onSignOutTap,
  });

  @override
  Widget build(BuildContext context) {
    final i18n = t.staff.profile.header;
    
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.fromLTRB(
        UiConstants.space5,
        UiConstants.space5,
        UiConstants.space5,
        UiConstants.space16,
      ),
      decoration: const BoxDecoration(
        color: UiColors.primary,
        borderRadius: BorderRadius.vertical(
          bottom: Radius.circular(UiConstants.space6),
        ),
      ),
      child: SafeArea(
        bottom: false,
        child: Column(
          children: [
            // Top Bar
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  i18n.title,
                  style: UiTypography.headline4m.textSecondary,
                ),
                GestureDetector(
                  onTap: onSignOutTap,
                  child: Text(
                    i18n.sign_out,
                    style: UiTypography.body2m.copyWith(
                      color: UiColors.primaryForeground.withValues(alpha: 0.8),
                    ),
                  ),
                ),
              ],
            ),
            const SizedBox(height: UiConstants.space8),
            // Avatar Section
            Stack(
              alignment: Alignment.bottomRight,
              children: [
                Container(
                  width: 112,
                  height: 112,
                  padding: const EdgeInsets.all(UiConstants.space1),
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    gradient: LinearGradient(
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                      colors: [
                        UiColors.accent,
                        UiColors.accent.withValues(alpha: 0.5),
                        UiColors.primaryForeground,
                      ],
                    ),
                    boxShadow: [
                      BoxShadow(
                        color: UiColors.foreground.withValues(alpha: 0.2),
                        blurRadius: 10,
                        offset: const Offset(0, 4),
                      ),
                    ],
                  ),
                  child: Container(
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      border: Border.all(
                        color: UiColors.primaryForeground.withValues(alpha: 0.2),
                        width: 4,
                      ),
                    ),
                    child: CircleAvatar(
                      backgroundColor: UiColors.background,
                      backgroundImage: photoUrl != null
                          ? NetworkImage(photoUrl!)
                          : null,
                      child: photoUrl == null
                          ? Container(
                              width: double.infinity,
                              height: double.infinity,
                              decoration: BoxDecoration(
                                shape: BoxShape.circle,
                                gradient: LinearGradient(
                                  begin: Alignment.topLeft,
                                  end: Alignment.bottomRight,
                                  colors: [
                                    UiColors.accent,
                                    UiColors.accent.withValues(alpha: 0.7),
                                  ],
                                ),
                              ),
                              alignment: Alignment.center,
                              child: Text(
                                fullName.isNotEmpty
                                    ? fullName[0].toUpperCase()
                                    : 'K',
                                style: UiTypography.displayM.primary,
                              ),
                            )
                          : null,
                    ),
                  ),
                ),
                Container(
                  width: 36,
                  height: 36,
                  decoration: BoxDecoration(
                    color: UiColors.primaryForeground,
                    shape: BoxShape.circle,
                    border: Border.all(color: UiColors.primary, width: 2),
                    boxShadow: [
                      BoxShadow(
                        color: UiColors.foreground.withValues(alpha: 0.1),
                        blurRadius: 4,
                      ),
                    ],
                  ),
                  child: const Icon(
                    UiIcons.camera,
                    size: 16,
                    color: UiColors.primary,
                  ),
                ),
              ],
            ),
            const SizedBox(height: UiConstants.space4),
            Text(
              fullName,
              style: UiTypography.headline3m.textPlaceholder,
            ),
            const SizedBox(height: UiConstants.space1),
            Container(
              padding: const EdgeInsets.symmetric(
                horizontal: UiConstants.space3,
                vertical: UiConstants.space1,
              ),
              decoration: BoxDecoration(
                color: UiColors.accent.withValues(alpha: 0.2),
                borderRadius: BorderRadius.circular(UiConstants.space5),
              ),
              child: Text(
                level,
                style: UiTypography.footnote1b.accent,
              ),
            ),
          ],
        ),
      ),
    );
  }
}
