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

import '../../transport/flight_controller_link.dart';
import '../providers/flight_mode_provider.dart';

/// Flugmodus-Auswahl im Fly-Modus (Doku 3.11/7.2, HTML-Demonstrator:
/// #flightModePill/#flightModeDropdown). Rein lokale UI-Auswahl, noch
/// ohne echte FlightControllerLink-Anbindung (Doku 4.19) - Auswahl wirkt
/// sich aktuell nur auf die Anzeige aus.
class FlightModePill extends ConsumerWidget {
  const FlightModePill({super.key});

  static const _labels = {
    FlightMode.missionRun: 'Waypoint',
    FlightMode.guidedPoint: 'Point and Fly',
    FlightMode.returnHome: 'Return to Home',
    FlightMode.hold: 'Manual',
  };

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final mode = ref.watch(flightModeProvider);

    return PopupMenuButton<FlightMode>(
      tooltip: 'Flight mode',
      color: const Color(0xF20F0F0F),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(14),
        side: BorderSide(color: Colors.white.withValues(alpha: 0.2)),
      ),
      onSelected: (selected) => ref.read(flightModeProvider.notifier).select(selected),
      itemBuilder: (context) => [
        for (final entry in _labels.entries)
          PopupMenuItem(
            value: entry.key,
            child: Text(
              entry.value,
              style: TextStyle(
                color: entry.key == mode ? const Color(0xFFE2574A) : Colors.white,
                fontWeight: entry.key == mode ? FontWeight.w700 : FontWeight.w500,
              ),
            ),
          ),
      ],
      child: Container(
        height: 38,
        padding: const EdgeInsets.symmetric(horizontal: 14),
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: Colors.black.withValues(alpha: 0.68),
          borderRadius: BorderRadius.circular(19),
          border: Border.all(color: Colors.white.withValues(alpha: 0.4)),
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Flexible(
              child: Text(
                'Mode: ${_labels[mode]}',
                overflow: TextOverflow.ellipsis,
                maxLines: 1,
                style: const TextStyle(
                  color: Colors.white,
                  fontSize: 15,
                  fontWeight: FontWeight.w700,
                ),
              ),
            ),
            const SizedBox(width: 4),
            Icon(Icons.arrow_drop_down, color: Colors.white.withValues(alpha: 0.7)),
          ],
        ),
      ),
    );
  }
}