halobestie-clone/mitra_app/lib/features/chat/screens/mitra_chat_screen.dart

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import '../../../core/chat/mitra_chat_notifier.dart';
import '../../../core/chat/extension_notifier.dart';
import '../../../core/chat/sensitivity_config_provider.dart';
import '../../../core/chat/widgets/sensitivity_badge.dart';
import '../../../core/chat/widgets/sensitivity_theme.dart';
import '../../../core/constants.dart';

// Chat theme colors
const _kUserBubbleColor = Color(0xFFD4929A);
const _kBannerColor = Color(0xFFC4868F);
const _kAccentPink = Color(0xFFBE7C8A);
// Phase 4 — voice-call mode badge background. Mirrors `HaloTokens.accent`
// from the customer app palette so both apps render the same pill color.
const _kVoiceCallPillColor = Color(0xFFF7B26A);

class MitraChatScreen extends ConsumerStatefulWidget {
  final String sessionId;
  final String customerName;

  const MitraChatScreen({super.key, required this.sessionId, required this.customerName});

  @override
  ConsumerState<MitraChatScreen> createState() => _MitraChatScreenState();
}

class _MitraChatScreenState extends ConsumerState<MitraChatScreen> {
  final _messageController = TextEditingController();
  final _goodbyeController = TextEditingController();
  final _scrollController = ScrollController();
  Timer? _typingThrottle;

  @override
  void initState() {
    super.initState();
    Future.microtask(() {
      ref.read(mitraChatProvider.notifier).connect(widget.sessionId);
    });
  }

  @override
  void deactivate() {
    // Disconnect runs here, NOT in dispose(): modern Riverpod invalidates
    // `ref` the instant dispose() starts, and the resulting silent error
    // corrupts the widget-tree finalize (next screen freezes). deactivate()
    // runs BEFORE dispose() while `ref` is still valid. Same fix pattern
    // applied in client_app/home_screen + payment_screen on 2026-05-14.
    // ignore: discarded_futures
    ref.read(mitraChatProvider.notifier).disconnect();
    super.deactivate();
  }

  @override
  void dispose() {
    _messageController.dispose();
    _goodbyeController.dispose();
    _scrollController.dispose();
    _typingThrottle?.cancel();
    super.dispose();
  }

  void _scrollToBottom() {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (_scrollController.hasClients) {
        _scrollController.animateTo(
          _scrollController.position.maxScrollExtent,
          duration: const Duration(milliseconds: 200),
          curve: Curves.easeOut,
        );
      }
    });
  }

  void _onTextChanged(String text) {
    if (_typingThrottle?.isActive ?? false) return;
    ref.read(mitraChatProvider.notifier).sendTyping();
    _typingThrottle = Timer(const Duration(seconds: 2), () {});
  }

  void _sendMessage() {
    final text = _messageController.text.trim();
    if (text.isEmpty) return;
    ref.read(mitraChatProvider.notifier).sendMessage(text);
    _messageController.clear();
    _scrollToBottom();
  }

  @override
  Widget build(BuildContext context) {
    // Parent build runs ONCE per lifecycle — there are no ref.watch calls here.
    // State changes (messages, typing, status updates, mode flip, sensitivity
    // flip) all rebuild only the leaf consumers that watch them:
    //   - _MitraChatVoicePill          → mode flag (via .select)
    //   - _MitraChatTopicToggle        → topicSensitivity (via .select) + config
    //   - _MitraChatTimerAction        → mitraChatRemainingSecondsProvider
    //   - _MitraChatBodyContent        → full chatProvider + extensionProvider
    // Pattern mirrors client_app/chat_screen post-refactor (2026-05-14).
    ref.listen(mitraExtensionProvider, (prev, next) {
      if (next is ExtensionCompleteData) {
        context.go('/home');
      }
    });

    ref.listen(mitraChatProvider, (prev, next) {
      if (next is MitraChatConnectedData) {
        _scrollToBottom();
        final unread = next.messages
            .where((m) => m.senderType == UserType.customer && m.status != MessageStatus.read)
            .map((m) => m.id)
            .toList();
        if (unread.isNotEmpty) {
          ref.read(mitraChatProvider.notifier).markRead(unread);
        }
      }
    });

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        foregroundColor: Colors.black,
        elevation: 0.5,
        centerTitle: true,
        leading: IconButton(
          icon: const Icon(Icons.chevron_left, size: 28),
          onPressed: () => context.pop(),
        ),
        title: Row(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Flexible(
              child: Text(
                widget.customerName,
                overflow: TextOverflow.ellipsis,
              ),
            ),
            const _MitraChatVoicePill(),
          ],
        ),
        actions: [
          _MitraChatTopicToggle(sessionId: widget.sessionId),
          const _MitraChatTimerAction(),
        ],
      ),
      body: _MitraChatBodyContent(
        sessionId: widget.sessionId,
        customerName: widget.customerName,
        messageController: _messageController,
        goodbyeController: _goodbyeController,
        scrollController: _scrollController,
        onSend: _sendMessage,
        onTextChanged: _onTextChanged,
      ),
    );
  }
}

