import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:image_picker/image_picker.dart';
import 'package:supplier_new/resources/tanker_trips_model.dart';

import '../common/settings.dart';
import 'package:http/http.dart' as http;

class FirstCharUppercaseFormatter extends TextInputFormatter {
  const FirstCharUppercaseFormatter();

  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue,
      TextEditingValue newValue,
      ) {
    final text = newValue.text;
    if (text.isEmpty) return newValue;

    final i = text.indexOf(RegExp(r'\S'));
    if (i == -1) return newValue;

    final first = text[i];
    final upper = first.toUpperCase();
    if (first == upper) return newValue;

    final newText = text.replaceRange(i, i + 1, upper);

    return newValue.copyWith(
      text: newText,
      selection: newValue.selection,
      composing: TextRange.empty,
    );
  }
}

class TankerDetailsPage extends StatefulWidget {
  var tankerDetails;
  var status;
  TankerDetailsPage({this.tankerDetails, this.status});
  @override
  State<TankerDetailsPage> createState() => _TankerDetailsPageState();
}

class _TankerDetailsPageState extends State<TankerDetailsPage> {
  final _formKey = GlobalKey<FormState>();
  final _nameCtrl = TextEditingController();
  final _capacityCtrl = TextEditingController();
  final _plateCtrl = TextEditingController();
  final _mfgYearCtrl = TextEditingController();
  final _insExpiryCtrl = TextEditingController();

  String? selectedType;
  String? selectedTypeOfWater;

  final List<String> tankerTypes = const [
    "Without Pump",
    "With Pump",
  ];
  final List<String> typeOfWater = const [
    "Drinking water",
    "Bore water",
  ];

  String? _required(String? v, {String field = "This field"}) {
    if (v == null || v.trim().isEmpty) return "$field is required";
    return null;
  }

  int selectedTab = 0;
  String search = '';
  bool isLoading = false;
  bool isTankerTripsLoading = false;

  bool isStatusLoading = false;
  String? currentAvailability;
  List<TankerTripsModel> tankerTripsList = [];

  List<String> tankerImageUrls = [];
  List<XFile> newImages = [];

  final int maxImages = 5;

  @override
  void initState() {

    super.initState();

    _nameCtrl.text =
        widget.tankerDetails.tanker_name ?? '';

    if(widget.tankerDetails.images != null){

      tankerImageUrls =
      List<String>.from(
          widget.tankerDetails.images
      );

    }

    /// FIX — allow null availability
    if (widget.tankerDetails.availability != null &&
        widget.tankerDetails.availability is List &&
        widget.tankerDetails.availability.length == 2) {

      final a =
          widget.tankerDetails.availability;

      currentAvailability =
      "${a[0]}|${a[1]}";

    }
    else{

      /// default status if null
      currentAvailability =
      "empty|available";

    }

    /// ALWAYS FETCH TRIPS
    _fetchTankerTrips();

  }
  Future<void> _fetchTankerTrips() async {
    setState(() => isTankerTripsLoading = true);
    try {
      var payload = new Map<String, dynamic>();

      payload["tankerName"] =
          widget.tankerDetails.tanker_name;

      final response = await AppSettings.getTankerTrips(payload);
      final data = (jsonDecode(response)['data'] as List)
          .map((e) => TankerTripsModel.fromJson(e))
          .toList();

      if (!mounted) return;
      setState(() {
        tankerTripsList = data;
        isTankerTripsLoading = false;
      });
    } catch (e) {
      debugPrint("⚠️ Error fetching tankers: $e");
      setState(() => isTankerTripsLoading = false);
    }
  }

  final List<String> options = [
    "empty|available",
    "empty|blocked",
    "empty|undermaintanence",
    "filled|available",
    "filled|blocked",
    "filled|undermaintanence",
  ];

  String _getLabel(String value) {
    final parts = value.split('|');
    return "${parts[0].toUpperCase()} • ${parts[1].toUpperCase()}";
  }

  Future<void> _updateAvailability(String selectedValue) async {
    final parts = selectedValue.split('|');
    final availability = [parts[0], parts[1]];

    final payload = <String, dynamic>{
      "tankerName": widget.tankerDetails.tanker_name,
      "availability": availability,
    };

    try {
      setState(() => isStatusLoading = true);

      final bool tankStatus =
      await AppSettings.updateTankerAvailability(payload);

      if (!mounted) return;

      if (tankStatus) {
        AppSettings.longSuccessToast("Tanker status updated successfully");

        Navigator.pop(context, true);
        await _refreshTankerDetails();
      } else {
        Navigator.pop(context, true);
        AppSettings.longFailedToast("Tanker status update failed");
      }
    } catch (e) {
      debugPrint("⚠️ update tanker error: $e");
      if (!mounted) return;
      AppSettings.longFailedToast("Something went wrong: $e");
    } finally {
      if (mounted) setState(() => isStatusLoading = false);
    }
  }

