import 'package:flutter/material.dart';
import 'package:nearle/views/helpers/constants/Colorconstants.dart';
import 'package:nearle/views/helpers/constants/Font_constant.dart';
class HelpCenter extends StatelessWidget {
  const HelpCenter({super.key});

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: ColorConstants.primaryColor,
          centerTitle: true,
          toolbarHeight: 70,
          leading: IconButton(
        icon: const Icon(Icons.arrow_back_ios, color: Colors.white), 
        onPressed: () {
          Navigator.pop(context);
        },
          ),
          title: const Text(
        'Help Center',
        style: TextStyle(
          fontSize: 26, 
          color: Colors.white,
          fontWeight: FontWeight.bold,
          letterSpacing: 1.2,
        ),
          ),
          elevation: 4,
        ),
        body: SingleChildScrollView(
          padding: const EdgeInsets.fromLTRB(16, 16, 16, 24),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // Header text
              Text(
                "We're here to help you with anything and \neverything on Nearle Xpress",
                style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.w800,
                  fontFamily: FontConstants.fontFamily
                ),
              ),
              const SizedBox(height: 8),
              Text(
                "We make sure your delivery experience is smooth and clear. Whether you’re on your first trip or your hundredth, we’ve got your back. Browse through frequently asked questions or reach out directly if you need further help.",
                style: TextStyle(fontSize: 18,color: Colors.grey.shade700, height: 1.4, fontFamily: FontConstants.fontFamily),
              ),
              const SizedBox(height: 16),

            
              TextField(
                decoration: InputDecoration(
                  hintText: 'Search help',
                  prefixIcon: const Icon(Icons.search),
                  contentPadding: const EdgeInsets.symmetric(vertical: 0, horizontal: 12),
                  filled: true,
                  fillColor: Colors.white,
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(12),
                    borderSide: BorderSide(color: Colors.grey.shade300),
                  ),
                  enabledBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(12),
                    borderSide: BorderSide(color: Colors.grey.shade300),
                  ),
                  focusedBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(12),
                    borderSide: BorderSide(color: ColorConstants.primaryColor, width: 1.5),
                  ),
                ),
              ),

              const SizedBox(height: 15),
              Text(
                'FAQ',
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, fontFamily: FontConstants.fontFamily,color: ColorConstants.primaryColor),
              ),
              Divider(),
          

              
              _FaqTile(
                title: 'What is Nearle Xpress?',
                initiallyExpanded: true,
                child: const Text(
                  'Nearle Xpress is a delivery app for riders who complete local deliveries for nearby stores and markets. It helps riders accept tasks, manage pickup and drop points, and update deliveries in real time.',
                  style: TextStyle(fontSize: 16, color: Colors.black87, height: 1.4),
                ),
              ),
              _FaqTile(
                title: 'How do I accept a delivery task?',
                child: const Text(
                  'You can accept tasks from the Home screen when a new order appears. Tap on the order to view details and then press Accept.',
                  style: TextStyle(fontSize: 16, color: Colors.black87, height: 1.4),
                ),
              ),
              _FaqTile(
                title: 'How do I update the delivery status?',
                child: const Text(
                  'Open the active task and use the status buttons to mark Pickup, On the way, and Delivered. Ensure accurate updates for better tracking.',
                  style: TextStyle(fontSize: 16, color: Colors.black87, height: 1.4),
                ),
              ),
              _FaqTile(
                title: 'Can I view my past deliveries?',
                child: const Text(
                  'Yes. Go to the History section from your dashboard to see completed deliveries and earnings.',
                  style: TextStyle(fontSize: 16, color: Colors.black87, height: 1.4),
                ),
              ),
              _FaqTile(
                title: 'What if I face an issue during delivery?',
                child: const Text(
                  'Use the Help Center to report an issue or contact support. Provide order details and a short description of the problem.',
                  style: TextStyle(fontSize: 16, color: Colors.black87, height: 1.4),
                ),
              ),
              SizedBox(height: 10,),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text("Still stuck? Help is a mail away!",style: TextStyle(fontSize: 18,fontFamily: FontConstants.fontFamily,fontWeight: FontWeight.bold,color: ColorConstants.primaryColor),),
                ],
              )
           
            ],
          ),
        ),
        bottomNavigationBar: Padding(padding: EdgeInsets.all(16),
        child:    SizedBox(
                height: 55,
                width: double.infinity,
                child: ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    backgroundColor: ColorConstants.primaryColor,
                    foregroundColor: ColorConstants.primaryColor,
                    side: BorderSide(color: ColorConstants.primaryColor, width: 1.2),
                    padding: const EdgeInsets.symmetric(vertical: 14),
                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
                  ),
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (_) => const HelpCenterMessage(),
                      ),
                    );
                  },
                  child: Text(
                    'Send a message',
                    style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold,fontFamily: FontConstants.fontFamily,color: Colors.white),
                  ),
                ),
              ),),
      ),
    );
  }
}

class _FaqTile extends StatelessWidget {
  final String title;
  final Widget child;
  final bool initiallyExpanded;