/// AppBar voice-call mode badge. Watches only the `mode` field of the chat
/// state — the conditional collapses to a bool via `.select`, so this widget
/// rebuilds only when the mode actually flips (essentially never during a
/// session) and the surrounding AppBar stays still on every message/typing
/// state change.
class _MitraChatVoicePill extends ConsumerWidget {
  const _MitraChatVoicePill();

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final isCall = ref.watch(mitraChatProvider.select(
      (s) => s is MitraChatConnectedData && s.mode == SessionMode.call,
    ));
    if (!isCall) return const SizedBox.shrink();
    return const Padding(
      padding: EdgeInsets.only(left: 8),
      child: _VoiceCallPillBody(),
    );
  }
}

class _VoiceCallPillBody extends StatelessWidget {
  const _VoiceCallPillBody();

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
      decoration: const BoxDecoration(
        color: _kVoiceCallPillColor,
        borderRadius: BorderRadius.all(Radius.circular(9999)),
      ),
      child: const Text(
        '📞 Voice Call',
        style: TextStyle(
          fontSize: 11,
          fontWeight: FontWeight.w600,
          color: Colors.white,
        ),
      ),
    );
  }
}

/// AppBar topic-sensitivity flag/lock action. Watches only `topicSensitivity`
/// (via `.select`) plus the `sensitivityConfigProvider`. Confirmation dialog
/// + snackbars + `flipTopic` call all live here so the parent screen doesn't
/// need to know about topic state.
class _MitraChatTopicToggle extends ConsumerStatefulWidget {
  final String sessionId;
  const _MitraChatTopicToggle({required this.sessionId});

  @override
  ConsumerState<_MitraChatTopicToggle> createState() => _MitraChatTopicToggleState();
}

class _MitraChatTopicToggleState extends ConsumerState<_MitraChatTopicToggle> {
  @override
  Widget build(BuildContext context) {
    final sensitivity = ref.watch(mitraChatProvider.select((s) {
      if (s is MitraChatConnectedData) return s.topicSensitivity;
      return null;
    }));
    if (sensitivity == null) return const SizedBox.shrink();
    final configAsync = ref.watch(sensitivityConfigProvider);
    final config = configAsync.value ?? SensitivityConfig.defaults;
    final isSensitive = sensitivity == TopicSensitivity.sensitive;
    final locked = config.oneWayLatch && isSensitive;

    return Tooltip(
      message: locked
          ? 'Sesi sudah terkunci sebagai topik sensitif'
          : isSensitive
              ? 'Tandai sebagai topik umum'
              : 'Tandai sebagai topik sensitif',
      child: IconButton(
        icon: Icon(
          isSensitive ? Icons.flag : Icons.outlined_flag,
          color: isSensitive ? SensitivityTheme.sensitive.badgeBg : Colors.grey.shade600,
        ),
        onPressed: locked ? null : () => _onTopicTogglePressed(sensitivity, config),
      ),
    );
  }

