import 'package:flutter/material.dart';
import 'package:marco/helpers/widgets/my_text.dart';
import 'package:marco/helpers/widgets/avatar.dart';

class TeamMembersBottomSheet {
  static void show(BuildContext context, List<dynamic> members) {
    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      backgroundColor: Colors.transparent,
      isDismissible: true,
      enableDrag: true,
      builder: (context) {
        return SafeArea(
          child: Container(
            decoration: const BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
            ),
            child: DraggableScrollableSheet(
              expand: false,
              initialChildSize: 0.6,
              minChildSize: 0.4,
              maxChildSize: 0.9,
              builder: (context, scrollController) {
                return Column(
                  children: [
                    const SizedBox(height: 6),
                    // Drag handle
                    Container(
                      width: 36,
                      height: 4,
                      decoration: BoxDecoration(
                        color: Colors.grey.shade300,
                        borderRadius: BorderRadius.circular(2),
                      ),
                    ),
                    const SizedBox(height: 10),
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 16),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          MyText.titleMedium('Team Members', fontWeight: 700),
                          const SizedBox(height: 6),
                          const Divider(thickness: 1),
                        ],
                      ),
                    ),
                    const SizedBox(height: 4),
                    Expanded(
                      child: Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 16),
                        child: members.isEmpty
                            ? Center(
                                child: MyText.bodySmall(
                                  "No team members found.",
                                  fontWeight: 600,
                                  color: Colors.grey,
                                ),
                              )
                            : ListView.separated(
                                controller: scrollController,
                                itemCount: members.length,
                                separatorBuilder: (_, __) =>
                                    const SizedBox(height: 4), // tighter spacing
                                itemBuilder: (context, index) {
                                  final member = members[index];
                                  final firstName = member.firstName ?? '';
                                  final lastName = member.lastName ?? '';

                                  return ListTile(
                                    dense: true,
                                    contentPadding: EdgeInsets.zero,
                                    leading: Avatar(
                                      firstName: firstName,
                                      lastName: lastName,
                                      size: 32, // smaller avatar
                                    ),
                                    title: MyText.bodyMedium(
                                      '${firstName.isNotEmpty ? firstName : 'Unnamed'} ${lastName.isNotEmpty ? lastName : ''}',
                                      fontWeight: 600,
                                    ),
                                    subtitle: MyText.bodySmall(
                                      member.jobRole ?? '',
                                      color: Colors.grey.shade600,
                                    ),
                                  );
                                },
                              ),
                      ),
                    ),
                    const SizedBox(height: 8),
                  ],
                );
              },
            ),
          ),
        );
      },
    );
  }
}