import 'dart:ui' show ImageFilter;
import 'package:flutter/material.dart';
import '../../../theme/design_tokens.dart';
import 'noo_nav_style.dart';

export 'noo_nav_style.dart';

/// Android indicator geometry, shared between the sliding pill and each
/// item's own icon box so they line up exactly. Floating's own top offset
/// is shorter than attached's - its row is 16px shorter overall (64 vs 80)
/// and there's no edge-to-edge safe-area strip inside it eating into that.
const double _kAttachedPillTop = 14;
const double _kFloatingPillTop = 8;
const double _kAndroidPillWidth = 56;
const double _kAndroidPillHeight = 32;

/// The mobile bottom bar (DESIGN_SYSTEM.md 3, "Mobile"; `iNav`/`aNav` in
/// `Mobile Screen.dc.html`). Shows the 5 pinned tabs - which ones, and in
/// what order, is the caller's business; this only draws [destinations].
///
/// - [NooNavStyle.ios]: surface fill, 1px top `line`, a 50px row (8px top
///   padding) of icon 24 over a 10px selected label. Active: accent-text, 600.
///   Idle: centered fg-3 icon, no label. No ripple.
/// - [NooNavStyle.android]: surface fill, 80px. Every tab shows its 24px
///   icon over a 12px label (label only visible - not removed from layout,
///   so the row never resizes - once selected). The active icon sits in a
///   56x32 accent-soft pill that slides between tabs as selection moves,
///   rather than popping in/out on the destination item itself.
///
/// [NooBottomBarStyle.floating] ignores [style] and always uses the Android
/// row below, so iOS gets the same icon-only idle tabs.
///
/// [barStyle] (user-configurable in Settings, Appearance) picks between
/// that edge-to-edge [NooBottomBarStyle.attached] bar and
/// [NooBottomBarStyle.floating] - inset 16px from both side edges, 28px
/// corners, a 1px `line` border plus [nooDialogShadow] (the one shadow the
/// rest of the app allows itself, see that constant's own doc comment) so
/// it actually reads as floating above the content scrolling behind it.
/// Floating's Android row is both shorter (64 vs 80) and drops its idle
/// tabs' reserved label space - with no label to leave room for, an idle
/// icon just centers in the whole button, rather than sitting high with a
/// gap under it. The home indicator / gesture bar area below the row comes
/// from the bottom safe-area inset rather than a fixed 34/20px spacer, so
/// it's right on every device. Meant for `Scaffold.bottomNavigationBar` -
/// the host `Scaffold` needs `extendBody: true` while floating, and a
/// scrollable body needs enough trailing padding to clear the bar's own
/// footprint ([NooBottomBar.rowHeight] + [NooBottomBar.floatingBottomMargin]
/// + the bottom safe area) since nothing does that automatically once the
/// body draws behind it - see `tab_state_slivers.dart`'s
/// `bottomBarClearance`.
///
/// [frosted] (Settings, Appearance) swaps the solid `surface` fill for a
/// translucent one over a backdrop blur, on both bar styles and both nav
/// styles, and drops [nooDialogShadow] (a shadow would show through the
/// glass). It only reads as glass if content draws behind the bar, so the
/// host `Scaffold` needs `extendBody: true` and each scrollable body needs
/// the same trailing clearance floating does - see [drawsBehindBody].
///
/// [searchDestination]/[onSearchTap] (set together, from Settings'
/// "Search in bottom bar" - see `DESIGN_SYSTEM.md`'s floating bottom bar
/// entry) add a Search entry that's never highlighted (tapping it pushes
/// `SearchView`, it doesn't select anything) - the row's last item when
/// attached, or its own satellite circle beside the bar when floating,
/// always fully round regardless of the bar's own corner radius.
class NooBottomBar extends StatelessWidget {
  final NooNavStyle style;
  final NooBottomBarStyle barStyle;
  final bool frosted;

  /// Backdrop blur sigma and surface-fill opacity while [frosted] (user-
  /// adjustable in Settings; the defaults match [FrostedGlassContainer]'s
  /// blur).
  final double frostedBlur;
  final double frostedOpacity;
  final List<NooNavDestination> destinations;
  final int selectedIndex;
  final ValueChanged<int> onSelected;
  final NooNavDestination? searchDestination;
  final VoidCallback? onSearchTap;

  /// Bottom-avatar navigation occupies this slot while closed. Search moves
  /// from the row into the slot as the avatar expands into its popup.
  final Widget? avatarSatellite;
  final double avatarMenuProgress;

