import 'package:flutter/material.dart';
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';
import 'package:mymuseum_visitapp/Models/AssistantResponse.dart';
import 'package:mymuseum_visitapp/Models/visitContext.dart';
import 'package:mymuseum_visitapp/Services/assistantService.dart';
import 'package:mymuseum_visitapp/constants.dart';
import 'package:speech_to_text/speech_to_text.dart';

String _stripHtml(String html) => html.replaceAll(RegExp(r'<[^>]*>'), '').trim();

class AssistantChatSheet extends StatefulWidget {
  final VisitAppContext visitAppContext;
  final String? configurationId;
  final void Function(String sectionId, String sectionTitle)? onNavigateToSection;

  const AssistantChatSheet({
    Key? key,
    required this.visitAppContext,
    this.configurationId,
    this.onNavigateToSection,
  }) : super(key: key);

  static void show(
    BuildContext context, {
    required VisitAppContext visitAppContext,
    String? configurationId,
    void Function(String sectionId, String sectionTitle)? onNavigateToSection,
  }) {
    showGeneralDialog(
      context: context,
      barrierDismissible: true,
      barrierLabel: '',
      barrierColor: Colors.black54,
      transitionDuration: const Duration(milliseconds: 280),
      pageBuilder: (dialogContext, _, __) => AssistantChatSheet(
        visitAppContext: visitAppContext,
        configurationId: configurationId,
        onNavigateToSection: onNavigateToSection,
      ),
      transitionBuilder: (_, animation, __, child) => SlideTransition(
        position: Tween<Offset>(begin: const Offset(0, 1), end: Offset.zero)
            .animate(CurvedAnimation(parent: animation, curve: Curves.easeOut)),
        child: child,
      ),
    );
  }

  @override
  State<AssistantChatSheet> createState() => _AssistantChatSheetState();
}

class _AssistantChatSheetState extends State<AssistantChatSheet> {
  late AssistantService _assistantService;
  final TextEditingController _controller = TextEditingController();
  final ScrollController _scrollController = ScrollController();
  final List<Widget> _bubbles = [];
  bool _isLoading = false;

  final SpeechToText _speech = SpeechToText();
  bool _speechAvailable = false;
  bool _isListening = false;

  @override
  void initState() {
    super.initState();
    _assistantService = AssistantService(visitAppContext: widget.visitAppContext);
    _initSpeech();
  }

  Future<void> _initSpeech() async {
    final available = await _speech.initialize();
    if (mounted) setState(() => _speechAvailable = available);
  }

  Future<void> _toggleListening() async {
    if (_isListening) {
      await _speech.stop();
      setState(() => _isListening = false);
    } else {
      final locale = widget.visitAppContext.language?.toLowerCase() ?? 'fr';
      setState(() => _isListening = true);
      await _speech.listen(
        localeId: locale,
        onResult: (result) {
          setState(() => _controller.text = result.recognizedWords);
          if (result.finalResult) {
            setState(() => _isListening = false);
          }
        },
        listenOptions: SpeechListenOptions(partialResults: true),
      );
    }
  }

  @override
  void dispose() {
    _speech.cancel();
    super.dispose();
  }

  Future<void> _send() async {
    final text = _controller.text.trim();
    if (text.isEmpty || _isLoading) return;

    _controller.clear();
    setState(() {
      _bubbles.add(_ChatBubble(text: text, isUser: true));
      _isLoading = true;
    });
    _scrollToBottom();

    try {
      final response = await _assistantService.chat(
        message: text,
        configurationId: widget.configurationId,
      );
      setState(() {
        _bubbles.add(_AssistantMessage(
          response: response,
          onNavigate: widget.onNavigateToSection,
        ));
      });
    } catch (e) {
      print("AssistantChatSheet error: $e");
      setState(() {
        _bubbles.add(_ChatBubble(text: "Une erreur est survenue, réessayez.", isUser: false));
      });
    } finally {
      setState(() => _isLoading = false);
      _scrollToBottom();
    }
  }

