import "package:flutter/material.dart";
import "package:google_fonts/google_fonts.dart";
import "../theme/ensup_colors.dart";

/// Barre supérieure ENSUP. L'utilisateur et le bouton retour sont optionnels
/// (absents sur l'écran d'identification).
class EnsupTopBar extends StatelessWidget {
  const EnsupTopBar({
    super.key,
    this.brandText = "EME",
    required this.campusTag,
    this.userName,
    this.userInitials,
    this.onBack,
  });

  final String brandText;
  final String campusTag;
  final String? userName;
  final String? userInitials;
  final VoidCallback? onBack;

  @override
  Widget build(BuildContext context) {
    final name = userName;
    final initials = userInitials;
    final onBack = this.onBack;

    return Container(
      height: 56,
      padding: const EdgeInsets.symmetric(horizontal: 20),
      color: EnsupColors.blue3,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Row(
            children: [
              if (onBack != null) ...[
                _BackButton(onTap: onBack),
                const SizedBox(width: 8),
              ],
              const Icon(Icons.badge_outlined, color: Colors.white, size: 18),
              const SizedBox(width: 10),
              Text(
                brandText,
                style: GoogleFonts.darkerGrotesque(
                  color: Colors.white,
                  fontWeight: FontWeight.w900,
                  fontSize: 22,
                  letterSpacing: 0.3,
                ),
              ),
            ],
          ),
          Row(
            children: [
              Container(
                padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
                decoration: BoxDecoration(
                  color: Colors.white.withValues(alpha: 0.15),
                  borderRadius: BorderRadius.circular(999),
                  border: Border.all(color: Colors.white.withValues(alpha: 0.2)),
                ),
                child: Text(
                  campusTag,
                  style: GoogleFonts.titilliumWeb(
                    color: Colors.white,
                    fontSize: 12,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ),
              if (name != null && initials != null) ...[
                const SizedBox(width: 12),
                _Avatar(initials: initials),
                const SizedBox(width: 8),
                Text(
                  name,
                  style: GoogleFonts.titilliumWeb(
                    color: Colors.white,
                    fontSize: 13,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ],
            ],
          ),
        ],
      ),
    );
  }
}

class _BackButton extends StatelessWidget {
  const _BackButton({required this.onTap});

  final VoidCallback onTap;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onTap,
      borderRadius: BorderRadius.circular(8),
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(Icons.arrow_back, size: 16, color: Colors.white.withValues(alpha: 0.85)),
            const SizedBox(width: 6),
            Text(
              "Retour",
              style: GoogleFonts.titilliumWeb(
                color: Colors.white.withValues(alpha: 0.85),
                fontSize: 13,
                fontWeight: FontWeight.w600,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class _Avatar extends StatelessWidget {
  const _Avatar({required this.initials});

  final String initials;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 30,
      height: 30,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        gradient: const LinearGradient(colors: [EnsupColors.teal, EnsupColors.cyan]),
        border: Border.all(color: Colors.white.withValues(alpha: 0.3), width: 2),
      ),
      alignment: Alignment.center,
      child: Text(
        initials,
        style: GoogleFonts.darkerGrotesque(
          color: Colors.white,
          fontWeight: FontWeight.w900,
          fontSize: 12,
        ),
      ),
    );
  }
}