mywhatsapp/whatsapp_app/lib/screens/chat_screen.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controllers/chat_controller.dart';
import '../models/conversation_model.dart';
import '../models/message_model.dart';
import '../theme/app_theme.dart';
import '../widgets/message_bubble.dart';

class ChatScreen extends StatelessWidget {
  final ConversationModel conversation;

  const ChatScreen({super.key, required this.conversation});

  @override
  Widget build(BuildContext context) {
    final ctrl = Get.put(
      ChatController(conversation: conversation),
      tag: conversation.id,
    );

    return Scaffold(
      backgroundColor: AppTheme.background,
      appBar: _buildAppBar(conversation),
      body: Column(
        children: [
          Expanded(child: _buildMessageList(ctrl)),
          _buildInputBar(ctrl),
        ],
      ),
    );
  }

  AppBar _buildAppBar(ConversationModel chat) => AppBar(
    backgroundColor: AppTheme.surface,
    leadingWidth: 32,
    title: Row(
      children: [
        _avatar(chat, radius: 18),
        const SizedBox(width: 10),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                chat.name,
                style: const TextStyle(
                  color: AppTheme.textPrimary,
                  fontSize: 16,
                  fontWeight: FontWeight.w600,
                ),
                overflow: TextOverflow.ellipsis,
              ),
              if (chat.isGroup)
                const Text(
                  'Group',
                  style: TextStyle(color: AppTheme.textSecondary, fontSize: 12),
                ),
            ],
          ),
        ),
      ],
    ),
    actions: [
      IconButton(
        icon: const Icon(Icons.videocam_outlined, color: AppTheme.iconColor),
        onPressed: null,
      ),
      IconButton(
        icon: const Icon(Icons.call_outlined, color: AppTheme.iconColor),
        onPressed: null,
      ),
      IconButton(
        icon: const Icon(Icons.more_vert, color: AppTheme.iconColor),
        onPressed: null,
      ),
    ],
  );

  Widget _buildMessageList(ChatController ctrl) {
    return Obx(() {
      if (ctrl.isLoading.value) {
        return const Center(
          child: CircularProgressIndicator(color: AppTheme.primary),
        );
      }
      
      final items = ctrl.groupedMessages;
      if (items.isEmpty) {
        return Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(Icons.chat_bubble_outline, color: AppTheme.textSecondary.withOpacity(0.5), size: 48),
              const SizedBox(height: 12),
              Text(
                'No messages yet',
                style: TextStyle(color: AppTheme.textSecondary.withOpacity(0.8)),
              ),
            ],
          ),
        );
      }

      return ListView.builder(
        controller: ctrl.scrollCtrl,
        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
        itemCount: items.length,
        itemBuilder: (_, i) {
          final item = items[i];
          if (item is String) return _buildDateSeparator(item);
          return MessageBubble(message: item as MessageModel);
        },
      );
    });
  }

  Widget _buildDateSeparator(String label) => Center(
    child: Container(
      margin: const EdgeInsets.symmetric(vertical: 8),
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
      decoration: BoxDecoration(
        color: AppTheme.surfaceLight,
        borderRadius: BorderRadius.circular(12),
      ),
      child: Text(
        label,
        style: const TextStyle(
          color: AppTheme.textSecondary,
          fontSize: 12,
          fontWeight: FontWeight.w500,
        ),
      ),
    ),
  );

  Widget _buildInputBar(ChatController ctrl) => Container(
    color: AppTheme.surface,
    padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
    child: SafeArea(
      child: Row(
        children: [
          // Emoji button
          IconButton(
            icon: const Icon(Icons.emoji_emotions_outlined, color: AppTheme.iconColor),
            onPressed: null,
          ),
          // Input
          Expanded(
            child: TextField(
              controller: ctrl.inputCtrl,
              style: const TextStyle(color: AppTheme.textPrimary),
              maxLines: 5,
              minLines: 1,
              textCapitalization: TextCapitalization.sentences,
              decoration: InputDecoration(
                hintText: 'Message',
                hintStyle: const TextStyle(color: AppTheme.textSecondary),
                filled: true,
                fillColor: AppTheme.surfaceLight,
                contentPadding: const EdgeInsets.symmetric(
                  horizontal: 16, vertical: 10,
                ),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(24),
                  borderSide: BorderSide.none,
                ),
              ),
              onSubmitted: (_) => ctrl.sendMessage(),
            ),
          ),
          const SizedBox(width: 8),
          // Send button
          Obx(() => GestureDetector(
            onTap: ctrl.sendMessage,
            child: AnimatedContainer(
              duration: const Duration(milliseconds: 200),
              width: 48,
              height: 48,
              decoration: const BoxDecoration(
                color: AppTheme.primary,
                shape: BoxShape.circle,
              ),
              child: ctrl.isSending.value
                  ? const Padding(
                      padding: EdgeInsets.all(12),
                      child: CircularProgressIndicator(
                        strokeWidth: 2,
                        color: Colors.white,
                      ),
                    )
                  : const Icon(Icons.send, color: Colors.white, size: 20),
            ),
          )),
        ],
      ),
    ),
  );

  Widget _avatar(ConversationModel chat, {double radius = 24}) {
    if (chat.avatar != null) {
      return CircleAvatar(
        radius: radius,
        backgroundImage: NetworkImage(chat.avatar!),
        backgroundColor: AppTheme.surfaceLight,
      );
    }
    return CircleAvatar(
      radius: radius,
      backgroundColor: AppTheme.primaryDark,
      child: Text(
        chat.name.isNotEmpty ? chat.name[0].toUpperCase() : '?',
        style: const TextStyle(
          color: Colors.white,
          fontWeight: FontWeight.bold,
        ),
      ),
    );
  }
}