import 'dart:ui';

import 'package:core_localization/core_localization.dart';
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';

/// A custom bottom navigation bar for the Staff app.
///
/// This widget provides a glassmorphic bottom navigation bar with blur effect
/// and follows the KROW Design System guidelines. It displays five tabs:
/// Shifts, Payments, Home, Clock In, and Profile.
///
/// The widget uses:
/// - [UiColors] for all color values
/// - [UiTypography] for text styling
/// - [UiIcons] for icon assets
/// - [UiConstants] for spacing and sizing
class StaffMainBottomBar extends StatelessWidget {
  /// Creates a [StaffMainBottomBar].
  ///
  /// The [currentIndex] indicates which tab is currently selected.
  /// The [onTap] callback is invoked when a tab is tapped.
  const StaffMainBottomBar({
    required this.currentIndex,
    required this.onTap,
    super.key,
  });

  /// The index of the currently selected tab.
  final int currentIndex;

  /// Callback invoked when a tab is tapped.
  ///
  /// The callback receives the index of the tapped tab.
  final ValueChanged<int> onTap;

  @override
  Widget build(BuildContext context) {
    final t = Translations.of(context);
    // Staff App colors from design system
    // Using primary (Blue) for active as per prototype
    const Color activeColor = UiColors.primary;
    const Color inactiveColor = UiColors.textInactive;

    return Stack(
      clipBehavior: Clip.none,
      children: <Widget>[
        // Glassmorphic background with blur effect
        Positioned.fill(
          child: ClipRect(
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
              child: Container(
                decoration: BoxDecoration(
                  color: UiColors.white.withValues(alpha: 0.85),
                  border: Border(
                    top: BorderSide(
                      color: UiColors.black.withValues(alpha: 0.1),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
        // Navigation items
        Container(
          padding: EdgeInsets.only(
            bottom: MediaQuery.of(context).padding.bottom + UiConstants.space2,
            top: UiConstants.space4,
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: <Widget>[
              _buildNavItem(
                index: 0,
                icon: UiIcons.briefcase,
                label: t.staff.main.tabs.shifts,
                activeColor: activeColor,
                inactiveColor: inactiveColor,
              ),
              _buildNavItem(
                index: 1,
                icon: UiIcons.dollar,
                label: t.staff.main.tabs.payments,
                activeColor: activeColor,
                inactiveColor: inactiveColor,
              ),
              _buildNavItem(
                index: 2,
                icon: UiIcons.home,
                label: t.staff.main.tabs.home,
                activeColor: activeColor,
                inactiveColor: inactiveColor,
              ),
              _buildNavItem(
                index: 3,
                icon: UiIcons.clock,
                label: t.staff.main.tabs.clock_in,
                activeColor: activeColor,
                inactiveColor: inactiveColor,
              ),
              _buildNavItem(
                index: 4,
                icon: UiIcons.users,
                label: t.staff.main.tabs.profile,
                activeColor: activeColor,
                inactiveColor: inactiveColor,
              ),
            ],
          ),
        ),
      ],
    );
  }

  /// Builds a single navigation item.
  ///
  /// Uses design system tokens for all styling:
  /// - Icon size uses a standard value (24px is acceptable for navigation icons)
  /// - Spacing uses [UiConstants.space1]
  /// - Typography uses [UiTypography.footnote2m]
  /// - Colors are passed as parameters from design system
  Widget _buildNavItem({
    required int index,
    required IconData icon,
    required String label,
    required Color activeColor,
    required Color inactiveColor,
  }) {
    final bool isSelected = currentIndex == index;
    return Expanded(
      child: GestureDetector(
        onTap: () => onTap(index),
        behavior: HitTestBehavior.opaque,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            Icon(
              icon,
              color: isSelected ? activeColor : inactiveColor,
              size: UiConstants.iconLg,
            ),
            const SizedBox(height: UiConstants.space1),
            Text(
              label,
              style: UiTypography.footnote2m.copyWith(
                color: isSelected ? activeColor : inactiveColor,
              ),
            ),
          ],
        ),
      ),
    );
  }
}
