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

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

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

/// The DISENGAGE emergency button.
///
/// Always the highest-contrast element on screen.
/// Minimum touch target: 60×60 px (critical control).
///
/// The gradient and glow colours adapt to the active theme automatically.
/// In the wine theme the button is amber-gold (not red) — see [wineTheme].
class DisengageButton extends StatelessWidget {
  const DisengageButton({
    super.key,
    required this.onPressed,
    this.enabled = true,
  });

  final VoidCallback? onPressed;
  final bool enabled;

  /// Minimum touch target for a critical control.
  static const double kMinSize = 60.0;

  @override
  Widget build(BuildContext context) {
    final theme = context.watch<AutopilotThemeProvider>().current;
    return _DisengageButtonContent(
      theme: theme,
      onPressed: enabled ? onPressed : null,
    );
  }
}

class _DisengageButtonContent extends StatefulWidget {
  const _DisengageButtonContent({
    required this.theme,
    required this.onPressed,
  });

  final AutopilotTheme theme;
  final VoidCallback? onPressed;

  @override
  State<_DisengageButtonContent> createState() =>
      _DisengageButtonContentState();
}

class _DisengageButtonContentState
    extends State<_DisengageButtonContent> {
  bool _pressed = false;

  @override
  Widget build(BuildContext context) {
    final t = widget.theme;
    final enabled = widget.onPressed != null;

    return GestureDetector(
      onTapDown: enabled ? (_) => setState(() => _pressed = true) : null,
      onTapUp: enabled
          ? (_) {
              setState(() => _pressed = false);
              widget.onPressed!();
            }
          : null,
      onTapCancel: () => setState(() => _pressed = false),
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 120),
        constraints: const BoxConstraints(
          minWidth: DisengageButton.kMinSize,
          minHeight: DisengageButton.kMinSize,
        ),
        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 14),
        decoration: BoxDecoration(
          gradient: t.disengageBackground,
          borderRadius: BorderRadius.circular(8),
          border: Border.all(color: t.disengageBorder, width: 1.5),
          boxShadow: [
            BoxShadow(
              color: t.disengageGlow,
              blurRadius: _pressed ? 4 : 12,
              spreadRadius: _pressed ? 0 : 2,
            ),
          ],
        ),
        child: Text(
          'DISENGAGE',
          textAlign: TextAlign.center,
          style: TextStyle(
            color: t.disengageText,
            fontSize: 13,
            fontWeight: FontWeight.w800,
            letterSpacing: 1.2,
            shadows: [
              Shadow(
                color: t.disengageGlow,
                blurRadius: 4,
              ),
            ],
          ),
        ),
      ),
    );
  }
}