import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';

import '../../../application/outlet/outlet_loader/outlet_loader_bloc.dart';
import '../../../common/theme/theme.dart';
import '../../components/button/button.dart';
import '../wallet/wallet_ui.dart';
import 'widgets/outlet_tile.dart';

/// Semua outlet tempat EnakPoint & EnakCoin berlaku (§4.4).
@RoutePage()
class OutletPage extends StatelessWidget {
  const OutletPage({super.key});

  void _refresh(BuildContext context) =>
      context.read<OutletLoaderBloc>().add(const OutletLoaderEvent.fetched());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColor.background,
      appBar: AppBar(title: const Text('Outlet')),
      body: BlocBuilder<OutletLoaderBloc, OutletLoaderState>(
        builder: (context, state) {
          if (!state.hasLoaded) {
            return state.failureOption.fold(
              () => const Center(
                child: SpinKitFadingCircle(color: AppColor.primary, size: 36),
              ),
              (f) => Center(
                child: Padding(
                  padding: const EdgeInsets.all(24),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Text(
                        walletFailureMessage(f),
                        textAlign: TextAlign.center,
                        style: AppStyle.md,
                      ),
                      const SizedBox(height: 16),
                      AppOutlineButton(
                        title: 'Coba lagi',
                        width: 160,
                        onPressed: () => _refresh(context),
                      ),
                    ],
                  ),
                ),
              ),
            );
          }

          return RefreshIndicator(
            color: AppColor.primary,
            onRefresh: () async {
              _refresh(context);
              await context.read<OutletLoaderBloc>().stream.firstWhere(
                (s) => !s.isFetching,
              );
            },
            child: ListView.separated(
              padding: const EdgeInsets.fromLTRB(16, 12, 16, 24),
              itemCount: state.outlets.length + 1,
              separatorBuilder: (_, _) => const SizedBox(height: 10),
              itemBuilder: (context, index) {
                if (index == 0) {
                  return Text(
                    'EnakPoint & EnakCoin kamu berlaku di '
                    '${state.outlets.length} outlet berikut.',
                    style: AppStyle.sm.copyWith(color: AppColor.textSecondary),
                  );
                }
                return OutletTile(outlet: state.outlets[index - 1]);
              },
            ),
          );
        },
      ),
    );
  }
}