import 'package:flutter/material.dart';
import '../../../core/theme/halo_tokens.dart';

/// Floating expired banner shown above the chat input when the session
/// timer has hit zero but the session is still in `closing` grace.
///
/// Mirrors Figma `v3.jsx::HBChatExpiredBanner` (line 423): brand-pink
/// background, white text, `⏰` icon, "habis nih... mau lanjutin curhat
/// sama {name}?" copy, white `perpanjang` button.
class ChatExpiredBanner extends StatelessWidget {
  final String mitraName;
  final VoidCallback onExtend;

  const ChatExpiredBanner({
    super.key,
    required this.mitraName,
    required this.onExtend,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.fromLTRB(12, 0, 12, 8),
      padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
      decoration: BoxDecoration(
        color: HaloTokens.brand,
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: HaloTokens.brand.withValues(alpha: 0.31),
            blurRadius: 16,
            offset: const Offset(0, 4),
          ),
        ],
      ),
      child: Row(
        children: [
          const Text('⏰', style: TextStyle(fontSize: 16)),
          const SizedBox(width: 10),
          Expanded(
            child: RichText(
              text: TextSpan(
                style: const TextStyle(
                  fontFamily: HaloTokens.fontBody,
                  fontSize: 12.5,
                  height: 1.4,
                  color: Colors.white,
                ),
                children: [
                  const TextSpan(
                    text: 'habis nih...',
                    style: TextStyle(fontWeight: FontWeight.w600),
                  ),
                  TextSpan(text: ' mau lanjutin curhat sama $mitraName?'),
                ],
              ),
            ),
          ),
          const SizedBox(width: 8),
          // Semantics wrapper exposes the button via Android's resource-id so
          // maestro can find it via `id:` selector AND triggers onExtend
          // directly on a11y CLICK action (instead of synthesized coord-tap
          // which doesn't reliably fire this ElevatedButton's onPressed —
          // confirmed: raw `adb input tap` works, maestro's tap does not).
          // `onTap: onExtend` makes the Semantics node itself clickable so
          // Android's UiAutomator routes node.performAction(ACTION_CLICK)
          // → onExtend without needing the child button's gesture detector.
          Semantics(
            identifier: 'chat_extend_button',
            button: true,
            onTap: onExtend,
            child: ElevatedButton(
              onPressed: onExtend,
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.white,
                foregroundColor: HaloTokens.brand,
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(999)),
                padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
                minimumSize: const Size(0, 32),
                elevation: 0,
                textStyle: const TextStyle(
                  fontFamily: HaloTokens.fontBody,
                  fontSize: 11.5,
                  fontWeight: FontWeight.w700,
                ),
              ),
              child: const Text('perpanjang'),
            ),
          ),
        ],
      ),
    );
  }
}