marco.pms.mobileapp/lib/view/directory/notes_view.dart

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;

  NotesView({super.key}) : controller = _initController();

  static NotesController _initController() {
    if (!Get.isRegistered<NotesController>()) {
      return Get.put(NotesController());
    }
    return Get.find<NotesController>();
  }

  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 Obx(() {
      if (controller.isLoading.value) {
        return const Center(child: CircularProgressIndicator());
      }

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

      return Padding(
        padding: MySpacing.xy(16, 16),
        child: ListView.separated(
          itemCount: controller.notesList.length,
          separatorBuilder: (_, __) => MySpacing.height(16),
          itemBuilder: (_, index) {
            final note = controller.notesList[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: 300),
                padding: MySpacing.xy(8, 7),
                decoration: BoxDecoration(
                  color: isEditing ? Colors.indigo[50] : Colors.white,
                  borderRadius: BorderRadius.circular(12),
                  border: Border.all(
                    color: isEditing ? Colors.indigo : Colors.grey.shade300,
                    width: 1.2,
                  ),
                  boxShadow: const [
                    BoxShadow(
                      color: Colors.black12,
                      blurRadius: 4,
                      offset: Offset(0, 2),
                    )
                  ],
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    // Header
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Avatar(firstName: initials, lastName: '', size: 36),
                        MySpacing.width(12),
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              MyText.bodyMedium(
                                "${note.contactName} (${note.organizationName})",
                                fontWeight: 600,
                                color: Colors.indigo[800],
                              ),
                              MySpacing.height(4),
                              MyText.bodySmall(
                                "by ${note.createdBy.firstName} • $createdDate, $createdTime",
                                color: Colors.grey[600],
                              ),
                            ],
                          ),
                        ),
                        IconButton(
                          icon: Icon(
                            isEditing ? Icons.close : Icons.edit,
                            size: 20,
                            color: Colors.indigo,
                          ),
                          onPressed: () {
                            controller.editingNoteId.value =
                                isEditing ? null : note.id;
                          },
                        ),
                      ],
                    ),
                    MySpacing.height(12),
                    // Note 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,
                          ),
                        },
                      ),
                  ],
                ),
              );
            });
          },
        ),
      );
    });
  }
}