hackathon-innovaflow5.0-cdfb08fa1603498d898c075544e57191/recolecta_app/lib/features/help/screens/help_faq_screen.dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

import '../../../core/theme/app_theme.dart';
import '../providers/help_chat_provider.dart';

const _quickQuestions = [
  '¿Cuándo pasa el camión por mi colonia?',
  '¿Cómo separo correctamente la basura?',
  '¿Qué hago si no pasó el camión?',
  '¿Cómo reporto un problema con una unidad?',
];

class HelpFaqScreen extends ConsumerStatefulWidget {
  const HelpFaqScreen({super.key});

  @override
  ConsumerState<HelpFaqScreen> createState() => _HelpFaqScreenState();
}

class _HelpFaqScreenState extends ConsumerState<HelpFaqScreen> {
  final _inputCtrl = TextEditingController();
  final _scrollCtrl = ScrollController();

  @override
  void dispose() {
    _inputCtrl.dispose();
    _scrollCtrl.dispose();
    super.dispose();
  }

  Future<void> _send(String text) async {
    _inputCtrl.clear();
    await ref.read(helpChatControllerProvider.notifier).send(text);
    await Future.delayed(const Duration(milliseconds: 100));
    if (_scrollCtrl.hasClients) {
      _scrollCtrl.animateTo(
        _scrollCtrl.position.maxScrollExtent,
        duration: const Duration(milliseconds: 250),
        curve: Curves.easeOut,
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    final state = ref.watch(helpChatControllerProvider);

    return Scaffold(
      backgroundColor: AppTheme.background,
      appBar: AppBar(
        title: const Text('Ayuda y preguntas frecuentes'),
        actions: [
          IconButton(
            tooltip: 'Reiniciar conversación',
            icon: const Icon(Icons.refresh),
            onPressed: state.messages.isEmpty
                ? null
                : () => ref.read(helpChatControllerProvider.notifier).reset(),
          ),
        ],
      ),
      body: Column(
        children: [
          if (state.messages.isEmpty) _QuickQuestions(onSelect: _send),
          Expanded(
            child: state.messages.isEmpty
                ? const _EmptyHint()
                : ListView.builder(
                    controller: _scrollCtrl,
                    padding: const EdgeInsets.symmetric(
                      horizontal: 16,
                      vertical: 12,
                    ),
                    itemCount: state.messages.length,
                    itemBuilder: (_, i) => _Bubble(message: state.messages[i]),
                  ),
          ),
          if (state.error != null)
            Container(
              width: double.infinity,
              padding: const EdgeInsets.all(12),
              color: AppTheme.danger.withOpacity(0.1),
              child: Text(
                state.error!,
                style: const TextStyle(color: AppTheme.danger, fontSize: 13),
              ),
            ),
          _Composer(
            controller: _inputCtrl,
            sending: state.sending,
            onSend: _send,
          ),
        ],
      ),
    );
  }
}

class _QuickQuestions extends StatelessWidget {
  final ValueChanged<String> onSelect;
  const _QuickQuestions({required this.onSelect});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(16, 12, 16, 0),
      child: Wrap(
        spacing: 8,
        runSpacing: 8,
        children: [
          for (final q in _quickQuestions)
            ActionChip(label: Text(q), onPressed: () => onSelect(q)),
        ],
      ),
    );
  }
}

class _EmptyHint extends StatelessWidget {
  const _EmptyHint();

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Padding(
        padding: EdgeInsets.all(24),
        child: Text(
          'Hazme una pregunta sobre la recolección de basura,\nseparación de residuos o cómo usar la app.',
          textAlign: TextAlign.center,
          style: TextStyle(color: AppTheme.textSecondary, height: 1.5),
        ),
      ),
    );
  }
}

class _Bubble extends StatelessWidget {
  final HelpChatMessage message;
  const _Bubble({required this.message});

  @override
  Widget build(BuildContext context) {
    final isUser = message.role == 'user';
    return Align(
      alignment: isUser ? Alignment.centerRight : Alignment.centerLeft,
      child: Container(
        margin: const EdgeInsets.symmetric(vertical: 4),
        padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
        constraints: BoxConstraints(
          maxWidth: MediaQuery.of(context).size.width * 0.78,
        ),
        decoration: BoxDecoration(
          color: isUser ? AppTheme.primary : AppTheme.surface,
          borderRadius: BorderRadius.circular(AppTheme.radiusLg),
          border: Border.all(
            color: isUser ? AppTheme.primary : AppTheme.border,
            width: 0.5,
          ),
        ),
        child: Text(
          message.content,
          style: TextStyle(
            color: isUser ? Colors.white : AppTheme.textPrimary,
            fontSize: 14,
            height: 1.4,
          ),
        ),
      ),
    );
  }
}

class _Composer extends StatelessWidget {
  final TextEditingController controller;
  final bool sending;
  final ValueChanged<String> onSend;
  const _Composer({
    required this.controller,
    required this.sending,
    required this.onSend,
  });

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      top: false,
      child: Container(
        padding: const EdgeInsets.fromLTRB(12, 8, 8, 8),
        decoration: const BoxDecoration(
          color: AppTheme.surface,
          border: Border(top: BorderSide(color: AppTheme.border, width: 0.5)),
        ),
        child: Row(
          children: [
            Expanded(
              child: TextField(
                controller: controller,
                enabled: !sending,
                minLines: 1,
                maxLines: 4,
                textInputAction: TextInputAction.send,
                onSubmitted: onSend,
                decoration: const InputDecoration(
                  hintText: 'Escribe tu pregunta…',
                  border: InputBorder.none,
                ),
              ),
            ),
            IconButton(
              icon: sending
                  ? const SizedBox(
                      width: 20,
                      height: 20,
                      child: CircularProgressIndicator(strokeWidth: 2),
                    )
                  : const Icon(Icons.send_rounded, color: AppTheme.primary),
              onPressed: sending ? null : () => onSend(controller.text),
            ),
          ],
        ),
      ),
    );
  }
}