  const NooBottomBar({
    super.key,
    required this.style,
    this.barStyle = NooBottomBarStyle.attached,
    this.frosted = false,
    this.frostedBlur = defaultFrostedBlur,
    this.frostedOpacity = defaultFrostedOpacity,
    required this.destinations,
    required this.selectedIndex,
    required this.onSelected,
    this.searchDestination,
    this.onSearchTap,
    this.avatarSatellite,
    this.avatarMenuProgress = 0,
  });

  /// The row height [build] draws for [style]/[barStyle] - exposed so a
  /// scrollable body sharing the same `Scaffold` can reserve exactly this
  /// much clearance (see the class doc comment) instead of guessing.
  static double rowHeight(NooNavStyle style, NooBottomBarStyle barStyle) {
    if (style == NooNavStyle.ios && barStyle != NooBottomBarStyle.floating) {
      return 50;
    }
    return barStyle == NooBottomBarStyle.floating ? 64 : 80;
  }

  static const double defaultFrostedBlur = 20;
  static const double defaultFrostedOpacity = 0.72;

  /// Whether the host `Scaffold` must draw its body behind the bar
  /// (`extendBody`) - true for floating (its transparent margin) and for any
  /// frosted bar (there's nothing to blur otherwise).
  static bool drawsBehindBody(NooBottomBarStyle barStyle, bool frosted) =>
      frosted || barStyle == NooBottomBarStyle.floating;

  /// Gap between the floating bar's bottom edge and the safe area below it
  /// (itself inside the [SafeArea] that consumes the actual device inset).
  static const double floatingBottomMargin = 12;

  @override
  Widget build(BuildContext context) {
    final colors = context.nooColors;
    final floating = barStyle == NooBottomBarStyle.floating;
    // Floating always gets the Android row (icon-only idle tabs, sliding
    // pill) - iOS's icon-over-label row doesn't fit a pill that short.
    final ios = style == NooNavStyle.ios && !floating;
    final hasSearch = searchDestination != null && onSearchTap != null;
    // Attached folds Search into the row itself (last item); floating
    // gives it a separate satellite circle instead (built below), so the
    // row builders only ever see it as a trailing item in the former case.
    final rowSearch =
        hasSearch &&
            (!floating || avatarSatellite != null) &&
            (avatarSatellite == null || !floating || avatarMenuProgress < 1)
        ? searchDestination
        : null;

    final row = ios
        ? _buildIosRow(trailingSearch: rowSearch)
        : _buildAndroidRow(
            colors,
            floating: floating,
            trailingSearch: rowSearch,
          );
    final barHeight = NooBottomBar.rowHeight(style, barStyle);

    if (floating) {
      final pillRadius = BorderRadius.circular(28);
      final pillBox = Container(
        height: barHeight,
        clipBehavior: Clip.antiAlias,
        decoration: BoxDecoration(
          color: _fill(colors),
          border: Border.all(color: colors.line),
          borderRadius: pillRadius,
          boxShadow: frosted ? null : const [nooDialogShadow],
        ),
        child: row,
      );
      final pill = frosted
          ? _blurred(pillBox, pillRadius, frostedBlur)
          : pillBox;
      return SafeArea(
        top: false,
        child: Padding(
          padding: EdgeInsets.fromLTRB(
            16,
            0,
            16,
            NooBottomBar.floatingBottomMargin,
          ),
          child: avatarSatellite != null
              ? _withAvatar(pill, barHeight, hasSearch)
              : hasSearch
              // A fixed-height SizedBox, not just a Row with
              // crossAxisAlignment.stretch - the bottomNavigationBar slot
              // gives this widget a *loose* (unbounded-max) height
              // constraint, and stretch on an unbounded cross axis blows up
              // to fill the screen in profile/release (the assertion that
              // would catch it in debug is stripped there) - the same
              // silent-oversizing bug files_controls_row.dart hit earlier
              // from a different cause. Both children already size
              // themselves explicitly (pill's own `height`, the
              // satellite's `size`), so stretch was never actually needed.
              ? SizedBox(
                  height: barHeight,
                  child: Row(
                    children: [
                      Expanded(child: pill),
                      const SizedBox(width: 8),
                      _SearchSatellite(
                        destination: searchDestination!,
                        onTap: onSearchTap!,
                        size: barHeight,
                        frosted: frosted,
                        frostedBlur: frostedBlur,
                        frostedOpacity: frostedOpacity,
                      ),
                    ],
                  ),
                )
              : pill,
        ),
      );
    }

    final bar = Container(
      decoration: BoxDecoration(
        color: _fill(colors),
        border: ios ? Border(top: BorderSide(color: colors.line)) : null,
      ),
      child: SafeArea(
        top: false,
        child: SizedBox(
          height: barHeight,
          child: avatarSatellite == null
              ? row
              : Row(
                  children: [
                    Expanded(child: row),
                    SizedBox(
                      width: barHeight,
                      height: barHeight,
                      child: avatarSatellite,
                    ),
                    const SizedBox(width: 8),
                  ],
                ),
        ),
      ),
    );
    return frosted ? _blurred(bar, BorderRadius.zero, frostedBlur) : bar;
  }

