import 'package:assets_audio_player/assets_audio_player.dart';
import 'package:didvan/config/design_config.dart';
import 'package:didvan/config/theme_data.dart';
import 'package:didvan/constants/app_icons.dart';
import 'package:didvan/models/enums.dart';
import 'package:didvan/models/requests/radar.dart';
import 'package:didvan/providers/user.dart';
import 'package:didvan/routes/routes.dart';
import 'package:didvan/services/media/media.dart';
import 'package:didvan/utils/action_sheet.dart';
import 'package:didvan/views/home/studio/studio_details/studio_details_state.dart';
import 'package:didvan/views/home/studio/studio_details/widgets/studio_details_widget.dart';
import 'package:didvan/views/home/studio/studio_state.dart';
import 'package:didvan/views/home/widgets/audio/audio_player_widget.dart';
import 'package:didvan/views/home/widgets/audio/audio_slider.dart';
import 'package:didvan/views/widgets/didvan/icon_button.dart';
import 'package:didvan/views/widgets/didvan/text.dart';
import 'package:didvan/views/widgets/skeleton_image.dart';
import 'package:expandable_bottom_sheet/expandable_bottom_sheet.dart';
import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:provider/provider.dart';

class DidvanBNB extends StatelessWidget {
  final int currentTabIndex;
  final void Function(int index) onTabChanged;

