import 'dart:ui' show ImageFilter, lerpDouble;
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import 'package:miler/views/Dashboard/pickups/pickups.dart';
import 'package:miler/views/Dashboard/home/homepage.dart';
import 'package:miler/views/Dashboard/activity/activity_page.dart';
import 'package:miler/views/Dashboard/profile/Profilepage.dart';
import 'package:miler/views/helpers/constants/Font_constant.dart';
import 'package:miler/views/helpers/constants/Colorconstants.dart';
import 'package:miler/views/helpers/constants/design_constants.dart';

class BottomPage extends StatefulWidget {
  final int initialIndex;
  final Widget? overridePage;
  const BottomPage({super.key, this.initialIndex = 0, this.overridePage});

  /// Cross-tab navigation request.
  static final ValueNotifier<int?> tabRequest = ValueNotifier<int?>(null);

  /// Switch the shell to [index]. 0 Home · 1 Bookings · 2 Activity · 3 Account.
  static void goToTab(int index) => tabRequest.value = index;

  /// The tab on screen right now.
  ///
  /// Published because the shell keeps every tab **alive**: the pages live in
  /// an `IndexedStack`, which builds all four at launch and only changes which
  /// one is painted. A page's `initState` therefore runs once, before the rider
  /// has done anything — so a tab that loads its data there shows whatever was
  /// true at app start for the rest of the session. Activity hit exactly that:
  /// the rider finished a stop, opened the tab, and read a result fetched
  /// before he had finished anything.
  ///
  /// A page that needs to be current listens to this and re-reads when its own
  /// index arrives. Cheaper than rebuilding the tab from scratch, and it keeps
  /// scroll position and state, which is why the IndexedStack is there.
  static final ValueNotifier<int> currentTab = ValueNotifier<int>(0);

  /// Height of the floating bar at rest, and the gap to the screen edge.
  static const double navBarHeight = 66;
  static const double navBarGap = 10;

  /// Height of the bar once the rider has scrolled into a list.
  ///
  /// ── Why it shrinks instead of leaving ──
  ///
  /// It used to slide off the bottom of the screen entirely and come back when
  /// he reversed. That buys 66pt of list, and costs him the ability to change
  /// tab at all until he scrolls the other way — on a long Activity list, the
  /// only route out is a gesture he has to know about. A control that vanishes
  /// is not a smaller control; it is a missing one.
  ///
  /// Compacting keeps every target on screen and still hands back most of the
  /// room: labels go, the icons draw in, and the pill narrows. This is what
  /// Instagram's iOS tab bar does, and it is why that bar never feels in the
  /// way despite never going away.
  static const double navBarHeightCompact = 46;

  /// Room the bar claims at the foot of a tab page, system inset included.
  ///
  /// Always the *resting* height, even while the bar is compact. The bar is a
  /// `Positioned` pill inside the shell's `Stack`, not a `bottomNavigationBar`,
  /// so the Scaffold reserves no room for it and `SafeArea` knows nothing about
  /// it — anything a page pins to the bottom ends up underneath it otherwise.
  ///
  /// Deliberately not the live height. Pages used to follow the bar up and down
  /// through a `navVisible` notifier, which meant a pinned banner re-laid itself
  /// out every time the rider changed scroll direction. Reserving the larger of
  /// the two costs 20pt of gap while compact and buys a layout that never moves.
  static double bottomInset(BuildContext context) =>
      MediaQuery.of(context).padding.bottom + navBarGap.h + navBarHeight.h;

  @override
  State<BottomPage> createState() => _BottomPageState();
}

class _BottomPageState extends State<BottomPage> with TickerProviderStateMixin {
  late int selected;
  late final List<Widget> _pages;

  late final AnimationController _tabAnim;
  late final Animation<double> _tabCurve;

  /// Drives the selection pill from the tab it was on to the tab just tapped.
  ///
  /// The pill used to be part of each tab — an `AnimatedContainer` whose fill
  /// went from transparent to red — so going Account → Home faded one pill out
  /// on the right while a second faded in on the left. Nothing moved, which is
  /// why it appeared "suddenly": there was never anything to cross Bookings and
  /// Activity with.
  ///
  /// There is now exactly one pill, owned by the bar, and this is its position
  /// in tab units (2.0 is dead centre of Activity, 2.5 is between Activity and
  /// Account). It is the single source of truth for the tint on every icon and
  /// label too, so a tab lights up as the pill passes over it rather than
  /// switching colour the instant it is tapped and waiting for the pill to
  /// catch up.
  /// Initialised *here* rather than in `initState`, deliberately.
  ///
  /// A `late final` assigned in `initState` is never filled in on a `State` that
  /// already exists, and hot reload reuses the existing `State` — it does not
  /// re-run `initState`. So the reloaded `build` read a controller this instance
  /// had never been given and threw `LateInitializationError: Field '_pillAnim'
  /// has not been initialized`, taking the whole app down to a red screen until
  /// a full restart.
  ///
  /// A `late` field initialiser runs on first *access* instead, which happens
  /// during that first post-reload build, so the field is simply there. `this`
  /// is available because the initialiser is lazy — a plain (non-late) field
  /// initialiser could not reach `vsync: this`.
  late final AnimationController _pillAnim = AnimationController(
    vsync: this,
    // Slower than the 280ms the fading pills used. That duration was chosen for
    // a cross-fade in place; a pill that has to physically cross two tabs needs
    // long enough for the eye to follow it, or the travel is technically there
    // and reads as a jump anyway.
    duration: const Duration(milliseconds: 380),
    value: 1.0,
  );