  Widget _withAvatar(Widget rail, double height, bool hasSearch) {
    final satelliteWidth = hasSearch
        ? height
        : height * (1 - avatarMenuProgress);
    return SizedBox(
      height: height,
      child: Row(
        children: [
          Expanded(child: rail),
          SizedBox(width: 8 * (hasSearch ? 1 : 1 - avatarMenuProgress)),
          SizedBox(
            width: satelliteWidth,
            height: height,
            child: ClipRect(
              child: OverflowBox(
                alignment: Alignment.centerRight,
                minWidth: height,
                maxWidth: height,
                child: Stack(
                  children: [
                    avatarSatellite!,
                    if (hasSearch && avatarMenuProgress > 0)
                      Opacity(
                        opacity: avatarMenuProgress,
                        child: _SearchSatellite(
                          destination: searchDestination!,
                          onTap: onSearchTap!,
                          size: height,
                          frosted: frosted,
                          frostedBlur: frostedBlur,
                          frostedOpacity: frostedOpacity,
                        ),
                      ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Color _fill(NooColors colors) => frosted
      ? colors.surface.withValues(alpha: frostedOpacity)
      : colors.surface;

  double get _rowSearchFraction =>
      avatarSatellite == null || barStyle == NooBottomBarStyle.attached
      ? 1
      : 1 - avatarMenuProgress;

  Widget _searchRowItem(Widget child, double width) => SizedBox(
    width: width * _rowSearchFraction,
    child: IgnorePointer(
      ignoring: _rowSearchFraction < .95,
      child: ClipRect(
        child: OverflowBox(
          minWidth: width,
          maxWidth: width,
          child: Opacity(opacity: _rowSearchFraction, child: child),
        ),
      ),
    ),
  );

  Widget _buildIosRow({NooNavDestination? trailingSearch}) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final width =
            constraints.maxWidth /
            (destinations.length +
                (trailingSearch == null ? 0 : _rowSearchFraction));
        return Row(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            for (var i = 0; i < destinations.length; i++)
              SizedBox(
                width: width,
                child: _IosItem(
                  destination: destinations[i],
                  selected: i == selectedIndex,
                  selectedLabelOnly: true,
                  onTap: () => onSelected(i),
                ),
              ),
            if (trailingSearch != null)
              _searchRowItem(
                _IosItem(
                  destination: trailingSearch,
                  selected: false,
                  selectedLabelOnly: true,
                  onTap: onSearchTap!,
                ),
                width,
              ),
          ],
        );
      },
    );
  }

  Widget _buildAndroidRow(
    NooColors colors, {
    required bool floating,
    NooNavDestination? trailingSearch,
  }) {
    final pillTop = floating ? _kFloatingPillTop : _kAttachedPillTop;
    final itemCount =
        destinations.length + (trailingSearch != null ? _rowSearchFraction : 0);
    return LayoutBuilder(
      builder: (context, constraints) {
        final itemWidth = constraints.maxWidth / itemCount;
        return Stack(
          children: [
            AnimatedPositioned(
              duration: NooMotion.base,
              curve: NooMotion.ease,
              top: pillTop,
              left:
                  itemWidth * selectedIndex +
                  (itemWidth - _kAndroidPillWidth) / 2,
              width: _kAndroidPillWidth,
              height: _kAndroidPillHeight,
              child: DecoratedBox(
                decoration: BoxDecoration(
                  color: colors.accentSoft,
                  borderRadius: BorderRadius.circular(NooRadii.pill),
                ),
              ),
            ),
            Row(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                for (var i = 0; i < destinations.length; i++)
                  SizedBox(
                    width: itemWidth,
                    child: _AndroidItem(
                      destination: destinations[i],
                      selected: i == selectedIndex,
                      floating: floating,
                      onTap: () => onSelected(i),
                    ),
                  ),
                if (trailingSearch != null)
                  _searchRowItem(
                    _AndroidItem(
                      destination: trailingSearch,
                      selected: false,
                      floating: floating,
                      onTap: onSearchTap!,
                    ),
                    itemWidth,
                  ),
              ],
            ),
          ],
        );
      },
    );
  }
}

/// Clips [child] to [radius] and blurs whatever is drawn behind it - the
/// frosted bar's backdrop. [child] supplies the translucent fill on top.
Widget _blurred(Widget child, BorderRadius radius, double sigma) => ClipRRect(
  borderRadius: radius,
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: sigma, sigmaY: sigma),
    child: child,
  ),
);

/// The floating bar's own Search entry point, next to the pill rather than
/// inside it - always fully round (see [NooBottomBar]'s doc comment),
/// same fill/border as the pill so the two still read as one family.
class _SearchSatellite extends StatelessWidget {
  final NooNavDestination destination;
  final VoidCallback onTap;
  final double size;
  final bool frosted;
  final double frostedBlur;
  final double frostedOpacity;

  const _SearchSatellite({
    required this.destination,
    required this.onTap,
    required this.size,
    required this.frosted,
    required this.frostedBlur,
    required this.frostedOpacity,
  });

  @override
  Widget build(BuildContext context) {
    final colors = context.nooColors;
    return Semantics(
      button: true,
      label: destination.label,
      child: GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: onTap,
        child: _satelliteBody(colors),
      ),
    );
  }

  Widget _satelliteBody(NooColors colors) {
    final disc = Container(
      width: size,
      height: size,
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: frosted
            ? colors.surface.withValues(alpha: frostedOpacity)
            : colors.surface,
        border: Border.all(color: colors.line),
        shape: BoxShape.circle,
        boxShadow: frosted ? null : const [nooDialogShadow],
      ),
      child: Icon(destination.icon, size: 24, color: colors.fg1),
    );
    return frosted
        ? _blurred(disc, BorderRadius.circular(size / 2), frostedBlur)
        : disc;
  }
}

class _IosItem extends StatelessWidget {
  final NooNavDestination destination;
  final bool selected;
  final bool selectedLabelOnly;
  final VoidCallback onTap;