  void _showDropdownBottomSheet({String? defaultValue}) {
    String? selectedValue = defaultValue;

    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      backgroundColor: Colors.transparent,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
      ),
      builder: (context) {
        final viewInsets = MediaQuery.of(context).viewInsets.bottom;

        return FractionallySizedBox(
          heightFactor: 0.6,
          child: Container(
            decoration: const BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
            ),
            padding: EdgeInsets.fromLTRB(20, 16, 20, 16 + viewInsets),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Center(
                  child: Container(
                    width: 60,
                    height: 4,
                    margin: const EdgeInsets.only(bottom: 16),
                    decoration: BoxDecoration(
                      color: const Color(0xFFE0E0E0),
                      borderRadius: BorderRadius.circular(2),
                    ),
                  ),
                ),

                const Text(
                  "Change Tanker Status",
                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600),
                ),
                const SizedBox(height: 20),

                Expanded(
                  child: SingleChildScrollView(
                    child: Column(
                      children: [
                        DropdownButtonFormField<String>(
                          value: selectedValue,
                          decoration: InputDecoration(
                            labelText: "Select Availability",
                            border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(12),
                            ),
                            contentPadding: const EdgeInsets.symmetric(
                              vertical: 10,
                              horizontal: 12,
                            ),
                          ),
                          items: options
                              .map((opt) => DropdownMenuItem(
                            value: opt,
                            child: Text(_getLabel(opt)),
                          ))
                              .toList(),
                          onChanged: (val) => selectedValue = val,
                        ),
                        const SizedBox(height: 20),
                      ],
                    ),
                  ),
                ),

