mobile-app/lib/features/home/presentation/widgets/hero_section.dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:real_estate_mobile/core/constants/app_colors.dart';
import 'package:real_estate_mobile/features/home/data/models/landing_page_content.dart';
import 'package:real_estate_mobile/features/home/presentation/providers/home_provider.dart';

/// Default hero content — matches web's hardcoded defaultHeroContent fallback.
const _defaultHero = HeroContent(
  headline:
      'Discover verified, top-rated real estate professionals to guide your buying, selling, or investing journey.',
  description: 'Discover verified, top-rated real estate professionals',
  ctaButtonText: 'See All Agents',
  helperText:
      'Connect with trusted local agents to explore homes, compare options, and make smarter decisions.',
);

class HeroSection extends ConsumerStatefulWidget {
  const HeroSection({super.key});

  @override
  ConsumerState<HeroSection> createState() => _HeroSectionState();
}

class _HeroSectionState extends ConsumerState<HeroSection> {
  final _searchController = TextEditingController();

  @override
  void dispose() {
    _searchController.dispose();
    super.dispose();
  }

  void _navigateToSearch() {
    final query = _searchController.text.trim();
    if (query.isNotEmpty) {
      context.push('/agents/search?q=${Uri.encodeComponent(query)}');
    } else {
      context.push('/agents/search');
    }
  }

  @override
  Widget build(BuildContext context) {
    final homeState = ref.watch(homeProvider);
    final hero = homeState.content?.hero ?? _defaultHero;

    final headline = hero.headline.isNotEmpty
        ? hero.headline
        : _defaultHero.headline;
    final ctaButtonText = hero.ctaButtonText.isNotEmpty
        ? hero.ctaButtonText
        : _defaultHero.ctaButtonText;

    return Stack(
      children: [
        ClipRRect(
          borderRadius: BorderRadius.circular(0),
          child: Image.asset(
            'assets/images/hero_bg.png',
            width: double.infinity,
            height: 580,
            fit: BoxFit.cover,
          ),
        ),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 32),
          child: Column(
            children: [
              const SizedBox(height: 40),
              Text(
                headline,
                textAlign: TextAlign.center,
                style: const TextStyle(
                  fontFamily: 'Fractul',
                  fontSize: 30,
                  fontWeight: FontWeight.w700,
                  color: AppColors.primaryDark,
                  height: 1.1,
                ),
              ),
              const SizedBox(height: 30),
              _buildSearchCard(ctaButtonText),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildSearchCard(String ctaButtonText) {
    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: AppColors.accentOrange,
        borderRadius: BorderRadius.circular(15),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Center(
            child: Text(
              'Search Agents',
              style: TextStyle(
                fontFamily: 'Fractul',
                fontSize: 16,
                fontWeight: FontWeight.w600,
                color: AppColors.primaryDark,
              ),
            ),
          ),
          const SizedBox(height: 16),
          _buildSearchField('Types'),
          const SizedBox(height: 12),
          // Name or Keyword — actual text input
          Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(10),
            ),
            child: TextField(
              controller: _searchController,
              style: const TextStyle(
                fontFamily: 'SourceSerif4',
                fontSize: 14,
                fontWeight: FontWeight.w400,
                color: AppColors.primaryDark,
              ),
              decoration: const InputDecoration(
                hintText: 'Name or Keyword',
                hintStyle: TextStyle(
                  fontFamily: 'SourceSerif4',
                  fontSize: 14,
                  fontWeight: FontWeight.w400,
                  color: AppColors.primaryDark,
                ),
                border: InputBorder.none,
                contentPadding:
                    EdgeInsets.symmetric(horizontal: 20, vertical: 12),
              ),
              onSubmitted: (_) => _navigateToSearch(),
            ),
          ),
          const SizedBox(height: 12),
          _buildSearchField('Location'),
          const SizedBox(height: 12),
          _buildSearchField('Categories'),
          const SizedBox(height: 12),
          SizedBox(
            width: double.infinity,
            child: ElevatedButton(
              onPressed: _navigateToSearch,
              style: ElevatedButton.styleFrom(
                backgroundColor: AppColors.primaryDark,
                foregroundColor: Colors.white,
                padding: const EdgeInsets.symmetric(vertical: 14),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
              ),
              child: Text(
                ctaButtonText,
                style: const TextStyle(
                  fontFamily: 'Fractul',
                  fontSize: 16,
                  fontWeight: FontWeight.w700,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildSearchField(String hint) {
    return GestureDetector(
      onTap: () {
        // Tapping Types/Location/Categories navigates to search screen
        if (hint == 'Types' || hint == 'Categories' || hint == 'Location') {
          context.push('/agents/search');
        }
      },
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10),
        ),
        child: Row(
          children: [
            Expanded(
              child: Text(
                hint,
                style: const TextStyle(
                  fontFamily: 'SourceSerif4',
                  fontSize: 14,
                  fontWeight: FontWeight.w400,
                  color: AppColors.primaryDark,
                ),
              ),
            ),
            if (hint == 'Types' || hint == 'Categories')
              const Icon(
                Icons.keyboard_arrow_down,
                color: AppColors.primaryDark,
                size: 20,
              ),
          ],
        ),
      ),
    );
  }
}