import 'package:flutter/material.dart';

import 'package:intl/intl.dart';

import 'package:provider/provider.dart';

import 'package:sxchnge_kyc/sxchnge_kyc.dart';

import '../generated/i18n/app_localizations.dart';

class LimitsPanel extends StatelessWidget {
  const LimitsPanel({super.key});
  @override
  Widget build(BuildContext context) {
    final p = context.watch<LimitsProvider>();
    final l = AppLocalizations.of(context)!;
    final t = Theme.of(context);
    final data = p.data;
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Text(l.kycLimits, style: t.textTheme.headlineSmall),
            if (p.loading) ...[
              const SizedBox(height: 16),
              const LinearProgressIndicator(),
            ],
            if (p.failed) ...[
              const SizedBox(height: 12),
              Semantics(
                liveRegion: true,
                child: Text(
                  l.kycLimitsError,
                  style: TextStyle(color: t.colorScheme.error),
                ),
              ),
              TextButton(
                onPressed: p.loading ? null : p.refresh,
                child: Text(l.kycRefresh),
              ),
            ],
            if (data != null) ...[
              const SizedBox(height: 12),
              Text(
                data.tier == AccountTier.basic ? l.kycBasic : l.kycVerifiedTier,
                style: t.textTheme.titleLarge,
              ),
              const SizedBox(height: 12),
              if (data.rows.isEmpty) Text(l.kycLimitsEmpty),
              for (final row in data.rows) ...[
                const Divider(height: 32),
                Text(
                  row.period == LimitPeriod.day ? l.kycDay : l.kycMonth,
                  style: t.textTheme.titleMedium,
                ),
                const SizedBox(height: 12),
                Wrap(
                  spacing: 28,
                  runSpacing: 16,
                  children: [
                    _amount(
                      context,
                      l.kycCurrent,
                      row.currentMinor,
                      row.currency,
                    ),
                    _amount(
                      context,
                      l.wUsage,
                      row.usedMinor + row.reservedMinor,
                      row.currency,
                    ),
                    _amount(
                      context,
                      l.kycRemaining,
                      row.remainingMinor,
                      row.currency,
                    ),
                    if (data.tier == AccountTier.basic)
                      _amount(
                        context,
                        l.kycAfter,
                        row.verifiedMinor,
                        row.currency,
                      ),
                  ],
                ),
                const SizedBox(height: 16),
                LinearProgressIndicator(
                  key: ValueKey('usage-${row.period.name}'),
                  value: row.occupiedFraction,
                  minHeight: 8,
                  borderRadius: BorderRadius.circular(4),
                  semanticsLabel:
                      '${row.period == LimitPeriod.day ? l.kycDay : l.kycMonth}: ${l.wUsage}',
                ),
                if (row.remainingMinor <= 0) ...[
                  const SizedBox(height: 8),
                  Text(
                    l.kycNoCapacity,
                    style: TextStyle(color: t.colorScheme.error),
                  ),
                ],
              ],
            ],
          ],
        ),
      ),
    );
  }

  Widget _amount(
    BuildContext context,
    String label,
    int minor,
    String currency,
  ) => Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text(label),
      Text(
        NumberFormat.simpleCurrency(
          locale: Localizations.localeOf(context).toLanguageTag(),
          name: currency,
        ).format(minor / 100),
        style: Theme.of(context).textTheme.titleLarge,
      ),
    ],
  );
}