  void _scrollToBottom() {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (_scrollController.hasClients) {
        _scrollController.animateTo(
          _scrollController.position.maxScrollExtent,
          duration: const Duration(milliseconds: 300),
          curve: Curves.easeOut,
        );
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    final height = MediaQuery.of(context).size.height * 0.9;
    return Align(
      alignment: Alignment.bottomCenter,
      child: Material(
        borderRadius: const BorderRadius.vertical(top: Radius.circular(20)),
        clipBehavior: Clip.antiAlias,
        child: SizedBox(
          height: height,
          child: Column(
          children: [
            // Header
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
              child: Row(
                children: [
                  Icon(Icons.chat_bubble_outline, color: kMainColor1),
                  const SizedBox(width: 8),
                  Text("Assistant",
                      style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.w600,
                          color: kSecondGrey)),
                  const Spacer(),
                  IconButton(
                    icon: const Icon(Icons.close),
                    onPressed: () => Navigator.of(context).pop(),
                  ),
                ],
              ),
            ),
            const Divider(height: 1),
            // Messages
            Expanded(
              child: _bubbles.isEmpty
                  ? Center(
                      child: Padding(
                        padding: const EdgeInsets.all(24),
                        child: Text(
                          "Bonjour ! Posez-moi vos questions sur cette visite.",
                          textAlign: TextAlign.center,
                          style: TextStyle(color: Colors.grey[500], fontSize: 15),
                        ),
                      ),
                    )
                  : ListView.builder(
                      controller: _scrollController,
                      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                      itemCount: _bubbles.length,
                      itemBuilder: (_, i) => _bubbles[i],
                    ),
            ),
            // Loading indicator
            if (_isLoading)
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
                child: Row(
                  children: [
                    SizedBox(
                      width: 20,
                      height: 20,
                      child: CircularProgressIndicator(strokeWidth: 2, color: kMainColor1),
                    ),
                    const SizedBox(width: 8),
                    Text("...", style: TextStyle(color: Colors.grey[400])),
                  ],
                ),
              ),
            // Input
            Padding(
              padding: EdgeInsets.only(
                  left: 12,
                  right: 12,
                  bottom: MediaQuery.of(context).viewInsets.bottom + 8,
                  top: 8),
              child: Row(
                children: [
                  Expanded(
                    child: TextField(
                      controller: _controller,
                      textCapitalization: TextCapitalization.sentences,
                      decoration: InputDecoration(
                        hintText: "Votre question...",
                        filled: true,
                        fillColor: Colors.grey[100],
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(24),
                          borderSide: BorderSide.none,
                        ),
                        contentPadding:
                            const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
                      ),
                      onSubmitted: (_) => _send(),
                    ),
                  ),
                  const SizedBox(width: 8),
                  if (_speechAvailable)
                    AnimatedContainer(
                      duration: const Duration(milliseconds: 200),
                      decoration: BoxDecoration(
                        color: _isListening ? Colors.red : Colors.grey[200],
                        shape: BoxShape.circle,
                      ),
                      child: IconButton(
                        icon: Icon(
                          _isListening ? Icons.mic : Icons.mic_none,
                          color: _isListening ? Colors.white : Colors.grey[600],
                          size: 20,
                        ),
                        onPressed: _toggleListening,
                      ),
                    ),
                  const SizedBox(width: 8),
                  CircleAvatar(
                    backgroundColor: kMainColor1,
                    child: IconButton(
                      icon: const Icon(Icons.send, color: Colors.white, size: 18),
                      onPressed: _send,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
        ),
      ),
    );
  }
}

class _ChatBubble extends StatelessWidget {
  final String text;
  final bool isUser;

  const _ChatBubble({required this.text, required this.isUser});

  @override
  Widget build(BuildContext context) {
    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 ? kMainColor1 : Colors.grey[100],
          borderRadius: BorderRadius.only(
            topLeft: const Radius.circular(16),
            topRight: const Radius.circular(16),
            bottomLeft: isUser ? const Radius.circular(16) : const Radius.circular(4),
            bottomRight: isUser ? const Radius.circular(4) : const Radius.circular(16),
          ),
        ),
        child: isUser
            ? Text(
                text,
                style: const TextStyle(color: Colors.white, fontSize: 14),
              )
            : HtmlWidget(
                text,
                textStyle: TextStyle(color: kSecondGrey, fontSize: 14),
              ),
      ),
    );
  }
}

class _AssistantMessage extends StatelessWidget {
  final AssistantResponse response;
  final void Function(String sectionId, String sectionTitle)? onNavigate;

