import 'package:flutter/material.dart';
import 'package:citycards_customer/common_packages/custom_text.dart';
import 'package:citycards_customer/common_packages/custom_textfield.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: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // Header bar
              Container(
                padding: const EdgeInsets.only(bottom: 10),
                decoration: const BoxDecoration(
                  border: Border(
                    bottom: BorderSide(color: Color(0xFFD9D9D9), width: 0.7),
                  ),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Image.asset("assets/logo/logo_city_cards.png", scale: 4),
                    Image.asset("assets/icons/shopping_cart.png", scale: 4),
                  ],
                ),
              ),
              const SizedBox(height: 22),

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

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

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

              // 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),

              const SizedBox(height: 24),

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

  // --- Support Info Box ---
  Widget _supportBox({
    required IconData icon,
    required String title,
    required String subtitle,
    required String action,
  }) {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        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),
          const SizedBox(width: 12),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                CustomText(
                  text: title,
                  size: 11,
                  weight: FontWeight.w600,
                  color: Color(0x00000000).withOpacity(.6),
                ),
                const SizedBox(height: 6),
                Text(
                  subtitle,
                  style: const TextStyle(
                    fontSize: 14,
                    fontWeight: FontWeight.w400,
                    color: Colors.black,
                  ),
                ),
                const SizedBox(height: 2),
                Text(
                  action,
                  style: TextStyle(
                    fontSize: 11,
                    color: Color(0xFF000000).withOpacity(.4),
                    fontWeight: FontWeight.w400,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

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