  /// Symmetric easing: it accelerates away from the old tab and settles into the
  /// new one. `easeOutCubic` — right for something appearing — starts at full
  /// speed, which on a sliding object looks like it was already moving before
  /// the tap.
  late final Animation<double> _pillCurve = CurvedAnimation(
    parent: _pillAnim,
    curve: Curves.easeInOutCubic,
  );

  late Tween<double> _pillTween = Tween<double>(
    begin: selected.toDouble(),
    end: selected.toDouble(),
  );

  double get _pillPos => _pillTween.evaluate(_pillCurve);

  /// 0 at rest, 1 fully compact. Everything the bar changes as it shrinks —
  /// height, corner radius, side inset, icon size, label opacity — is read off
  /// this one value, so the parts cannot drift out of step with each other.
  late final AnimationController _compactAnim = AnimationController(
    vsync: this,
    duration: const Duration(milliseconds: 260),
  );

  late final Animation<double> _compact = CurvedAnimation(
    parent: _compactAnim,
    curve: Curves.easeOutCubic,
    reverseCurve: Curves.easeOutCubic,
  );

  bool _isCompact = false;

  void _setCompact(bool compact) {
    if (_isCompact == compact) return;
    _isCompact = compact;
    compact ? _compactAnim.forward() : _compactAnim.reverse();
  }

  double _scrollAccum = 0;

  static const double _compactAfter = 24;
  static const double _expandAfter = 6;

  static const _navItems = [
    _NavItem(Icons.home_rounded, Icons.home_outlined, 'Home'),
    _NavItem(
      Icons.local_shipping_rounded,
      Icons.local_shipping_outlined,
      'Bookings',
    ),
    // Was Earnings. A pay figure is a once-or-twice-a-day read and it did not
    // need a permanent quarter of the bar — it opens from Account now. What the
    // rider glances at between stops is what he has already finished, which
    // used to sit on Home clogging the list he decides from.
    _NavItem(Icons.history_rounded, Icons.history_outlined, 'Activity'),
    _NavItem(Icons.person_rounded, Icons.person_outline, 'Account'),
  ];

