import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import '../theme/app_theme.dart';

class VoiceShortcutsGuide extends StatelessWidget {
  const VoiceShortcutsGuide({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.vertical(top: Radius.circular(24)),
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          // Handle bar
          Center(
            child: Container(
              margin: const EdgeInsets.only(top: 12),
              width: 40,
              height: 4,
              decoration: BoxDecoration(
                color: Colors.grey[300],
                borderRadius: BorderRadius.circular(2),
              ),
            ),
          ),

          Padding(
            padding: const EdgeInsets.all(24.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    Container(
                      padding: const EdgeInsets.all(12),
                      decoration: const BoxDecoration(
                        color: AppTheme.primary,
                        shape: BoxShape.circle,
                      ),
                      child: const Icon(Icons.bolt, color: Colors.white),
                    ),
                    const Gap(16),
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            "Voice Shortcuts",
                            style: AppTheme.textTheme.headlineMedium,
                          ),
                          Text(
                            "Instant results, no waiting.",
                            style: AppTheme.textTheme.bodyMedium?.copyWith(
                              color: AppTheme.textSecondary,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),

                const Gap(32),

                // Shortcuts List
                _ShortcutSection(
                  icon: "⏱️",
                  title: "Timers",
                  color: const Color(0xFFE8F5E9), // Light Green
                  commands: [
                    _CommandRow('"Quick break"', "5 min timer"),
                    _CommandRow('"Long break"', "15 min timer"),
                    _CommandRow('"Pomodoro"', "25 min focus"),
                  ],
                ),

                const Gap(16),

                _ShortcutSection(
                  icon: "🥗",
                  title: "Food & Energy",
                  color: const Color(0xFFFFF3E0), // Light Orange
                  commands: [
                    _CommandRow('"Lunch"', "Meal ideas"),
                    _CommandRow('"Snack"', "Healthy snacks"),
                    _CommandRow('"I\'m tired"', "Set Low Energy"),
                  ],
                ),

                const Gap(16),

                _ShortcutSection(
                  icon: "🧘",
                  title: "Self Care",
                  color: const Color(0xFFE3F2FD), // Light Blue
                  commands: [
                    _CommandRow('"Stressed"', "Calming tips"),
                    _CommandRow('"Stretch"', "Movement"),
                    _CommandRow('"Help"', "See command list"),
                  ],
                ),

                const Gap(32),

                SizedBox(
                  width: double.infinity,
                  child: ElevatedButton(
                    onPressed: () => Navigator.pop(context),
                    style: ElevatedButton.styleFrom(
                      padding: const EdgeInsets.symmetric(vertical: 16),
                      backgroundColor: AppTheme.primary,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(16),
                      ),
                      elevation: 0,
                    ),
                    child: const Text(
                      "Got it",
                      style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                      ),
                    ),
                  ),
                ),
                const Gap(24),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class _ShortcutSection extends StatelessWidget {
  final String icon;
  final String title;
  final Color color;
  final List<Widget> commands;

  const _ShortcutSection({
    required this.icon,
    required this.title,
    required this.color,
    required this.commands,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: color.withOpacity(0.3),
        borderRadius: BorderRadius.circular(16),
        border: Border.all(color: color.withOpacity(0.5)),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Text(icon, style: const TextStyle(fontSize: 20)),
              const Gap(8),
              Text(
                title,
                style: const TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 16,
                ),
              ),
            ],
          ),
          const Gap(12),
          ...commands,
        ],
      ),
    );
  }
}

class _CommandRow extends StatelessWidget {
  final String command;
  final String action;

  const _CommandRow(this.command, this.action);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 8.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(
            command,
            style: const TextStyle(fontWeight: FontWeight.w600, fontSize: 15),
          ),
          Text(
            "→  $action",
            style: TextStyle(color: Colors.grey[600], fontSize: 14),
          ),
        ],
      ),
    );
  }
}
