import 'package:citycards_partner_flutter/support/view/support_form_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:google_fonts/google_fonts.dart';
import '../blocs/help_support_bloc.dart';


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

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) => HelpSupportBloc()..add(LoadFAQ()),
      child: const _HelpSupportView(),
    );
  }
}

class _HelpSupportView extends StatelessWidget {
  const _HelpSupportView();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: BlocBuilder<HelpSupportBloc, HelpSupportState>(
          builder: (context, state) {
            if (state.isLoading) {
              return const Center(child: CircularProgressIndicator(color: Color(0xffF95F62)));
            }
            return Padding(
              padding: const EdgeInsets.only(left: 16,right: 16,bottom: 16),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  _buildHeaderSection( context),
                  Align(
                    alignment: Alignment.center,
                    child: Text("Get assistance with your CityCards experience",
                        style: TextStyle(color: Colors.black54,fontSize: 14,fontWeight: FontWeight.w400)),
                  ),
                  const SizedBox(height: 16),
                  Text("Common Questions",
                      style: TextStyle(fontWeight: FontWeight.w600, fontSize: 24)),
                  const SizedBox(height: 16),
                  Expanded(
                    child: ListView.builder(
                      itemCount: state.faqs.length,
                      itemBuilder: (context, index) {
                        final faq = state.faqs[index];
                        return GestureDetector(
                          onTap: () {
                            Navigator.push(
                              context,
                              MaterialPageRoute(builder: (_) => const SupportFormPage()),
                            );
                          },
                          child: Container(
                            margin: const EdgeInsets.only(bottom: 12),
                            padding: const EdgeInsets.all(14),
                            decoration: BoxDecoration(
                              color: Colors.grey.shade100,
                              borderRadius: BorderRadius.circular(10),
                            ),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Text(faq.title,
                                    style: TextStyle(
                                        fontWeight: FontWeight.w400, fontSize: 16,)),
                                Row(
                                  children: [
                                    Image.asset(faq.icon, width: 18, color: const Color(0xffF95F62)),
                                    const SizedBox(width: 6),
                                    Text(faq.tag,
                                        style: TextStyle(
                                            fontSize: 12, color: Colors.black.withOpacity(0.40))),
                                  ],
                                )
                              ],
                            ),
                          ),
                        );
                      },
                    ),
                  ),
                  ElevatedButton(
                    onPressed: () => Navigator.push(
                      context,
                      MaterialPageRoute(builder: (_) => const SupportFormPage()),
                    ),
                    style: ElevatedButton.styleFrom(
                        backgroundColor: const Color(0xffF95F62),
                        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16))),
                    child: SizedBox(
                      height: 52,
                      width: double.infinity,
                      child: Center(
                        child: Text("Contact Support",
                            style: TextStyle(
                                fontWeight: FontWeight.w600, color: Colors.white,fontSize: 20)),
                      ),
                    ),
                  ),
                  const SizedBox(height: 10),
                  OutlinedButton(
                    onPressed: () {},
                    style: OutlinedButton.styleFrom(
                      side: const BorderSide(color: Color(0xffF95F62)),
                      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
                    ),
                    child: SizedBox(
                      height: 52,
                      width: double.infinity,
                      child: Center(
                        child: Text("Browse FAQ",
                            style: TextStyle(
                                color: const Color(0xffF95F62),
                                fontWeight: FontWeight.w600,fontSize: 20)),
                      ),
                    ),
                  )
                ],
              ),
            );
          },
        ),
      ),
    );
  }



  Widget _buildHeaderSection( BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 2.0, vertical: 14.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              GestureDetector(
                child: Container(
                  width: 44,
                  height: 44,
                  decoration: const BoxDecoration(
                    color: Color(0xFFF95F62),
                    shape: BoxShape.circle,
                  ),
                  child: const Icon(Icons.arrow_back, color: Colors.white),
                ),
                onTap: (){
                  Navigator.pop(context);
                },
              ),
              Text(
                'Help & Support',
                style: const TextStyle(
                  fontWeight: FontWeight.w700,
                  fontSize: 32,
                ),
              ),
              SizedBox(
                width: 40,
              )
            ],
          ),
        ),
        SizedBox(height: 8),
      ],
    );
  }
}