import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_modular/flutter_modular.dart';
import 'package:core_localization/core_localization.dart';
import 'package:design_system/design_system.dart';
import '../blocs/time_card_bloc.dart';
import '../widgets/month_selector.dart';
import '../widgets/shift_history_list.dart';
import '../widgets/time_card_summary.dart';

/// The main page for displaying the staff time card.
class TimeCardPage extends StatefulWidget {
  const TimeCardPage({super.key});

  @override
  State<TimeCardPage> createState() => _TimeCardPageState();
}

class _TimeCardPageState extends State<TimeCardPage> {
  final TimeCardBloc _bloc = Modular.get<TimeCardBloc>();

  @override
  void initState() {
    super.initState();
    _bloc.add(LoadTimeCards(DateTime.now()));
  }

  @override
  Widget build(BuildContext context) {
    return BlocProvider.value(
      value: _bloc,
      child: Scaffold(
        backgroundColor: UiColors.bgPrimary,
        appBar: AppBar(
          backgroundColor: UiColors.bgPopup,
          elevation: 0,
          leading: IconButton(
            icon: const Icon(UiIcons.chevronLeft, color: UiColors.iconSecondary),
            onPressed: () => Modular.to.pop(),
          ),
          title: Text(
            t.staff_time_card.title,
            style: UiTypography.headline4m.copyWith(
              color: UiColors.textPrimary,
            ),
          ),
          bottom: PreferredSize(
            preferredSize: const Size.fromHeight(1.0),
            child: Container(color: UiColors.border, height: 1.0),
          ),
        ),
        body: BlocBuilder<TimeCardBloc, TimeCardState>(
          builder: (context, state) {
            if (state is TimeCardLoading) {
              return const Center(child: CircularProgressIndicator());
            } else if (state is TimeCardError) {
              return Center(child: Text('Error: ${state.message}'));
            } else if (state is TimeCardLoaded) {
              return SingleChildScrollView(
                padding: const EdgeInsets.symmetric(
                  horizontal: UiConstants.space5,
                  vertical: UiConstants.space6,
                ),
                child: Column(
                  children: [
                    MonthSelector(
                      selectedDate: state.selectedMonth,
                      onPreviousMonth: () => _bloc.add(ChangeMonth(
                        DateTime(state.selectedMonth.year, state.selectedMonth.month - 1),
                      )),
                      onNextMonth: () => _bloc.add(ChangeMonth(
                        DateTime(state.selectedMonth.year, state.selectedMonth.month + 1),
                      )),
                    ),
                    const SizedBox(height: UiConstants.space6),
                    TimeCardSummary(
                      totalHours: state.totalHours,
                      totalEarnings: state.totalEarnings,
                    ),
                    const SizedBox(height: UiConstants.space6),
                    ShiftHistoryList(timesheets: state.timeCards),
                  ],
                ),
              );
            }
            return const SizedBox.shrink();
          },
        ),
      ),
    );
  }
}