  const DidvanBNB(
      {Key? key, required this.currentTabIndex, required this.onTabChanged})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        const _PlayerNavBar(),
        Positioned(
          bottom: 0,
          left: 0,
          right: 0,
          child: Container(
            height: 72,
            decoration: BoxDecoration(
              color: Theme.of(context).colorScheme.surface,
              borderRadius:
                  const BorderRadius.vertical(top: Radius.circular(16)),
              boxShadow: [
                BoxShadow(
                  color: const Color(0XFF1B3C59).withOpacity(0.15),
                  blurRadius: 8,
                  spreadRadius: 0,
                  offset: const Offset(0, -8),
                )
              ],
            ),
            padding: const EdgeInsets.symmetric(horizontal: 12),
            child: Row(
              children: [
                _NavBarItem(
                  isSelected: currentTabIndex == 0,
                  title: 'اخبار',
                  selectedIcon: DidvanIcons.news_solid,
                  unselectedIcon: DidvanIcons.news_light,
                  onTap: () => onTabChanged(0),
                ),
                _NavBarItem(
                  isSelected: currentTabIndex == 1,
                  title: 'آمار',
                  selectedIcon: DidvanIcons.chart_solid,
                  unselectedIcon: DidvanIcons.chart_light,
                  onTap: () => onTabChanged(1),
                ),
                _NavBarItem(
                  isSelected: currentTabIndex == 2,
                  title: 'رادار',
                  selectedIcon: DidvanIcons.radar_solid,
                  unselectedIcon: DidvanIcons.radar_light,
                  onTap: () => onTabChanged(2),
                ),
                _NavBarItem(
                  isSelected: currentTabIndex == 3,
                  title: 'استودیو',
                  selectedIcon: DidvanIcons.play_circle_solid,
                  unselectedIcon: DidvanIcons.play_circle_light,
                  onTap: () => onTabChanged(3),
                ),
                _NavBarItem(
                  hasBadge:
                      context.watch<UserProvider>().unreadMessageCount != 0,
                  isSelected: currentTabIndex == 4,
                  title: 'تنظیمات',
                  selectedIcon: DidvanIcons.setting_solid,
                  unselectedIcon: DidvanIcons.setting_light,
                  onTap: () => onTabChanged(4),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

class _PlayerNavBar extends StatelessWidget {
  const _PlayerNavBar({Key? key}) : super(key: key);

  bool _enablePlayerController(StudioDetailsState state) =>
      MediaService.currentPodcast != null ||
      (MediaService.audioPlayerTag?.contains('podcast') ?? false);

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<bool>(
      stream: MediaService.audioPlayer.isPlaying,
      builder: (context, snapshot) => GestureDetector(
        onTap: () => MediaService.currentPodcast == null ||
                MediaService.currentPodcast?.description == 'radar'
            ? Navigator.of(context).pushNamed(
                Routes.radarDetails,
                arguments: {
                  'onMarkChanged': (id, value) {},
                  'onCommentsChanged': (id, value) {},
                  'id': MediaService.currentPodcast?.id,
                  'args': const RadarRequestArgs(page: 0),
                  'hasUnmarkConfirmation': false,
                },
              )
            : _showPlayerBottomSheet(context),
        child: Consumer<StudioDetailsState>(
          builder: (context, state, child) => AnimatedContainer(
            padding: const EdgeInsets.only(top: 12),
            duration: DesignConfig.lowAnimationDuration,
            height: _enablePlayerController(state) ? 128 : 72,
            decoration: BoxDecoration(
              color: DesignConfig.isDark
                  ? Theme.of(context).colorScheme.focused
                  : Theme.of(context).colorScheme.navigation,
              borderRadius: const BorderRadius.vertical(
                top: Radius.circular(16),
              ),
            ),
            alignment: Alignment.topCenter,
            child: Builder(builder: (context) {
              if (!_enablePlayerController(state)) return const SizedBox();
              if (state.appState == AppState.failed) {
                Future.delayed(const Duration(seconds: 2), () {
                  MediaService.resetAudioPlayer();
                });
                return DidvanText(
                  'اتصال اینترنت برقرار نمی‌باشد',
                  color: DesignConfig.isDark
                      ? Theme.of(context).colorScheme.title
                      : Theme.of(context).colorScheme.secondCTA,
                );
              }
              if (MediaService.currentPodcast == null) {
                return SizedBox(
                  height: 32,
                  child: Center(
                    child: SpinKitThreeBounce(
                      size: 18,
                      color: DesignConfig.isDark
                          ? Theme.of(context).colorScheme.title
                          : Theme.of(context).colorScheme.secondCTA,
                    ),
                  ),
                );
              }
              return SizedBox(
                height: 56,
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(
                        right: 12,
                        left: 16,
                      ),
                      child: DidvanIconButton(
                        icon: DidvanIcons.close_regular,
                        color: DesignConfig.isDark
                            ? null
                            : Theme.of(context).colorScheme.secondCTA,
                        gestureSize: 28,
                        onPressed: MediaService.resetAudioPlayer,
                      ),
                    ),
                    SkeletonImage(
                      imageUrl: MediaService.currentPodcast!.image,
                      width: 32,
                      height: 32,
                    ),
                    const SizedBox(width: 16),
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          DidvanText(
                            MediaService.currentPodcast!.title,
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                            color: DesignConfig.isDark
                                ? null
                                : Theme.of(context).colorScheme.secondCTA,
                          ),
                          AudioSlider(
                            disableThumb: true,
                            tag: MediaService.audioPlayerTag!,
                          ),
                        ],
                      ),
                    ),
                    StreamBuilder<PlayingAudio?>(
                      stream: MediaService.audioPlayer.onReadyToPlay,
                      builder: (context, snapshot) {
                        if (snapshot.data == null ||
                            state.appState == AppState.busy &&
                                MediaService.currentPodcast?.description !=
                                    'radar') {
                          return Padding(
                            padding: const EdgeInsets.only(
                              top: 4,
                              left: 16,
                              right: 16,
                            ),
                            child: SizedBox(
                              height: 18,
                              width: 18,
                              child: CircularProgressIndicator(
                                strokeWidth: 2,
                                color: DesignConfig.isDark
                                    ? Theme.of(context).colorScheme.title
                                    : Theme.of(context).colorScheme.secondCTA,
                              ),
                            ),
                          );
                        }
                        return const SizedBox();
                      },
                    ),
                    if (state.appState != AppState.busy &&
                            snapshot.data != null ||
                        MediaService.currentPodcast?.description == 'radar')
                      Padding(
                        padding: const EdgeInsets.only(
                          left: 12,
                          right: 16,
                        ),
                        child: DidvanIconButton(
                          gestureSize: 28,
                          color: DesignConfig.isDark
                              ? null
                              : Theme.of(context).colorScheme.secondCTA,
                          icon: snapshot.data!
                              ? DidvanIcons.pause_solid
                              : DidvanIcons.play_solid,
                          onPressed: () {
                            if (state.args?.type == 'video') {
                              state.getStudioDetails(
                                MediaService.currentPodcast!.id,
                                args: state.podcastArgs,
                                fetchOnly: true,
                              );
                            }
                            MediaService.handleAudioPlayback(
                              audioSource: MediaService.currentPodcast!.link,
                              id: MediaService.currentPodcast!.id,
                              isVoiceMessage: false,
                            );
                          },
                        ),
                      ),
                  ],
                ),
              );
            }),
          ),
        ),
      ),
    );
  }

  void _showPlayerBottomSheet(BuildContext context) {
    final sheetKey = GlobalKey<ExpandableBottomSheetState>();
    bool isExpanded = false;
    final detailsState = context.read<StudioDetailsState>();
    if (detailsState.args?.type == 'video') {
      detailsState.getStudioDetails(
        MediaService.currentPodcast!.id,
        args: detailsState.podcastArgs,
        fetchOnly: true,
      );
    }
    final state = context.read<StudioState>();
    showModalBottomSheet(
      constraints: BoxConstraints(
        maxWidth: ActionSheetUtils.mediaQueryData.size.width,
      ),
      backgroundColor: Colors.transparent,
      context: context,
      isScrollControlled: true,
      builder: (context) => ChangeNotifierProvider<StudioState>.value(
        value: state,
        child: Consumer<StudioDetailsState>(
          builder: (context, state, child) => MediaQuery(
            data: ActionSheetUtils.mediaQueryData,
            child: ExpandableBottomSheet(
              key: sheetKey,
              background: Align(
                alignment: Alignment.bottomCenter,
                child: Container(
                  height: MediaQuery.of(context).size.height * 0.7,
                  color: Theme.of(context).colorScheme.surface,
                ),
              ),
              persistentHeader: GestureDetector(
                onVerticalDragUpdate: (details) {
                  if (details.delta.dy > 10) {
                    Navigator.of(context).pop();
                  }
                },
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    AudioPlayerWidget(
                      podcast: MediaService.currentPodcast!,
                    ),
                    Container(
                      width: MediaQuery.of(context).size.width,
                      color: Theme.of(context).colorScheme.surface,
                      child: Column(
                        children: [
                          DidvanIconButton(
                            size: 32,
                            icon: DidvanIcons.angle_up_regular,
                            onPressed: () {
                              if (!isExpanded) {
                                sheetKey.currentState?.expand();
                                isExpanded = true;
                              } else {
                                isExpanded = false;
                                sheetKey.currentState?.contract();
                              }
                            },
                          ),
                          const SizedBox(height: 16),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              expandableContent: state.appState == AppState.busy
                  ? Container(
                      height: MediaQuery.of(context).size.height / 2,
                      alignment: Alignment.center,
                      child: SpinKitSpinningLines(
                        color: Theme.of(context).colorScheme.primary,
                      ),
                    )
                  : StudioDetailsWidget(
                      onMarkChanged: (id, value) => context
                          .read<StudioState>()
                          .changeMark(id, value, true),
                    ),
            ),
          ),
        ),
      ),
    );
  }
}

class _NavBarItem extends StatelessWidget {
  final VoidCallback onTap;
  final bool isSelected;
  final String title;
  final IconData selectedIcon;
  final IconData unselectedIcon;
  final bool hasBadge;
  const _NavBarItem({
    Key? key,
    required this.isSelected,
    required this.title,
    required this.selectedIcon,
    required this.unselectedIcon,
    required this.onTap,
    this.hasBadge = false,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Tooltip(
        message: title,
        decoration: BoxDecoration(
          color: Theme.of(context).colorScheme.title,
          borderRadius: DesignConfig.highBorderRadius,
          boxShadow: DesignConfig.defaultShadow,
        ),
        child: GestureDetector(
          onTap: onTap,
          child: Container(
            color: Colors.transparent,
            child: Column(
              children: [
                const SizedBox(
                  height: 4,
                ),
                AnimatedContainer(
                  padding: const EdgeInsets.all(4),
                  duration: DesignConfig.lowAnimationDuration,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: isSelected
                        ? Theme.of(context).colorScheme.focused
                        : Theme.of(context).colorScheme.surface,
                  ),
                  child: Stack(
                    children: [
                      Icon(
                        isSelected ? selectedIcon : unselectedIcon,
                        size: 32,
                        color: DesignConfig.isDark
                            ? Theme.of(context).colorScheme.text
                            : Theme.of(context).colorScheme.title,
                      ),
                      if (hasBadge)
                        Container(
                          height: 12,
                          width: 12,
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            color: Theme.of(context).colorScheme.secondary,
                          ),
                        ),
                    ],
                  ),
                ),
                DidvanText(
                  title,
                  style: Theme.of(context).textTheme.caption,
                  color: Theme.of(context).colorScheme.title,
                ),
                const Spacer(),
              ],
            ),
          ),
        ),
      ),
    );
  }
}