recipe-manager/mobile/lib/features/cook_mode/cook_mode_screen.dart

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:wakelock_plus/wakelock_plus.dart';
import '../../core/constants/app_theme.dart';
import '../../core/models/recipe.dart';

class CookModeScreen extends StatefulWidget {
  final Recipe recipe;

  const CookModeScreen({super.key, required this.recipe});

  @override
  State<CookModeScreen> createState() => _CookModeScreenState();
}

class _CookModeScreenState extends State<CookModeScreen> {
  int _currentStepIndex = 0;
  double _scaleMultiplier = 1.0;
  final PageController _pageController = PageController();

  // Simple Timer State
  Timer? _activeTimer;
  int _timerSecondsRemaining = 0;
  bool _isTimerRunning = false;

  @override
  void initState() {
    super.initState();
    // Keep screen on during cooking session so hands don't need to touch phone
    WakelockPlus.enable();
  }

  @override
  void dispose() {
    WakelockPlus.disable();
    _activeTimer?.cancel();
    _pageController.dispose();
    super.dispose();
  }

  void _startTimer(int minutes) {
    _activeTimer?.cancel();
    setState(() {
      _timerSecondsRemaining = minutes * 60;
      _isTimerRunning = true;
    });

    _activeTimer = Timer.periodic(const Duration(seconds: 1), (timer) {
      if (_timerSecondsRemaining <= 1) {
        timer.cancel();
        setState(() {
          _isTimerRunning = false;
          _timerSecondsRemaining = 0;
        });
        if (mounted) {
          showDialog(
            context: context,
            builder: (ctx) => AlertDialog(
              backgroundColor: AppTheme.surfaceElevated,
              title: const Text('Timer Finished! ⏰'),
              content: Text('Your ${minutes}-minute timer has ended.'),
              actions: [
                TextButton(
                  onPressed: () => Navigator.pop(ctx),
                  child: const Text('OK', style: TextStyle(color: AppTheme.primary)),
                ),
              ],
            ),
          );
        }
      } else {
        setState(() {
          _timerSecondsRemaining--;
        });
      }
    });
  }

  String _formatTimerTime(int totalSeconds) {
    final m = totalSeconds ~/ 60;
    final s = totalSeconds % 60;
    return '${m.toString().padLeft(2, '0')}:${s.toString().padLeft(2, '0')}';
  }

  @override
  Widget build(BuildContext context) {
    final totalSteps = widget.recipe.instructions.isNotEmpty ? widget.recipe.instructions.length : 1;

    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        backgroundColor: Colors.black,
        title: Text(widget.recipe.title, maxLines: 1, overflow: TextOverflow.ellipsis),
        actions: [
          // Scale selector
          PopupMenuButton<double>(
            initialValue: _scaleMultiplier,
            tooltip: 'Scale Servings',
            icon: Container(
              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
              decoration: BoxDecoration(
                color: AppTheme.surfaceElevated,
                borderRadius: BorderRadius.circular(8),
                border: Border.all(color: AppTheme.border),
              ),
              child: Text(
                '${_scaleMultiplier}x',
                style: const TextStyle(fontWeight: FontWeight.w700, fontSize: 13, color: AppTheme.primary),
              ),
            ),
            onSelected: (val) => setState(() => _scaleMultiplier = val),
            itemBuilder: (ctx) => const [
              PopupMenuItem(value: 0.5, child: Text('0.5x Servings')),
              PopupMenuItem(value: 1.0, child: Text('1.0x (Original)')),
              PopupMenuItem(value: 1.5, child: Text('1.5x Servings')),
              PopupMenuItem(value: 2.0, child: Text('2.0x Double Servings')),
            ],
          ),
          const SizedBox(width: 8),
        ],
      ),
      body: SafeArea(
        child: Column(
          children: [
            // Top: Active Timer Pill (if active)
            if (_isTimerRunning || _timerSecondsRemaining > 0)
              Container(
                margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
                decoration: BoxDecoration(
                  color: AppTheme.primary.withOpacity(0.2),
                  borderRadius: BorderRadius.circular(12),
                  border: Border.all(color: AppTheme.primary),
                ),
                child: Row(
                  children: [
                    const Icon(Icons.timer_rounded, color: AppTheme.primary),
                    const SizedBox(width: 10),
                    Text(
                      'Timer: ${_formatTimerTime(_timerSecondsRemaining)}',
                      style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w800, color: AppTheme.primary),
                    ),
                    const Spacer(),
                    IconButton(
                      icon: const Icon(Icons.stop_circle_rounded, color: AppTheme.danger),
                      onPressed: () {
                        _activeTimer?.cancel();
                        setState(() {
                          _isTimerRunning = false;
                          _timerSecondsRemaining = 0;
                        });
                      },
                    ),
                  ],
                ),
              ),

            // Step Progress Bar
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(4),
                child: LinearProgressIndicator(
                  value: (totalSteps > 0) ? (_currentStepIndex + 1) / totalSteps : 1.0,
                  backgroundColor: AppTheme.surfaceElevated,
                  color: AppTheme.primary,
                  minHeight: 6,
                ),
              ),
            ),