                SizedBox(
                  width: double.infinity,
                  child: ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      backgroundColor: const Color(0xFF515253),
                      foregroundColor: Colors.white,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(24),
                      ),
                      padding: const EdgeInsets.symmetric(vertical: 12),
                    ),
                    onPressed: () {
                      if (selectedValue != null) {
                        _updateAvailability(selectedValue!);
                      } else {
                        AppSettings.longFailedToast("Please select an option");
                      }
                    },
                    child: isLoading
                        ? const SizedBox(
                        width: 20,
                        height: 20,
                        child: CircularProgressIndicator(
                            color: Colors.white, strokeWidth: 2))
                        : const Text("Submit"),
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }

  showDeleteTankerDialog(BuildContext context) async {
    return showDialog(
      context: context,
      barrierDismissible: false,
      builder: (BuildContext context) {
        return StatefulBuilder(builder:
            (BuildContext context, StateSetter setState) {
          return AlertDialog(
            backgroundColor: Color(0XFFFFFFFF),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(12),
            ),
            title: Center(
              child: Text(
                'Delete Tanker?',
                style:
                fontTextStyle(16, Color(0XFF3B3B3B), FontWeight.w600),
              ),
            ),
            content: SingleChildScrollView(
              child: ListBody(
                children: <Widget>[
                  Container(
                    child: Text(
                      'Do u want to delete "${widget.tankerDetails.tanker_name}"',
                      style: fontTextStyle(
                          14, Color(0XFF101214), FontWeight.w600),
                    ),
                  ),
                ],
              ),
            ),

            actions: <Widget>[
              Center(
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Expanded(
                      child: GestureDetector(
                        onTap: () {
                          Navigator.pop(context);
                        },
                        child: Container(
                          decoration: BoxDecoration(
                              shape: BoxShape.rectangle,
                              color: Color(0XFFFFFFFF),
                              border: Border.all(
                                  width: 1, color: Color(0XFF1D7AFC)),
                              borderRadius: BorderRadius.circular(12)),
                          alignment: Alignment.center,
                          child: Padding(
                            padding: EdgeInsets.fromLTRB(
                                16, 12, 16, 12),
                            child: Text(
                              'Cancel',
                              style: fontTextStyle(
                                  12,
                                  Color(0XFF1D7AFC),
                                  FontWeight.w600),
                            ),
                          ),
                        ),
                      ),
                    ),
                    SizedBox(
                        width:
                        MediaQuery.of(context).size.width * .016),
                    Expanded(
                        child: GestureDetector(
                          onTap: () async {
                            bool status = await AppSettings.deleteTanker(
                              widget.tankerDetails.tanker_name,
                            );

                            if (status) {
                              AppSettings.longSuccessToast(
                                  'Tanker deleted successfully');
                              Navigator.of(context).pop(true);
                              Navigator.of(context).pop(true);
                            } else {
                              Navigator.of(context).pop(true);
                              AppSettings.longFailedToast(
                                  'Failed to delete tanker');
                            }
                          },
                          child: Container(
                            decoration: BoxDecoration(
                                shape: BoxShape.rectangle,
                                color: Color(0XFFE2483D),
                                border: Border.all(
                                    width: 1,
                                    color: Color(0XFFE2483D)),
                                borderRadius:
                                BorderRadius.circular(12)),
                            alignment: Alignment.center,
                            child: Padding(
                              padding: EdgeInsets.fromLTRB(
                                  16, 12, 16, 12),
                              child: Text(
                                'Delete',
                                style: fontTextStyle(
                                    12,
                                    Color(0XFFFFFFFF),
                                    FontWeight.w600),
                              ),
                            ),
                          ),
                        )),
                  ],
                ),
              ),
            ],
          );
        });
      },
    );
  }

  Color _chipColor(String s) {
    switch (s) {
      case 'filled':
        return const Color(0xFFFFFFFF);
      case 'available':
        return const Color(0xFFE8F0FF);
      case 'empty':
        return const Color(0xFFFFEEEE);
      case 'in-use':
        return const Color(0xFFFFF0E6);
      case 'maintenance':
        return const Color(0xFFFFF4E6);
      default:
        return const Color(0xFFECECEC);
    }
  }

  Color _chipTextColor(String s) {
    switch (s) {
      case 'filled':
        return const Color(0xFF1D7AFC);
      case 'available':
        return const Color(0xFF0A9E04);
      case 'empty':
        return const Color(0xFFE2483D);
      case 'in-use':
        return const Color(0xFFEA843B);
      case 'maintenance':
        return const Color(0xFFD0AE3C);
      default:
        return Colors.black87;
    }
  }
  Future<void> _pickInsuranceDate() async {
    final picked = await showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime(2000),
      lastDate: DateTime(2100),
      builder: (context, child) {
        return Theme(
          data: Theme.of(context).copyWith(
            dialogBackgroundColor: Colors.white,
            colorScheme: Theme.of(context).colorScheme.copyWith(
              primary: const Color(0xFF8270DB),
              surface: Colors.white,
              onSurface: const Color(0xFF101214),
            ),
          ),
          child: child!,
        );
      },
    );
    if (picked != null) {
      final dd = picked.day.toString().padLeft(2, '0');
      final mm = picked.month.toString().padLeft(2, '0');
      final yyyy = picked.year.toString();
      _insExpiryCtrl.text = "$dd-$mm-$yyyy";
      setState(() {});
    }
  }

  void _resetForm() {
    _formKey.currentState?.reset();
    _nameCtrl.clear();
    _capacityCtrl.clear();
    _plateCtrl.clear();
    _mfgYearCtrl.clear();
    _insExpiryCtrl.clear();
    selectedType = null;
    selectedTypeOfWater = null;
  }

  Future<void> _refreshTankerDetails() async {

    try {

      setState(() => isLoading = true);

      final updatedDetails =
      await AppSettings.getTankerDetailsByName(
        _nameCtrl.text.trim(),
      );

      if (updatedDetails != null) {

        setState(() {

          widget.tankerDetails = updatedDetails;

          /// ⭐ VERY IMPORTANT FIX
          tankerImageUrls =
          List<String>.from(
              updatedDetails.images ?? []
          );

        });

      }
      else{

        AppSettings.longFailedToast(
            "Failed to fetch updated tanker details"
        );

      }

    }
    catch(e){

      debugPrint(
          "⚠️ Error refreshing tanker details: $e"
      );

      AppSettings.longFailedToast(
          "Error refreshing tanker details"
      );

    }
    finally{

      setState(() => isLoading = false);

    }

  }

  String? fitToOption(String? incoming, List<String> options) {
    if (incoming == null) return null;
    final inc = incoming.trim();
    if (inc.isEmpty) return null;

    final match = options.firstWhere(
          (o) => o.toLowerCase() == inc.toLowerCase(),
      orElse: () => '',
    );
    return match.isEmpty ? null : match;
  }

  Future<void> _updateTanker() async {
    final ok = _formKey.currentState?.validate() ?? false;
    if (!ok) {
      setState(() {});
      return;
    }

    final payload = <String, dynamic>{
      "tankerName": _nameCtrl.text.trim(),
      "capacity": _capacityCtrl.text.trim(),
      "typeofwater": selectedTypeOfWater ?? "",
      "supplier_address": AppSettings.userAddress,
      "supplier_name": AppSettings.userName,
      "phoneNumber": AppSettings.phoneNumber,
      "tanker_type": selectedType ?? "",
      "license_plate": _plateCtrl.text.trim(),
      "manufacturing_year": _mfgYearCtrl.text.trim(),
      "insurance_exp_date": _insExpiryCtrl.text.trim(),
      "delivery_fee": widget.tankerDetails.delivery_fee,
      "pumping_fee": widget.tankerDetails.pumping_fee,
      "price": widget.tankerDetails.price,
    };

    try {
      final bool tankStatus = await AppSettings.updateTanker(
          payload, widget.tankerDetails.tanker_name);

      if (!mounted) return;

      if (tankStatus) {
        AppSettings.longSuccessToast("Tanker Updated Successfully");
        Navigator.pop(context, true);
        _refreshTankerDetails();
        _resetForm();
      } else {
        AppSettings.longFailedToast("Tanker update failed");
      }
    } catch (e) {
      debugPrint("⚠️ update tanker error: $e");
      if (!mounted) return;
      AppSettings.longFailedToast("Something went wrong");
    }
  }

  Future<void> openTankerSimpleSheet(BuildContext context) async {
    _nameCtrl.text = widget.tankerDetails.tanker_name ?? '';
    _capacityCtrl.text = widget.tankerDetails.capacity ?? '';
    _plateCtrl.text = widget.tankerDetails.license_plate ?? '';
    _mfgYearCtrl.text = widget.tankerDetails.manufacturing_year ?? '';
    _insExpiryCtrl.text = widget.tankerDetails.insurance_expiry ?? '';

    selectedType = fitToOption(widget.tankerDetails.tanker_type, tankerTypes);
    selectedTypeOfWater =
        fitToOption(widget.tankerDetails.type_of_water, typeOfWater);

    await showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      backgroundColor: Colors.transparent,
      builder: (context) {
        final viewInsets = MediaQuery.of(context).viewInsets.bottom;

        return FractionallySizedBox(
          heightFactor: 0.75,
          child: Container(
            decoration: const BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
            ),
            child: Padding(
              padding: EdgeInsets.fromLTRB(20, 16, 20, 20 + viewInsets),
              child: Form(
                key: _formKey,
                child: SingleChildScrollView(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      Row(
                        children: [
                          Expanded(
                            child: Center(
                              child: Container(
                                width: 86,
                                height: 4,
                                margin: const EdgeInsets.only(bottom: 12),
                                decoration: BoxDecoration(
                                  color: const Color(0xFFE0E0E0),
                                  borderRadius: BorderRadius.circular(2),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),

                      _LabeledField(
                        label: "Tanker Name *",
                        child: TextFormField(
                          controller: _nameCtrl,
                          validator: (v) =>
                              _required(v, field: "Tanker Name"),
                          textCapitalization: TextCapitalization.none,
                          inputFormatters: const [
                            FirstCharUppercaseFormatter(),
                          ],
                          decoration: InputDecoration(
                            hintText: "Enter Tanker Name",
                            hintStyle: fontTextStyle(
                                14,
                                const Color(0xFF939495),
                                FontWeight.w400),
                            border: const OutlineInputBorder(),
                            isDense: true,
                          ),
                          textInputAction: TextInputAction.next,
                        ),
                      ),

                      _LabeledField(
                        label: "Tanker Capacity (in L) *",
                        child: TextFormField(
                          controller: _capacityCtrl,
                          validator: (v) =>
                              _required(v, field: "Tanker Capacity"),
                          decoration: InputDecoration(
                            hintText: "10,000",
                            hintStyle: fontTextStyle(
                                14,
                                const Color(0xFF939495),
                                FontWeight.w400),
                            border: const OutlineInputBorder(),
                            isDense: true,
                          ),
                          keyboardType: TextInputType.number,
                          inputFormatters: [
                            FilteringTextInputFormatter.allow(
                                RegExp(r'[0-9,]')),
                          ],
                          textInputAction: TextInputAction.next,
                        ),
                      ),

                      _LabeledField(
                        label: "Tanker Type *",
                        child: DropdownButtonFormField<String>(
                          value: selectedType,
                          items: tankerTypes
                              .map((t) =>
                              DropdownMenuItem(value: t, child: Text(t)))
                              .toList(),
                          onChanged: (v) =>
                              setState(() => selectedType = v),
                          validator: (v) =>
                          v == null || v.isEmpty
                              ? "Tanker Type is required"
                              : null,
                          isExpanded: true,
                          alignment: Alignment.centerLeft,
                          hint: Text(
                            "Select Type",
                            style: fontTextStyle(
                                14,
                                const Color(0xFF939495),
                                FontWeight.w400),
                          ),
                          icon: Image.asset('images/downarrow.png',
                              width: 16, height: 16),
                          decoration: const InputDecoration(
                            border: OutlineInputBorder(),
                            isDense: false,
                            contentPadding: EdgeInsets.symmetric(
                                horizontal: 12, vertical: 14),
                          ),
                        ),
                      ),

                      _LabeledField(
                        label: "Type of water *",
                        child: DropdownButtonFormField<String>(
                          value: (selectedTypeOfWater != null &&
                              typeOfWater
                                  .contains(selectedTypeOfWater))
                              ? selectedTypeOfWater
                              : null,
                          items: typeOfWater
                              .map((t) =>
                              DropdownMenuItem(value: t, child: Text(t)))
                              .toList(),
                          onChanged: (v) =>
                              setState(() => selectedTypeOfWater = v),
                          validator: (v) =>
                          v == null || v.isEmpty
                              ? "Type of water is required"
                              : null,
                          isExpanded: true,
                          alignment: Alignment.centerLeft,
                          hint: Text(
                            "Select type of water",
                            style: fontTextStyle(
                                14,
                                const Color(0xFF939495),
                                FontWeight.w400),
                          ),
                          icon: Image.asset('images/downarrow.png',
                              width: 16, height: 16),
                          decoration: const InputDecoration(
                            border: OutlineInputBorder(),
                            isDense: false,
                            contentPadding: EdgeInsets.symmetric(
                                horizontal: 12, vertical: 14),
                          ),
                        ),
                      ),

                      _LabeledField(
                        label: "License Plate *",
                        child: TextFormField(
                          controller: _plateCtrl,
                          validator: (v) =>
                              _required(v, field: "License Plate"),
                          decoration: InputDecoration(
                            hintText: "AB 05 H 4948",
                            hintStyle: fontTextStyle(
                                14,
                                const Color(0xFF939495),
                                FontWeight.w400),
                            border: const OutlineInputBorder(),
                            isDense: true,
                          ),
                          textCapitalization:
                          TextCapitalization.characters,
                          textInputAction: TextInputAction.next,
                        ),
                      ),

                      _LabeledField(
                        label: "Age of vehicle (opt)",
                        child: TextFormField(
                          controller: _mfgYearCtrl,
                          decoration: InputDecoration(
                            hintText: "12",
                            hintStyle: fontTextStyle(
                                14,
                                const Color(0xFF939495),
                                FontWeight.w400),
                            border: const OutlineInputBorder(),
                            isDense: true,
                          ),
                          keyboardType: TextInputType.number,
                          inputFormatters: [
                            FilteringTextInputFormatter.digitsOnly,
                            LengthLimitingTextInputFormatter(4),
                          ],
                          textInputAction: TextInputAction.next,
                        ),
                      ),

                      _LabeledField(
                        label: "Insurance Expiry Date (opt)",
                        child: TextFormField(
                          controller: _insExpiryCtrl,
                          readOnly: true,
                          decoration: InputDecoration(
                            hintText: "DD-MM-YYYY",
                            hintStyle: fontTextStyle(
                                14,
                                const Color(0xFF939495),
                                FontWeight.w400),
                            border: const OutlineInputBorder(),
                            isDense: true,
                            suffixIcon: const Icon(
                                Icons.calendar_today_outlined,
                                size: 18),
                          ),
                          onTap: _pickInsuranceDate,
                        ),
                      ),

                      const SizedBox(height: 20),

                      SizedBox(
                        width: double.infinity,
                        child: ElevatedButton(
                          style: ElevatedButton.styleFrom(
                            backgroundColor: const Color(0xFF8270DB),
                            foregroundColor: Colors.white,
                            padding: const EdgeInsets.symmetric(
                                vertical: 14),
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(24),
                            ),
                          ),
                          onPressed: () {
                            _updateTanker();
                          },
                          child: Text(
                            "Update",
                            style: fontTextStyle(
                                14,
                                Colors.white,
                                FontWeight.w600),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        );
      },
    );
  }

  Future<void> pickNewImages() async {

    int totalImages =
        tankerImageUrls.length + newImages.length;

    if(totalImages >= maxImages){

      AppSettings.longFailedToast(
          "Maximum 5 images allowed"
      );

      return;

    }

    showModalBottomSheet(

        context: context,

        builder:(context){

          return SafeArea(

            child:Column(

              mainAxisSize:MainAxisSize.min,

              children:[

                ListTile(

                  leading:Icon(Icons.photo),

                  title:Text("Gallery"),

                  onTap:() async {

                    Navigator.pop(context);

                    await _pickFromGallery();

                  },

                ),

                ListTile(

                  leading:Icon(Icons.camera_alt),

                  title:Text("Camera"),

                  onTap:() async {

                    Navigator.pop(context);

                    await _pickFromCamera();

                  },

                ),

              ],

            ),

          );

        }

    );

  }

  Future<void> _pickFromGallery() async {

    final picker = ImagePicker();

    final images =
    await picker.pickMultiImage();

    if(images.isEmpty) return;

    int remaining =
        maxImages - tankerImageUrls.length;

    if(images.length > remaining){

      AppSettings.longFailedToast(
          "You can upload only $remaining more images"
      );

      newImages =
          images.take(remaining).toList();

    }
    else{

      newImages = images;

    }

    await uploadUpdatedImages();

  }

  Future<void> _pickFromCamera() async {

    if(tankerImageUrls.length >= maxImages){

      AppSettings.longFailedToast(
          "Maximum 5 images allowed"
      );

      return;

    }

    final picker = ImagePicker();

    final image =
    await picker.pickImage(

        source: ImageSource.camera,

      imageQuality:70,
      maxWidth:1280,
      maxHeight:1280,

    );

    if(image == null) return;

    newImages = [image];

    await uploadUpdatedImages();

  }

  Future<void> deleteImage(int index) async {

    try{

      AppSettings.preLoaderDialog(context);

      String imageUrl =
      tankerImageUrls[index];

      bool status =
      await AppSettings.deleteTankerImage(

          widget.tankerDetails.dbId,
          imageUrl

      );

      Navigator.pop(context);

      if(status){

        tankerImageUrls.removeAt(index);

        setState((){});

        AppSettings.longSuccessToast(
            "Image deleted"
        );

        /// optional refresh
        await _refreshTankerDetails();

      }
      else{

        AppSettings.longFailedToast(
            "Delete failed"
        );

      }

    }
    catch(e){

      Navigator.pop(context);

      AppSettings.longFailedToast(
          "Network error"
      );

    }

  }

  Future<void> uploadUpdatedImages() async {

    try{

      AppSettings.preLoaderDialog(context);

      var request = http.MultipartRequest(

          'POST',

          Uri.parse(

              AppSettings.host+
                  "uploads_tanker_images/"
                      "${widget.tankerDetails.dbId}"

          )

      );

      request.headers.addAll(
          await AppSettings.buildRequestHeaders()
      );

      for(var img in newImages){

        request.files.add(

            await http.MultipartFile.fromPath(

                'files',

                img.path

            )

        );

      }

      var response =
      await request.send();

      Navigator.pop(context);

      var resp =
      await http.Response.fromStream(response);

      if(response.statusCode==200){

        AppSettings.longSuccessToast(
            "Images Updated"
        );

        newImages.clear();

        await _refreshTankerDetails();

      }
      else{

        print(resp.body);

        AppSettings.longFailedToast(
            "Upload failed"
        );

      }

    }
    catch(e){

      Navigator.pop(context);

      AppSettings.longFailedToast(
          "Upload failed"
      );

    }

  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
        onWillPop: () async {
          Navigator.pop(context, true);
          return false;
        },
        child: Scaffold(
          backgroundColor: Color(0XFFF1F1F1),
          appBar: AppSettings.supplierAppBarWithActionsText(

              widget.tankerDetails.tanker_name.isNotEmpty
                  ? widget.tankerDetails.tanker_name[0].toUpperCase() +
                  widget.tankerDetails.tanker_name.substring(1)
                  : '',

              context,

              result: true   // ⭐ ADD THIS

          ),
          body: SingleChildScrollView(
            child: Padding(
              padding: const EdgeInsets.all(0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    decoration: const BoxDecoration(
                      color: Color(0XFFFFFFFF),
                      borderRadius: BorderRadius.only(
                        bottomLeft: Radius.circular(24),
                        bottomRight: Radius.circular(24),
                      ),
                    ),
                    padding: const EdgeInsets.all(16),
                    child: Column(
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [

                            Text(
                              "Images (${tankerImageUrls.length}/5)",
                              style: fontTextStyle(
                                  12,
                                  Color(0XFF515253),
                                  FontWeight.w600
                              ),
                            ),

                            Text(
                              "Max 5 allowed",
                              style: fontTextStyle(
                                  10,
                                  Color(0XFF939495),
                                  FontWeight.w400
                              ),
                            ),

                          ],
                        ),

                        SizedBox(height:8),
                        ClipRRect(
                          borderRadius: BorderRadius.circular(12),
                          child: SizedBox(

                            height:180,

                            child:tankerImageUrls.isEmpty

                                ? Image.asset(
                                'images/tanker_image.jpeg',
                                fit:BoxFit.cover
                            )

                                : ListView.builder(

                              scrollDirection:Axis.horizontal,

                              itemCount:tankerImageUrls.length,

                              itemBuilder:(context,index){

                                return Padding(

                                  padding:EdgeInsets.only(right:8),

                                  child:ClipRRect(

                                    borderRadius:
                                    BorderRadius.circular(12),

                                    child:Stack(

                                  children:[

                                    Image.network(

                                      tankerImageUrls[index],

                                      width:250,
                                      height:180,

                                      fit:BoxFit.cover,

                                      errorBuilder:(context,error,stack){

                                        return Container(

                                          width:250,
                                          height:180,

                                          color:Colors.grey[300],

                                          child:Icon(
                                            Icons.image_not_supported,
                                            size:40,
                                            color:Colors.grey,
                                          ),

                                        );

                                      },

                                      loadingBuilder:(context,child,progress){

                                        if(progress == null)
                                          return child;

                                        return Container(

                                          width:250,
                                          height:180,

                                          alignment:Alignment.center,

                                          child:CircularProgressIndicator(),

                                        );

                                      },

                                    ),

                                  /// DELETE BUTTON
                                  Positioned(

                                    top:6,

                                    right:6,

                                    child:GestureDetector(

                                      onTap:(){

                                        showDialog(

                                            context:context,

                                            builder:(context){

                                              return AlertDialog(

                                                title:Text("Delete Image?"),

                                                actions:[

                                                  TextButton(

                                                      onPressed:(){

                                                        Navigator.pop(context);

                                                      },

                                                      child:Text("Cancel")

                                                  ),

                                                  TextButton(

                                                      onPressed:(){

                                                        Navigator.pop(context);

                                                        deleteImage(index);

                                                      },

                                                      child:Text("Delete")

                                                  )

                                                ],

                                              );

                                            }

                                        );

                                      },

                                      child:Container(

                                        decoration:BoxDecoration(

                                            color:Colors.white,

                                            shape:BoxShape.circle

                                        ),

                                        padding:EdgeInsets.all(6),

                                        child:Container(

                                          decoration: BoxDecoration(
                                            shape: BoxShape.circle,
                                          ),

                                          padding: EdgeInsets.all(6),

                                          child: Image.asset(

                                            'images/delete.png',

                                            width: 18,
                                            height: 18,
                                            colorBlendMode: BlendMode.srcIn,

                                          ),

                                        ),

                                      ),

                                    ),

                                  ),

                                  ],

                                ),

                                  ),

                                );

                              },

                            ),

                          ),
                        ),
                        const SizedBox(height: 16),

                        Row(
                          children: widget.tankerDetails.availability
                              .map<Widget>((s) {
                            final chipTextColor = _chipTextColor(s);
                            return Container(
                              margin:
                              const EdgeInsets.only(right: 6),
                              padding: const EdgeInsets.symmetric(
                                  horizontal: 8, vertical: 4),
                              decoration: BoxDecoration(
                                color: _chipColor(s),
                                borderRadius:
                                BorderRadius.circular(8),
                                border: Border.all(
                                    color: chipTextColor, width: 1),
                              ),
                              child: Text(
                                s,
                                style: fontTextStyle(
                                    10,
                                    chipTextColor,
                                    FontWeight.w400),
                              ),
                            );
                          }).toList(),
                        ),

                        const SizedBox(height: 16),

                        Row(
                          crossAxisAlignment:
                          CrossAxisAlignment.start,
                          children: [
                            Expanded(
                              child: Column(
                                crossAxisAlignment:
                                CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    widget.tankerDetails.tanker_name,
                                    style: fontTextStyle(
                                        16,
                                        const Color(0xFF2A2A2A),
                                        FontWeight.w600),
                                  ),
                                  SizedBox(height: 2),
                                  Text(
                                    widget.tankerDetails
                                        .type_of_water +
                                        ' - ' +
                                        widget.tankerDetails
                                            .capacity +
                                        ' L',
                                    style: fontTextStyle(
                                        10,
                                        const Color(0xFF646566),
                                        FontWeight.w400),
                                  ),
                                  SizedBox(height: 2),
                                  Text(
                                    widget.tankerDetails
                                        .license_plate,
                                    style: fontTextStyle(
                                        10,
                                        const Color(0xFF646566),
                                        FontWeight.w400),
                                  ),
                                ],
                              ),
                            ),

                            PopupMenuButton<String>(
                              child: Padding(
                                padding:
                                const EdgeInsets.symmetric(
                                    horizontal: 8.0,
                                    vertical: 8.0),
                                child: Image.asset(
                                  'images/popup_menu.png',
                                  width: 22,
                                  height: 22,
                                  color: Color(0XFF939495),
                                  colorBlendMode:
                                  BlendMode.srcIn,
                                ),
                              ),
                              shape: RoundedRectangleBorder(
                                  borderRadius:
                                  BorderRadius.circular(12)),
                              offset: const Offset(0, 40),
                              color: Colors.white,
                              elevation: 4,
                              onSelected: (value) {
                                if (value == 'edit') {
                                  openTankerSimpleSheet(context);
                                } else if (value ==
                                    'disable') {
                                  ScaffoldMessenger.of(context)
                                      .showSnackBar(
                                    const SnackBar(
                                        content: Text(
                                            'Disable selected')),
                                  );
                                } else if (value ==
                                    'delete') {
                                  showDeleteTankerDialog(
                                      context);
                                }
                              },
                              itemBuilder: (context) => [
                                PopupMenuItem(
                                  value: 'edit',
                                  child: Row(
                                    children: [
                                      Image.asset(
                                        'images/edit.png',
                                        width: 20,
                                        height: 20,
                                        color: Color(
                                            0XFF646566),
                                        colorBlendMode:
                                        BlendMode.srcIn,
                                      ),
                                      const SizedBox(
                                          width: 12),
                                      Text(
                                        'Edit',
                                        style: fontTextStyle(
                                            14,
                                            const Color(
                                                0XFF646566),
                                            FontWeight
                                                .w400),
                                      ),
                                    ],
                                  ),
                                ),
                                PopupMenuItem(
                                  value: 'disable',
                                  child: Row(
                                    children: [
                                      Image.asset(
                                        'images/disable.png',
                                        width: 20,
                                        height: 20,
                                        color: Color(
                                            0XFF646566),
                                        colorBlendMode:
                                        BlendMode.srcIn,
                                      ),
                                      const SizedBox(
                                          width: 12),
                                      Text(
                                        'Disable',
                                        style: fontTextStyle(
                                            14,
                                            const Color(
                                                0XFF646566),
                                            FontWeight
                                                .w400),
                                      ),
                                    ],
                                  ),
                                ),
                                PopupMenuItem(
                                  value: 'delete',
                                  child: Row(
                                    children: [
                                      Image.asset(
                                        'images/delete.png',
                                        width: 20,
                                        height: 20,
                                        color: Color(
                                            0XFFE2483D),
                                        colorBlendMode:
                                        BlendMode.srcIn,
                                      ),
                                      const SizedBox(
                                          width: 12),
                                      Text(
                                        'Delete',
                                        style: fontTextStyle(
                                            14,
                                            const Color(
                                                0xFFE2483D),
                                            FontWeight
                                                .w400),
                                      ),
                                    ],
                                  ),
                                ),
                              ],
                            ),
                          ],
                        ),

                        const SizedBox(height: 12),

                        Row(
                          children: [
                            Expanded(
                                child: ElevatedButton(
                                  style: ElevatedButton.styleFrom(
                                    backgroundColor:
                                    const Color(0xFFFFFFFF),
                                    foregroundColor:
                                    const Color(0xFF515253),
                                    padding:
                                    const EdgeInsets.symmetric(
                                        vertical: 10),
                                    elevation: 0,
                                    shape: RoundedRectangleBorder(
                                      borderRadius:
                                      BorderRadius.circular(
                                          24),
                                      side: const BorderSide(
                                          color:
                                          Color(0xFF939495),
                                          width: 0.5),
                                    ),
                                  ),
                                  onPressed: () async {
                                    _showDropdownBottomSheet(
                                        defaultValue:
                                        currentAvailability);
                                  },
                                  child: Text(
                                    "Change Status",
                                    style: fontTextStyle(
                                        14,
                                        const Color(0xFF515253),
                                        FontWeight.w500),
                                  ),
                                )),
                            SizedBox(width: 8),
                            Expanded(
                                child: ElevatedButton(
                                  style: ElevatedButton.styleFrom(
                                    backgroundColor:
                                    const Color(0xFF8270DB),
                                    foregroundColor:
                                    const Color(0xFFFFFFFF),
                                    padding:
                                    const EdgeInsets.symmetric(
                                        vertical: 10),
                                    elevation: 0,
                                    shape: RoundedRectangleBorder(
                                      borderRadius:
                                      BorderRadius.circular(
                                          24),
                                      side: const BorderSide(
                                          color:
                                          Color(0xFF8270DB),
                                          width: 0.5),
                                    ),
                                  ),
                                  onPressed: () async {
                                    pickNewImages();
                                  },
                                  child: Text(
                                    "Update Images",
                                    style: fontTextStyle(
                                        14,
                                        const Color(0xFFFFFFFF),
                                        FontWeight.w500),
                                  ),
                                )),
                          ],
                        ),
                      ],
                    ),
                  ),

                  Padding(
                    padding: const EdgeInsets.all(16),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [

                        Text(
                          "RECENT TRIPS",
                          style: fontTextStyle(
                              10,
                              const Color(0xFF343637),
                              FontWeight.w600),
                        ),

                        const SizedBox(height: 12),

                        isTankerTripsLoading

                            ? const Center(
                            child: CircularProgressIndicator())

                            : tankerTripsList.isEmpty

                            ? Center(
                          child: Padding(
                            padding: const EdgeInsets.symmetric(
                                vertical: 12),
                            child: Text(
                              'No Data Available',
                              style: fontTextStyle(
                                  12,
                                  const Color(0xFF939495),
                                  FontWeight.w500),
                            ),
                          ),
                        )

                            : ListView.separated(

                          itemCount: tankerTripsList.length,

                          shrinkWrap: true,

                          physics:
                          const NeverScrollableScrollPhysics(),

                          separatorBuilder: (_, __) =>
                          const SizedBox(height: 10),

                          itemBuilder: (context, idx) {

                            final it = tankerTripsList[idx];

                            /// DRIVER NAME
                            String driverName =
                            (it.driver_name != "" &&
                                it.driver_name != "null")
                                ? it.driver_name
                                : it.supplierName;

                            /// DATE + TIME
                            String tripTime = "";

                            if(it.dateOfOrder.isNotEmpty &&
                                it.time.isNotEmpty){

                              tripTime =
                              "${it.dateOfOrder} • ${it.time}";

                            }
                            else{

                              tripTime = "-";

                            }

                            /// PICKUP LOCATION
                            String pickupLocation =
                            (it.water_source_location.isNotEmpty &&
                                it.water_source_location != "null")

                                ? it.water_source_location

                                : "Water Source";

                            /// DELIVERY LOCATION
                            String deliveryLocation =
                            (it.building_name.isNotEmpty)

                                ? it.building_name

                                : it.address;

                            return _buildTripCard(

                              driverName: driverName,

                              time: tripTime,

                              from: pickupLocation,

                              to: deliveryLocation,

                            );

                          },

                        ),

                      ],
                    ),
                  ),

                  // ⭐️ FIX — Removed Expanded (illegal inside ScrollView)

                ],
              ),
            ),
          ),
        ));
  }

  Widget _buildTripCard({
    required String driverName,
    required String time,
    required String from,
    required String to,
  }) {
    return Container(
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        color: const Color(0xFFF8F8F8),
        borderRadius: BorderRadius.circular(12),
      ),
      child: Column(
        crossAxisAlignment:
        CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment:
            MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  const CircleAvatar(
                    radius: 14,
                    backgroundImage:
                    AssetImage('images/avatar.png'),
                  ),
                  const SizedBox(width: 8),
                  Text(
                    driverName,
                    style: const TextStyle(
                      fontWeight: FontWeight.w600,
                      fontSize: 13,
                    ),
                  ),
                ],
              ),
              Text(
                time.isEmpty ? "-" : time,
                style: const TextStyle(
                  fontSize: 11,
                  color: Colors.black54,
                ),
              ),
            ],
          ),
          const SizedBox(height: 8),

          Row(
            children: [
              const Icon(Icons.location_on,
                  color: Color(0xFF4F46E5), size: 16),
              const SizedBox(width: 6),
              Expanded(
                child: Text(
                  from,
                  style: const TextStyle(
                    fontSize: 13,
                    fontWeight: FontWeight.w600,
                    color: Colors.black,
                  ),
                ),
              ),
            ],
          ),
          const SizedBox(height: 4),

          Row(
            children: [
              const Icon(Icons.location_on,
                  color: Colors.red, size: 16),
              const SizedBox(width: 6),
              Expanded(
                child: Text(
                  to,
                  style: const TextStyle(
                    fontSize: 13,
                    fontWeight: FontWeight.w600,
                    color: Colors.black,
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class _LabeledField extends StatelessWidget {
  final String label;
  final Widget child;

  const _LabeledField({required this.label, required this.child});

  String _capFirstWord(String input) {
    if (input.isEmpty) return input;
    final i = input.indexOf(RegExp(r'\S'));
    if (i == -1) return input;
    return input.replaceRange(
        i, i + 1, input[i].toUpperCase());
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding:
      const EdgeInsets.only(bottom: 14.0),
      child: Column(
        crossAxisAlignment:
        CrossAxisAlignment.start,
        children: [
          Text(
            _capFirstWord(label),
            style: fontTextStyle(
                12,
                const Color(0xFF515253),
                FontWeight.w600),
          ),
          const SizedBox(height: 6),
          child,
        ],
      ),
    );
  }
}

