import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../controller/local/local_controller.dart';
import '../home/map_page_passenger.dart';

class Language extends StatelessWidget {
  const Language({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('Choose Language'.tr),
        border: null,
      ),
      child: Material(
        // Wrap SafeArea with Material widget
        child: SafeArea(
          child: GetBuilder<LocaleController>(
            builder: (controller) => Center(
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 20),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    _buildHeader(),
                    const SizedBox(height: 20),
                    Expanded(
                      child: ListView(
                        physics: const BouncingScrollPhysics(),
                        children: [
                          _buildLanguageButton(
                              'العربية', 'ar', controller, context, '🇪🇬'),
                          _buildLanguageButton('العربية (الخليج)', 'ar-gulf',
                              controller, context, '🇸🇦'),
                          _buildLanguageButton('العربية (المغرب)', 'ar-ma',
                              controller, context, '🇲🇦'),
                          _buildLanguageButton(
                              'English', 'en', controller, context, '🇺🇸'),
                          _buildLanguageButton(
                              'Türkçe', 'tr', controller, context, '🇹🇷'),
                          _buildLanguageButton(
                              'Français', 'fr', controller, context, '🇫🇷'),
                          _buildLanguageButton(
                              'Italiano', 'it', controller, context, '🇮🇹'),
                          _buildLanguageButton(
                              'Deutsch', 'de', controller, context, '🇩🇪'),
                          _buildLanguageButton(
                              'Ελληνικά', 'el', controller, context, '🇬🇷'),
                          _buildLanguageButton(
                              'Español', 'es', controller, context, '🇪🇸'),
                          _buildLanguageButton(
                              'فارسی', 'fa', controller, context, '🇮🇷'),
                          _buildLanguageButton(
                              '中文', 'zh', controller, context, '🇨🇳'),
                          _buildLanguageButton(
                              'Русский', 'ru', controller, context, '🇷🇺'),
                          _buildLanguageButton(
                              'हिन्दी', 'hi', controller, context, '🇮🇳'),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildHeader() {
    return Padding(
      padding: const EdgeInsets.only(top: 20, bottom: 10),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            'Language Options'.tr,
            style: const TextStyle(
              fontSize: 24,
              fontWeight: FontWeight.bold,
              color: CupertinoColors.black, // Or your theme primary color
            ),
            textAlign: TextAlign.start,
          ),
          const SizedBox(height: 8),
          Text(
            "Select your preferred language for the app interface.".tr,
            style: TextStyle(
              fontSize: 16,
              color: CupertinoColors.secondaryLabel,
            ),
            textAlign: TextAlign.start,
          ),
        ],
      ),
    );
  }

  Widget _buildLanguageButton(String title, String langCode,
      LocaleController controller, BuildContext context, String flagIcon) {
    return Container(
      decoration: BoxDecoration(
        color: CupertinoColors.white,
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: CupertinoColors.systemGrey5.withOpacity(0.5),
            spreadRadius: 1,
            blurRadius: 3,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: ListTile(
        leading: Text(flagIcon,
            style: const TextStyle(fontSize: 28)), // Using flag icon as leading
        title: Text(
          title,
          style: const TextStyle(
            fontWeight: FontWeight.w500,
          ),
        ),
        trailing: const Icon(CupertinoIcons.chevron_forward,
            color: CupertinoColors.inactiveGray),
        onTap: () async {
          controller.changeLang(langCode);
          showCupertinoDialog(
            context: context,
            builder: (context) => CupertinoAlertDialog(
              title: Text('You should restart app to change language'.tr),
              actions: [
                CupertinoDialogAction(
                  child: Text('Ok'.tr),
                  onPressed: () {
                    Get.offAll(() => MapPagePassenger());
                  },
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}
