import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.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 ConsumerWidget {
  const HeroSection({super.key});

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

    // Use CMS headline if available, otherwise fallback
    final headline = hero.headline.isNotEmpty
        ? hero.headline
        : _defaultHero.headline;
    final ctaButtonText = hero.ctaButtonText.isNotEmpty
        ? hero.ctaButtonText
        : _defaultHero.ctaButtonText;

    return Stack(
      children: [
        // Background image
        ClipRRect(
          borderRadius: BorderRadius.circular(0),
          child: Image.asset(
            'assets/images/hero_bg.png',
            width: double.infinity,
            height: 580,
            fit: BoxFit.cover,
          ),
        ),
        // Content overlay
        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),
              // Search Agents Card
              _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),
          _buildSearchField('Name or Keyword'),
          const SizedBox(height: 12),
          _buildSearchField('Location'),
          const SizedBox(height: 12),
          _buildSearchField('Categories'),
          const SizedBox(height: 12),
          // CTA button
          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: Text(
                ctaButtonText,
                style: const TextStyle(
                  fontFamily: 'Fractul',
                  fontSize: 16,
                  fontWeight: FontWeight.w700,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildSearchField(String hint) {
    return 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,
            ),
        ],
      ),
    );
  }
}