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 'package:intl/intl.dart';
import '../blocs/coverage_bloc.dart';
import '../blocs/coverage_event.dart';
import '../blocs/coverage_state.dart';

import '../widgets/coverage_calendar_selector.dart';
import '../widgets/coverage_quick_stats.dart';
import '../widgets/coverage_shift_list.dart';
import '../widgets/late_workers_alert.dart';

/// Page for displaying daily coverage information.
///
/// Shows shifts, worker statuses, and coverage statistics for a selected date.
class CoveragePage extends StatefulWidget {
  /// Creates a [CoveragePage].
  const CoveragePage({super.key});

  @override
  State<CoveragePage> createState() => _CoveragePageState();
}

class _CoveragePageState extends State<CoveragePage> {
  late ScrollController _scrollController;
  bool _isScrolled = false;

  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController();
    _scrollController.addListener(_onScroll);
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  void _onScroll() {
    if (_scrollController.hasClients) {
      if (_scrollController.offset > 180 && !_isScrolled) {
        setState(() => _isScrolled = true);
      } else if (_scrollController.offset <= 180 && _isScrolled) {
        setState(() => _isScrolled = false);
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return BlocProvider<CoverageBloc>(
      create: (BuildContext context) => Modular.get<CoverageBloc>()
        ..add(CoverageLoadRequested(date: DateTime.now())),
      child: Scaffold(
        body: BlocBuilder<CoverageBloc, CoverageState>(
          builder: (BuildContext context, CoverageState state) {
            final DateTime selectedDate = state.selectedDate ?? DateTime.now();

            return CustomScrollView(
              controller: _scrollController,
              slivers: <Widget>[
                SliverAppBar(
                  pinned: true,
                  expandedHeight: 300.0,
                  backgroundColor: UiColors.primary,
                  leading: IconButton(
                    onPressed: () => Modular.to.navigate('/client-main/home/'),
                    icon: Container(
                      padding: const EdgeInsets.all(UiConstants.space2),
                      decoration: BoxDecoration(
                        color: UiColors.primaryForeground.withOpacity(0.2),
                        shape: BoxShape.circle,
                      ),
                      child: const Icon(
                        UiIcons.arrowLeft,
                        color: UiColors.primaryForeground,
                        size: UiConstants.space4,
                      ),
                    ),
                  ),
                  title: AnimatedSwitcher(
                    duration: const Duration(milliseconds: 200),
                    child: Text(
                      _isScrolled
                          ? DateFormat('MMMM d').format(selectedDate)
                          : 'Daily Coverage',
                      key: ValueKey<bool>(_isScrolled),
                      style: UiTypography.title2m.copyWith(
                        color: UiColors.primaryForeground,
                      ),
                    ),
                  ),
                  actions: <Widget>[
                    IconButton(
                      onPressed: () {
                        BlocProvider.of<CoverageBloc>(context).add(
                          const CoverageRefreshRequested(),
                        );
                      },
                      icon: Container(
                        padding: const EdgeInsets.all(UiConstants.space2),
                        decoration: BoxDecoration(
                          color: UiColors.primaryForeground.withOpacity(0.2),
                          borderRadius: UiConstants.radiusMd,
                        ),
                        child: const Icon(
                          UiIcons.rotateCcw,
                          color: UiColors.primaryForeground,
                          size: UiConstants.space4,
                        ),
                      ),
                    ),
                    const SizedBox(width: UiConstants.space4),
                  ],
                  flexibleSpace: Container(
                    decoration: const BoxDecoration(
                      gradient: LinearGradient(
                        colors: <Color>[
                          UiColors.primary,
                          UiColors.primary,
                        ],
                        begin: Alignment.topLeft,
                        end: Alignment.bottomRight,
                      ),
                    ),
                    child: FlexibleSpaceBar(
                      background: Padding(
                        padding: const EdgeInsets.fromLTRB(
                          UiConstants.space5,
                          100, // Top padding to clear AppBar
                          UiConstants.space5,
                          UiConstants.space4,
                        ),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: <Widget>[
                            CoverageCalendarSelector(
                              selectedDate: selectedDate,
                              onDateSelected: (DateTime date) {
                                BlocProvider.of<CoverageBloc>(context).add(
                                  CoverageLoadRequested(date: date),
                                );
                              },
                            ),
                            const SizedBox(height: UiConstants.space4),
                            // Coverage Stats Container
                            Container(
                              padding: const EdgeInsets.all(UiConstants.space4),
                              decoration: BoxDecoration(
                                color:
                                    UiColors.primaryForeground.withOpacity(0.1),
                                borderRadius: UiConstants.radiusLg,
                              ),
                              child: Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: <Widget>[
                                  Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: <Widget>[
                                      Text(
                                        'Coverage Status',
                                        style: UiTypography.body2r.copyWith(
                                          color: UiColors.primaryForeground
                                              .withOpacity(0.7),
                                        ),
                                      ),
                                      Text(
                                        '${state.stats?.coveragePercent ?? 0}%',
                                        style: UiTypography.display1b.copyWith(
                                          color: UiColors.primaryForeground,
                                        ),
                                      ),
                                    ],
                                  ),
                                  Column(
                                    crossAxisAlignment: CrossAxisAlignment.end,
                                    children: <Widget>[
                                      Text(
                                        'Workers',
                                        style: UiTypography.body2r.copyWith(
                                          color: UiColors.primaryForeground
                                              .withOpacity(0.7),
                                        ),
                                      ),
                                      Text(
                                        '${state.stats?.totalConfirmed ?? 0}/${state.stats?.totalNeeded ?? 0}',
                                        style: UiTypography.title2m.copyWith(
                                          color: UiColors.primaryForeground,
                                        ),
                                      ),
                                    ],
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
                SliverList(
                  delegate: SliverChildListDelegate(
                    <Widget>[
                      _buildBody(context: context, state: state),
                    ],
                  ),
                ),
              ],
            );
          },
        ),
      ),
    );
  }

  /// Builds the main body content based on the current state.
  Widget _buildBody({
    required BuildContext context,
    required CoverageState state,
  }) {
    if (state.status == CoverageStatus.loading) {
      return const Center(
        child: CircularProgressIndicator(),
      );
    }

    if (state.status == CoverageStatus.failure) {
      return Center(
        child: Padding(
          padding: const EdgeInsets.all(UiConstants.space6),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Icon(
                UiIcons.warning,
                size: UiConstants.space12,
                color: UiColors.destructive,
              ),
              const SizedBox(height: UiConstants.space4),
              Text(
                'Failed to load coverage data',
                style: UiTypography.title2m.copyWith(
                  color: UiColors.textPrimary,
                ),
              ),
              const SizedBox(height: UiConstants.space2),
              Text(
                state.errorMessage ?? 'An unknown error occurred',
                style: UiTypography.body2r.copyWith(
                  color: UiColors.mutedForeground,
                ),
                textAlign: TextAlign.center,
              ),
            ],
          ),
        ),
      );
    }

    return Padding(
      padding: const EdgeInsets.all(UiConstants.space5),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          if (state.stats != null) ...<Widget>[
            CoverageQuickStats(stats: state.stats!),
            const SizedBox(height: UiConstants.space5),
          ],
          if (state.stats != null && state.stats!.late > 0) ...<Widget>[
            LateWorkersAlert(lateCount: state.stats!.late),
            const SizedBox(height: UiConstants.space5),
          ],
          Text(
            'Shifts (${state.shifts.length})',
            style: UiTypography.title2b.copyWith(
              color: UiColors.textPrimary,
            ),
          ),
          const SizedBox(height: UiConstants.space3),
          CoverageShiftList(shifts: state.shifts),
          const SizedBox(
            height: UiConstants.space24,
          ),
        ],
      ),
    );
  }
}
