social-app/apps/lib/features/home/presentation/widgets/home_floating_header.dart

import 'package:flutter/material.dart';
import 'package:lucide_icons/lucide_icons.dart';

import '../../../../core/l10n/l10n.dart';
import '../../../../core/theme/design_tokens.dart';

const homeFloatingHeaderKey = ValueKey('home_floating_header');
const homeFloatingHeaderTitleKey = ValueKey('home_floating_header_title');
const _actionSlotWidth =
    (AppSpacing.xxl + AppSpacing.lg) * 2 + AppSpacing.sm + AppSpacing.sm;

class HomeFloatingHeader extends StatelessWidget {
  const HomeFloatingHeader({
    super.key,
    required this.unreadCount,
    required this.onTapSettings,
    required this.onTapCalendar,
    required this.onTapMessages,
  });

  final int unreadCount;
  final VoidCallback onTapSettings;
  final VoidCallback onTapCalendar;
  final VoidCallback onTapMessages;

  @override
  Widget build(BuildContext context) {
    final colorScheme = Theme.of(context).colorScheme;

    return Container(
      key: homeFloatingHeaderKey,
      padding: const EdgeInsets.fromLTRB(
        AppSpacing.lg,
        AppSpacing.xs,
        AppSpacing.lg,
        AppSpacing.xs,
      ),
      decoration: BoxDecoration(
        color: colorScheme.surface.withValues(alpha: 0.92),
        border: Border(
          bottom: BorderSide(
            color: colorScheme.outlineVariant.withValues(alpha: 0.65),
          ),
        ),
        boxShadow: [
          BoxShadow(
            color: colorScheme.shadow.withValues(alpha: 0.04),
            blurRadius: AppSpacing.xl,
            offset: const Offset(AppSpacing.none, AppSpacing.xs),
          ),
        ],
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SizedBox(
            width: _actionSlotWidth,
            child: Align(
              alignment: Alignment.centerLeft,
              child: _HeaderIconButton(
                icon: LucideIcons.settings,
                onPressed: onTapSettings,
              ),
            ),
          ),
          Expanded(
            child: Text(
              context.l10n.appTitle,
              key: homeFloatingHeaderTitleKey,
              maxLines: 1,
              textAlign: TextAlign.center,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                fontSize: AppSpacing.lg,
                fontWeight: FontWeight.w700,
                letterSpacing: 0.2,
                color: colorScheme.onSurface,
              ),
            ),
          ),
          SizedBox(
            width: _actionSlotWidth,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                _HeaderIconButton(
                  icon: LucideIcons.calendar,
                  onPressed: onTapCalendar,
                ),
                const SizedBox(width: AppSpacing.sm),
                _MessagesButton(
                  unreadCount: unreadCount,
                  onPressed: onTapMessages,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class _HeaderIconButton extends StatelessWidget {
  const _HeaderIconButton({required this.icon, required this.onPressed});

  final IconData icon;
  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    final colorScheme = Theme.of(context).colorScheme;

    return IconButton(
      visualDensity: VisualDensity.compact,
      padding: const EdgeInsets.all(AppSpacing.xs),
      constraints: const BoxConstraints(
        minWidth: AppSpacing.xxl + AppSpacing.lg,
        minHeight: AppSpacing.xxl + AppSpacing.lg,
      ),
      onPressed: onPressed,
      icon: Icon(
        icon,
        size: AppSpacing.xxl,
        color: colorScheme.onSurface.withValues(alpha: 0.95),
      ),
    );
  }
}

class _MessagesButton extends StatelessWidget {
  const _MessagesButton({required this.unreadCount, required this.onPressed});

  final int unreadCount;
  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    final colorScheme = Theme.of(context).colorScheme;

    return IconButton(
      visualDensity: VisualDensity.compact,
      padding: const EdgeInsets.all(AppSpacing.xs),
      constraints: const BoxConstraints(
        minWidth: AppSpacing.xxl + AppSpacing.lg,
        minHeight: AppSpacing.xxl + AppSpacing.lg,
      ),
      onPressed: onPressed,
      icon: Stack(
        clipBehavior: Clip.none,
        children: [
          Icon(
            LucideIcons.messageSquare,
            size: AppSpacing.xxl,
            color: colorScheme.onSurface,
          ),
          if (unreadCount > 0)
            Positioned(
              right: -AppSpacing.xs,
              top: -AppSpacing.xs,
              child: Container(
                padding: const EdgeInsets.symmetric(
                  horizontal: AppSpacing.xs,
                  vertical: AppSpacing.xs / 2,
                ),
                decoration: BoxDecoration(
                  color: colorScheme.error,
                  borderRadius: BorderRadius.circular(AppSpacing.md),
                  border: Border.all(
                    color: colorScheme.surface,
                    width: AppSpacing.xs / 2,
                  ),
                ),
                constraints: const BoxConstraints(
                  minWidth: AppSpacing.lg,
                  minHeight: AppSpacing.lg,
                ),
                child: Text(
                  unreadCount > 99 ? '99+' : unreadCount.toString(),
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: AppSpacing.sm + (AppSpacing.xs / 2),
                    fontWeight: FontWeight.w600,
                    color: colorScheme.onError,
                  ),
                ),
              ),
            ),
        ],
      ),
    );
  }
}