import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_web/pages/home/bloc/home_bloc.dart';
import 'package:syncrow_web/pages/home/bloc/home_state.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/constants/assets.dart';
import 'package:syncrow_web/utils/responsive_layout.dart';
import 'package:syncrow_web/utils/user_drop_down_menu.dart';

class WebAppBar extends StatelessWidget {
  final Widget? title;
  final Widget? centerBody;
  final Widget? rightBody;

  const WebAppBar({super.key, this.title, this.centerBody, this.rightBody});

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<HomeBloc, HomeState>(
      builder: (context, state) {
        final user = context.read<HomeBloc>().user;
        return ResponsiveLayout(
          mobileBody: MobileAppBar(
            title: title,
            centerBody: centerBody,
            rightBody: rightBody,
            user: user,
          ),
          tablet: TabletAppBar(
            title: title,
            centerBody: centerBody,
            rightBody: rightBody,
            user: user,
          ),
          desktopBody: DesktopAppBar(
            title: title,
            centerBody: centerBody,
            rightBody: rightBody,
            user: user,
          ),
        );
      },
    );
  }
}

class DesktopAppBar extends StatelessWidget {
  final Widget? title;
  final Widget? centerBody;
  final Widget? rightBody;
  final dynamic user;

  const DesktopAppBar({
    super.key,
    this.title,
    this.centerBody,
    this.rightBody,
    required this.user,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      decoration: const BoxDecoration(color: ColorsManager.secondaryColor),
      padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 10),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Expanded(
            child: Row(
              children: [
                if (title != null) title!,
                if (centerBody != null)
                  Padding(
                    padding: const EdgeInsets.only(left: 80),
                    child: centerBody!,
                  ),
              ],
            ),
          ),
          _buildUserSection(context),
        ],
      ),
    );
  }

  Widget _buildUserSection(BuildContext context) {
    return Row(
      children: [
        if (rightBody != null) rightBody!,
        const SizedBox(width: 24),
        _UserAvatar(),
        const SizedBox(width: 12),
        if (user != null)
          Text(
            '${user.firstName} ${user.lastName}',
            style: Theme.of(context).textTheme.bodyLarge,
          ),
        const SizedBox(width: 12),
        UserDropdownMenu(user: user),
      ],
    );
  }
}

class TabletAppBar extends StatelessWidget {
  final Widget? title;
  final Widget? centerBody;
  final Widget? rightBody;
  final dynamic user;

  const TabletAppBar({
    super.key,
    this.title,
    this.centerBody,
    this.rightBody,
    required this.user,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      decoration: const BoxDecoration(color: ColorsManager.secondaryColor),
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              if (title != null) Expanded(child: title!),
              _buildUserSection(context),
            ],
          ),
          if (centerBody != null) Expanded(child: centerBody!),
        ],
      ),
    );
  }

  Widget _buildUserSection(BuildContext context) {
    return Row(
      children: [
        if (rightBody != null) rightBody!,
        const SizedBox(width: 16),
        _UserAvatar(),
        if (user != null) ...[
          const SizedBox(width: 8),
          Text(
            '${user.firstName} ${user.lastName}',
            style:
                Theme.of(context).textTheme.bodyLarge?.copyWith(fontSize: 14),
          ),
        ],
        UserDropdownMenu(user: user),
      ],
    );
  }
}

class MobileAppBar extends StatelessWidget {
  final Widget? title;
  final Widget? centerBody;
  final Widget? rightBody;
  final dynamic user;

  const MobileAppBar({
    super.key,
    this.title,
    this.centerBody,
    this.rightBody,
    required this.user,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 135,
      decoration: const BoxDecoration(color: ColorsManager.secondaryColor),
      padding: const EdgeInsets.all(12),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              if (title != null) title!,
              _buildUserSection(context),
            ],
          ),
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              if (centerBody != null)
                Padding(
                  padding: const EdgeInsets.only(top: 8),
                  child: centerBody!,
                ),
              if (rightBody != null)
                Padding(
                  padding: const EdgeInsets.only(top: 8),
                  child: rightBody!,
                ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildUserSection(BuildContext context) {
    return Row(
      children: [
        _UserAvatar(),
        if (user != null) ...[
          const SizedBox(width: 8),
          Text(
            '${user.firstName} ${user.lastName}',
            style:
                Theme.of(context).textTheme.bodyLarge?.copyWith(fontSize: 14),
          ),
        ],
        UserDropdownMenu(user: user),
      ],
    );
  }
}

class _UserAvatar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SizedBox.square(
      dimension: 40,
      child: CircleAvatar(
        backgroundColor: ColorsManager.whiteColors,
        child: SizedBox.square(
          dimension: 35,
          child: SvgPicture.asset(
            Assets.logoGrey,
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}