import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../core/pairing/pairing_notifier.dart';

/// Full-screen modal overlay shown above the searching screen during the 20s
/// targeted-mitra wait window. The overlay reads its state directly from the
/// [PairingTargetedWaitingData] passed in by the parent — the local countdown
/// ticks are owned by the pairing notifier so the overlay just renders.
///
/// "Batalkan" calls `pairingNotifier.cancelSearch()` which posts to
/// `/api/client/chat/chat-requests/cancel` and transitions state to
/// `PairingCancelledData`. The parent screen listens for that and pops home.
class TargetedWaitingOverlay extends ConsumerWidget {
  final PairingTargetedWaitingData waiting;

  const TargetedWaitingOverlay({super.key, required this.waiting});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Container(
      // Slight scrim so the underlying searching UI is still visible but the
      // overlay clearly owns the foreground.
      color: Colors.black.withValues(alpha: 0.55),
      child: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 32),
          child: Card(
            elevation: 6,
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
            child: Padding(
              padding: const EdgeInsets.fromLTRB(24, 24, 24, 16),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  const SizedBox(
                    width: 56,
                    height: 56,
                    child: CircularProgressIndicator(strokeWidth: 3),
                  ),
                  const SizedBox(height: 20),
                  Text(
                    'Menunggu konfirmasi ${waiting.mitraName}',
                    textAlign: TextAlign.center,
                    style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                  ),
                  const SizedBox(height: 8),
                  Text(
                    '${waiting.secondsRemaining}d',
                    style: const TextStyle(fontSize: 28, fontWeight: FontWeight.w300),
                  ),
                  const SizedBox(height: 8),
                  const Text(
                    'Bestie punya 20 detik untuk merespon. Kalau tidak ada respon, kami bantu cari bestie lain.',
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 13, color: Colors.grey),
                  ),
                  const SizedBox(height: 16),
                  TextButton(
                    onPressed: () => ref.read(pairingProvider.notifier).cancelSearch(),
                    child: const Text('Batalkan'),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}