            // Step Carousel (Large readable text)
            Expanded(
              child: widget.recipe.instructions.isEmpty
                  ? const Center(child: Text('No instructions found for this recipe.', style: TextStyle(color: AppTheme.textMuted)))
                  : PageView.builder(
                      controller: _pageController,
                      itemCount: totalSteps,
                      onPageChanged: (i) => setState(() => _currentStepIndex = i),
                      itemBuilder: (ctx, index) {
                        final stepText = widget.recipe.instructions[index];
                        return Padding(
                          padding: const EdgeInsets.all(24.0),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                'STEP ${index + 1} OF $totalSteps',
                                style: const TextStyle(
                                  color: AppTheme.primary,
                                  fontSize: 14,
                                  fontWeight: FontWeight.w800,
                                  letterSpacing: 1.2,
                                ),
                              ),
                              const SizedBox(height: 16),
                              Expanded(
                                child: SingleChildScrollView(
                                  child: Text(
                                    stepText,
                                    style: const TextStyle(
                                      color: Colors.white,
                                      fontSize: 22,
                                      height: 1.5,
                                      fontWeight: FontWeight.w500,
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        );
                      },
                    ),
            ),

            // Bottom Quick Timers & Nav Buttons
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
              decoration: const BoxDecoration(
                color: AppTheme.surface,
                border: Border(top: BorderSide(color: AppTheme.border)),
              ),
              child: Column(
                children: [
                  // Quick timer shortcuts
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      const Text('Quick Timer: ', style: TextStyle(fontSize: 12, color: AppTheme.textMuted)),
                      _buildTimerChip(5),
                      const SizedBox(width: 8),
                      _buildTimerChip(10),
                      const SizedBox(width: 8),
                      _buildTimerChip(15),
                      const SizedBox(width: 8),
                      _buildTimerChip(30),
                    ],
                  ),
                  const SizedBox(height: 16),

                  // Nav Buttons
                  Row(
                    children: [
                      Expanded(
                        child: OutlinedButton.icon(
                          onPressed: _currentStepIndex > 0
                              ? () => _pageController.previousPage(duration: const Duration(milliseconds: 250), curve: Curves.easeInOut)
                              : null,
                          icon: const Icon(Icons.arrow_back_rounded),
                          label: const Text('Previous'),
                        ),
                      ),
                      const SizedBox(width: 14),
                      Expanded(
                        child: ElevatedButton.icon(
                          onPressed: _currentStepIndex < totalSteps - 1
                              ? () => _pageController.nextPage(duration: const Duration(milliseconds: 250), curve: Curves.easeInOut)
                              : () => Navigator.pop(context),
                          icon: Icon(_currentStepIndex < totalSteps - 1 ? Icons.arrow_forward_rounded : Icons.check_circle_rounded),
                          label: Text(_currentStepIndex < totalSteps - 1 ? 'Next Step' : 'Finish'),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildTimerChip(int minutes) {
    return InkWell(
      onTap: () => _startTimer(minutes),
      borderRadius: BorderRadius.circular(8),
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
        decoration: BoxDecoration(
          color: AppTheme.surfaceElevated,
          borderRadius: BorderRadius.circular(8),
          border: Border.all(color: AppTheme.border),
        ),
        child: Text(
          '${minutes}m',
          style: const TextStyle(fontSize: 12, fontWeight: FontWeight.w600, color: AppTheme.primary),
        ),
      ),
    );
  }
}