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,
      appBar:

      AppBar(
        backgroundColor: Colors.white,
        elevation: 0,
        leading:  Padding(
          padding: EdgeInsetsGeometry.symmetric(horizontal: 8),
          child: Container(
            width: 36,
            height: 36,
            decoration: const BoxDecoration(
              color: Color(0xFFF06969),
              shape: BoxShape.circle,
            ),
            child: const Icon(Icons.arrow_back, color: Colors.white),
          ),
        ),
        centerTitle: true,
        title: Text("Help & Support",
            style: GoogleFonts.poppins(fontWeight: FontWeight.w700, color: Colors.black)),
      ),
      body: BlocBuilder<HelpSupportBloc, HelpSupportState>(
        builder: (context, state) {
          if (state.isLoading) {
            return const Center(child: CircularProgressIndicator(color: Color(0xffF95F62)));
          }
          return Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text("Get assistance with your CityCards experience",
                    style: GoogleFonts.poppins(color: Colors.black54)),
                const SizedBox(height: 16),
                Text("Common Questions",
                    style: GoogleFonts.poppins(fontWeight: FontWeight.w700, fontSize: 16)),
                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: GoogleFonts.poppins(
                                      fontWeight: FontWeight.w500, fontSize: 14)),
                              Row(
                                children: [
                                  Image.asset(faq.icon, width: 18, color: const Color(0xffF95F62)),
                                  const SizedBox(width: 6),
                                  Text(faq.tag,
                                      style: GoogleFonts.poppins(
                                          fontSize: 12, color: Colors.black54)),
                                ],
                              )
                            ],
                          ),
                        ),
                      );
                    },
                  ),
                ),
                ElevatedButton(
                  onPressed: () => Navigator.push(
                    context,
                    MaterialPageRoute(builder: (_) => const SupportFormPage()),
                  ),
                  style: ElevatedButton.styleFrom(
                      backgroundColor: const Color(0xffF95F62),
                      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(50))),
                  child: Container(
                    width: double.infinity,
                    child: Center(
                      child: Text("Contact Support",
                          style: GoogleFonts.poppins(
                              fontWeight: FontWeight.w600, color: Colors.white)),
                    ),
                  ),
                ),
                const SizedBox(height: 10),
                OutlinedButton(
                  onPressed: () {},
                  style: OutlinedButton.styleFrom(
                    side: const BorderSide(color: Color(0xffF95F62)),
                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(50)),
                  ),
                  child: Container(
                    width: double.infinity,
                    child: Center(
                      child: Text("Browse FAQ",
                          style: GoogleFonts.poppins(
                              color: const Color(0xffF95F62),
                              fontWeight: FontWeight.w600)),
                    ),
                  ),
                )
              ],
            ),
          );
        },
      ),
    );
  }
}