  const _AssistantMessage({required this.response, this.onNavigate});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 4),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          if (response.reply.isNotEmpty)
            _ChatBubble(text: response.reply, isUser: false),

          if (response.cards != null && response.cards!.isNotEmpty)
            Padding(
              padding: const EdgeInsets.only(top: 6, left: 4, right: 24),
              child: Column(
                children: response.cards!.map((card) => _AiCardWidget(card: card)).toList(),
              ),
            ),

          if (response.navigation != null && onNavigate != null)
            GestureDetector(
              onTap: () {
                Navigator.of(context).pop();
                onNavigate!(
                  response.navigation!.sectionId,
                  _stripHtml(response.navigation!.sectionTitle),
                );
              },
              child: Container(
                margin: const EdgeInsets.only(top: 8, left: 4, right: 24),
                padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
                decoration: BoxDecoration(
                  color: kMainColor1.withValues(alpha: 0.08),
                  borderRadius: BorderRadius.circular(12),
                  border: Border.all(color: kMainColor1.withValues(alpha: 0.35)),
                ),
                child: Row(
                  children: [
                    ClipRRect(
                      borderRadius: BorderRadius.circular(8),
                      child: response.navigation!.imageUrl != null
                          ? Image.network(
                              response.navigation!.imageUrl!,
                              width: 48,
                              height: 48,
                              fit: BoxFit.cover,
                              errorBuilder: (_, __, ___) => Container(
                              width: 48,
                              height: 48,
                              decoration: BoxDecoration(
                                color: kMainColor1,
                                borderRadius: BorderRadius.circular(8),
                              ),
                              child: const Icon(Icons.place_outlined, color: Colors.white, size: 22),
                            ),
                            )
                          : Container(
                              width: 48,
                              height: 48,
                              decoration: BoxDecoration(
                                color: kMainColor1,
                                borderRadius: BorderRadius.circular(8),
                              ),
                              child: const Icon(Icons.place_outlined, color: Colors.white, size: 22),
                            ),
                    ),
                    const SizedBox(width: 10),
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            _stripHtml(response.navigation!.sectionTitle),
                            style: TextStyle(
                              fontWeight: FontWeight.w600,
                              fontSize: 13,
                              color: kSecondGrey,
                            ),
                          ),
                          Text(
                            "Voir cette section",
                            style: TextStyle(fontSize: 11, color: Colors.grey[500]),
                          ),
                        ],
                      ),
                    ),
                    Icon(Icons.chevron_right, color: kMainColor1, size: 20),
                  ],
                ),
              ),
            ),
        ],
      ),
    );
  }
}

class _AiCardWidget extends StatelessWidget {
  final AiCard card;

  const _AiCardWidget({required this.card});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(bottom: 6),
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(10),
        border: Border.all(color: Colors.grey[200]!),
        boxShadow: [
          BoxShadow(
              color: Colors.black.withValues(alpha: 0.05),
              blurRadius: 3,
              offset: const Offset(0, 1)),
        ],
      ),
      child: Row(
        children: [
          if (card.icon != null) ...[
            Text(card.icon!, style: const TextStyle(fontSize: 18)),
            const SizedBox(width: 8),
          ],
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(card.title,
                    style: TextStyle(
                        fontWeight: FontWeight.w600, fontSize: 13, color: kSecondGrey)),
                if (card.subtitle.isNotEmpty)
                  Text(card.subtitle,
                      style: const TextStyle(fontSize: 12, color: Colors.grey)),
              ],
            ),
          ),
        ],
      ),
    );
  }
}