import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:google_fonts/google_fonts.dart';
import '../blocs/ticket_bloc.dart';

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

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) => TicketBloc(),
      child: const _SupportFormView(),
    );
  }
}

class _SupportFormView extends StatelessWidget {
  const _SupportFormView();

  @override
  Widget build(BuildContext context) {
    final bloc = context.read<TicketBloc>();
    return Scaffold(

      backgroundColor: Colors.white,
      bottomNavigationBar:  BlocBuilder<TicketBloc, TicketState>(
        builder: (context, state) {return
         Visibility(
           visible: MediaQuery.of(context).viewInsets.bottom == 0.0,
           child: Padding(
             padding: const EdgeInsets.all(16.0),
             child: SizedBox(
              width: double.infinity,
              child: ElevatedButton(
                onPressed: state.isLoading
                    ? null
                    : () => bloc.add(SubmitTicket()),
                style: ElevatedButton.styleFrom(
                  backgroundColor: const Color(0xffF95F62),
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(8)),
                ),
                child: state.isLoading
                    ? const CircularProgressIndicator(color: Colors.white)
                    : Text("Submit Ticket",
                    style: GoogleFonts.poppins(
                        color: Colors.white,
                        fontWeight: FontWeight.w600)),
              ),
                     ),
           ),
         );
      }),
      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("Support",
            style: GoogleFonts.poppins(fontWeight: FontWeight.w700, color: Colors.black)),
      ),
      body: BlocBuilder<TicketBloc, TicketState>(
        builder: (context, state) {
          return SingleChildScrollView(
            padding: const EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  "Need help? We’re here for you. Raise a ticket and our support team will get back to you shortly",
                  style: GoogleFonts.poppins(color: Colors.black54, fontSize: 13),
                ),
                const SizedBox(height: 20),
                Text("Subject", style: GoogleFonts.poppins(fontWeight: FontWeight.w600)),
                const SizedBox(height: 6),
                TextField(
                  onChanged: (v) => bloc.add(SubjectChanged(v)),
                  decoration:  InputDecoration(
                    fillColor: Colors.black.withOpacity(0.04),
                    hintText: "Enter Subject",
                    filled: true,
                    border: OutlineInputBorder(),
                  ),
                ),
                const SizedBox(height: 20),
                Text("Description", style: GoogleFonts.poppins(fontWeight: FontWeight.w600)),
                const SizedBox(height: 6),
                TextField(
                  onChanged: (v) => bloc.add(DescriptionChanged(v)),
                  maxLines: 4,
                  decoration:  InputDecoration(
                    fillColor: Colors.black.withOpacity(0.04),
                    hintText: "Enter Description",
                    filled: true,
                    border: OutlineInputBorder(),
                  ),
                ),
                const SizedBox(height: 20),
                Text("File upload", style: GoogleFonts.poppins(fontWeight: FontWeight.w600)),
                const SizedBox(height: 6),
                GestureDetector(
                  onTap: () => bloc.add(UploadFile()),
                  child: Container(
                    height: 45,
                    decoration: BoxDecoration(
                      color: Colors.black.withOpacity(0.04),
                      border: Border.all(color: Colors.grey),
                      borderRadius: BorderRadius.circular(6),
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 12),
                          child: Text(
                            state.selectedFile != null
                                ? state.selectedFile!.name
                                : "Upload File",
                            style: GoogleFonts.poppins(
                              color: state.selectedFile != null
                                  ? Colors.black
                                  : Colors.black54,
                            ),
                          ),
                        ),
                        const Icon(Icons.upload_outlined, color: Colors.black54),
                      ],
                    ),
                  ),
                ),
                const SizedBox(height: 30),
                Text("Contact Details",
                    style: GoogleFonts.poppins(
                        fontWeight: FontWeight.w700, fontSize: 15)),
                const SizedBox(height: 12),
                Divider(),
                Row(
                  children: [
                    Expanded(
                      flex: 1,
                      child: Row(
                        children: [
                          const Icon(Icons.email_outlined, color: Colors.black87),
                          const SizedBox(width: 12),
                          Text("Email", style: GoogleFonts.poppins(fontSize: 13)),
                        ],
                      ),
                    ),
                    Expanded(
                      flex: 2,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          const SizedBox(width: 12),
                          Text("Lila Hart", style: GoogleFonts.poppins(fontSize: 13,color: Colors.black)),
                        ],
                      ),
                    ),
                  ],
                ),


                Divider(),
                const SizedBox(height: 12),
                Row(

                  children: [
                    Expanded(
                      flex: 1,
                      child: Row(

                        children: [
                          const Icon(Icons.phone_outlined, color: Colors.black87),
                          const SizedBox(width: 12),
                          Text("Phone", style: GoogleFonts.poppins(fontSize: 13)),
                        ],
                      ),
                    ),

                    Expanded(
                      flex: 2,
                      child: Row(
                        children: [
                          const SizedBox(width: 12),
                          Text("(+971) 050 4245 564",
                              style: GoogleFonts.poppins(fontSize: 13)),
                        ],
                      ),
                    ),
                  ],
                ),
                Divider(),
                const SizedBox(height: 80),

              ],
            ),
          );
        },
      ),
    );
  }
}