import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../blocs/client_home_bloc.dart';
import '../blocs/client_home_event.dart';
import '../blocs/client_home_state.dart';

/// A banner displayed when edit mode is active.
///
/// Shows instructions for reordering widgets and provides a reset button
/// to restore the default layout.
class ClientHomeEditBanner extends StatelessWidget {
  /// The internationalization object for localized strings.
  final dynamic i18n;

  /// Creates a [ClientHomeEditBanner].
  const ClientHomeEditBanner({
    required this.i18n,
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<ClientHomeBloc, ClientHomeState>(
      buildWhen: (ClientHomeState prev, ClientHomeState curr) => prev.isEditMode != curr.isEditMode,
      builder: (BuildContext context, ClientHomeState state) {
        return AnimatedContainer(
          duration: const Duration(milliseconds: 300),
          height: state.isEditMode ? 76 : 0,
          clipBehavior: Clip.antiAlias,
          margin: const EdgeInsets.symmetric(
            horizontal: UiConstants.space4,
            vertical: UiConstants.space2,
          ),
          padding: const EdgeInsets.all(UiConstants.space3),
          decoration: BoxDecoration(
            color: UiColors.primary.withValues(alpha: 0.1),
            border: Border.all(color: UiColors.primary.withValues(alpha: 0.3)),
            borderRadius: UiConstants.radiusLg,
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              const Icon(UiIcons.edit, size: 16, color: UiColors.primary),
              const SizedBox(width: UiConstants.space2),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    i18n.dashboard.edit_mode_active,
                    style: UiTypography.footnote1b.copyWith(
                      color: UiColors.primary,
                    ),
                  ),
                  Text(
                    i18n.dashboard.drag_instruction,
                    style: UiTypography.footnote2r.textSecondary,
                  ),
                ],
              ),
              UiButton.secondary(
                text: i18n.dashboard.reset,
                onPressed: () => BlocProvider.of<ClientHomeBloc>(
                  context,
                ).add(ClientHomeLayoutReset()),
                size: UiButtonSize.small,
                style: OutlinedButton.styleFrom(
                  minimumSize: const Size(0, 48),
                  maximumSize: const Size(double.infinity, 48),
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}