  const _FaqTile({
    required this.title,
    required this.child,
    this.initiallyExpanded = false,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: const EdgeInsets.symmetric(vertical: 6),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: Theme(
        data: Theme.of(context).copyWith(dividerColor: Colors.transparent),
        child: ExpansionTile(
          initiallyExpanded: initiallyExpanded,
          tilePadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 2),
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
          collapsedShape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
          title: Text(
            title,
            style: TextStyle(fontWeight: FontWeight.w600,fontSize: 18,fontFamily: FontConstants.fontFamily),
          ),
          children: [
            Padding(
              padding: const EdgeInsets.fromLTRB(12, 0, 12, 12),
              child: child,
            ),
          ],
        ),
      ),
    );
  }
}
// -------------------------------message page------------------------------------
class HelpCenterMessage extends StatefulWidget {
  const HelpCenterMessage({super.key});

  @override
  State<HelpCenterMessage> createState() => _HelpCenterMessageState();
}

class _HelpCenterMessageState extends State<HelpCenterMessage> {
  final _subjectController = TextEditingController();
  final _messageController = TextEditingController();
  final _formKey = GlobalKey<FormState>();

  @override
  void dispose() {
    _subjectController.dispose();
    _messageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: ColorConstants.primaryColor,
          centerTitle: true,
          toolbarHeight: 80,
          leading: IconButton(
            icon: const Icon(Icons.arrow_back_ios, color: Colors.white),
            onPressed: () => Navigator.pop(context),
          ),
          title: const Text(
            'Help Centre',
            style: TextStyle(
              fontSize: 26,
              color: Colors.white,
              fontWeight: FontWeight.bold,
              letterSpacing: 1.2,
            ),
          ),
          elevation: 4,
        ),
        body: SingleChildScrollView(
          padding: const EdgeInsets.fromLTRB(16, 16, 16, 24),
          child: Form(
            key: _formKey,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // Heading
                Text(
                  'Send Us a Message',
                  style: TextStyle(
                    fontSize: 22,
                    fontWeight: FontWeight.w800,
                    fontFamily: FontConstants.fontFamily,
                  ),
                ),
                const SizedBox(height: 8),
                Text(
                  "Not finding what you're looking for in the FAQs? Don't worry—we're here to help!",
                  style: TextStyle(
                    fontSize: 18,
                    color: Colors.grey.shade700,
                    height: 1.4,
                    fontFamily: FontConstants.fontFamily,
                  ),
                ),
                const SizedBox(height: 20),

                // Subject label
                Text(
                  'Subject',
                  style: TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.w600,
                    fontFamily: FontConstants.fontFamily,
                  ),
                ),
                const SizedBox(height: 8),
                TextFormField(
                  controller: _subjectController,
                  decoration: InputDecoration(
                    hintText: 'Type Something',
                    filled: true,
                    fillColor: Colors.white,
                    contentPadding: const EdgeInsets.symmetric(vertical: 12, horizontal: 12),
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(8),
                      borderSide: BorderSide(color: Colors.grey.shade300),
                    ),
                    enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(8),
                      borderSide: BorderSide(color: Colors.grey.shade300),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(8),
                      borderSide: BorderSide(color: ColorConstants.primaryColor, width: 1.5),
                    ),
                  ),
                  validator: (v) => (v == null || v.trim().isEmpty) ? 'Please enter a subject' : null,
                ),

                const SizedBox(height: 18),

                // Message label
                Text(
                  'Your Message',
                  style: TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.w600,
                    fontFamily: FontConstants.fontFamily,
                  ),
                ),
                const SizedBox(height: 8),
                TextFormField(
                  controller: _messageController,
                  minLines: 5,
                  maxLines: 8,
                  decoration: InputDecoration(
                    hintText: 'Type Something',
                    filled: true,
                    fillColor: Colors.white,
                    alignLabelWithHint: true,
                    contentPadding: const EdgeInsets.symmetric(vertical: 12, horizontal: 12),
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(8),
                      borderSide: BorderSide(color: Colors.grey.shade300),
                    ),
                    enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(8),
                      borderSide: BorderSide(color: Colors.grey.shade300),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(8),
                      borderSide: BorderSide(color: ColorConstants.primaryColor, width: 1.5),
                    ),
                  ),
                  validator: (v) => (v == null || v.trim().isEmpty) ? 'Please enter your message' : null,
                ),
                SizedBox(height: 30,),
                SizedBox(
            height: 55,
            width: double.infinity,
            child: ElevatedButton(
              style: ElevatedButton.styleFrom(
                backgroundColor: ColorConstants.primaryColor,
                foregroundColor: Colors.white,
                padding: const EdgeInsets.symmetric(vertical: 14),
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
              ), 
              onPressed: () {
                if (_formKey.currentState?.validate() ?? false) {
                 
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text('Message sent')),
                  );
                  Navigator.pop(context);
                }
              },
              child: Text(
                'Send a message',
                style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                  fontFamily: FontConstants.fontFamily,
                ),
              ),
            ),
          ),
              ],
            ),
          ),
        ),
        
      ),
    );
  }
}
