import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'timer_running_screen.dart';
import '../provider/timer_provider.dart';

class TimerSetupScreen extends ConsumerWidget {
  const TimerSetupScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final selectedMinutes = ref.watch(timerProvider.select((s) => s.selectedMinutes));

    return Scaffold(
      appBar: AppBar(title: const Text('Timer einstellen')),
      body: Padding(
        padding: const EdgeInsets.all(32.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'Rundendauer wählen',
              style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 60),

            // Großer Minuten-Anzeige
            Text(
              '$selectedMinutes',
              style: const TextStyle(fontSize: 120, fontWeight: FontWeight.bold),
            ),
            const Text(
              'Minuten',
              style: TextStyle(fontSize: 32),
            ),
            const SizedBox(height: 60),

            // Slider horizontal
            Slider(
              min: 5,
              max: 30,
              divisions: 25,
              value: selectedMinutes.toDouble(),
              onChanged: (val) {
                ref.read(timerProvider.notifier).setMinutes(val.round());
              },
            ),
            const SizedBox(height: 80),

            // Start Button
            ElevatedButton(
              onPressed: () {
                ref.read(timerProvider.notifier).start();
                Navigator.of(context).push(
                  MaterialPageRoute(builder: (_) => const TimerRunningScreen()),
                );
              },
              style: ElevatedButton.styleFrom(
                padding: const EdgeInsets.symmetric(horizontal: 50, vertical: 20),
                textStyle: const TextStyle(fontSize: 28),
              ),
              child: const Text('Start'),
            ),
          ],
        ),
      ),
    );
  }
}