myCustomChatInterface function

Implementation

Widget myCustomChatInterface({required MediasfuParameters parameters}) {
  return Scaffold(
    backgroundColor: Colors.green.shade900,
    appBar: AppBar(
      title: Text('💬 Chat Room'),
      backgroundColor: Colors.green.shade800,
      foregroundColor: Colors.white,
      elevation: 0,
    ),
    body: Column(
      children: [
        // Chat status header
        Container(
          width: double.infinity,
          padding: const EdgeInsets.all(16),
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [Colors.green.shade800, Colors.lightGreen.shade600],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                children: [
                  Icon(Icons.forum, color: Colors.white, size: 24),
                  SizedBox(width: 8),
                  Expanded(
                    child: Text(
                      'Chat Room: ${parameters.roomName}',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ],
              ),
              SizedBox(height: 8),
              Row(
                children: [
                  Icon(Icons.people, color: Colors.white70, size: 16),
                  SizedBox(width: 4),
                  Text(
                    'Online: ${parameters.participants.length}',
                    style: TextStyle(color: Colors.white70, fontSize: 14),
                  ),
                  Spacer(),
                  Icon(Icons.person, color: Colors.white70, size: 16),
                  SizedBox(width: 4),
                  Text(
                    'You: ${parameters.member}',
                    style: TextStyle(color: Colors.white70, fontSize: 14),
                  ),
                ],
              ),
            ],
          ),
        ),

        // Chat controls
        Container(
          padding: const EdgeInsets.all(16),
          decoration: BoxDecoration(
            color: Colors.grey.shade800,
            boxShadow: [
              BoxShadow(
                color: Colors.black26,
                blurRadius: 4,
                offset: Offset(0, 2),
              ),
            ],
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              _buildChatControlButton(
                onPressed: () => parameters.clickVideo(
                  ClickVideoOptions(parameters: parameters),
                ),
                icon: parameters.videoAction ? Icons.videocam : Icons.videocam_off,
                label: parameters.videoAction ? 'Video On' : 'Video Off',
                isActive: parameters.videoAction,
                activeColor: Colors.green,
                inactiveColor: Colors.red,
              ),
              _buildChatControlButton(
                onPressed: () => parameters.clickAudio(
                  ClickAudioOptions(parameters: parameters),
                ),
                icon: parameters.micAction ? Icons.mic : Icons.mic_off,
                label: parameters.micAction ? 'Mic On' : 'Mic Off',
                isActive: parameters.micAction,
                activeColor: Colors.green,
                inactiveColor: Colors.red,
              ),
              _buildChatControlButton(
                onPressed: () {
                  // Custom chat functionality
                },
                icon: Icons.chat,
                label: 'Send Message',
                isActive: true,
                activeColor: Colors.blue,
                inactiveColor: Colors.grey,
              ),
            ],
          ),
        ),

        // Main chat area - participants list
        Expanded(
          child: Container(
            margin: const EdgeInsets.all(16),
            decoration: BoxDecoration(
              color: Colors.grey.shade800,
              borderRadius: BorderRadius.circular(16),
            ),
            child: Column(
              children: [
                Container(
                  padding: const EdgeInsets.all(16),
                  decoration: BoxDecoration(
                    color: Colors.green.shade700,
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(16),
                      topRight: Radius.circular(16),
                    ),
                  ),
                  child: Row(
                    children: [
                      Icon(Icons.group_add, color: Colors.white),
                      SizedBox(width: 8),
                      Text(
                        'Chat Participants (${parameters.participants.length})',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ],
                  ),
                ),
                Expanded(
                  child: parameters.participants.isEmpty
                      ? Center(
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Icon(
                                Icons.chat_bubble_outline,
                                size: 64,
                                color: Colors.white54,
                              ),
                              SizedBox(height: 16),
                              Text(
                                'No one in the chat yet',
                                style: TextStyle(
                                  color: Colors.white70,
                                  fontSize: 16,
                                ),
                              ),
                              SizedBox(height: 8),
                              Text(
                                'Invite friends to start chatting!',
                                style: TextStyle(
                                  color: Colors.white54,
                                  fontSize: 14,
                                ),
                              ),
                            ],
                          ),
                        )
                      : ListView.builder(
                          padding: const EdgeInsets.all(16),
                          itemCount: parameters.participants.length,
                          itemBuilder: (context, index) {
                            final participant = parameters.participants[index];
                            return _buildChatParticipantCard(participant, Colors.green.shade600);
                          },
                        ),
                ),
              ],
            ),
          ),
        ),

        // Chat action bar
        Container(
          padding: const EdgeInsets.all(16),
          decoration: BoxDecoration(
            color: Colors.grey.shade800,
            boxShadow: [
              BoxShadow(
                color: Colors.black26,
                blurRadius: 4,
                offset: Offset(0, -2),
              ),
            ],
          ),
          child: Row(
            children: [
              Expanded(
                child: Container(
                  padding: EdgeInsets.symmetric(horizontal: 16),
                  decoration: BoxDecoration(
                    color: Colors.grey.shade700,
                    borderRadius: BorderRadius.circular(25),
                    border: Border.all(color: Colors.green.shade600),
                  ),
                  child: TextField(
                    style: TextStyle(color: Colors.white),
                    decoration: InputDecoration(
                      hintText: 'Type a message...',
                      hintStyle: TextStyle(color: Colors.grey.shade400),
                      border: InputBorder.none,
                    ),
                  ),
                ),
              ),
              SizedBox(width: 8),
              Container(
                decoration: BoxDecoration(
                  color: Colors.green.shade600,
                  shape: BoxShape.circle,
                ),
                child: IconButton(
                  onPressed: () {
                    // Send message functionality
                  },
                  icon: Icon(Icons.send, color: Colors.white),
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  );
}