  const _IosItem({
    required this.destination,
    required this.selected,
    this.selectedLabelOnly = false,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    final colors = context.nooColors;
    final fg = selected ? colors.accentText : colors.fg3;
    return Semantics(
      button: true,
      selected: selected,
      label: selectedLabelOnly && !selected ? destination.label : null,
      child: GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: onTap,
        child: selectedLabelOnly && !selected
            ? Center(child: Icon(destination.icon, size: 24, color: fg))
            : Padding(
                padding: const EdgeInsets.only(top: 8),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Icon(destination.icon, size: 24, color: fg),
                    const SizedBox(height: 4),
                    Text(
                      destination.label,
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                      style: NooText.navLabel.copyWith(
                        fontSize: 10,
                        height: 1,
                        fontWeight: selected
                            ? FontWeight.w600
                            : FontWeight.w500,
                        color: fg,
                      ),
                    ),
                  ],
                ),
              ),
      ),
    );
  }
}

/// Icon (over the shared sliding pill, drawn separately by [NooBottomBar])
/// with its label below it. Attached always reserves the label's space
/// (just invisible when idle, per [_kAttachedPillTop]'s doc comment on
/// [NooBottomBar]) so the icon never shifts vertically as selection
/// changes. Floating drops that reserved space when idle instead: there's
/// no label to leave room for, so the icon centers in the whole button and
/// renders a touch bigger.
class _AndroidItem extends StatelessWidget {
  final NooNavDestination destination;
  final bool selected;
  final bool floating;
  final VoidCallback onTap;

  const _AndroidItem({
    required this.destination,
    required this.selected,
    required this.floating,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    final colors = context.nooColors;
    final iconColor = selected ? colors.accentText : colors.fg2;

    final Widget content;
    if (floating && !selected) {
      content = Center(
        child: Icon(destination.icon, size: 25, color: iconColor),
      );
    } else {
      content = Padding(
        padding: EdgeInsets.only(
          top: floating ? _kFloatingPillTop : _kAttachedPillTop,
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            SizedBox(
              height: _kAndroidPillHeight,
              child: Center(
                child: Icon(destination.icon, size: 24, color: iconColor),
              ),
            ),
            const SizedBox(height: 4),
            AnimatedOpacity(
              duration: NooMotion.base,
              curve: NooMotion.ease,
              opacity: selected ? 1 : 0,
              child: Text(
                destination.label,
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                style: NooText.navLabelActive.copyWith(
                  height: 1,
                  color: colors.fg1,
                ),
              ),
            ),
          ],
        ),
      );
    }

    return Semantics(
      button: true,
      selected: selected,
      label: destination.label,
      child: GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: onTap,
        child: content,
      ),
    );
  }
}