noo/lib/widgets/noo/nav/noo_toolbar.dart

import 'package:flutter/material.dart';
import 'package:lucide_icons_flutter/lucide_icons.dart';
import '../../../theme/design_tokens.dart';

/// The desktop main-pane toolbar (DESIGN_SYSTEM.md 3, "Desktop"; the 64px
/// header in `Desktop Screen.dc.html`): 24px leading / 20px trailing
/// padding, 12px gaps, a 1px `line` along the bottom. Left to right:
///
/// - optional back/forward chevrons ([showHistoryNav] - macOS only; Windows
///   doesn't show them), 20px, fg-3
/// - the [title] (22 Schibsted) - or [titleWidget] instead, e.g. a
///   breadcrumb in Files; it inherits the title [DefaultTextStyle]
/// - flexible space
/// - the [search] slot, 260px wide (pass a `NooSearchField(onSurface: true)`)
/// - [actions] - `NooSegmentedControl`, `NooButton(size: toolbar)`, etc.
///
/// A [PreferredSizeWidget], so it can be the main pane's `Scaffold.appBar`.
/// No [SafeArea]: it never sits under a status bar.
class NooToolbar extends StatelessWidget implements PreferredSizeWidget {
  final String? title;
  final Widget? titleWidget;
  final Widget? search;
  final List<Widget> actions;

  final bool showHistoryNav;

  /// Back/forward handlers for [showHistoryNav]; a null one draws that
  /// chevron disabled.
  final VoidCallback? onBack;
  final VoidCallback? onForward;

  /// Defaults to `surface` - the toolbar belongs to the main pane.
  final Color? backgroundColor;

  const NooToolbar({
    super.key,
    this.title,
    this.titleWidget,
    this.search,
    this.actions = const [],
    this.showHistoryNav = false,
    this.onBack,
    this.onForward,
    this.backgroundColor,
  }) : assert(
         title == null || titleWidget == null,
         'Pass either title or titleWidget, not both.',
       );

  @override
  Size get preferredSize => const Size.fromHeight(outerHeight);

  static const _margin = EdgeInsets.fromLTRB(12, 8, 12, 4);

  /// Bar height plus the margin that makes it float.
  static const double outerHeight = NooSizes.toolbar + 12;

  @override
  Widget build(BuildContext context) {
    final colors = context.nooColors;
    final titleStyle = NooText.title.copyWith(height: 1, color: colors.fg1);

    return Padding(
      padding: _margin,
      child: Material(
        color: backgroundColor ?? colors.surface,
        clipBehavior: Clip.antiAlias,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(NooRadii.card),
          side: BorderSide(color: colors.line),
        ),
        child: Container(
          height: NooSizes.toolbar,
          padding: const EdgeInsetsDirectional.only(start: 24, end: 20),
          child: Row(
            spacing: 12,
            children: [
              if (showHistoryNav)
                Padding(
                  padding: const EdgeInsetsDirectional.only(end: 4),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    spacing: 4,
                    children: [
                      _HistoryButton(
                        icon: LucideIcons.chevronLeft,
                        tooltip: 'Back',
                        onTap: onBack,
                      ),
                      _HistoryButton(
                        icon: LucideIcons.chevronRight,
                        tooltip: 'Forward',
                        onTap: onForward,
                      ),
                    ],
                  ),
                ),
              Expanded(
                child: Align(
                  alignment: AlignmentDirectional.centerStart,
                  child: DefaultTextStyle(
                    style: titleStyle,
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    child: titleWidget ?? Text(title ?? ''),
                  ),
                ),
              ),
              if (search != null) SizedBox(width: 260, child: search),
              ...actions,
            ],
          ),
        ),
      ),
    );
  }
}

/// A 20px fg-3 chevron with a 28px hover/press target. Dimmed when
/// [onTap] is null (nothing to go back/forward to).
class _HistoryButton extends StatelessWidget {
  final IconData icon;
  final String tooltip;
  final VoidCallback? onTap;

  const _HistoryButton({
    required this.icon,
    required this.tooltip,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    final colors = context.nooColors;
    return Tooltip(
      message: tooltip,
      child: Opacity(
        opacity: onTap == null ? 0.45 : 1,
        child: InkResponse(
          onTap: onTap,
          radius: 16,
          splashFactory: NoSplash.splashFactory,
          hoverColor: colors.surface2,
          child: SizedBox.square(
            dimension: 28,
            child: Icon(icon, size: 20, color: colors.fg3),
          ),
        ),
      ),
    );
  }
}