import 'package:citycards_customer/common_packages/app_bar.dart';
import 'package:citycards_customer/common_packages/custom_text.dart';
import 'package:citycards_customer/core/route_constants.dart';
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: SingleChildScrollView(
          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              CommonAppBar(isWhiteLogo: false, isProfilePage: true),
              SizedBox(height: 22),
              Row(
                children: [
                  GestureDetector(
                      onTap: (){
                        Navigator.pop(context);
                      },
                      child: Icon(Icons.arrow_back, size: 24)),
                  SizedBox(width: 8),
                  Text("My profile", style: TextStyle(fontSize: 12)),
                ],
              ),
              SizedBox(height: 29),
              // Profile Image and Name
              Row(
                children: [
                  const CircleAvatar(
                    radius: 38,
                    backgroundImage: AssetImage(
                      "assets/images/profile_img.png",
                    ),
                  ),
                  SizedBox(width: 16),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const Text(
                        'Laysha Adams',
                        style: TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                      // SizedBox(height: 4,),
                      Row(
                        children: [
                          Icon(
                            Icons.location_on_sharp,
                            color: Color(0xFF8E8E8E),
                            size: 14,
                          ),
                          SizedBox(width: 4),
                          const Text(
                            'Louisiana, United States',
                            style: TextStyle(
                              fontSize: 12,
                              color: Color(0xFF8E8E8E),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ],
              ),

              const SizedBox(height: 30),

              // Account Settings Section
              Align(
                alignment: Alignment.centerLeft,
                child: CustomText(
                  text: "Account Settings",
                  weight: FontWeight.w500,
                  size: 18,
                ),
              ),
              const SizedBox(height: 10),

              _buildListTile(
                icon: "assets/icons/user_profile.png",
                title: 'Edit profile',
                onTap: () {
                  Navigator.pushNamed(context, RouteConstants.editProfile);
                },
              ),
              _buildListTile(
                icon: "assets/icons/change_language.png",
                title: 'Change language',
                onTap: () {},
              ),

              const SizedBox(height: 24),

              // Support & Legal Section
              Align(
                alignment: Alignment.centerLeft,
                child: CustomText(
                  text: "Support & Legal",
                  weight: FontWeight.w500,
                  size: 18,
                ),
              ),
              const SizedBox(height: 10),

              _buildListTile(
                icon: "assets/icons/contact_us.png",
                title: 'Contact Us',
                onTap: () {
                  Navigator.pushNamed(context, RouteConstants.contactUs);
                },
              ),
              _buildListTile(
                icon: "assets/icons/terms_and_condition.png",
                title: 'Terms and Conditions',
                onTap: () {
                  Navigator.pushNamed(
                    context,
                    RouteConstants.termsAndCondition,
                  );
                },
              ),
              _buildListTile(
                icon: "assets/icons/faq.png",
                title: 'FAQ',
                onTap: () {
                  Navigator.pushNamed(context, RouteConstants.faq);
                },
              ),
              _buildListTile(
                icon: "assets/icons/privacy.png",
                title: 'Privacy Policy',
                onTap: () {
                  Navigator.pushNamed(context, RouteConstants.privacyPolicy);
                },
              ),

              const SizedBox(height: 22),

              // Logout Button
              SizedBox(
                width: double.infinity,
                child: OutlinedButton(
                  style: OutlinedButton.styleFrom(
                    foregroundColor: Color(0xFFF95F62),
                    side: const BorderSide(color: Color(0xFFF95F62)),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(38),
                    ),
                    padding: const EdgeInsets.symmetric(vertical: 6),
                  ),
                  onPressed: () {},
                  child: const Text(
                    'Log out',
                    style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildListTile({
    required String icon,
    required String title,
    required VoidCallback onTap,
  }) {
    return Container(
      height: 64,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.black.withOpacity(.10)),
        borderRadius: BorderRadius.circular(15),
      ),
      margin: const EdgeInsets.symmetric(vertical: 6, horizontal: 12),
      child: ListTile(
        leading: Image.asset(icon, scale: 4),
        title: Text(
          title,
          style: const TextStyle(fontSize: 15, fontWeight: FontWeight.w500),
        ),
        trailing: const Icon(Icons.arrow_forward_ios, size: 16),
        onTap: onTap,
      ),
    );
  }
}