  Future<void> _onTopicTogglePressed(
    TopicSensitivity current,
    SensitivityConfig config,
  ) async {
    final toValue = current == TopicSensitivity.sensitive
        ? TopicSensitivity.regular
        : TopicSensitivity.sensitive;

    if (config.flipConfirmationEnabled) {
      final confirmed = await showDialog<bool>(
        context: context,
        builder: (ctx) => AlertDialog(
          title: Text(
            toValue == TopicSensitivity.sensitive
                ? 'Tandai sesi ini sebagai sensitif?'
                : 'Tandai sesi ini sebagai topik umum?',
          ),
          actions: [
            TextButton(
              onPressed: () => Navigator.of(ctx).pop(false),
              child: const Text('Batal'),
            ),
            FilledButton(
              onPressed: () => Navigator.of(ctx).pop(true),
              child: const Text('Tandai'),
            ),
          ],
        ),
      );
      if (confirmed != true || !mounted) return;
    }

    final err = await ref
        .read(mitraChatProvider.notifier)
        .flipTopic(widget.sessionId, toValue);

    if (!mounted) return;
    if (err != null) {
      final msg = err == 'SENSITIVITY_LATCHED'
          ? 'Sesi sudah ditandai sensitif dan tidak bisa dikembalikan.'
          : err == 'SESSION_NOT_ACTIVE'
              ? 'Sesi sudah berakhir.'
              : 'Gagal mengubah topik. Coba lagi.';
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(msg)));
    } else {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text(
            toValue == TopicSensitivity.sensitive
                ? 'Sesi ditandai sensitif'
                : 'Sesi ditandai topik umum',
          ),
          duration: const Duration(seconds: 2),
        ),
      );
    }
  }
}

/// Owns the chat-body subtree. Watches `mitraChatProvider` and
/// `mitraExtensionProvider` — so a WS message / typing / status / extension
/// update rebuilds *this* widget only, not the parent Scaffold or AppBar.
/// Entry-banner dismiss state moved here from the parent so its setState
/// doesn't propagate back up either.
class _MitraChatBodyContent extends ConsumerStatefulWidget {
  final String sessionId;
  final String customerName;
  final TextEditingController messageController;
  final TextEditingController goodbyeController;
  final ScrollController scrollController;
  final VoidCallback onSend;
  final ValueChanged<String> onTextChanged;

  const _MitraChatBodyContent({
    required this.sessionId,
    required this.customerName,
    required this.messageController,
    required this.goodbyeController,
    required this.scrollController,
    required this.onSend,
    required this.onTextChanged,
  });

  @override
  ConsumerState<_MitraChatBodyContent> createState() => _MitraChatBodyContentState();
}

class _MitraChatBodyContentState extends ConsumerState<_MitraChatBodyContent> {
  bool _showBestieBanner = true;
  bool _showUserBanner = true;

  // Phase 4 ESP topic display labels. Mirrors the customer-side `EspTopic`
  // enum's `label` property — we only need to read these here, not write.
  static const Map<String, String> _espTopicLabels = {
    'relationship': 'Hubungan',
    'family': 'Keluarga',
    'work': 'Pekerjaan',
    'study': 'Sekolah / Kuliah',
    'finance': 'Keuangan',
    'health': 'Kesehatan',
    'friendship': 'Pertemanan',
    'self_worth': 'Self-worth',
    'anxiety': 'Kecemasan',
    'loneliness': 'Kesepian',
    'grief': 'Kehilangan',
    'identity': 'Identitas',
  };

  @override
  Widget build(BuildContext context) {
    final chatState = ref.watch(mitraChatProvider);
    final extState = ref.watch(mitraExtensionProvider);
    final isSensitive = chatState is MitraChatConnectedData &&
        chatState.topicSensitivity == TopicSensitivity.sensitive;

    return Column(
      children: [
        if (isSensitive) _buildSensitivityHeader(),
        Expanded(child: _buildBody(chatState, extState)),
      ],
    );
  }

