import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:intl/intl.dart';
import 'package:slide_to_act/slide_to_act.dart';
import 'package:vibration/vibration.dart';
import 'dart:io';

import '../../../../constant/colors.dart';
import '../../../../constant/style.dart';
import '../../../../controller/home/captin/map_driver_controller.dart';
import '../../../widgets/elevated_btn.dart';

// Changed: إعادة تصميم كاملة للشريط ليصبح شريطًا علويًا عند بدء الرحلة
// ملف: driver_end_ride_bar.dart

Widget driverEndRideBar() {
  // 1. Positioned هي الوالد المباشر (لأنها داخل Stack في الصفحة الرئيسية)
  return Positioned(
    top: 0,
    left: 0,
    right: 0,
    // 2. GetBuilder يكون في الداخل
    child: GetBuilder<MapDriverController>(
      builder: (controller) => AnimatedContainer(
        duration: const Duration(milliseconds: 300),
        // 3. نستخدم التحريك (Translation) لإخفاء الشريط وإظهاره بدلاً من تغيير الـ top
        transform: Matrix4.translationValues(
            0, controller.isRideStarted ? 0 : -250, 0),
        child: Card(
          margin: EdgeInsets.zero,
          elevation: 10,
          shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(bottom: Radius.circular(24)),
          ),
          child: Padding(
            padding:
                const EdgeInsets.symmetric(horizontal: 16.0, vertical: 12.0),
            child: Column(
              children: [
                if (controller.carType != 'Mishwar Vip')
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      _buildInfoColumn(
                        icon: Icons.social_distance,
                        text: '${controller.distance} ${'KM'.tr}',
                        label: 'Distance'.tr,
                      ),
                      _buildInfoColumn(
                        icon: Icons.timelapse,
                        text: controller.hours > 1
                            ? '${controller.hours}h ${controller.minutes}m'
                            : '${controller.minutes}m',
                        label: 'Time'.tr,
                      ),
                      _buildInfoColumn(
                        icon: Icons.money_sharp,
                        text:
                            '${NumberFormat('#,##0').format(double.tryParse(controller.paymentAmount.toString()) ?? 0)} ${'SYP'.tr}',
                        label: 'Price'.tr,
                      ),
                    ],
                  ),

                // ... بقية الكود كما هو (الأزرار والمؤقت)
                if (controller.carType != 'Mishwar Vip')
                  const Divider(height: 20),
                const _builtTimerAndCarType(),
                const SizedBox(height: 12),
                SlideAction(
                  height: 55,
                  borderRadius: 15,
                  elevation: 4,
                  text: 'Slide to End Trip'.tr,
                  textStyle: AppStyle.title.copyWith(
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                  outerColor: AppColor.redColor,
                  innerColor: Colors.white,
                  sliderButtonIcon: const Icon(
                    Icons.arrow_forward_ios,
                    color: AppColor.redColor,
                    size: 24,
                  ),
                  sliderRotate: false,
                  onSubmit: () {
                    HapticFeedback.mediumImpact();
                    controller.finishRideFromDriver();
                    return null;
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    ),
  );
}

// New: ودجت لعرض معلومات الرحلة في الشريط العلوي
Widget _buildInfoColumn(
    {required IconData icon, required String text, required String label}) {
  return Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Icon(icon, color: AppColor.primaryColor),
      const SizedBox(height: 4),
      Text(text, style: AppStyle.title.copyWith(fontWeight: FontWeight.bold)),
      Text(label,
          style:
              AppStyle.title.copyWith(color: Colors.grey[600], fontSize: 12)),
    ],
  );
}

// Changed: تم تعديل تصميم ودجت عرض المؤقت ونوع السيارة
class _builtTimerAndCarType extends StatelessWidget {
  const _builtTimerAndCarType();

  @override
  Widget build(BuildContext context) {
    // نستخدم GetBuilder هنا لضمان تحديث العداد في كل ثانية
    return GetBuilder<MapDriverController>(builder: (controller) {
      return Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // -- نوع السيارة --
          Container(
            decoration:
                AppStyle.boxDecoration1.copyWith(color: Colors.grey[200]),
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            child: Text(
              controller.carType.tr,
              style: AppStyle.title.copyWith(fontWeight: FontWeight.bold),
            ),
          ),

          // -- مؤقت الرحلة --
          if (controller.carType != 'Comfort' &&
              controller.carType != 'Mishwar Vip' &&
              controller.carType != 'Lady') ...[
            const SizedBox(width: 10),
            Expanded(
              child: Container(
                height: 40,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(12),
                  gradient: LinearGradient(
                    colors: [
                      controller.remainingTimeTimerRideBegin < 60
                          ? AppColor.redColor.withOpacity(0.8)
                          : AppColor.greenColor.withOpacity(0.8),
                      controller.remainingTimeTimerRideBegin < 60
                          ? AppColor.redColor
                          : AppColor.greenColor,
                    ],
                  ),
                ),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(12),
                  child: Stack(
                    alignment: Alignment.center,
                    children: [
                      LinearProgressIndicator(
                        backgroundColor: Colors.transparent,
                        valueColor: AlwaysStoppedAnimation<Color>(
                            Colors.white.withOpacity(0.2)),
                        minHeight: 40,
                        // تأكد من أن هذه القيمة بين 0.0 و 1.0 في الكونترولر
                        value: controller.progressTimerRideBegin.toDouble(),
                      ),
                      Text(
                        controller.stringRemainingTimeRideBegin,
                        style: AppStyle.title.copyWith(
                            color: Colors.white, fontWeight: FontWeight.bold),
                      ),
                    ],
                  ),
                ),
              ),
            )
          ],
        ],
      );
    });
  }
}