  @override
  void initState() {
    super.initState();
    selected = widget.initialIndex;
    BottomPage.currentTab.value = widget.initialIndex;
    _pages = [
      widget.overridePage ?? const Homepage(),
      const MyPickups(),
      const ActivityPage(),
      const ProfilePage(),
    ];
    _tabAnim = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 300),
      value: 1.0,
    );
    _tabCurve = CurvedAnimation(parent: _tabAnim, curve: Curves.easeOutCubic);

    BottomPage.tabRequest.addListener(_onTabRequested);
  }

  void _onTabRequested() {
    final requested = BottomPage.tabRequest.value;
    if (requested == null || !mounted) return;
    BottomPage.tabRequest.value = null;
    if (requested >= 0 && requested < _pages.length) _selectTab(requested);
  }

  void _selectTab(int i) {
    _scrollAccum = 0;
    _setCompact(false);
    if (i == selected) return;

    HapticFeedback.lightImpact();

    // Start from where the pill actually *is*, not from the tab it was last
    // headed to. Tapping again mid-slide otherwise teleports it back to the
    // previous tab and re-runs the whole journey.
    _pillTween = Tween<double>(begin: _pillPos, end: i.toDouble());
    _pillAnim.forward(from: 0.0);

    setState(() => selected = i);
    BottomPage.currentTab.value = i;
    _tabAnim.forward(from: 0.0);
  }

  @override
  void dispose() {
    BottomPage.tabRequest.removeListener(_onTabRequested);
    _tabAnim.dispose();
    _pillAnim.dispose();
    _compactAnim.dispose();
    super.dispose();
  }

  bool _onScroll(ScrollNotification n) {
    if (n.metrics.axis != Axis.vertical) return false;

    // A page too short to scroll can never compact the bar — otherwise a rider
    // on a short screen ends up with the small version for no reason.
    if (n.metrics.maxScrollExtent <= 0) {
      _scrollAccum = 0;
      _setCompact(false);
      return false;
    }

    if (n is! ScrollUpdateNotification) return false;
    final delta = n.scrollDelta ?? 0;
    if (delta == 0) return false;

    _scrollAccum = (_scrollAccum * delta > 0) ? _scrollAccum + delta : delta;

    if (delta > 0 && !_isCompact && _scrollAccum > _compactAfter) {
      _scrollAccum = 0;
      _setCompact(true);
    } else if (delta < 0 && _isCompact && _scrollAccum < -_expandAfter) {
      _scrollAccum = 0;
      _setCompact(false);
    }
    return false;
  }

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: Theme.of(context).copyWith(
        textTheme: Theme.of(
          context,
        ).textTheme.apply(fontFamily: FontConstants.fontFamily),
        splashColor: Colors.transparent,
        highlightColor: Colors.transparent,
      ),
      child: Scaffold(
        backgroundColor: ColorConstants.surface,
        extendBody: true,
        body: NotificationListener<ScrollNotification>(
          onNotification: _onScroll,
          child: Stack(
            children: [
              // Page content
              Positioned.fill(
                child: FadeTransition(
                  opacity: _tabCurve,
                  child: AnimatedBuilder(
                    animation: _tabCurve,
                    builder: (_, child) => Transform.translate(
                      offset: Offset(0, 8 * (1 - _tabCurve.value)),
                      child: child,
                    ),
                    child: IndexedStack(index: selected, children: _pages),
                  ),
                ),
              ),

              // ── Floating frosted bar, compacting rather than leaving ──
              //
              // Every dimension is lerped off one animation value, so the
              // height, the radius, the inset and the contents shrink together
              // instead of each running its own clock.
              AnimatedBuilder(
                animation: Listenable.merge([_compact, _pillAnim]),
                builder: (context, _) {
                  final k = _compact.value;
                  final side = lerpDouble(16.w, 30.w, k)!;
                  final height = lerpDouble(
                    BottomPage.navBarHeight.h,
                    BottomPage.navBarHeightCompact.h,
                    k,
                  )!;
                  final radius = lerpDouble(32.r, 23.r, k)!;
                  final pos = _pillPos;

                  return Positioned(
                    left: side,
                    right: side,
                    bottom:
                        MediaQuery.of(context).padding.bottom +
                        BottomPage.navBarGap.h,
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(radius),
                      child: BackdropFilter(
                        filter: ImageFilter.blur(sigmaX: 20.0, sigmaY: 20.0),
                        child: DecoratedBox(
                          decoration: BoxDecoration(
                            color: ColorConstants.pureSurface.withValues(
                              alpha: 0.82,
                            ),
                            borderRadius: BorderRadius.circular(radius),
                            border: Border.all(
                              color: Colors.black.withValues(alpha: 0.06),
                              width: 1.0,
                            ),
                            boxShadow: [
                              BoxShadow(
                                color: Colors.black.withValues(alpha: 0.07),
                                blurRadius: 28,
                                offset: const Offset(0, 8),
                              ),
                            ],
                          ),
                          child: SizedBox(
                            height: height,
                            child: Padding(
                              padding: EdgeInsets.symmetric(
                                horizontal: 6.w,
                                vertical: lerpDouble(6.h, 4.h, k)!,
                              ),
                              child: LayoutBuilder(
                                builder: (context, box) {
                                  // Every tab gets an equal slot, matching the
                                  // `Expanded` row below it, so the pill lands
                                  // exactly under an icon at whole values of
                                  // `pos`.
                                  final slot = box.maxWidth / _navItems.length;
                                  return Stack(
                                    children: [
                                      PositionedDirectional(
                                        start: slot * pos,
                                        top: 0,
                                        bottom: 0,
                                        width: slot,
                                        child: Container(
                                          margin: EdgeInsets.symmetric(
                                            horizontal: 3.w,
                                          ),
                                          decoration: BoxDecoration(
                                            // Brand, to agree with the glyph
                                            // it sits behind — see the tint in
                                            // [_NavBarItem].
                                            color: ColorConstants.primaryWash,
                                            borderRadius: BorderRadius.circular(
                                              lerpDouble(34.r, 20.r, k)!,
                                            ),
                                          ),
                                        ),
                                      ),
                                      Row(
                                        children: List.generate(
                                          _navItems.length,
                                          (i) {
                                            // How lit this tab is: 1 with the
                                            // pill on it, 0 once the pill is a
                                            // whole tab away. The tabs being
                                            // crossed therefore warm up and cool
                                            // down as it passes, which is what
                                            // sells the movement.
                                            final t = (1.0 - (pos - i).abs())
                                                .clamp(0.0, 1.0);
                                            return Expanded(
                                              child: _NavBarItem(
                                                item: _navItems[i],
                                                t: t,
                                                compact: k,
                                                onTap: () => _selectTab(i),
                                              ),
                                            );
                                          },
                                        ),
                                      ),
                                    ],
                                  );
                                },
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class _NavItem {
  final IconData activeIcon;
  final IconData inactiveIcon;
  final String label;
  const _NavItem(this.activeIcon, this.inactiveIcon, this.label);
}

class _NavBarItem extends StatelessWidget {
  final _NavItem item;

  /// How lit this tab is, 0 → 1, driven by where the selection pill currently
  /// is rather than by which tab is selected.
  ///
  /// This is the whole point of the redesign. With a boolean the icon flipped
  /// red the instant it was tapped while the pill was still two tabs away —
  /// destination and vehicle arriving at different times. Tying the tint to the
  /// pill's distance instead means Bookings and Activity glow briefly as it
  /// crosses them and fade again behind it.
  final double t;

  /// 0 at rest, 1 fully compact. The label collapses and the icon draws in as
  /// this rises — see [BottomPage.navBarHeightCompact].
  final double compact;

  final VoidCallback onTap;

  const _NavBarItem({
    required this.item,
    required this.t,
    required this.compact,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    // ── The selected tab wears the brand ──
    //
    // This was [ColorConstants.emphasis], the neutral slate, on the rule that
    // colour marks meaning and neutral marks state. The brand mark is not on
    // any tab now that Home carries the rider's own avatar, so the nav bar is
    // where Doormile's red belongs: it is the one piece of chrome on screen at
    // all times, and the selected tab is the one thing on it worth colouring.
    //
    // #960019 reads at 9.4:1 on the bar's near-white frost, so it is legible
    // outdoors — which is the only reason the neutral was ever safer.
    final Color activeColor = ColorConstants.primary;
    final Color inactiveColor = ColorConstants.onSurfaceVariant;

    // Eased rather than linear: a straight ramp makes every tab the pill passes
    // over look half-selected, so the bar reads as having no clear selection
    // mid-slide. Cubed keeps the glow tight around the pill.
    final lit = t * t * t;
    final tint = Color.lerp(inactiveColor, activeColor, lit)!;

    // The app's primary navigation was four unlabelled `InkWell`s: a screen
    // reader announced "Home", "Bookings", "Activity", "Account" as loose text
    // with no role and no indication of which one the rider was on. `selected`
    // is the part that matters — without it he cannot tell where he is.
    return Semantics(
      button: true,
      selected: lit > 0.5,
      label: item.label,
      excludeSemantics: true,
      child: InkWell(
        onTap: onTap,
        borderRadius: BorderRadius.circular(DesignConstants.radiusXl),
        splashColor: Colors.transparent,
        highlightColor: Colors.transparent,
        // Transparent, not tinted: the pill behind the row is the fill now.
        child: Padding(
          padding: EdgeInsets.symmetric(vertical: 4.h, horizontal: 4.w),
          child: Center(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Transform.scale(
                  scale: (1.0 + 0.08 * lit) * (1 - 0.06 * compact),
                  // Filled and outline glyph stacked and cross-faded on the same
                  // value, so the icon fills in as the pill arrives. An
                  // `AnimatedSwitcher` keyed off a bool ran on its own 220ms clock
                  // and finished well before the pill did.
                  child: Stack(
                    alignment: Alignment.center,
                    children: [
                      Opacity(
                        opacity: 1 - lit,
                        child: Icon(
                          item.inactiveIcon,
                          color: tint,
                          size: 21.sp,
                        ),
                      ),
                      Opacity(
                        opacity: lit,
                        child: Icon(item.activeIcon, color: tint, size: 21.sp),
                      ),
                    ],
                  ),
                ),
                // ── The label collapses, it does not just fade ──
                //
                // Fading alone would leave its height behind, so the bar could
                // not actually get shorter — it would shrink around a blank
                // line. `Align(heightFactor:)` inside a `ClipRect` hands the
                // room back as the text goes.
                //
                // The opacity runs ahead of the height (×1.8) so the label is
                // gone before the line has finished closing, rather than being
                // squashed on the way out.
                ClipRect(
                  child: Align(
                    alignment: Alignment.topCenter,
                    heightFactor: (1 - compact).clamp(0.0, 1.0),
                    child: Opacity(
                      opacity: (1 - compact * 1.8).clamp(0.0, 1.0),
                      child: Padding(
                        padding: EdgeInsets.only(top: 2.h),
                        child: Text(
                          item.label,
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            color: tint,
                            fontSize: 10.5.sp,
                            fontWeight: FontWeight.lerp(
                              FontWeight.w500,
                              FontWeight.w700,
                              lit,
                            ),
                            fontFamily: FontConstants.fontFamily,
                            letterSpacing: -0.1,
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}