  Widget _buildSensitivityHeader() {
    const theme = SensitivityTheme.sensitive;
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.symmetric(vertical: 6, horizontal: 12),
      color: theme.badgeBg,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(Icons.warning_amber_rounded, size: 16, color: theme.badgeFg),
          const SizedBox(width: 6),
          Text(
            'Topik sensitif',
            style: TextStyle(
              color: theme.badgeFg,
              fontSize: 12,
              fontWeight: FontWeight.w600,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildBody(MitraChatData chatState, ExtensionData extState) {
    if (chatState is MitraChatConnectingData) {
      return const Center(child: CircularProgressIndicator());
    }
    if (chatState is MitraChatErrorData) {
      return Center(child: Text(chatState.message));
    }
    if (chatState is MitraChatConnectedData) {
      return _buildChatBody(chatState, extState);
    }
    return const SizedBox.shrink();
  }

  Widget _buildChatBody(MitraChatConnectedData state, ExtensionData extState) {
    // Extension request from customer
    if (state.extensionRequest != null) {
      return _buildExtensionView(state.extensionRequest!, extState);
    }

    // Goodbye view — suppress if mitra has already submitted their goodbye;
    // session can stay in `closing` while waiting for the customer to submit
    // theirs or for the 5-min grace timer to auto-complete.
    final showGoodbye = !state.goodbyeSubmitted &&
        (state.sessionClosing || extState is ExtensionShowGoodbyeData || extState is ExtensionSubmittingData);
    if (showGoodbye) {
      return _buildGoodbyeView(extState);
    }

    if (state.sessionClosing && state.goodbyeSubmitted) {
      return _buildAwaitingCustomerGoodbyeView(state);
    }

    final bgTint = SensitivityTheme.of(state.topicSensitivity).bgTint;

    return Stack(
      children: [
        // Background pattern
        Positioned.fill(
          child: Container(
            color: bgTint,
            child: Image.asset(
              'assets/images/chat_pattern.png',
              repeat: ImageRepeat.repeat,
              fit: BoxFit.none,
            ),
          ),
        ),
        // Content
        Column(
          children: [
            // Entry banners
            if (_showBestieBanner)
              _buildEntryBanner(
                '[Bestie] Sudah Memasuki Ruangan',
                () => setState(() => _showBestieBanner = false),
              ),
            if (_showUserBanner)
              _buildEntryBanner(
                '[User] Sudah Memasuki Ruangan',
                () => setState(() => _showUserBanner = false),
              ),
            // Messages — when the customer picked ESP topics during
            // onboarding, render a read-only chip row as the first list
            // item (above the first message bubble). Info-only.
            Expanded(
              child: ListView.builder(
                controller: widget.scrollController,
                padding: const EdgeInsets.all(16),
                itemCount: state.messages.length +
                    (state.topics.isNotEmpty ? 1 : 0),
                itemBuilder: (context, index) {
                  if (state.topics.isNotEmpty && index == 0) {
                    return _buildTopicChipsRow(state.topics);
                  }
                  final msgIndex =
                      state.topics.isNotEmpty ? index - 1 : index;
                  final msg = state.messages[msgIndex];
                  final isMe = msg.senderType == UserType.mitra;
                  return _buildMessageBubble(msg, isMe);
                },
              ),
            ),
            // Typing indicator
            if (state.isOtherTyping)
              const Padding(
                padding: EdgeInsets.symmetric(horizontal: 16, vertical: 4),
                child: Align(
                  alignment: Alignment.centerLeft,
                  child: Text('Customer sedang mengetik...', style: TextStyle(color: Colors.grey, fontSize: 12)),
                ),
              ),
            // Input bar
            _buildInputBar(),
          ],
        ),
      ],
    );
  }

  Widget _buildTopicChipsRow(List<String> topics) {
    return Container(
      margin: const EdgeInsets.only(bottom: 12),
      child: Wrap(
        spacing: 6,
        runSpacing: 6,
        children: topics.map((value) {
          final label = _espTopicLabels[value] ?? value;
          return Container(
            padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(999),
              border: Border.all(color: const Color(0xFFE0CDD1)),
            ),
            child: Text(
              label,
              style: const TextStyle(
                fontSize: 12,
                color: _kAccentPink,
                fontWeight: FontWeight.w500,
              ),
            ),
          );
        }).toList(),
      ),
    );
  }

  Widget _buildEntryBanner(String text, VoidCallback onDismiss) {
    return Container(
      color: _kBannerColor,
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
      child: Row(
        children: [
          const Icon(Icons.volume_up, color: Colors.white, size: 18),
          const SizedBox(width: 8),
          Expanded(
            child: Text(text, style: const TextStyle(color: Colors.white, fontSize: 13)),
          ),
          GestureDetector(
            onTap: onDismiss,
            child: const Icon(Icons.close, color: Colors.white, size: 18),
          ),
        ],
      ),
    );
  }

  Widget _buildMessageBubble(MitraChatMessage msg, bool isMe) {
    return Align(
      alignment: isMe ? Alignment.centerRight : Alignment.centerLeft,
      child: Container(
        margin: const EdgeInsets.symmetric(vertical: 4),
        padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
        constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width * 0.75),
        decoration: BoxDecoration(
          color: isMe ? _kUserBubbleColor : Colors.white,
          borderRadius: BorderRadius.circular(16),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            Text(msg.content, style: const TextStyle(fontSize: 15)),
            const SizedBox(height: 4),
            Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                  '${msg.createdAt.hour.toString().padLeft(2, '0')}:${msg.createdAt.minute.toString().padLeft(2, '0')}',
                  style: TextStyle(fontSize: 10, color: isMe ? Colors.white70 : Colors.grey),
                ),
                if (isMe) ...[
                  const SizedBox(width: 4),
                  _buildStatusIcon(msg.status),
                ],
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildStatusIcon(String status) {
    switch (status) {
      case 'sending':
        return const Icon(Icons.access_time, size: 14, color: Colors.white70);
      case MessageStatus.sent:
        return const Icon(Icons.check, size: 14, color: Colors.white70);
      case MessageStatus.delivered:
        return const Icon(Icons.done_all, size: 14, color: Colors.white70);
      case MessageStatus.read:
        return const Icon(Icons.done_all, size: 14, color: Colors.white);
      default:
        return const SizedBox.shrink();
    }
  }

  Widget _buildInputBar() {
    return SafeArea(
      child: Container(
        padding: const EdgeInsets.all(8),
        color: Colors.white,
        child: Row(
          children: [
            Expanded(
              child: TextField(
                controller: widget.messageController,
                onChanged: widget.onTextChanged,
                textInputAction: TextInputAction.send,
                onSubmitted: (_) => widget.onSend(),
                decoration: InputDecoration(
                  hintText: 'Ketik Pesan',
                  hintStyle: TextStyle(color: Colors.grey.shade400),
                  filled: true,
                  fillColor: Colors.grey.shade100,
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(24),
                    borderSide: BorderSide.none,
                  ),
                  contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
                ),
              ),
            ),
            const SizedBox(width: 8),
            Container(
              decoration: const BoxDecoration(
                color: _kAccentPink,
                shape: BoxShape.circle,
              ),
              child: IconButton(
                icon: const Icon(Icons.send, color: Colors.white, size: 20),
                onPressed: widget.onSend,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildExtensionView(Map<String, dynamic> request, ExtensionData extState) {
    final duration = request['duration_minutes'] as int?;
    final extensionId = request['extension_id'] as String?;
    final isResponding = extState is ExtensionRespondingData;
    final topic = TopicSensitivity.fromString(request['topic_sensitivity'] as String?);
    final isSensitive = topic == TopicSensitivity.sensitive;
    // Extensions auto-approve on mitra non-response (server-side, with connectivity
    // safeguards). Surface the configured timeout to the mitra so they know what
    // "no response" means in this card.
    final timeoutSeconds = request['timeout_seconds'] as int?;

    return Container(
      color: isSensitive ? SensitivityTheme.sensitive.bgTint : null,
      child: Center(
        child: Padding(
          padding: const EdgeInsets.all(32),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Icon(Icons.timer, size: 64, color: Colors.orange),
              const SizedBox(height: 16),
              const Text('Permintaan Perpanjangan', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
              if (isSensitive) ...[
                const SizedBox(height: 8),
                SensitivityBadge(sensitivity: topic),
              ],
              const SizedBox(height: 8),
              Text('Customer ingin perpanjang $duration menit', textAlign: TextAlign.center),
              if (timeoutSeconds != null) ...[
                const SizedBox(height: 12),
                Text(
                  'Tidak menjawab dalam $timeoutSeconds detik = otomatis disetujui',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 13,
                    color: Colors.grey.shade700,
                    fontStyle: FontStyle.italic,
                  ),
                ),
              ],
              const SizedBox(height: 24),
              if (isResponding)
                const CircularProgressIndicator()
              else
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    ElevatedButton(
                      style: ElevatedButton.styleFrom(backgroundColor: Colors.green),
                      onPressed: extensionId == null ? null : () => ref.read(mitraExtensionProvider.notifier).respond(
                        widget.sessionId,
                        extensionId: extensionId,
                        accepted: true,
                      ),
                      child: const Text('Terima', style: TextStyle(color: Colors.white)),
                    ),
                    const SizedBox(width: 16),
                    ElevatedButton(
                      style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
                      onPressed: extensionId == null ? null : () => ref.read(mitraExtensionProvider.notifier).respond(
                        widget.sessionId,
                        extensionId: extensionId,
                        accepted: false,
                      ),
                      child: const Text('Tolak', style: TextStyle(color: Colors.white)),
                    ),
                  ],
                ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildGoodbyeView(ExtensionData extState) {
    return SingleChildScrollView(
      padding: const EdgeInsets.all(32),
      child: Column(
        children: [
          const SizedBox(height: 48),
          const Icon(Icons.waving_hand, size: 64, color: Colors.amber),
          const SizedBox(height: 16),
          const Text('Pesan Penutup', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
          const SizedBox(height: 8),
          const Text('Tuliskan pesan terakhirmu untuk Customer', textAlign: TextAlign.center),
          const SizedBox(height: 24),
          TextField(
            controller: widget.goodbyeController,
            maxLines: 3,
            decoration: InputDecoration(
              hintText: 'Terima kasih sudah curhat...',
              border: OutlineInputBorder(borderRadius: BorderRadius.circular(12)),
            ),
          ),
          const SizedBox(height: 16),
          ElevatedButton(
            onPressed: extState is ExtensionSubmittingData
                ? null
                : () {
                    final text = widget.goodbyeController.text.trim();
                    if (text.isNotEmpty) {
                      ref.read(mitraExtensionProvider.notifier).submitGoodbye(
                        widget.sessionId, text,
                      );
                    }
                  },
            child: extState is ExtensionSubmittingData
                ? const SizedBox(width: 20, height: 20, child: CircularProgressIndicator(strokeWidth: 2))
                : const Text('Kirim & Selesai'),
          ),
        ],
      ),
    );
  }

  Widget _buildAwaitingCustomerGoodbyeView(MitraChatConnectedData state) {
    final bgTint = SensitivityTheme.of(state.topicSensitivity).bgTint;
    return Stack(
      children: [
        Positioned.fill(
          child: Container(
            color: bgTint,
            child: Image.asset(
              'assets/images/chat_pattern.png',
              repeat: ImageRepeat.repeat,
              fit: BoxFit.none,
            ),
          ),
        ),
        Column(
          children: [
            Container(
              width: double.infinity,
              color: Colors.amber.shade100,
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
              child: Row(
                children: [
                  Icon(Icons.hourglass_top, color: Colors.amber.shade900, size: 20),
                  const SizedBox(width: 8),
                  Expanded(
                    child: Text(
                      'Pesan penutupmu sudah terkirim. Menunggu user...',
                      style: TextStyle(color: Colors.amber.shade900, fontWeight: FontWeight.w600),
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              child: ListView.builder(
                controller: widget.scrollController,
                padding: const EdgeInsets.all(16),
                itemCount: state.messages.length,
                itemBuilder: (context, index) {
                  final msg = state.messages[index];
                  final isMe = msg.senderType == UserType.mitra;
                  return _buildMessageBubble(msg, isMe);
                },
              ),
            ),
          ],
        ),
      ],
    );
  }
}

/// Tiny AppBar action that watches only [mitraChatRemainingSecondsProvider].
/// Decoupling the timer from the chat state means a WS `session_tick` frame
/// rebuilds *only* this widget (a single Text), not the surrounding AppBar,
/// Scaffold body, message ListView, or input bar. This is the per-second
/// hotspot the wider chat-screen perf work targets.
class _MitraChatTimerAction extends ConsumerWidget {
  const _MitraChatTimerAction();

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final seconds = ref.watch(mitraChatRemainingSecondsProvider);
    if (seconds == null) return const SizedBox.shrink();
    return Padding(
      padding: const EdgeInsets.only(right: 16),
      child: Center(
        child: Text(
          '${seconds}s',
          style: TextStyle(
            color: seconds < 30 ? Colors.red : Colors.black,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}