import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:real_estate_mobile/core/constants/app_colors.dart';

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

  @override
  Widget build(BuildContext context) {
    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(),
          const SizedBox(height: 24),

          // Agent Card
          _buildAgentCard(),
          const SizedBox(height: 12),

          // Progress indicator
          _buildProgressIndicator(),
          const SizedBox(height: 32),

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

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

  Widget _buildAgentCard() {
    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: Image.asset(
              'assets/images/agent_profile_image.png',
              width: double.infinity,
              height: 192,
              fit: BoxFit.cover,
              errorBuilder: (_, __, ___) => Container(
                width: double.infinity,
                height: 192,
                color: AppColors.gradientStart,
                child: const Icon(Icons.person, size: 60, color: AppColors.primaryDark),
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // Name and badges row
                Row(
                  children: [
                    const Text(
                      'Arjun Mehta',
                      style: TextStyle(
                        fontFamily: 'Fractul',
                        fontSize: 14,
                        fontWeight: FontWeight.w700,
                        color: AppColors.primaryDark,
                      ),
                    ),
                    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,
                      ),
                    ),
                    const Spacer(),
                    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),
                    const Text(
                      '4.9 Rating',
                      style: TextStyle(
                        fontFamily: 'SourceSerif4',
                        fontSize: 14,
                        fontWeight: FontWeight.w400,
                        color: AppColors.primaryDark,
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 4),
                // Verified and Location
                const Text(
                  '"Verified local agent"',
                  style: TextStyle(
                    fontFamily: 'SourceSerif4',
                    fontSize: 14,
                    fontWeight: FontWeight.w500,
                    color: Color(0xFF638559),
                  ),
                ),
                const SizedBox(height: 8),
                // Location
                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),
                    const Text(
                      'San Francisco, CA',
                      style: TextStyle(
                        fontFamily: 'SourceSerif4',
                        fontSize: 10,
                        fontWeight: FontWeight.w400,
                        color: AppColors.primaryDark,
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 8),
                // Expertise
                Row(
                  children: [
                    const Text(
                      'Expertise:',
                      style: TextStyle(
                        fontFamily: 'Fractul',
                        fontSize: 14,
                        fontWeight: FontWeight.w700,
                        color: AppColors.primaryDark,
                      ),
                    ),
                    const SizedBox(width: 8),
                    const Text(
                      '(Residential Property Expert)',
                      style: TextStyle(
                        fontFamily: 'SourceSerif4',
                        fontSize: 10,
                        fontWeight: FontWeight.w400,
                        color: AppColors.primaryDark,
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 12),
                // Tags
                Wrap(
                  spacing: 8,
                  runSpacing: 8,
                  children: [
                    _buildTag('Residential'),
                    _buildTag('Rental'),
                    _buildTag('Commercial'),
                    _buildTag('Inspection'),
                    _buildTag('Land'),
                    _buildTag('Rental'),
                  ],
                ),
                const SizedBox(height: 12),
                // Experience
                RichText(
                  text: const TextSpan(
                    children: [
                      TextSpan(
                        text: 'Experience: ',
                        style: TextStyle(
                          fontFamily: 'Fractul',
                          fontSize: 14,
                          fontWeight: FontWeight.w700,
                          color: AppColors.primaryDark,
                        ),
                      ),
                      TextSpan(
                        text: '10+ years in the real estate industry.',
                        style: TextStyle(
                          fontFamily: 'SourceSerif4',
                          fontSize: 14,
                          fontWeight: FontWeight.w400,
                          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() {
    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: 103,
          decoration: BoxDecoration(
            color: AppColors.primaryDark,
            borderRadius: BorderRadius.circular(15),
          ),
        ),
      ],
    );
  }

  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,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}