import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:go_router/go_router.dart';
import 'package:real_estate_mobile/core/constants/app_colors.dart';
import 'package:real_estate_mobile/features/auth/presentation/providers/auth_provider.dart';
import 'package:real_estate_mobile/features/home/presentation/widgets/home_header.dart';

class MessagingShell extends ConsumerWidget {
  final Widget child;

  const MessagingShell({super.key, required this.child});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Column(
        children: [
          SafeArea(
            bottom: false,
            child: const HomeHeader(),
          ),
          Expanded(child: child),
        ],
      ),
      bottomNavigationBar: _buildBottomNavBar(context, ref),
    );
  }

  Widget _buildBottomNavBar(BuildContext context, WidgetRef ref) {
    return Container(
      decoration: const BoxDecoration(
        color: Colors.white,
        border: Border(
          top: BorderSide(color: Color(0xFFE8E8E8), width: 1),
        ),
      ),
      child: SafeArea(
        top: false,
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              _buildNavItem(
                context: context,
                svgPath: 'assets/icons/nav_home_icon.svg',
                fallbackIcon: Icons.home,
                isSelected: false,
                onTap: () => context.go('/home'),
              ),
              _buildNavItem(
                context: context,
                svgPath: 'assets/icons/nav_list_icon.svg',
                fallbackIcon: Icons.list,
                isSelected: false,
                onTap: () => context.push('/agents/search'),
              ),
              _buildNavItem(
                context: context,
                svgPath: 'assets/icons/nav_messages_icon.svg',
                fallbackIcon: Icons.chat_bubble,
                isSelected: true,
                onTap: () => context.go('/messages'),
              ),
              _buildNavItem(
                context: context,
                svgPath: 'assets/icons/nav_profile_icon.svg',
                fallbackIcon: Icons.person_outline,
                isSelected: false,
                onTap: () {
                  final authState = ref.read(authProvider);
                  if (authState.status != AuthStatus.authenticated) {
                    context.push('/login');
                    return;
                  }
                  context.push('/profile');
                },
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildNavItem({
    required BuildContext context,
    required String svgPath,
    required IconData fallbackIcon,
    required bool isSelected,
    required VoidCallback onTap,
  }) {
    return GestureDetector(
      onTap: onTap,
      behavior: HitTestBehavior.opaque,
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        child: SvgPicture.asset(
          svgPath,
          width: 24,
          height: 24,
          colorFilter: isSelected
              ? const ColorFilter.mode(AppColors.primaryDark, BlendMode.srcIn)
              : const ColorFilter.mode(
                  AppColors.accentOrange, BlendMode.srcIn),
          placeholderBuilder: (_) => Icon(
            fallbackIcon,
            size: 24,
            color: isSelected ? AppColors.primaryDark : AppColors.accentOrange,
          ),
        ),
      ),
    );
  }
}