import 'package:core_localization/core_localization.dart';
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_modular/flutter_modular.dart';

import '../blocs/client_home_bloc.dart';
import '../blocs/client_home_event.dart';
import '../blocs/client_home_state.dart';
import '../widgets/client_home_edit_banner.dart';
import '../widgets/client_home_header.dart';
import '../widgets/dashboard_widget_builder.dart';

/// The main Home page for client users.
///
/// This page displays a customizable dashboard with various widgets that can be
/// reordered and toggled on/off through edit mode.
class ClientHomePage extends StatelessWidget {
  /// Creates a [ClientHomePage].
  const ClientHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    final TranslationsClientHomeEn i18n = t.client_home;

    return BlocProvider<ClientHomeBloc>(
      create: (BuildContext context) => Modular.get<ClientHomeBloc>(),
      child: Scaffold(
        body: SafeArea(
          child: Column(
            children: <Widget>[
              ClientHomeHeader(i18n: i18n),
              ClientHomeEditBanner(i18n: i18n),
              Flexible(
                child: BlocBuilder<ClientHomeBloc, ClientHomeState>(
                  builder: (BuildContext context, ClientHomeState state) {
                    if (state.isEditMode) {
                      return _buildEditModeList(context, state);
                    }
                    return _buildNormalModeList(state);
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  /// Builds the widget list in edit mode with drag-and-drop support.
  Widget _buildEditModeList(BuildContext context, ClientHomeState state) {
    return ReorderableListView(
      padding: const EdgeInsets.fromLTRB(
        UiConstants.space4,
        0,
        UiConstants.space4,
        100,
      ),
      onReorder: (int oldIndex, int newIndex) {
        BlocProvider.of<ClientHomeBloc>(
          context,
        ).add(ClientHomeWidgetReordered(oldIndex, newIndex));
      },
      children: state.widgetOrder.map((String id) {
        return Container(
          key: ValueKey<String>(id),
          margin: const EdgeInsets.only(bottom: UiConstants.space4),
          child: DashboardWidgetBuilder(id: id, state: state, isEditMode: true),
        );
      }).toList(),
    );
  }

  /// Builds the widget list in normal mode with visibility filters.
  Widget _buildNormalModeList(ClientHomeState state) {
    final List<String> visibleWidgets = state.widgetOrder.where((String id) {
      if (id == 'reorder' && state.reorderItems.isEmpty) {
        return false;
      }
      return state.widgetVisibility[id] ?? true;
    }).toList();

    return ListView.separated(
      padding: const EdgeInsets.only(bottom: 100),
      separatorBuilder: (BuildContext context, int index) {
        return const Divider(color: UiColors.border, height: 0.2);
      },
      itemCount: visibleWidgets.length,
      itemBuilder: (BuildContext context, int index) {
        final String id = visibleWidgets[index];
        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            if (index != 0) const SizedBox(height: UiConstants.space8),
            Padding(
              padding: const EdgeInsets.symmetric(
                horizontal: UiConstants.space4,
              ),
              child: DashboardWidgetBuilder(
                id: id,
                state: state,
                isEditMode: false,
              ),
            ),
            const SizedBox(height: UiConstants.space8),
          ],
        );
      },
    );
  }
}
