import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import '../../../../core/theme/app_colors.dart';

/// Help page with user guides
class HelpPage extends StatelessWidget {
  const HelpPage({super.key});

  @override
  Widget build(BuildContext context) {
    return PopScope(
      canPop: false,
      onPopInvokedWithResult: (didPop, result) {
        if (!didPop) {
          context.pop();
        }
      },
      child: Scaffold(
        body: Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [
                Color(0xFF82C9BD),
                Color(0xFF7BA89C),
                Color(0xFFF68D2D),
                Color(0xFFF8F9FA),
              ],
              stops: [0.0, 0.2, 0.6, 1.0],
            ),
          ),
          child: SafeArea(
            child: Column(
              children: [
                // Custom AppBar
                Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Row(
                    children: [
                      IconButton(
                        icon: const Icon(Icons.arrow_back, color: Colors.white),
                        onPressed: () => context.pop(),
                      ),
                      const Expanded(
                        child: Text(
                          'Ajuda e Suporte',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 24,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                // Help content
                Expanded(
                  child: SingleChildScrollView(
                    padding: const EdgeInsets.all(16),
                    child: Column(
                      children: [
                        _buildGuideCard(
                          icon: Icons.school,
                          title: 'Como usar o AI Tutor',
                          description:
                              'Aprenda a tirar o máximo partido do seu assistente de IA personalizado.',
                          onTap: () => _showGuide(context, 'AI Tutor'),
                        ),
                        const SizedBox(height: 16),
                        _buildGuideCard(
                          icon: Icons.quiz,
                          title: 'Como fazer quizzes',
                          description:
                              'Descubra como participar em quizzes interativos e testar os seus conhecimentos.',
                          onTap: () => _showGuide(context, 'Quizzes'),
                        ),
                        const SizedBox(height: 16),
                        _buildGuideCard(
                          icon: Icons.trending_up,
                          title: 'Ver o seu progresso',
                          description:
                              'Acompanhe a sua evolução de aprendizagem e conquistas.',
                          onTap: () => _showGuide(context, 'Progresso'),
                        ),
                        const SizedBox(height: 16),
                        _buildGuideCard(
                          icon: Icons.settings,
                          title: 'Configurações da app',
                          description:
                              'Personalize a sua experiência de utilização.',
                          onTap: () => _showGuide(context, 'Configurações'),
                        ),
                        const SizedBox(height: 24),
                        // FAQ Section
                        Container(
                          padding: const EdgeInsets.all(20),
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(16),
                            boxShadow: [
                              BoxShadow(
                                color: Colors.black.withOpacity(0.1),
                                blurRadius: 10,
                                offset: const Offset(0, 4),
                              ),
                            ],
                          ),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              const Text(
                                'Perguntas Frequentes',
                                style: TextStyle(
                                  fontSize: 20,
                                  fontWeight: FontWeight.bold,
                                  color: AppColors.textPrimary,
                                ),
                              ),
                              const SizedBox(height: 16),
                              _buildFAQItem(
                                question: 'Como posso alterar a minha senha?',
                                answer:
                                    'Pode alterar a sua senha através da secção de segurança nas definições.',
                              ),
                              const SizedBox(height: 12),
                              _buildFAQItem(
                                question: 'Os meus dados estão seguros?',
                                answer:
                                    'Sim, utilizamos encriptação de ponta a ponta para proteger todos os seus dados.',
                              ),
                              const SizedBox(height: 12),
                              _buildFAQItem(
                                question: 'Posso usar a app offline?',
                                answer:
                                    'Algumas funcionalidades estão disponíveis offline, mas para o AI Tutor necessita de conexão à internet.',
                              ),
                              const SizedBox(height: 12),
                              _buildFAQItem(
                                question: 'Como contactar o suporte?',
                                answer:
                                    'Pode contactar-nos através do email suporte@teachit.com.',
                              ),
                            ],
                          ),
                        ),
                        const SizedBox(height: 24),
                        // Contact Support
                        Container(
                          padding: const EdgeInsets.all(20),
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(16),
                            boxShadow: [
                              BoxShadow(
                                color: Colors.black.withOpacity(0.1),
                                blurRadius: 10,
                                offset: const Offset(0, 4),
                              ),
                            ],
                          ),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              const Text(
                                'Ainda precisa de ajuda?',
                                style: TextStyle(
                                  fontSize: 18,
                                  fontWeight: FontWeight.bold,
                                  color: AppColors.textPrimary,
                                ),
                              ),
                              const SizedBox(height: 8),
                              const Text(
                                'A nossa equipa de suporte está disponível para ajudar.',
                                style: TextStyle(
                                  fontSize: 14,
                                  color: AppColors.textSecondary,
                                ),
                              ),
                              const SizedBox(height: 16),
                              ElevatedButton.icon(
                                onPressed: () {
                                  // Open email client
                                },
                                icon: const Icon(Icons.email),
                                label: const Text('Contactar Suporte'),
                                style: ElevatedButton.styleFrom(
                                  backgroundColor: AppColors.primaryTeal,
                                  foregroundColor: Colors.white,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildGuideCard({
    required IconData icon,
    required String title,
    required String description,
    required VoidCallback onTap,
  }) {
    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.1),
            blurRadius: 10,
            offset: const Offset(0, 4),
          ),
        ],
      ),
      child: InkWell(
        onTap: onTap,
        borderRadius: BorderRadius.circular(16),
        child: Row(
          children: [
            Container(
              width: 50,
              height: 50,
              decoration: BoxDecoration(
                gradient: const LinearGradient(
                  colors: [Color(0xFF82C9BD), Color(0xFF6BA8A0)],
                ),
                borderRadius: BorderRadius.circular(25),
              ),
              child: Icon(icon, color: Colors.white, size: 24),
            ),
            const SizedBox(width: 16),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    title,
                    style: const TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                      color: AppColors.textPrimary,
                    ),
                  ),
                  const SizedBox(height: 4),
                  Text(
                    description,
                    style: const TextStyle(
                      fontSize: 12,
                      color: AppColors.textSecondary,
                    ),
                  ),
                ],
              ),
            ),
            const Icon(Icons.chevron_right, color: AppColors.iconInactive),
          ],
        ),
      ),
    );
  }

  Widget _buildFAQItem({required String question, required String answer}) {
    return ExpansionTile(
      title: Text(
        question,
        style: const TextStyle(
          fontSize: 14,
          fontWeight: FontWeight.w600,
          color: AppColors.textPrimary,
        ),
      ),
      children: [
        Padding(
          padding: const EdgeInsets.all(16.0),
          child: Text(
            answer,
            style: const TextStyle(
              fontSize: 13,
              color: AppColors.textSecondary,
            ),
          ),
        ),
      ],
    );
  }

  void _showGuide(BuildContext context, String guideTitle) {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: Text(guideTitle),
        content: const Text('Conteúdo do guia em desenvolvimento...'),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: const Text('Fechar'),
          ),
        ],
      ),
    );
  }
}