AR-Autopilot/display/lib/widgets/themed/mode_selector.dart

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

import '../../theme/autopilot_theme.dart';
import '../../theme/theme_provider.dart';

/// Autopilot mode selector — STANDBY / HEADING_HOLD / TRACK_KEEP.
///
/// The active mode is highlighted with [AutopilotTheme.accentMid].
/// Inactive modes use muted text and panel border.
/// Minimum touch target: 48×48 px per mode button.
enum AutopilotMode { standby, headingHold, trackKeep }

extension AutopilotModeLabel on AutopilotMode {
  String get label => switch (this) {
        AutopilotMode.standby => 'STANDBY',
        AutopilotMode.headingHold => 'HDG HOLD',
        AutopilotMode.trackKeep => 'TRACK',
      };
}

class ModeSelector extends StatelessWidget {
  const ModeSelector({
    super.key,
    required this.activeMode,
    required this.onModeSelected,
  });

  final AutopilotMode activeMode;
  final ValueChanged<AutopilotMode> onModeSelected;

  @override
  Widget build(BuildContext context) {
    final theme = context.watch<AutopilotThemeProvider>().current;
    return Container(
      decoration: BoxDecoration(
        gradient: theme.panelBackground,
        borderRadius: BorderRadius.circular(8),
        border: Border.all(color: theme.panelBorder),
      ),
      child: Row(
        children: AutopilotMode.values.map((mode) {
          final isActive = mode == activeMode;
          return Expanded(
            child: _ModeButton(
              theme: theme,
              mode: mode,
              isActive: isActive,
              onTap: () => onModeSelected(mode),
            ),
          );
        }).toList(),
      ),
    );
  }
}

class _ModeButton extends StatelessWidget {
  const _ModeButton({
    required this.theme,
    required this.mode,
    required this.isActive,
    required this.onTap,
  });

  final AutopilotTheme theme;
  final AutopilotMode mode;
  final bool isActive;
  final VoidCallback onTap;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 200),
        constraints: const BoxConstraints(minHeight: 48),
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: isActive ? theme.accentMid.withValues(alpha: 0.15) : Colors.transparent,
          borderRadius: BorderRadius.circular(6),
        ),
        child: Text(
          mode.label,
          style: TextStyle(
            color: isActive ? theme.accentLight : theme.textMuted,
            fontSize: 12,
            fontWeight: isActive ? FontWeight.w700 : FontWeight.w400,
            letterSpacing: 0.8,
            shadows: isActive && theme.accentGlowRadius > 0
                ? [Shadow(color: theme.accentGlowColor, blurRadius: 6)]
                : null,
          ),
        ),
      ),
    );
  }
}