// Changed: تم تعديل مكان ومظهر دائرة السرعة
// غيرنا نوع الإرجاع إلى Widget بدلاً من GetBuilder
Widget speedCircle() {
  // التحقق من السرعة يمكن أن يبقى هنا أو داخل الـ builder
  // لكن التنبيهات (Vibration/Dialog) يفضل أن تكون داخل الـ builder لتجنب تكرارها أثناء إعادة البناء الخارجية

  return Positioned(
    // New: Positioned الآن هي الوالد المباشر (يجب وضع هذه الدالة داخل Stack في الصفحة الرئيسية)
    bottom: 25,
    left: 3,
    child: GetBuilder<MapDriverController>(
      builder: (controller) {
        // التحقق من التنبيهات هنا
        if (controller.speed > 100) {
          // نستخدم addPostFrameCallback لضمان عدم استدعاء الـ Dialog أثناء عملية البناء
          WidgetsBinding.instance.addPostFrameCallback((_) {
            if (!Get.isDialogOpen!) {
              // تجنب فتح أكثر من نافذة
              if (Platform.isIOS) {
                HapticFeedback.selectionClick();
              } else {
                Vibration.vibrate(duration: 1000);
              }
              Get.defaultDialog(
                barrierDismissible: false,
                titleStyle: AppStyle.title,
                title: 'Speed Over'.tr,
                middleText: 'Please slow down'.tr,
                middleTextStyle: AppStyle.title,
                confirm: MyElevatedButton(
                  title: 'I will slow down'.tr,
                  onPressed: () => Get.back(),
                ),
              );
            }
          });
        }

        return controller.isRideStarted
            ? Container(
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.white,
                  boxShadow: const [
                    BoxShadow(blurRadius: 5, color: Colors.black26)
                  ],
                  border: Border.all(
                    width: 4,
                    color: controller.speed > 100
                        ? Colors.red
                        : AppColor.greenColor,
                  ),
                ),
                height: 70,
                width: 70,
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        controller.speed.toStringAsFixed(0),
                        style: AppStyle.number.copyWith(fontSize: 24),
                      ),
                      const Text("km/h", style: TextStyle(fontSize: 10)),
                    ],
                  ),
                ),
              )
            : const SizedBox(); // إذا لم تبدأ الرحلة نخفي العنصر وهو داخل الـ Positioned
      },
    ),
  );
}
