import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart' show Badge;
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';

import 'package:spotube/collections/routes.gr.dart';
import 'package:spotube/collections/spotube_icons.dart';
import 'package:spotube/components/image/universal_image.dart';
import 'package:spotube/extensions/constrains.dart';
import 'package:spotube/extensions/context.dart';
import 'package:spotube/models/metadata/metadata.dart';
import 'package:spotube/modules/connect/connect_device.dart';
import 'package:spotube/provider/download_manager_provider.dart';
import 'package:spotube/provider/metadata_plugin/core/auth.dart';
import 'package:spotube/provider/metadata_plugin/core/user.dart';

class SidebarFooter extends HookConsumerWidget implements NavigationBarItem {
  const SidebarFooter({
    super.key,
  });

  @override
  Widget build(BuildContext context, ref) {
    final theme = Theme.of(context);
    final router = AutoRouter.of(context, watch: true);
    final mediaQuery = MediaQuery.of(context);
    final downloadCount = ref.watch(downloadManagerProvider).$downloadCount;
    final userSnapshot = ref.watch(metadataPluginUserProvider);
    final data = userSnapshot.asData?.value;

    final avatarImg = (data?.images).asUrlString(
      index: (data?.images.length ?? 1) - 1,
      placeholder: ImagePlaceholder.artist,
    );

    final authenticated = ref.watch(metadataPluginAuthenticatedProvider);

    if (mediaQuery.mdAndDown) {
      return Column(
        mainAxisSize: MainAxisSize.min,
        spacing: 10,
        children: [
          Badge(
            isLabelVisible: downloadCount > 0,
            label: Text(downloadCount.toString()),
            child: IconButton(
              variance: router.topRoute.name == UserDownloadsRoute.name
                  ? ButtonVariance.secondary
                  : ButtonVariance.ghost,
              icon: const Icon(SpotubeIcons.download),
              onPressed: () => context.navigateTo(const UserDownloadsRoute()),
            ),
          ),
          const ConnectDeviceButton.sidebar(),
          IconButton(
            variance: ButtonVariance.ghost,
            icon: const Icon(SpotubeIcons.settings),
            onPressed: () => context.navigateTo(const SettingsRoute()),
          ),
        ],
      );
    }

    return Container(
      padding: const EdgeInsets.only(left: 12),
      width: 180,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        spacing: 10,
        children: [
          SizedBox(
            width: double.infinity,
            child: Button(
              style: router.topRoute.name == UserDownloadsRoute.name
                  ? ButtonVariance.secondary
                  : ButtonVariance.outline,
              onPressed: () {
                context.navigateTo(const UserDownloadsRoute());
              },
              leading: const Icon(SpotubeIcons.download),
              trailing: downloadCount > 0
                  ? PrimaryBadge(
                      child: Text(downloadCount.toString()),
                    )
                  : null,
              child: Text(context.l10n.downloads),
            ),
          ),
          const ConnectDeviceButton.sidebar(),
          Row(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              if (authenticated.asData?.value == true && data == null)
                const CircularProgressIndicator()
              else if (data != null)
                Flexible(
                  child: GestureDetector(
                    onTap: () {
                      context.navigateTo(const ProfileRoute());
                    },
                    child: Row(
                      children: [
                        Avatar(
                          initials: Avatar.getInitials(data.name),
                          provider: UniversalImage.imageProvider(avatarImg),
                        ),
                        const SizedBox(width: 10),
                        Flexible(
                          child: Text(
                            data.name,
                            maxLines: 1,
                            softWrap: false,
                            overflow: TextOverflow.fade,
                            style: theme.typography.normal
                                .copyWith(fontWeight: FontWeight.bold),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              IconButton(
                variance: ButtonVariance.ghost,
                icon: const Icon(SpotubeIcons.settings),
                onPressed: () {
                  context.navigateTo(const SettingsRoute());
                },
              ),
            ],
          ),
        ],
      ),
    );
  }

  @override
  bool get selectable => false;
}