halobestie-clone/client_app/lib/features/payment/screens/method_pick_screen.dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import '../../../core/theme/halo_tokens.dart';
import '../state/payment_draft_provider.dart';

/// "Pilih cara curhat" — two cards (chat / call). The "premium" call indicator
/// is visual only, no hard-coded multiplier. Tapping a card stores the mode
/// in the draft and pushes `/payment/duration-pick`.
class MethodPickScreen extends ConsumerWidget {
  const MethodPickScreen({super.key});

  void _onPick(BuildContext context, WidgetRef ref, PaymentMode mode) {
    ref.read(paymentDraftNotifierProvider.notifier).setMode(mode);
    context.push('/payment/duration-pick');
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      backgroundColor: HaloTokens.bg,
      // No text inputs on this screen — but the previous screen
      // (display_name) leaves the soft keyboard up for a frame or two after
      // navigation. The default resize behavior shrinks the body during
      // that window and triggers a brief overflow on the two-card column.
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        backgroundColor: HaloTokens.bg,
        elevation: 0,
        leading: IconButton(
          icon: const Icon(Icons.chevron_left, color: HaloTokens.brandDark),
          onPressed: () {
            if (context.canPop()) {
              context.pop();
            } else {
              context.go('/home');
            }
          },
        ),
      ),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.fromLTRB(
            HaloSpacing.s24,
            HaloSpacing.s8,
            HaloSpacing.s24,
            HaloSpacing.s24,
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Text(
                'pilih cara curhat',
                style: TextStyle(
                  fontFamily: HaloTokens.fontDisplay,
                  fontSize: 26,
                  fontWeight: FontWeight.w700,
                  color: HaloTokens.brandDark,
                  letterSpacing: -0.5,
                ),
              ),
              const SizedBox(height: HaloSpacing.s8),
              const Text(
                'mau ngobrol pakai chat atau dengar suaranya langsung?',
                style: TextStyle(
                  fontSize: 14,
                  color: HaloTokens.inkSoft,
                  height: 1.5,
                ),
              ),
              const SizedBox(height: HaloSpacing.s24),
              _ModeCard(
                emoji: '💬',
                title: 'chat',
                subtitle: 'tulis dan baca dengan tenang',
                onTap: () => _onPick(context, ref, PaymentMode.chat),
              ),
              const SizedBox(height: HaloSpacing.s12),
              _ModeCard(
                emoji: '📞',
                title: 'call',
                subtitle: 'dengar suara bestie langsung',
                isPremium: true,
                onTap: () => _onPick(context, ref, PaymentMode.call),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class _ModeCard extends StatelessWidget {
  final String emoji;
  final String title;
  final String subtitle;
  final VoidCallback onTap;
  final bool isPremium;

  const _ModeCard({
    required this.emoji,
    required this.title,
    required this.subtitle,
    required this.onTap,
    this.isPremium = false,
  });

  @override
  Widget build(BuildContext context) {
    return Material(
      color: HaloTokens.surface,
      borderRadius: HaloRadius.lg,
      child: InkWell(
        borderRadius: HaloRadius.lg,
        onTap: onTap,
        child: Container(
          padding: const EdgeInsets.all(HaloSpacing.s20),
          decoration: BoxDecoration(
            border: Border.all(color: HaloTokens.border),
            borderRadius: HaloRadius.lg,
          ),
          child: Row(
            children: [
              Container(
                width: 56,
                height: 56,
                decoration: const BoxDecoration(
                  color: HaloTokens.brandSofter,
                  borderRadius: HaloRadius.md,
                ),
                alignment: Alignment.center,
                child: Text(emoji, style: const TextStyle(fontSize: 28)),
              ),
              const SizedBox(width: HaloSpacing.s16),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      children: [
                        Text(
                          title,
                          style: const TextStyle(
                            fontFamily: HaloTokens.fontDisplay,
                            fontSize: 18,
                            fontWeight: FontWeight.w700,
                            color: HaloTokens.ink,
                          ),
                        ),
                        if (isPremium) ...[
                          const SizedBox(width: HaloSpacing.s8),
                          Container(
                            padding: const EdgeInsets.symmetric(
                              horizontal: HaloSpacing.s8,
                              vertical: 2,
                            ),
                            decoration: const BoxDecoration(
                              color: HaloTokens.accentSoft,
                              borderRadius: HaloRadius.pill,
                            ),
                            child: const Text(
                              'PREMIUM',
                              style: TextStyle(
                                fontSize: 9,
                                fontWeight: FontWeight.w700,
                                color: Color(0xFF8C5418),
                                letterSpacing: 0.6,
                              ),
                            ),
                          ),
                        ],
                      ],
                    ),
                    const SizedBox(height: 2),
                    Text(
                      subtitle,
                      style: const TextStyle(
                        fontSize: 12.5,
                        color: HaloTokens.inkSoft,
                      ),
                    ),
                  ],
                ),
              ),
              const Icon(
                Icons.chevron_right,
                color: HaloTokens.inkMuted,
              ),
            ],
          ),
        ),
      ),
    );
  }
}