import 'dart:async';
import 'package:flutter/material.dart';
import '../utils/farb_theme.dart';

/// Bestätigungs-Button: 3 Sekunden gedrückt halten, dann feuert [onBestaetigt].
/// Loslassen vor Ablauf bricht ab (Fortschrittsbalken geht zurück).
class HalteZumBestaetigen extends StatefulWidget {
  final String text;
  final Color farbe;
  final VoidCallback onBestaetigt;
  final Duration dauer;

  const HalteZumBestaetigen({
    super.key,
    required this.text,
    required this.onBestaetigt,
    this.farbe = MeloTheme.rot,
    this.dauer = const Duration(seconds: 3),
  });

  @override
  State<HalteZumBestaetigen> createState() => _HalteZumBestaetigenState();
}

class _HalteZumBestaetigenState extends State<HalteZumBestaetigen> {
  double _fortschritt = 0;
  Timer? _timer;
  bool _aktiv = false;

  void _starte() {
    if (_aktiv) return;
    _aktiv = true;
    final schritte = widget.dauer.inMilliseconds ~/ 50;
    _timer = Timer.periodic(const Duration(milliseconds: 50), (t) {
      setState(() => _fortschritt += 1 / schritte);
      if (_fortschritt >= 1) {
        t.cancel();
        _timer = null;
        _aktiv = false;
        widget.onBestaetigt();
      }
    });
  }

  void _stoppe() {
    _timer?.cancel();
    _timer = null;
    _aktiv = false;
    if (_fortschritt > 0 && _fortschritt < 1) {
      setState(() => _fortschritt = 0);
    }
  }

  @override
  void dispose() {
    _timer?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTapDown: (_) => _starte(),
      onTapUp: (_) => _stoppe(),
      onTapCancel: _stoppe,
      child: Container(
        width: double.infinity,
        decoration: BoxDecoration(
          color: widget.farbe.withValues(alpha: 0.12),
          border: Border.all(color: widget.farbe, width: 1.5),
          borderRadius: BorderRadius.circular(10),
        ),
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(Icons.lock_clock, color: widget.farbe, size: 18),
                const SizedBox(width: 8),
                Flexible(
                  child: Text(
                    widget.text,
                    style: TextStyle(
                        color: widget.farbe,
                        fontSize: 13,
                        fontWeight: FontWeight.w600),
                  ),
                ),
              ],
            ),
            const SizedBox(height: 8),
            ClipRRect(
              borderRadius: BorderRadius.circular(4),
              child: LinearProgressIndicator(
                value: _fortschritt,
                minHeight: 6,
                backgroundColor: MeloTheme.dunkel2,
                color: widget.farbe,
              ),
            ),
          ],
        ),
      ),
    );
  }
}