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

/// Onboarding step 2 — static value-prop ("USP") cards. No state; just a
/// terminal CTA that routes onward to the auth/payment fork.
class UspScreen extends StatelessWidget {
  /// `verified` ➞ USP → OTP (`/auth/register`).
  /// `anonymous` ➞ USP → `/payment/method-pick` (Stage 3 owns this route).
  final bool verified;

  const UspScreen({super.key, required this.verified});

  static const _cards = [
    _UspCard(
      icon: Icons.bolt_outlined,
      title: 'Langsung Curhat',
      body: 'Nggak perlu janji, nggak perlu nunggu. Buka, ngobrol, plong.',
    ),
    _UspCard(
      icon: Icons.shield_outlined,
      title: 'Tetap Anonim',
      body: 'Identitasmu disembunyikan. Cerita apa adanya, tanpa khawatir.',
    ),
    _UspCard(
      icon: Icons.favorite_outline,
      title: 'Bestie yang Relate',
      body: 'Diisi orang yang udah dilatih buat dengerin, bukan ngehakimin.',
    ),
    _UspCard(
      icon: Icons.payments_outlined,
      title: 'Bayar Sesuai Pakai',
      body: 'Pilih durasi yang pas. Nggak ada langganan, nggak ada jebakan.',
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Padding(
          padding: EdgeInsets.only(top: HaloSpacing.s4),
          child: HaloStepDots(total: 4, current: 2),
        ),
        centerTitle: true,
      ),
      body: SafeArea(
        top: false,
        child: Padding(
          padding: const EdgeInsets.fromLTRB(
            HaloSpacing.s24,
            HaloSpacing.s8,
            HaloSpacing.s24,
            HaloSpacing.s24,
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              const Text(
                'Sebelum mulai',
                style: TextStyle(
                  fontFamily: HaloTokens.fontDisplay,
                  fontSize: 26,
                  height: 30 / 26,
                  fontWeight: FontWeight.w700,
                  color: HaloTokens.ink,
                ),
              ),
              const SizedBox(height: HaloSpacing.s8),
              const Text(
                'Hal-hal kecil yang bikin Halo Bestie beda.',
                style: TextStyle(
                  fontFamily: HaloTokens.fontBody,
                  fontSize: 14,
                  height: 20 / 14,
                  color: HaloTokens.inkSoft,
                ),
              ),
              const SizedBox(height: HaloSpacing.s24),
              Expanded(
                child: ListView.separated(
                  itemCount: _cards.length,
                  separatorBuilder: (_, __) =>
                      const SizedBox(height: HaloSpacing.s12),
                  itemBuilder: (_, i) => _cards[i],
                ),
              ),
              const SizedBox(height: HaloSpacing.s16),
              HaloButton(
                label: 'aku ngerti, lanjut',
                fullWidth: true,
                onPressed: () => _onContinue(context),
              ),
            ],
          ),
        ),
      ),
    );
  }

  void _onContinue(BuildContext context) {
    if (verified) {
      context.push('/auth/register');
    } else {
      // Stage 3 owns /payment/method-pick. Until then, route there as a
      // placeholder; Maestro flow 03 stops at the route arrival.
      context.push('/payment/method-pick');
    }
  }
}

class _UspCard extends StatelessWidget {
  final IconData icon;
  final String title;
  final String body;

  const _UspCard({
    required this.icon,
    required this.title,
    required this.body,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(HaloSpacing.s16),
      decoration: BoxDecoration(
        color: HaloTokens.surface,
        borderRadius: HaloRadius.lg,
        border: Border.all(color: HaloTokens.border),
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            width: 40,
            height: 40,
            decoration: const BoxDecoration(
              color: HaloTokens.brandSofter,
              shape: BoxShape.circle,
            ),
            alignment: Alignment.center,
            child: Icon(icon, color: HaloTokens.brandDark, size: 20),
          ),
          const SizedBox(width: HaloSpacing.s12),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: const TextStyle(
                    fontFamily: HaloTokens.fontBody,
                    fontSize: 16,
                    fontWeight: FontWeight.w600,
                    color: HaloTokens.ink,
                  ),
                ),
                const SizedBox(height: HaloSpacing.s4),
                Text(
                  body,
                  style: const TextStyle(
                    fontFamily: HaloTokens.fontBody,
                    fontSize: 13,
                    height: 18 / 13,
                    color: HaloTokens.inkSoft,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}