import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:on_field_work/controller/project_controller.dart';
import 'package:on_field_work/controller/directory/directory_controller.dart';
import 'package:on_field_work/helpers/widgets/my_spacing.dart';
import 'package:on_field_work/helpers/widgets/my_text.dart';
import 'package:on_field_work/model/directory/contact_model.dart';
import 'package:on_field_work/helpers/widgets/avatar.dart';
import 'package:on_field_work/helpers/utils/launcher_utils.dart';
import 'package:on_field_work/model/directory/add_comment_bottom_sheet.dart';
import 'package:on_field_work/model/directory/add_contact_bottom_sheet.dart';
import 'package:on_field_work/helpers/utils/date_time_utils.dart';
import 'package:on_field_work/helpers/widgets/my_refresh_indicator.dart';
import 'package:on_field_work/helpers/widgets/my_confirmation_dialog.dart';
import 'package:on_field_work/helpers/utils/mixins/ui_mixin.dart';
import 'package:on_field_work/helpers/widgets/custom_app_bar.dart';

class ContactDetailScreen extends StatefulWidget {
  final ContactModel contact;
  const ContactDetailScreen({super.key, required this.contact});

  @override
  State<ContactDetailScreen> createState() => _ContactDetailScreenState();
}

class _ContactDetailScreenState extends State<ContactDetailScreen>
    with SingleTickerProviderStateMixin, UIMixin {
  late final DirectoryController directoryController;
  late final ProjectController projectController;
  late Rx<ContactModel> contactRx;
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    directoryController = Get.find<DirectoryController>();
    projectController = Get.put(ProjectController());
    contactRx = widget.contact.obs;

    _tabController = TabController(length: 2, vsync: this);

    WidgetsBinding.instance.addPostFrameCallback((_) async {
      await directoryController.fetchCommentsForContact(contactRx.value.id,
          active: true);
      await directoryController.fetchCommentsForContact(contactRx.value.id,
          active: false);
    });

    ever(directoryController.allContacts, (_) {
      final updated = directoryController.allContacts
          .firstWhereOrNull((c) => c.id == contactRx.value.id);
      if (updated != null) contactRx.value = updated;
    });
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final Color appBarColor = contentTheme.primary;

    return Scaffold(
      backgroundColor: const Color(0xFFF5F5F5),

      // ✔ AppBar is outside SafeArea (correct)
      appBar: CustomAppBar(
        title: 'Contact Profile',
        backgroundColor: appBarColor,
        onBackPressed: () => Get.offAllNamed('/dashboard/directory-main-page'),
      ),

      // ✔ Only the content is wrapped inside SafeArea
      body: SafeArea(
        child: Column(
          children: [
            // ************ GRADIENT + SUBHEADER + TABBAR ************
            Container(
              width: double.infinity,
              padding: const EdgeInsets.only(bottom: 8),
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [
                    contentTheme.primary,
                    contentTheme.primary.withOpacity(0),
                  ],
                ),
              ),
              child: Obx(() => _buildSubHeader(contactRx.value)),
            ),

            // ************ TAB CONTENT ************
            Expanded(
              child: TabBarView(
                controller: _tabController,
                children: [
                  Obx(() => _buildDetailsTab(contactRx.value)),
                  _buildCommentsTab(),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildSubHeader(ContactModel contact) {
    final firstName = contact.name.split(" ").first;
    final lastName =
        contact.name.split(" ").length > 1 ? contact.name.split(" ").last : "";

    final Color primaryColor = contentTheme.primary;

    return Container(
      color: Colors.transparent,
      padding: MySpacing.xy(16, 12),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(children: [
            Avatar(firstName: firstName, lastName: lastName, size: 35),
            MySpacing.width(12),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                MyText.titleSmall(contact.name,
                    fontWeight: 600, color: Colors.black),
                MySpacing.height(2),
                MyText.bodySmall(contact.organization,
                    fontWeight: 500, color: Colors.grey[700]),
              ],
            ),
          ]),
          MySpacing.height(12),
          // === MODERN PILL-SHAPED TABBAR ===
          Container(
            height: 48,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(24),
              boxShadow: [
                BoxShadow(
                  color: Colors.grey.withOpacity(0.15),
                  blurRadius: 4,
                  offset: const Offset(0, 2),
                ),
              ],
            ),
            child: TabBar(
              controller: _tabController,
              indicator: BoxDecoration(
                color: primaryColor.withOpacity(0.1),
                borderRadius: BorderRadius.circular(24),
              ),
              indicatorSize: TabBarIndicatorSize.tab,
              indicatorPadding:
                  const EdgeInsets.symmetric(horizontal: 4.0, vertical: 4.0),
              labelColor: primaryColor,
              unselectedLabelColor: Colors.grey.shade600,
              labelStyle: const TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 15,
              ),
              unselectedLabelStyle: const TextStyle(
                fontWeight: FontWeight.w500,
                fontSize: 15,
              ),
              tabs: const [
                Tab(text: "Details"),
                Tab(text: "Notes"),
              ],
              dividerColor: Colors.transparent,
            ),
          ),
        ],
      ),
    );
  }

  // --- DETAILS TAB ---
  Widget _buildDetailsTab(ContactModel contact) {
    final tags = contact.tags.map((e) => e.name).join(", ");
    final bucketNames = contact.bucketIds
        .map((id) => directoryController.contactBuckets
            .firstWhereOrNull((b) => b.id == id)
            ?.name)
        .whereType<String>()
        .join(", ");
    final projectNames = contact.projectIds
            ?.map((id) => projectController.projects
                .firstWhereOrNull((p) => p.id == id)
                ?.name)
            .whereType<String>()
            .join(", ") ??
        "-";
    final category = contact.contactCategory?.name ?? "-";

    Widget multiRows(
        {required List<dynamic> items,
        required IconData icon,
        required String label,
        required String typeLabel,
        required Function(String)? onTap,
        required Function(String)? onLongPress}) {
      return items.isNotEmpty
          ? Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                _iconInfoRow(icon, label, items.first,
                    onTap: () => onTap?.call(items.first),
                    onLongPress: () => onLongPress?.call(items.first)),
                ...items.skip(1).map(
                      (val) => _iconInfoRow(
                        null,
                        '',
                        val,
                        onTap: () => onTap?.call(val),
                        onLongPress: () => onLongPress?.call(val),
                      ),
                    ),
              ],
            )
          : _iconInfoRow(icon, label, "-");
    }

    return Stack(
      children: [
        SingleChildScrollView(
          padding: MySpacing.fromLTRB(8, 8, 8, 80),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              MySpacing.height(12),
              _infoCard("Basic Info", [
                multiRows(
                  items:
                      contact.contactEmails.map((e) => e.emailAddress).toList(),
                  icon: Icons.email,
                  label: "Email",
                  typeLabel: "Email",
                  onTap: (email) => LauncherUtils.launchEmail(email),
                  onLongPress: (email) =>
                      LauncherUtils.copyToClipboard(email, typeLabel: "Email"),
                ),
                multiRows(
                  items:
                      contact.contactPhones.map((p) => p.phoneNumber).toList(),
                  icon: Icons.phone,
                  label: "Phone",
                  typeLabel: "Phone",
                  onTap: (phone) => LauncherUtils.launchPhone(phone),
                  onLongPress: (phone) =>
                      LauncherUtils.copyToClipboard(phone, typeLabel: "Phone"),
                ),
                _iconInfoRow(Icons.location_on, "Address", contact.address),
              ]),
              _infoCard("Organization", [
                _iconInfoRow(
                    Icons.business, "Organization", contact.organization),
                _iconInfoRow(Icons.category, "Category", category),
              ]),
              _infoCard("Meta Info", [
                _iconInfoRow(Icons.label, "Tags", tags.isNotEmpty ? tags : "-"),
                _iconInfoRow(Icons.folder_shared, "Contact Buckets",
                    bucketNames.isNotEmpty ? bucketNames : "-"),
                _iconInfoRow(Icons.work_outline, "Projects", projectNames),
              ]),
              _infoCard("Description", [
                MySpacing.height(6),
                Align(
                  alignment: Alignment.topLeft,
                  child: MyText.bodyMedium(
                    contact.description,
                    color: Colors.grey[800],
                    maxLines: 10,
                    textAlign: TextAlign.left,
                  ),
                ),
              ]),
            ],
          ),
        ),
        Positioned(
          bottom: 20,
          right: 20,
          child: FloatingActionButton.extended(
            backgroundColor: contentTheme.primary,
            onPressed: () async {
              final result = await Get.bottomSheet(
                AddContactBottomSheet(existingContact: contact),
                isScrollControlled: true,
                backgroundColor: Colors.transparent,
              );
              if (result == true) {
                await directoryController.fetchContacts();
                final updated = directoryController.allContacts
                    .firstWhereOrNull((c) => c.id == contact.id);
                if (updated != null) {
                  contactRx.value = updated;
                }
              }
            },
            icon: const Icon(Icons.edit, color: Colors.white),
            label: const Text("Edit Contact",
                style: TextStyle(color: Colors.white)),
          ),
        ),
      ],
    );
  }

  // --- COMMENTS TAB ---
  Widget _buildCommentsTab() {
    return Obx(() {
      final contactId = contactRx.value.id;

      final activeComments = directoryController
          .getCommentsForContact(contactId)
          .where((c) => c.isActive)
          .toList();
      final inactiveComments = directoryController
          .getCommentsForContact(contactId)
          .where((c) => !c.isActive)
          .toList();

      final comments =
          [...activeComments, ...inactiveComments].reversed.toList();
      final editingId = directoryController.editingCommentId.value;

      return Stack(
        children: [
          MyRefreshIndicator(
            onRefresh: () async {
              await directoryController.fetchCommentsForContact(contactId,
                  active: true);
              await directoryController.fetchCommentsForContact(contactId,
                  active: false);
            },
            child: Padding(
              padding: MySpacing.xy(12, 12),
              child: comments.isEmpty
                  ? Center(
                      child:
                          MyText.bodyLarge("No notes yet.", color: Colors.grey),
                    )
                  : ListView.separated(
                      physics: const AlwaysScrollableScrollPhysics(),
                      padding: const EdgeInsets.only(bottom: 100),
                      itemCount: comments.length,
                      separatorBuilder: (_, __) => MySpacing.height(14),
                      itemBuilder: (_, index) => _buildCommentItem(
                          comments[index], editingId, contactId),
                    ),
            ),
          ),
          if (editingId == null)
            Positioned(
              bottom: 20,
              right: 20,
              child: FloatingActionButton.extended(
                backgroundColor: contentTheme.primary,
                onPressed: () async {
                  final result = await Get.bottomSheet(
                    AddCommentBottomSheet(contactId: contactId),
                    isScrollControlled: true,
                    enableDrag: true,
                  );

                  if (result == true) {
                    await directoryController.fetchCommentsForContact(contactId,
                        active: true);
                    await directoryController.fetchCommentsForContact(contactId,
                        active: false);
                  }
                },
                icon: const Icon(Icons.add_comment, color: Colors.white),
                label: const Text("Add Note",
                    style: TextStyle(color: Colors.white)),
              ),
            ),
        ],
      );
    });
  }

  Widget _buildCommentItem(comment, editingId, contactId) {
    final isEditing = editingId == comment.id;
    final initials = comment.createdBy.firstName.isNotEmpty
        ? comment.createdBy.firstName[0].toUpperCase()
        : "?";

    final textController = TextEditingController(text: comment.note);

    return Container(
      margin: const EdgeInsets.symmetric(vertical: 6),
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(14),
        border: Border.all(color: Colors.grey.shade200),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.03),
            blurRadius: 6,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Header: Avatar + Name + Role + Timestamp + Actions
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Avatar(firstName: initials, lastName: '', size: 40),
              const SizedBox(width: 10),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      "${comment.createdBy.firstName} ${comment.createdBy.lastName}",
                      style: const TextStyle(
                        fontWeight: FontWeight.w700,
                        fontSize: 15,
                        color: Colors.black87,
                      ),
                      overflow: TextOverflow.ellipsis,
                    ),
                    const SizedBox(height: 2),
                    if (comment.createdBy.jobRoleName?.isNotEmpty ?? false)
                      Text(
                        comment.createdBy.jobRoleName,
                        style: TextStyle(
                          fontSize: 13,
                          color: Colors.indigo[600],
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                    const SizedBox(height: 2),
                    Text(
                      DateTimeUtils.convertUtcToLocal(
                        comment.createdAt.toString(),
                        format: 'dd MMM yyyy, hh:mm a',
                      ),
                      style: TextStyle(
                        fontSize: 12,
                        color: Colors.grey[600],
                      ),
                    ),
                  ],
                ),
              ),
              Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  if (!comment.isActive)
                    IconButton(
                      icon: const Icon(Icons.restore,
                          size: 18, color: Colors.green),
                      tooltip: "Restore",
                      splashRadius: 18,
                      onPressed: () async {
                        await Get.dialog(
                          ConfirmDialog(
                            title: "Restore Note",
                            message:
                                "Are you sure you want to restore this note?",
                            confirmText: "Restore",
                            confirmColor: Colors.green,
                            icon: Icons.restore,
                            onConfirm: () async {
                              await directoryController.restoreComment(
                                  comment.id, contactId);
                            },
                          ),
                        );
                      },
                    ),
                  if (comment.isActive) ...[
                    IconButton(
                      icon: const Icon(Icons.edit_outlined,
                          size: 18, color: Colors.indigo),
                      tooltip: "Edit",
                      splashRadius: 18,
                      onPressed: () {
                        directoryController.editingCommentId.value =
                            isEditing ? null : comment.id;
                      },
                    ),
                    IconButton(
                      icon: const Icon(Icons.delete_outline,
                          size: 18, color: Colors.red),
                      tooltip: "Delete",
                      splashRadius: 18,
                      onPressed: () async {
                        await Get.dialog(
                          ConfirmDialog(
                            title: "Delete Note",
                            message:
                                "Are you sure you want to delete this note?",
                            confirmText: "Delete",
                            confirmColor: Colors.red,
                            icon: Icons.delete_forever,
                            onConfirm: () async {
                              await directoryController.deleteComment(
                                  comment.id, contactId);
                            },
                          ),
                        );
                      },
                    ),
                  ],
                ],
              ),
            ],
          ),
          const SizedBox(height: 8),
          if (isEditing)
            Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                TextField(
                  controller: textController,
                  maxLines: null,
                  minLines: 5,
                  decoration: InputDecoration(
                    hintText: "Edit note...",
                    border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(12)),
                    contentPadding: const EdgeInsets.all(12),
                  ),
                ),
                const SizedBox(height: 12),
                Row(
                  children: [
                    Expanded(
                      child: ElevatedButton.icon(
                        onPressed: () =>
                            directoryController.editingCommentId.value = null,
                        icon: const Icon(Icons.close, color: Colors.white),
                        label: const Text(
                          "Cancel",
                          style: TextStyle(color: Colors.white),
                        ),
                        style: ElevatedButton.styleFrom(
                          backgroundColor: Colors.grey,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(12),
                          ),
                          padding: const EdgeInsets.symmetric(vertical: 12),
                        ),
                      ),
                    ),
                    const SizedBox(width: 12),
                    Expanded(
                      child: ElevatedButton.icon(
                        onPressed: () async {
                          final updated =
                              comment.copyWith(note: textController.text);
                          await directoryController.updateComment(updated);
                          await directoryController
                              .fetchCommentsForContact(contactId);
                          directoryController.editingCommentId.value = null;
                        },
                        icon: const Icon(Icons.check_circle_outline,
                            color: Colors.white),
                        label: const Text(
                          "Save",
                          style: TextStyle(color: Colors.white),
                        ),
                        style: ElevatedButton.styleFrom(
                          backgroundColor: contentTheme.primary,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(12),
                          ),
                          padding: const EdgeInsets.symmetric(vertical: 12),
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            )
          else
            Text(
              comment.note,
              style: TextStyle(color: Colors.grey[800], fontSize: 14),
            ),
        ],
      ),
    );
  }

  Widget _iconInfoRow(
    IconData? icon,
    String label,
    String value, {
    VoidCallback? onTap,
    VoidCallback? onLongPress,
  }) {
    return Padding(
      padding: MySpacing.y(2),
      child: GestureDetector(
        onTap: onTap,
        onLongPress: onLongPress,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            if (icon != null) ...[
              Icon(icon, size: 22, color: Colors.indigo),
              MySpacing.width(12),
            ] else
              const SizedBox(width: 34),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  if (label.isNotEmpty)
                    MyText.bodySmall(label,
                        fontWeight: 600, color: Colors.black87),
                  if (label.isNotEmpty) MySpacing.height(2),
                  MyText.bodyMedium(value, color: Colors.grey[800]),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _infoCard(String title, List<Widget> children) {
    return Card(
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      elevation: 2,
      margin: MySpacing.bottom(12),
      child: Padding(
        padding: MySpacing.xy(16, 16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            MyText.titleSmall(title,
                fontWeight: 700, color: Colors.indigo[700]),
            MySpacing.height(8),
            ...children,
          ],
        ),
      ),
    );
  }
}
