import 'package:citycards_customer/common_packages/app_bar.dart';
import 'package:flutter/material.dart';
import 'package:citycards_customer/common_packages/custom_text.dart';
import 'package:citycards_customer/common_packages/custom_textfield.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

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

  @override
  Widget build(BuildContext context) {
    final TextEditingController firstNameController = TextEditingController();
    final TextEditingController lastNameController = TextEditingController();
    final TextEditingController emailController = TextEditingController();
    final TextEditingController phoneController = TextEditingController();
    final TextEditingController messageController = TextEditingController();

    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: SingleChildScrollView(
          padding: EdgeInsets.symmetric(horizontal: 20.w, vertical: 10.h),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // Header bar
              CommonAppBar(isWhiteLogo: false, isProfilePage: true),
              SizedBox(height: 12.h),
              Divider(height: 1.h, color: Color(0xFFD9D9D9)),
              SizedBox(height: 22.h),

              // Back + Title
              Row(
                children: [
                  GestureDetector(
                    onTap: () {
                      Navigator.pop(context);
                    },
                    child: Icon(Icons.arrow_back, size: 24.sp),
                  ),
                  SizedBox(width: 8.w),
                  Text(
                    "Contact Us",
                    style: TextStyle(
                      fontSize: 12.sp,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ],
              ),
              SizedBox(height: 22.h),

              CustomText(
                text:
                    "You can get in touch with us through the below platforms. Our team will contact you shortly",
                size: 14.sp,
                color: Colors.black.withOpacity(.6),
              ),
              SizedBox(height: 20.h),

              // Customer Support Section
              Container(
                padding: EdgeInsets.symmetric(horizontal: 10.w, vertical: 16.h),
                decoration: BoxDecoration(
                  color: Color(0x00000005).withOpacity(.02),
                  borderRadius: BorderRadius.circular(12.r),
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    CustomText(
                      text: "Customer Support",
                      size: 18.sp,
                      weight: FontWeight.w500,
                    ),
                    SizedBox(height: 16.h),
                    _supportBox(
                      icon: Icons.phone,
                      title: "Contact Number",
                      subtitle: "+1012 3456 789",
                      action: "Tap to call",
                    ),
                    SizedBox(height: 12.h),
                    _supportBox(
                      icon: Icons.email_rounded,
                      title: "Email",
                      subtitle: "citycards24@gmail.com",
                      action: "Tap to email",
                    ),
                    SizedBox(height: 12.h),
                    _supportBox(
                      icon: Icons.location_on,
                      title: "Location",
                      subtitle:
                          "132 Dartmouth Street Boston, Massachusetts 02156 United States",
                      action: "View on map",
                    ),
                  ],
                ),
              ),
              SizedBox(height: 24.h),

              // Text fields
              CustomTextField(
                label: "First Name",
                hint: "Enter your first name",
                controller: firstNameController,
              ),
              CustomTextField(
                label: "Last Name",
                hint: "Enter your last name",
                controller: lastNameController,
              ),
              CustomTextField(
                label: "Email",
                hint: "Enter your email address",
                controller: emailController,
              ),
              CustomTextField(
                label: "Phone Number",
                hint: "Enter your phone number",
                controller: phoneController,
              ),

              CustomTextField(
                label: "Description",
                hint: "Write your message here",
                maxLines: 4,
                controller: messageController,
              ),

              // _descriptionField(messageController),
              SizedBox(height: 24.h),

              // Submit Button
              SizedBox(
                width: double.infinity,
                child: ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    backgroundColor: const Color(0xFFF95F62),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(38.r),
                    ),
                    padding: EdgeInsets.symmetric(vertical: 6.h),
                  ),
                  onPressed: () {},
                  child: CustomText(
                    text: "Submit Ticket",
                    size: 16.sp,
                    weight: FontWeight.w500,
                    color: Colors.white,
                  ),
                ),
              ),
              SizedBox(height: 20.h),
            ],
          ),
        ),
      ),
    );
  }

  // --- Support Info Box ---
  Widget _supportBox({
    required IconData icon,
    required String title,
    required String subtitle,
    required String action,
  }) {
    return Container(
      width: double.infinity,
      padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 12.h),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8.r),
        border: Border.all(color: const Color(0xFFF95F62), width: 0.8),
        color: Colors.white,
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Icon(icon, color: const Color(0xFFF95F62), size: 32.sp),
          SizedBox(width: 12.w),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                CustomText(
                  text: title,
                  size: 11.sp,
                  weight: FontWeight.w600,
                  color: Color(0x00000000).withOpacity(.6),
                ),
                SizedBox(height: 6.h),
                Text(
                  subtitle,
                  style: TextStyle(
                    fontSize: 14.sp,
                    fontWeight: FontWeight.w400,
                    color: Colors.black,
                  ),
                ),
                SizedBox(height: 2.h),
                Text(
                  action,
                  style: TextStyle(
                    fontSize: 11.sp,
                    color: Color(0xFF000000).withOpacity(.4),
                    fontWeight: FontWeight.w400,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  // --- Description Field ---
  Widget _descriptionField(TextEditingController controller) {
    return Padding(
      padding: EdgeInsets.only(bottom: 12.h, left: 12.w, right: 12.w),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          CustomText(text: "Description", size: 14.sp),
          SizedBox(height: 6.h),
          TextField(
            controller: controller,
            maxLines: 4,
            decoration: InputDecoration(
              hintText: "Write your message here",
              hintStyle: TextStyle(fontSize: 12.sp, color: Color(0xFF8E8E8E)),
              filled: true,
              fillColor: const Color(0xFFFFF5F5),
              contentPadding: EdgeInsets.symmetric(
                horizontal: 24.w,
                vertical: 12.h,
              ),
              enabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(8.r),
                borderSide: BorderSide(
                  color: const Color(0xBBC83B61).withOpacity(0.4),
                  width: .4.w,
                ),
              ),
              focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(8.r),
                borderSide: BorderSide(color: Color(0xFFF95F62), width: 1.w),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
