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

import '../providers/wind_provider.dart';
import 'wind_arrow_icon.dart';

/// Kopfleisten-Pille mit Windrichtung/-geschwindigkeit auf 120 m AGL ueber
/// dem Referenzort (Doku 3.8). Antippen schaltet die Wind-Marker an jedem
/// Wegpunkt ein/aus (HTML-Demonstrator: showPerWaypointWind).
class HeaderWindPill extends ConsumerWidget {
  const HeaderWindPill({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final state = ref.watch(headerWindProvider);
    final sample = state.sample;
    final active = state.showPerWaypoint;

    return GestureDetector(
      onTap: () => ref.read(headerWindProvider.notifier).toggleShowPerWaypoint(),
      child: Container(
        height: 34,
        padding: const EdgeInsets.symmetric(horizontal: 10),
        decoration: BoxDecoration(
          color: active
              ? const Color(0xFF4D9DFF).withValues(alpha: 0.32)
              : Colors.black.withValues(alpha: 0.55),
          borderRadius: BorderRadius.circular(17),
          border: Border.all(
            color: active
                ? const Color(0xFF4D9DFF)
                : Colors.white.withValues(alpha: 0.4),
          ),
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            if (sample != null) ...[
              WindArrowIcon(dirFromDeg: sample.dirFromDeg, size: 15),
              const SizedBox(width: 4),
            ],
            Text(
              sample != null ? '${sample.speedMs.round()} m/s' : '—',
              style: const TextStyle(
                color: Colors.white,
                fontSize: 12,
                fontWeight: FontWeight.w500,
              ),
            ),
          ],
        ),
      ),
    );
  }
}