import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:real_estate_mobile/core/constants/app_colors.dart';
import 'package:real_estate_mobile/features/agents/data/models/agent_profile.dart';
import 'package:real_estate_mobile/features/agents/presentation/providers/agents_provider.dart';

class TopProfessionalsSection extends ConsumerWidget {
  const TopProfessionalsSection({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final state = ref.watch(topProfessionalsProvider);

    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 24),
      child: Column(
        children: [
          const Text(
            '"Meet top real estate professionals"',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontFamily: 'Fractul',
              fontSize: 25,
              fontWeight: FontWeight.w700,
              color: AppColors.primaryDark,
            ),
          ),
          const SizedBox(height: 24),

          // Agents / Lenders Tab
          _buildCategoryTab(ref, state.activeTab),
          const SizedBox(height: 24),

          // Content
          if (state.isLoading)
            const Padding(
              padding: EdgeInsets.symmetric(vertical: 40),
              child: CircularProgressIndicator(
                color: AppColors.accentOrange,
              ),
            )
          else if (state.error != null)
            _buildErrorState(ref, state.error!)
          else if (state.activeList.isEmpty)
            _buildEmptyState(state.activeTab)
          else ...[
            // Agent Cards - horizontal scroll
            SizedBox(
              height: 480,
              child: PageView.builder(
                controller: PageController(viewportFraction: 1.0),
                itemCount: state.activeList.length,
                itemBuilder: (context, index) {
                  return _buildAgentCard(state.activeList[index]);
                },
              ),
            ),
            const SizedBox(height: 12),

            // Progress indicator
            _buildProgressIndicator(state.activeList.length),
          ],
          const SizedBox(height: 32),

          // See All Agents CTA
          _buildSeeAllAgentsCta(),
        ],
      ),
    );
  }

  Widget _buildCategoryTab(WidgetRef ref, String activeTab) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(15),
        border: Border.all(color: AppColors.primaryDark, width: 0.1),
      ),
      child: Row(
        children: [
          // Agents tab
          Expanded(
            child: GestureDetector(
              onTap: () => ref
                  .read(topProfessionalsProvider.notifier)
                  .setActiveTab('agents'),
              child: Container(
                padding: const EdgeInsets.symmetric(vertical: 12),
                decoration: BoxDecoration(
                  color: activeTab == 'agents'
                      ? AppColors.accentOrange
                      : Colors.transparent,
                  borderRadius: BorderRadius.circular(15),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    SvgPicture.asset(
                      'assets/icons/agents_tab_icon.svg',
                      width: 24,
                      height: 24,
                      placeholderBuilder: (_) => Icon(
                        Icons.people,
                        color: activeTab == 'agents'
                            ? Colors.white
                            : AppColors.primaryDark,
                        size: 24,
                      ),
                    ),
                    const SizedBox(width: 8),
                    Text(
                      'Agents',
                      style: TextStyle(
                        fontFamily: 'SourceSerif4',
                        fontSize: 17,
                        fontWeight: FontWeight.w600,
                        color: activeTab == 'agents'
                            ? Colors.white
                            : AppColors.primaryDark,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
          // Lenders tab
          Expanded(
            child: GestureDetector(
              onTap: () => ref
                  .read(topProfessionalsProvider.notifier)
                  .setActiveTab('lenders'),
              child: Container(
                padding: const EdgeInsets.symmetric(vertical: 12),
                decoration: BoxDecoration(
                  color: activeTab == 'lenders'
                      ? AppColors.accentOrange
                      : Colors.transparent,
                  borderRadius: BorderRadius.circular(15),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    SvgPicture.asset(
                      'assets/icons/lenders_tab_icon.svg',
                      width: 24,
                      height: 24,
                      placeholderBuilder: (_) => Icon(
                        Icons.calendar_today,
                        color: activeTab == 'lenders'
                            ? Colors.white
                            : AppColors.primaryDark,
                        size: 24,
                      ),
                    ),
                    const SizedBox(width: 8),
                    Text(
                      'Lenders',
                      style: TextStyle(
                        fontFamily: 'SourceSerif4',
                        fontSize: 17,
                        fontWeight: FontWeight.w600,
                        color: activeTab == 'lenders'
                            ? Colors.white
                            : AppColors.primaryDark,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildAgentCard(AgentProfile agent) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(15),
        border: Border.all(color: AppColors.primaryDark, width: 0.1),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Agent image
          ClipRRect(
            borderRadius:
                const BorderRadius.vertical(top: Radius.circular(15)),
            child: agent.avatar != null && agent.avatar!.isNotEmpty
                ? Image.network(
                    agent.avatar!,
                    width: double.infinity,
                    height: 192,
                    fit: BoxFit.cover,
                    errorBuilder: (_, __, ___) => _buildAvatarPlaceholder(),
                  )
                : _buildAvatarPlaceholder(),
          ),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(16),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // Name and rating row
                  Row(
                    children: [
                      Expanded(
                        child: Row(
                          children: [
                            Flexible(
                              child: Text(
                                agent.fullName,
                                style: const TextStyle(
                                  fontFamily: 'Fractul',
                                  fontSize: 14,
                                  fontWeight: FontWeight.w700,
                                  color: AppColors.primaryDark,
                                ),
                                overflow: TextOverflow.ellipsis,
                              ),
                            ),
                            if (agent.isVerified) ...[
                              const SizedBox(width: 8),
                              SvgPicture.asset(
                                'assets/icons/verified_badge_icon.svg',
                                width: 16,
                                height: 16,
                                placeholderBuilder: (_) => const Icon(
                                  Icons.verified,
                                  color: Colors.blue,
                                  size: 16,
                                ),
                              ),
                            ],
                          ],
                        ),
                      ),
                      if (agent.rating != null) ...[
                        SvgPicture.asset(
                          'assets/icons/star_rating_icon.svg',
                          width: 16,
                          height: 16,
                          placeholderBuilder: (_) => const Icon(
                            Icons.star,
                            color: AppColors.accentOrange,
                            size: 16,
                          ),
                        ),
                        const SizedBox(width: 4),
                        Text(
                          '${agent.rating!.toStringAsFixed(1)} Rating',
                          style: const TextStyle(
                            fontFamily: 'SourceSerif4',
                            fontSize: 14,
                            fontWeight: FontWeight.w400,
                            color: AppColors.primaryDark,
                          ),
                        ),
                      ],
                    ],
                  ),
                  const SizedBox(height: 4),

                  // Verified text
                  if (agent.isVerified)
                    Text(
                      '"Verified local ${agent.agentType?.name.toLowerCase() ?? 'agent'}"',
                      style: const TextStyle(
                        fontFamily: 'SourceSerif4',
                        fontSize: 14,
                        fontWeight: FontWeight.w500,
                        color: Color(0xFF638559),
                      ),
                    ),
                  const SizedBox(height: 8),

                  // Location
                  if (agent.location.isNotEmpty)
                    Row(
                      children: [
                        const Text(
                          'Location:',
                          style: TextStyle(
                            fontFamily: 'Fractul',
                            fontSize: 14,
                            fontWeight: FontWeight.w700,
                            color: AppColors.primaryDark,
                          ),
                        ),
                        const SizedBox(width: 4),
                        SvgPicture.asset(
                          'assets/icons/location_pin_icon.svg',
                          width: 14,
                          height: 14,
                          placeholderBuilder: (_) => const Icon(
                            Icons.location_on,
                            color: AppColors.accentOrange,
                            size: 14,
                          ),
                        ),
                        const SizedBox(width: 4),
                        Expanded(
                          child: Text(
                            agent.location,
                            style: const TextStyle(
                              fontFamily: 'SourceSerif4',
                              fontSize: 10,
                              fontWeight: FontWeight.w400,
                              color: AppColors.primaryDark,
                            ),
                            overflow: TextOverflow.ellipsis,
                          ),
                        ),
                      ],
                    ),
                  const SizedBox(height: 8),

                  // Expertise
                  if (agent.agentType != null)
                    Row(
                      children: [
                        const Text(
                          'Expertise:',
                          style: TextStyle(
                            fontFamily: 'Fractul',
                            fontSize: 14,
                            fontWeight: FontWeight.w700,
                            color: AppColors.primaryDark,
                          ),
                        ),
                        const SizedBox(width: 8),
                        Expanded(
                          child: Text(
                            '(${agent.agentType!.name})',
                            style: const TextStyle(
                              fontFamily: 'SourceSerif4',
                              fontSize: 10,
                              fontWeight: FontWeight.w400,
                              color: AppColors.primaryDark,
                            ),
                            overflow: TextOverflow.ellipsis,
                          ),
                        ),
                      ],
                    ),
                  const SizedBox(height: 12),

                  // Tags from specializations
                  if (agent.specializations.isNotEmpty)
                    Wrap(
                      spacing: 8,
                      runSpacing: 8,
                      children: agent.specializations
                          .take(6)
                          .map((tag) => _buildTag(tag))
                          .toList(),
                    ),
                  const Spacer(),

                  // Experience
                  if (agent.experienceText.isNotEmpty)
                    RichText(
                      text: TextSpan(
                        children: [
                          const TextSpan(
                            text: 'Experience: ',
                            style: TextStyle(
                              fontFamily: 'Fractul',
                              fontSize: 14,
                              fontWeight: FontWeight.w700,
                              color: AppColors.primaryDark,
                            ),
                          ),
                          TextSpan(
                            text: agent.experienceText,
                            style: const TextStyle(
                              fontFamily: 'SourceSerif4',
                              fontSize: 14,
                              fontWeight: FontWeight.w400,
                              color: AppColors.primaryDark,
                            ),
                          ),
                        ],
                      ),
                    ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildAvatarPlaceholder() {
    return Container(
      width: double.infinity,
      height: 192,
      color: AppColors.gradientStart,
      child: const Icon(Icons.person, size: 60, color: AppColors.primaryDark),
    );
  }

  Widget _buildTag(String label) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(15),
        border: Border.all(color: AppColors.primaryDark, width: 0.7),
      ),
      child: Text(
        label,
        style: const TextStyle(
          fontFamily: 'SourceSerif4',
          fontSize: 13,
          fontWeight: FontWeight.w400,
          color: AppColors.primaryDark,
        ),
      ),
    );
  }

  Widget _buildProgressIndicator(int totalCards) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final indicatorWidth = totalCards > 0
            ? constraints.maxWidth / totalCards
            : 103.0;
        return Stack(
          children: [
            Container(
              height: 5,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(15),
                border: Border.all(color: AppColors.primaryDark, width: 0.1),
              ),
            ),
            Container(
              height: 5,
              width: indicatorWidth.clamp(40.0, 150.0),
              decoration: BoxDecoration(
                color: AppColors.primaryDark,
                borderRadius: BorderRadius.circular(15),
              ),
            ),
          ],
        );
      },
    );
  }

  Widget _buildErrorState(WidgetRef ref, String error) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 40),
      child: Column(
        children: [
          const Icon(
            Icons.error_outline,
            color: AppColors.accentOrange,
            size: 48,
          ),
          const SizedBox(height: 12),
          Text(
            error,
            style: const TextStyle(
              fontFamily: 'Fractul',
              fontSize: 14,
              fontWeight: FontWeight.w400,
              color: AppColors.primaryDark,
            ),
          ),
          const SizedBox(height: 16),
          TextButton(
            onPressed: () =>
                ref.read(topProfessionalsProvider.notifier).refresh(),
            child: const Text(
              'Retry',
              style: TextStyle(
                fontFamily: 'Fractul',
                fontSize: 14,
                fontWeight: FontWeight.w600,
                color: AppColors.accentOrange,
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildEmptyState(String activeTab) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 40),
      child: Column(
        children: [
          Icon(
            activeTab == 'agents' ? Icons.people_outline : Icons.account_balance_outlined,
            color: AppColors.hintText,
            size: 48,
          ),
          const SizedBox(height: 12),
          Text(
            'No ${activeTab == 'agents' ? 'agents' : 'lenders'} found',
            style: const TextStyle(
              fontFamily: 'Fractul',
              fontSize: 14,
              fontWeight: FontWeight.w400,
              color: AppColors.hintText,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildSeeAllAgentsCta() {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.all(24),
      decoration: BoxDecoration(
        gradient: const LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [AppColors.gradientStart, AppColors.gradientEnd],
        ),
        borderRadius: BorderRadius.circular(15),
        border: Border.all(color: AppColors.primaryDark, width: 0.2),
        boxShadow: const [
          BoxShadow(
            color: Color(0xFFD9D9D9),
            offset: Offset(10, 0),
            blurRadius: 20,
          ),
        ],
      ),
      child: Column(
        children: [
          Image.asset(
            'assets/icons/network_icon.svg',
            width: 30,
            height: 23,
            errorBuilder: (_, __, ___) => const Icon(
              Icons.hub,
              color: AppColors.primaryDark,
              size: 30,
            ),
          ),
          const SizedBox(height: 12),
          const Text(
            'Discover 5,000+ Top Real Estate Agents in Our Network',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontFamily: 'SourceSerif4',
              fontSize: 14,
              fontWeight: FontWeight.w400,
              color: AppColors.primaryDark,
            ),
          ),
          const SizedBox(height: 16),
          SizedBox(
            width: double.infinity,
            child: ElevatedButton(
              onPressed: () {},
              style: ElevatedButton.styleFrom(
                backgroundColor: AppColors.primaryDark,
                foregroundColor: Colors.white,
                padding: const EdgeInsets.symmetric(vertical: 14),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
              ),
              child: const Text(
                'See All Agents',
                style: TextStyle(
                  fontFamily: 'Fractul',
                  fontSize: 16,
                  fontWeight: FontWeight.w700,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}