import 'dart:developer';

import 'package:wanisclient/config/custom_text.dart';
import 'package:wanisclient/config/enum/ride_type.dart';
import 'package:wanisclient/providers/language_provider.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:latlong2/latlong.dart';
import 'package:provider/provider.dart';
import 'dart:ui' as ui;

import '../config/custom_loader.dart';
import '../config/enum/ride_enum.dart';

import '../models/SocketRequest/ride_stop_request.dart';
import '../models/ride_options.dart';
import '../providers/public_provider.dart';
import '../providers/ride_providers.dart';
import '../providers/utils_singleton.dart';
import '../utils/colors.dart';

class RideRequestDetailsScreen extends StatefulWidget {
  final LatLng? startlocation;
  final List<RideStopRequest>? stoplocationlocation;
  final LatLng? destinationlocation;

  const RideRequestDetailsScreen({
    super.key,
    required this.startlocation,
    this.stoplocationlocation,
    required this.destinationlocation,

  });

  @override
  State<RideRequestDetailsScreen> createState() =>
      _RideRequestDetailsScreenState();
}

class _RideRequestDetailsScreenState extends State<RideRequestDetailsScreen> {
  // Dummy list of car options (this can be fetched from an API)

  int selectedIndex = 0; // Selected car option index
  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final rideProvider = context.watch<RidesProvider>();
    final publicprovider = context.watch<PublicProvider>();
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: Container(
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: const BorderRadius.only(
            topLeft: Radius.circular(20),
            topRight: Radius.circular(20),
          ),
          boxShadow: [
            BoxShadow(color: Colors.black.withOpacity(0.1), blurRadius: 10),
          ],
        ),
        child: Padding(
          padding: EdgeInsets.only(bottom:70.sp),
          child: ListView.builder(
            itemCount: publicprovider.options.length,
            padding: const EdgeInsets.only(bottom: 10),
            itemBuilder: (context, index) {
              return _buildCarOption(rideProvider, publicprovider.options[index], index);
            },
          ),
        ),
      ),
      bottomSheet: _buildBottomSheet(rideProvider, publicprovider),
    );
  }

  Widget _buildCarOption(RidesProvider provider, RideOption car, int index) {
    bool isSelected = index == selectedIndex;
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: GestureDetector(
        onTap: () {
          setState(() {
            selectedIndex = index;
            provider.updateSelecteridoption(car);
          });
        },
        child: Container(
          padding: const EdgeInsets.all(16),
          decoration: BoxDecoration(
            color: isSelected ? Colors.white : Colors.grey[50],
            borderRadius: BorderRadius.circular(16),
            border: Border.all(
              color: isSelected ? car.borderColor : Colors.grey[300]!,
              width: isSelected ? 2 : 1,
            ),
            boxShadow: isSelected
                ? [
                    BoxShadow(
                      color: car.name.toLowerCase() == "wanis"
                          ? AppColors.primaryColor
                          : car.borderColor.withOpacity(0.2),
                      blurRadius: 8,
                      offset: const Offset(0, 4),
                    )
                  ]
                : [
                    BoxShadow(
                      color: Colors.grey.withOpacity(0.1),
                      blurRadius: 4,
                      offset: const Offset(0, 2),
                    )
                  ],
          ),
          child: Row(
            children: [
              // Car Image Section
              Container(
                width: 80,
                height: 60,
                padding: const EdgeInsets.all(8),
                decoration: BoxDecoration(
                  color: isSelected
                      ? car.borderColor.withOpacity(0.1)
                      : Colors.grey[100],
                  borderRadius: BorderRadius.circular(12),
                ),
                child: Image.asset(
                  car.name != null && car.name!.isNotEmpty
                      ? "assets/images/${car.name.toLowerCase()}.png"
                      : "assets/images/wanislogoweb.png",
                  fit: BoxFit.contain,
                  errorBuilder: (context, error, stackTrace) {
                    // Fallback to default image if asset not found
                    return Image.asset(
                      "assets/images/wanislogoweb.png",
                      fit: BoxFit.contain,
                    );
                  },
                ),
              ),

              const SizedBox(width: 16),

              // Car Details Section
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    // Car Name
                    Txt(
                      text: car.name,
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                        color: car.borderColor,
                      ),
                    ),

                    const SizedBox(height: 4),

                    // Duration and Capacity
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Txt(
                          text: "${car.price.toStringAsFixed(2)} TND ",
                          style: const TextStyle(
                            fontSize: 15,
                            fontWeight: FontWeight.bold,
                            color: Colors.black,
                          ),
                        ),
                        Row(
                          children: [
                            Txt(
                              text: "Service charge",
                              style: TextStyle(
                                fontSize: 15,
                                fontWeight: FontWeight.normal,
                                color: Colors.black.withOpacity(0.8),
                              ),
                            ),
                            Txt(
                              text: "+ tarif compteur",
                              style: TextStyle(
                                fontSize: 15,
                                fontWeight: FontWeight.normal,
                                color: Colors.black.withOpacity(0.8),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  // Bottom Sheet with Payment Method and Request Button
  Widget _buildBottomSheet(
      RidesProvider rideprovider, PublicProvider publicprovider,) {
    return publicprovider.options.isEmpty
        ? const Center(child: CircularProgressIndicator())
        : Container(
            height: 70,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(15),
              boxShadow: [
                BoxShadow(color: Colors.black.withOpacity(0.1), blurRadius: 10),
              ],
            ),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                const SizedBox(height: 10),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 8.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      SizedBox(
                        width: MediaQuery.of(context).size.width * 0.8,
                        child: ElevatedButton(
                          onPressed: () {
                            if (publicprovider.isLoadingRideOption) return;
                            log("car price ${publicprovider.options[selectedIndex].price}");
                            rideprovider.updatePrice(publicprovider.options[selectedIndex].price);
                            if(publicprovider.options[selectedIndex].couponcode!=null){
                              rideprovider.updateCoupon(publicprovider.options[selectedIndex].couponcode);
                            }
                          if(publicprovider.options[selectedIndex].couponvalue!=null || publicprovider.options[selectedIndex].couponpercentage!=null){
                              rideprovider.updateCoupon(publicprovider.options[selectedIndex].couponcode);
                              rideprovider.updateCouponvalue(publicprovider.options[selectedIndex].couponvalue,publicprovider.options[selectedIndex].couponpercentage);

                          }

                            rideprovider.updateCurrentstate(RideEnum.order_summary);

                            // _requestRide(carOptions[selectedIndex]);
                          },
                          style: ElevatedButton.styleFrom(
                            backgroundColor: publicprovider.isLoadingRideOption
                                ? Colors.grey
                                : AppNewColors.primaryBtnColor,
                            padding: const EdgeInsets.symmetric(
                                horizontal: 50, vertical: 12),
                            shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(10)),
                          ),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Txt(
                                text: languageSingleton.translate("Request"),
                                style: const TextStyle(
                                    fontSize: 17,
                                    color: Colors.white,
                                    fontWeight: FontWeight.bold),
                              ),
                              Txt(
                                text:
                                    " ${languageSingleton.translate(publicprovider.options[selectedIndex].name.toLowerCase())}",
                                style: const TextStyle(
                                    fontSize: 17,
                                    color: Colors.white,
                                    fontWeight: FontWeight.bold),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          );
  }
}