import 'package:flutter/material.dart';

import '../../../../l10n/app_localizations.dart';
import '../../../../shared/theme/app_color_palette.dart';
import '../../../../shared/theme/design_tokens.dart';
import '../widgets/settings_section_widgets.dart';

class CoinCenterScreen extends StatelessWidget {
  const CoinCenterScreen({super.key, required this.balance});

  final int balance;

  @override
  Widget build(BuildContext context) {
    final l10n = AppLocalizations.of(context)!;
    final colors = Theme.of(context).colorScheme;
    final palette = Theme.of(context).extension<AppColorPalette>()!;

    return Scaffold(
      backgroundColor: colors.surfaceContainerLow,
      appBar: AppBar(
        title: Text(l10n.settingsCoinCenterTitle),
        centerTitle: true,
        backgroundColor: colors.surfaceContainerLow,
        surfaceTintColor: colors.surfaceContainerLow,
      ),
      body: ListView(
        padding: const EdgeInsets.all(AppSpacing.lg),
        children: [
          Container(
            padding: const EdgeInsets.all(AppSpacing.xl),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(AppRadius.xl),
              gradient: LinearGradient(
                colors: [colors.primary, palette.accentPurple],
              ),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Icon(
                  Icons.monetization_on_rounded,
                  color: colors.onPrimary,
                  size: 34,
                ),
                const SizedBox(height: AppSpacing.md),
                Text(
                  l10n.settingsCoinBalanceLabel,
                  style: Theme.of(
                    context,
                  ).textTheme.bodyMedium?.copyWith(color: colors.onPrimary),
                ),
                const SizedBox(height: AppSpacing.xs),
                Text(
                  l10n.settingsCoinBalanceValue(balance),
                  style: Theme.of(
                    context,
                  ).textTheme.headlineMedium?.copyWith(color: colors.onPrimary),
                ),
                const SizedBox(height: AppSpacing.sm),
                Text(
                  l10n.settingsCoinCenterDescription,
                  style: Theme.of(context).textTheme.bodySmall?.copyWith(
                    color: colors.onPrimary.withValues(alpha: 0.88),
                  ),
                ),
              ],
            ),
          ),
          const SizedBox(height: AppSpacing.xl),
          SectionLabel(text: l10n.settingsCoinRechargeSection),
          CoinPackageCard(
            title: l10n.settingsCoinPackBasic,
            price: '\$4.99',
            amount: 100,
          ),
          const SizedBox(height: AppSpacing.md),
          CoinPackageCard(
            title: l10n.settingsCoinPackPopular,
            price: '\$7.99',
            amount: 210,
            badge: l10n.settingsCoinPackPopularBadge,
          ),
          const SizedBox(height: AppSpacing.md),
          CoinPackageCard(
            title: l10n.settingsCoinPackPremium,
            price: '\$12.99',
            amount: 415,
          ),
        ],
      ),
    );
  }
}