import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_quill/flutter_quill.dart' as quill;
import 'package:flutter_quill_delta_from_html/flutter_quill_delta_from_html.dart';
import 'package:flutter_html/flutter_html.dart' as html;

import 'package:marco/controller/directory/notes_controller.dart';
import 'package:marco/helpers/widgets/my_spacing.dart';
import 'package:marco/helpers/widgets/my_text.dart';
import 'package:marco/helpers/widgets/avatar.dart';
import 'package:marco/helpers/utils/date_time_utils.dart';
import 'package:marco/helpers/widgets/Directory/comment_editor_card.dart';

class NotesView extends StatelessWidget {
  final NotesController controller = Get.find();
  final TextEditingController searchController = TextEditingController();

  NotesView({super.key});

  Future<void> _refreshNotes() async {
    try {
      await controller.fetchNotes();
    } catch (e, st) {
      debugPrint('Error refreshing notes: $e');
      debugPrintStack(stackTrace: st);
    }
  }

  String _convertDeltaToHtml(dynamic delta) {
    final buffer = StringBuffer();
    bool inList = false;

    for (var op in delta.toList()) {
      final data = op.data?.toString() ?? '';
      final attr = op.attributes ?? {};
      final isListItem = attr.containsKey('list');

      if (isListItem && !inList) {
        buffer.write('<ul>');
        inList = true;
      }
      if (!isListItem && inList) {
        buffer.write('</ul>');
        inList = false;
      }

      if (isListItem) buffer.write('<li>');

      if (attr.containsKey('bold')) buffer.write('<strong>');
      if (attr.containsKey('italic')) buffer.write('<em>');
      if (attr.containsKey('underline')) buffer.write('<u>');
      if (attr.containsKey('strike')) buffer.write('<s>');
      if (attr.containsKey('link')) buffer.write('<a href="${attr['link']}">');

      buffer.write(data.replaceAll('\n', ''));

      if (attr.containsKey('link')) buffer.write('</a>');
      if (attr.containsKey('strike')) buffer.write('</s>');
      if (attr.containsKey('underline')) buffer.write('</u>');
      if (attr.containsKey('italic')) buffer.write('</em>');
      if (attr.containsKey('bold')) buffer.write('</strong>');

      if (isListItem)
        buffer.write('</li>');
      else if (data.contains('\n')) buffer.write('<br>');
    }

    if (inList) buffer.write('</ul>');

    return buffer.toString();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        /// 🔍 Search + Refresh (Top Row)
        Padding(
          padding: MySpacing.xy(8, 8),
          child: Row(
            children: [
              Expanded(
                child: SizedBox(
                  height: 35,
                  child: TextField(
                    controller: searchController,
                    onChanged: (value) => controller.searchQuery.value = value,
                    decoration: InputDecoration(
                      contentPadding: const EdgeInsets.symmetric(horizontal: 6),
                      prefixIcon: const Icon(Icons.search,
                          size: 20, color: Colors.grey),
                      hintText: 'Search notes...',
                      filled: true,
                      fillColor: Colors.white,
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(10),
                        borderSide: BorderSide(color: Colors.grey.shade300),
                      ),
                      enabledBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(10),
                        borderSide: BorderSide(color: Colors.grey.shade300),
                      ),
                    ),
                  ),
                ),
              ),
              MySpacing.width(8),
              Tooltip(
                message: 'Refresh Notes',
                child: InkWell(
                  borderRadius: BorderRadius.circular(24),
                  onTap: _refreshNotes,
                  child: MouseRegion(
                    cursor: SystemMouseCursors.click,
                    child: const Padding(
                      padding: EdgeInsets.all(4),
                      child: Icon(Icons.refresh, color: Colors.green, size: 26),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),

        /// 📄 Notes List View
        Expanded(
          child: Obx(() {
            if (controller.isLoading.value) {
              return const Center(child: CircularProgressIndicator());
            }

            final notes = controller.filteredNotesList;

            if (notes.isEmpty) {
              return Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    const Icon(Icons.note_alt_outlined,
                        size: 60, color: Colors.grey),
                    const SizedBox(height: 12),
                    MyText.bodyMedium('No notes found.', fontWeight: 500),
                  ],
                ),
              );
            }

            return ListView.separated(
              padding: MySpacing.only(left: 8, right: 8, top: 4, bottom: 80),
              itemCount: notes.length,
              separatorBuilder: (_, __) => MySpacing.height(12),
              itemBuilder: (_, index) {
                final note = notes[index];

                return Obx(() {
                  final isEditing = controller.editingNoteId.value == note.id;

                  final initials = note.contactName.trim().isNotEmpty
                      ? note.contactName
                          .trim()
                          .split(' ')
                          .map((e) => e[0])
                          .take(2)
                          .join()
                          .toUpperCase()
                      : "NA";

                  final createdDate = DateTimeUtils.convertUtcToLocal(
                      note.createdAt.toString(),
                      format: 'dd MMM yyyy');
                  final createdTime = DateTimeUtils.convertUtcToLocal(
                      note.createdAt.toString(),
                      format: 'hh:mm a');

                  final decodedDelta = HtmlToDelta().convert(note.note);
                  final quillController = isEditing
                      ? quill.QuillController(
                          document: quill.Document.fromDelta(decodedDelta),
                          selection: TextSelection.collapsed(
                              offset: decodedDelta.length),
                        )
                      : null;

                  return AnimatedContainer(
                    duration: const Duration(milliseconds: 250),
                    padding: MySpacing.xy(12, 12),
                    decoration: BoxDecoration(
                      color: isEditing ? Colors.indigo[50] : Colors.white,
                      border: Border.all(
                        color: isEditing ? Colors.indigo : Colors.grey.shade300,
                        width: 1.1,
                      ),
                      borderRadius: BorderRadius.circular(12),
                      boxShadow: const [
                        BoxShadow(
                            color: Colors.black12,
                            blurRadius: 4,
                            offset: Offset(0, 2)),
                      ],
                    ),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        /// Header Row
                        Row(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Avatar(firstName: initials, lastName: '', size: 40),
                            MySpacing.width(12),
                            Expanded(
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  MyText.titleSmall(
                                    "${note.contactName} (${note.organizationName})",
                                    fontWeight: 600,
                                    overflow: TextOverflow.ellipsis,
                                    color: Colors.indigo[800],
                                  ),
                                  MyText.bodySmall(
                                    "by ${note.createdBy.firstName} • $createdDate, $createdTime",
                                    color: Colors.grey[600],
                                  ),
                                ],
                              ),
                            ),
                            IconButton(
                              icon: Icon(
                                isEditing ? Icons.close : Icons.edit,
                                color: Colors.indigo,
                                size: 20,
                              ),
                              onPressed: () {
                                controller.editingNoteId.value =
                                    isEditing ? null : note.id;
                              },
                            ),
                          ],
                        ),

                        MySpacing.height(12),

                        /// Content
                        if (isEditing && quillController != null)
                          CommentEditorCard(
                            controller: quillController,
                            onCancel: () =>
                                controller.editingNoteId.value = null,
                            onSave: (quillCtrl) async {
                              final delta = quillCtrl.document.toDelta();
                              final htmlOutput = _convertDeltaToHtml(delta);
                              final updated = note.copyWith(note: htmlOutput);
                              await controller.updateNote(updated);
                              controller.editingNoteId.value = null;
                            },
                          )
                        else
                          html.Html(
                            data: note.note,
                            style: {
                              "body": html.Style(
                                margin: html.Margins.zero,
                                padding: html.HtmlPaddings.zero,
                                fontSize: html.FontSize.medium,
                                color: Colors.black87,
                              ),
                            },
                          ),
                      ],
                    ),
                  );
                });
              },
            );
          }),
        ),
      ],
    );
  }
}
