import 'dart:convert';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:image_picker/image_picker.dart';
import 'package:supplier_new/common/settings.dart';
import 'package:supplier_new/resources/tanker_details.dart';
import 'package:supplier_new/resources/tankers_model.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;

    // Find first non-space char
    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 ResourcesFleetScreen extends StatefulWidget {
  const ResourcesFleetScreen({super.key});

  @override
  State<ResourcesFleetScreen> createState() => _ResourcesFleetScreenState();
}

class _ResourcesFleetScreenState extends State<ResourcesFleetScreen> {
  final _formKey = GlobalKey<FormState>();

  // Controllers (sheet)
  final _nameCtrl = TextEditingController();
  final _capacityCtrl = TextEditingController();
  final _plateCtrl = TextEditingController();
  final _mfgYearCtrl = TextEditingController();
  final _insExpiryCtrl = TextEditingController();

  // Dropdown selections (sheet)
  String? selectedType;
  String? selectedTypeOfWater;

  // Dropdown options (adjust to your backend)
  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;
  List<TankersModel> tankersList = [];
  int activeCount = 0;
  int inactiveCount = 0;
  int maintenanceCount = 0;

  String? selectedFilter;
  String selectedSort = "name";

  List<String> filterOptions = [
    "All",
    "Active",
    "Inactive",
    "Maintenance"
  ];

  List<String> sortOptions = [
    "Name",
    "Capacity"
  ];

  final ImagePicker _picker = ImagePicker();

  List<XFile> tankerImages = [];

  final int maxImages = 5;


  Future<void> pickTankerImages(Function modalSetState) async {

    if(tankerImages.length>=5){

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

      return;

    }

    final images =
    await _picker.pickMultiImage(imageQuality:70);

    if(images!=null){

      int remaining = 5 - tankerImages.length;

      tankerImages.addAll(
          images.take(remaining)
      );

      modalSetState((){});

    }

  }

  Future<void> pickFromCamera(Function modalSetState) async {

    if(tankerImages.length>=5){

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

      return;

    }

    final image =
    await _picker.pickImage(
      source:ImageSource.camera,
      imageQuality:70,
    );

    if(image!=null){

      tankerImages.add(image);

      modalSetState((){});

    }

  }


  @override
  void initState() {
    super.initState();
    _fetchTankers();
  }

  @override
  void dispose() {
    _nameCtrl.dispose();
    _capacityCtrl.dispose();
    _plateCtrl.dispose();
    _mfgYearCtrl.dispose();
    _insExpiryCtrl.dispose();
    super.dispose();
  }

  void _showFilterMenu(BuildContext context, Offset position) async {

    await showMenu<String>(

      context: context,

      color: Colors.white,

      position: RelativeRect.fromLTRB(
          position.dx,
          position.dy,
          position.dx + 200,
          position.dy + 200),

      items: [

        PopupMenuItem<String>(
          enabled: false,
          child: Text(
            "Filter",
            style: fontTextStyle(
                12,
                Color(0XFF2D2E30),
                FontWeight.w600),
          ),
        ),

        ...filterOptions.map((option){

          return PopupMenuItem<String>(

            child: RadioListTile<String>(

              value: option,

              groupValue:
              selectedFilter ?? "All",

              activeColor:
              Color(0XFF1D7AFC),

              onChanged:(value){

                setState(() {

                  selectedFilter =
                  value=="All"
                      ? null
                      : value;

                });

                Navigator.pop(context);

              },

              title: Text(
                option,
                style: fontTextStyle(
                    12,
                    Color(0XFF2D2E30),
                    FontWeight.w400),
              ),

              dense:true,

              visualDensity:
              VisualDensity(
                  horizontal:-4,
                  vertical:-4),

            ),

          );

        }).toList()

      ],

    );

  }

  void _showSortMenu(BuildContext context, Offset position) async {

    await showMenu<String>(

      context: context,

      color: Colors.white,

      position: RelativeRect.fromLTRB(
          position.dx,
          position.dy,
          position.dx + 200,
          position.dy + 200),

      items: [

        PopupMenuItem<String>(
          enabled:false,
          child: Text(
            "Sort",
            style: fontTextStyle(
                12,
                Color(0XFF2D2E30),
                FontWeight.w600),
          ),
        ),

        ...sortOptions.map((option){

          return PopupMenuItem<String>(

            child: RadioListTile<String>(

              value: option,

              groupValue: selectedSort,

              activeColor:
              Color(0XFF1D7AFC),

              onChanged:(value){

                setState(() {

                  selectedSort =
                      value.toString();

                });

                Navigator.pop(context);

              },

              title: Text(
                option,
                style: fontTextStyle(
                    12,
                    Color(0XFF2D2E30),
                    FontWeight.w400),
              ),

              dense:true,

              visualDensity:
              VisualDensity(
                  horizontal:-4,
                  vertical:-4),

            ),

          );

        }).toList()

      ],

    );

  }

  Future<void> _fetchTankers() async {
    setState(() => isLoading = true);
    try {
      final response = await AppSettings.getTankers();
      final data = (jsonDecode(response)['data'] as List)
          .map((e) => TankersModel.fromJson(e))
          .toList();

      int active = 0;
      int inactive = 0;
      int maintenance = 0;

      for (final t in data) {
        final statuses = List<String>.from(t.availability);

        if (statuses.contains('undermaintanence')) {
          maintenance++;
        } else if (statuses.contains('available') || statuses.contains('in-use')|| statuses.contains('empty')) {
          active++;
        } else if (statuses.contains('inactive')) {
          inactive++;
        }
      }

      if (!mounted) return;
      setState(() {
        tankersList = data;
        activeCount = active;
        inactiveCount = inactive;
        maintenanceCount = maintenance;
        isLoading = false;
      });
    } catch (e) {
      debugPrint("⚠️ Error fetching tankers: $e");
      setState(() => isLoading = false);
    }
  }

  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> _addTanker() async {
    // Validate
    final ok = _formKey.currentState?.validate() ?? false;
    if (!ok) {
      setState(() {}); // force rebuild to show errors
      return;
    }

    // Build payload keys to match your backend
    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(),
    };

    try {
      final bool tankStatus = await AppSettings.addTankers(payload);

      if (!mounted) return;

      if (tankStatus) {
        AppSettings.longSuccessToast("Tanker Created Successfully");
        Navigator.pop(context, true);  // close sheet
        _resetForm();
        _fetchTankers();               // refresh from server
      } else {
        AppSettings.longFailedToast("Tanker Creation failed");
      }
    } catch (e) {
      debugPrint("⚠️ addTankers error: $e");
      if (!mounted) return;
      AppSettings.longFailedToast("Something went wrong");
    }
  }

  Future<void> uploadTankerImages(
      String tankerId
      ) async {

    var request = http.MultipartRequest(

        'POST',

        Uri.parse(
            AppSettings.host +
                "uploads_tanker_images/$tankerId"
        )

    );

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

    for(var img in tankerImages){

      request.files.add(

          await http.MultipartFile.fromPath(

              'files',

              img.path

          )

      );

    }

    var response =
    await request.send();

    if(response.statusCode != 200){

      throw Exception(
          "Upload failed"
      );

    }

  }

  Future<void> _addTankerNew() async {

    /// FORM VALIDATION
    final ok = _formKey.currentState?.validate() ?? false;

    if (!ok) {

      setState(() {});

      return;

    }

    try {

      AppSettings.preLoaderDialog(context);

      /// STEP 1 → CREATE TANKER
      final payload = {

        "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(),

      };

      final response =
      await AppSettings.addTankersWithResponse(payload);

      if(response == null){

        Navigator.pop(context);

        AppSettings.longFailedToast(
            "Tanker creation failed"
        );

        return;

      }

      /// IMPORTANT → GET TANKER ID
      String tankerId =
          response["tankerId"] ??
              response["_id"] ??
              "";

      /// STEP 2 → UPLOAD IMAGES
      if(tankerImages.isNotEmpty){

        try{

          await uploadTankerImages(tankerId);

        }
        catch(e){

          debugPrint(
              "Image upload failed $e"
          );

          AppSettings.longFailedToast(
              "Tanker created but images failed"
          );

        }

      }

      Navigator.pop(context);

      if (!mounted) return;

      AppSettings.longSuccessToast(
          "Tanker Created Successfully"
      );

      Navigator.pop(context,true);

      _resetForm();

      _fetchTankers();

    }

    catch (e) {

      Navigator.pop(context);

      debugPrint(
          "⚠️ addTanker error $e"
      );

      if (!mounted) return;

      AppSettings.longFailedToast(
          "Something went wrong"
      );

    }

  }

  Future<void> openTankerSimpleSheet(BuildContext context) async {

    await showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      backgroundColor: Colors.transparent,

      builder: (context) {

        return StatefulBuilder(

          builder: (context, modalSetState) {

            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.characters,
                              inputFormatters: const [
                                FirstCharUppercaseFormatter(), // << live first-letter caps
                              ],
                              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,
                              dropdownColor: Colors.white,
                              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,
                              dropdownColor: Colors.white,
                              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,
                            ),
                          ),

                          _LabeledField(
                            label: "Tanker Images (Max 5)",

                            child: Column(

                              children: [

                                /// IMAGE GRID
                                if(tankerImages.isNotEmpty)

                                  GridView.builder(

                                    shrinkWrap:true,

                                    physics:NeverScrollableScrollPhysics(),

                                    itemCount:tankerImages.length,

                                    gridDelegate:
                                    const SliverGridDelegateWithFixedCrossAxisCount(

                                      crossAxisCount:3,

                                      crossAxisSpacing:8,

                                      mainAxisSpacing:8,

                                    ),

                                    itemBuilder:(context,index){

                                      return Stack(

                                        children:[

                                          ClipRRect(

                                            borderRadius:BorderRadius.circular(8),

                                            child:Image.file(

                                              File(tankerImages[index].path),

                                              width:double.infinity,

                                              height:double.infinity,

                                              fit:BoxFit.cover,

                                            ),

                                          ),

                                          Positioned(

                                            right:4,

                                            top:4,

                                            child:GestureDetector(

                                              onTap:(){

                                                tankerImages.removeAt(index);

                                                modalSetState((){});   /// FIXED

                                              },

                                              child:Container(

                                                decoration:const BoxDecoration(

                                                  color:Colors.red,

                                                  shape:BoxShape.circle,

                                                ),

                                                child:const Icon(

                                                  Icons.close,

                                                  color:Colors.white,

                                                  size:18,

                                                ),

                                              ),

                                            ),

                                          )

                                        ],

                                      );

                                    },

                                  ),

                                const SizedBox(height:10),

                                /// BUTTONS
                                Row(

                                  children:[

                                    Expanded(

                                      child:OutlinedButton.icon(

                                        onPressed:(){

                                          pickTankerImages(modalSetState);   /// FIXED

                                        },

                                        icon:Icon(Icons.photo),

                                        label:Text("Gallery"),

                                      ),

                                    ),

                                    const SizedBox(width:10),

                                    Expanded(

                                      child:OutlinedButton.icon(

                                        onPressed:(){

                                          pickFromCamera(modalSetState);   /// FIXED

                                        },

                                        icon:Icon(Icons.camera_alt),

                                        label:Text("Camera"),

                                      ),

                                    ),

                                  ],

                                ),

                                const SizedBox(height:5),

                                Text(

                                  "${tankerImages.length}/5 images selected",

                                  style: fontTextStyle(
                                      12,
                                      Colors.grey,
                                      FontWeight.w400
                                  ),

                                ),

                              ],

                            ),

                          ),

                          /// SAVE BUTTON (UNCHANGED)

                          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:_addTankerNew,

                              child:Text(

                                "Save",

                                style:fontTextStyle(
                                    14,
                                    Colors.white,
                                    FontWeight.w600
                                ),

                              ),

                            ),

                          ),

                        ],

                      ),

                    ),

                  ),

                ),

              ),

            );

          },

        );

      },

    );

  }

  /*Future<void> openTankerSimpleSheet1(BuildContext context) async {
    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.characters,
                          inputFormatters: const [
                            FirstCharUppercaseFormatter(), // << live first-letter caps
                          ],
                          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,
                          dropdownColor: Colors.white,
                          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,
                          dropdownColor: Colors.white,
                          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,
                        ),
                      ),
                      _LabeledField(
                        label: "Tanker Images (Max 5)",
                        child: Column(
                          children: [

                            /// Grid Images
                            if(tankerImages.isNotEmpty)
                              GridView.builder(
                                shrinkWrap: true,
                                physics: NeverScrollableScrollPhysics(),
                                itemCount: tankerImages.length,
                                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                                  crossAxisCount: 3,
                                  crossAxisSpacing: 8,
                                  mainAxisSpacing: 8,
                                ),
                                itemBuilder: (context,index){

                                  return Stack(
                                    children: [

                                      ClipRRect(
                                        borderRadius: BorderRadius.circular(8),
                                        child: Image.file(
                                          File(tankerImages[index].path),
                                          width: double.infinity,
                                          height: double.infinity,
                                          fit: BoxFit.cover,
                                        ),
                                      ),

                                      Positioned(
                                        right: 4,
                                        top: 4,
                                        child: GestureDetector(

                                          onTap: (){

                                            tankerImages.removeAt(index);

                                            setState(() {});

                                          },

                                          child: Container(
                                            decoration: BoxDecoration(
                                              color: Colors.red,
                                              shape: BoxShape.circle,
                                            ),
                                            child: Icon(
                                              Icons.close,
                                              color: Colors.white,
                                              size: 18,
                                            ),
                                          ),

                                        ),
                                      )

                                    ],
                                  );

                                },
                              ),

                            const SizedBox(height:10),

                            /// Add Buttons
                            Row(
                              children: [

                                Expanded(
                                  child: OutlinedButton.icon(

                                    onPressed: pickTankerImages,

                                    icon: Icon(Icons.photo),

                                    label: Text("Gallery"),

                                  ),
                                ),

                                const SizedBox(width:10),

                                Expanded(
                                  child: OutlinedButton.icon(

                                    onPressed: pickFromCamera,

                                    icon: Icon(Icons.camera_alt),

                                    label: Text("Camera"),

                                  ),
                                ),

                              ],
                            ),

                            const SizedBox(height:5),

                            Text(
                              "${tankerImages.length}/5 images selected",
                              style: fontTextStyle(
                                  12,
                                  Colors.grey,
                                  FontWeight.w400
                              ),
                            ),

                          ],
                        ),
                      ),

                      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: _addTanker,
                          child: Text(
                            "Save",
                            style: fontTextStyle(14, Colors.white, FontWeight.w600),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        );
      },
    );
  }*/




  @override
  Widget build(BuildContext context) {
    List<TankersModel> filtered = tankersList.where((it) {

      final q = search.trim().toLowerCase();

      String capacityClean =
      it.capacity.replaceAll(",", "");

      bool matchesSearch =
          q.isEmpty ||
              it.tanker_name.toLowerCase().contains(q) ||
              capacityClean.contains(q.replaceAll(",", "")) ||
              it.type_of_water.toLowerCase().contains(q);

      bool matchesFilter = true;

      if(selectedFilter=="Active"){
        matchesFilter =
            it.availability.contains('available') ||
                it.availability.contains('in-use') ||
                it.availability.contains('empty');
      }

      if(selectedFilter=="Inactive"){
        matchesFilter =
            it.availability.contains('inactive');
      }

      if(selectedFilter=="Maintenance"){
        matchesFilter =
            it.availability.contains('undermaintanence');
      }

      return matchesSearch && matchesFilter;

    }).toList();

    if(selectedSort=="Name"){
      filtered.sort((a,b)=>
          a.tanker_name.compareTo(b.tanker_name));
    }

    if(selectedSort=="Capacity"){
      filtered.sort((a,b)=>
          int.parse(a.capacity.replaceAll(",",""))
              .compareTo(
              int.parse(b.capacity.replaceAll(",",""))
          ));
    }

    return Scaffold(
      backgroundColor: Colors.white,
      body: Column(
        children: [
          // Header section
          Container(
            color: Colors.white,
            padding: const EdgeInsets.fromLTRB(16, 12, 16, 12),
            child: Column(
              children: [
                const SizedBox(height: 12),
                Container(
                  width: double.infinity,
                  padding: const EdgeInsets.all(14),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(12),
                    border: Border.all(color: const Color(0xFF939495)),
                  ),
                  child: Row(
                    children: [
                      Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Container(
                            width: 40,
                            height: 40,
                            decoration: const BoxDecoration(
                              color: Color(0xFFF6F0FF),
                              borderRadius: BorderRadius.all(Radius.circular(8)),
                            ),
                            child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Image.asset('images/truck.png', fit: BoxFit.contain),
                            ),
                          ),
                          const SizedBox(height: 8),
                          Text('Total Tankers',
                            style: fontTextStyle(12, const Color(0xFF2D2E30), FontWeight.w500),
                          ),
                        ],
                      ),
                      const Spacer(),
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.end,
                          mainAxisSize: MainAxisSize.min,
                          children: [

                            Text(
                              tankersList.length.toString(),
                              style: fontTextStyle(
                                  24,
                                  const Color(0xFF0D3771),
                                  FontWeight.w500),
                            ),

                            const SizedBox(height: 6),
                            tankersList.isEmpty
                                ? Text(
                              'You have not added any tankers please click + button to add new Tanker.',
                              textAlign: TextAlign.right,
                              softWrap: true,
                              style: fontTextStyle(
                                  10,
                                  const Color(0xFF646566),
                                  FontWeight.w400),
                            )
                                : const SizedBox(),

                          ],
                        ),
                      )
                    ],
                  ),
                ),
                const SizedBox(height: 12),
                IntrinsicHeight(
                  child: /*Row(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      Expanded(child: SmallMetricBox(title: 'Active', value: activeCount.toString())),
                      *//*const SizedBox(width: 8),
                      Expanded(child: SmallMetricBox(title: 'Inactive', value: inactiveCount.toString())),*//*
                      const SizedBox(width: 8),
                      Expanded(child: SmallMetricBox(title: 'Under Maintenance', value: maintenanceCount.toString())),
                    ],
                  ),*/
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: [

                        Expanded(
                          child: GestureDetector(
                            onTap: (){
                              setState(() {
                                selectedFilter = "Active";
                              });
                            },
                            child: SmallMetricBox(
                                title: 'Active',
                                value: activeCount.toString()
                            ),
                          ),
                        ),

                        SizedBox(width: 8),

                        Expanded(
                          child: GestureDetector(
                            onTap: (){
                              setState(() {
                                selectedFilter = "Maintenance";

                              });
                            },
                            child: SmallMetricBox(
                                title: 'Under Maintenance',
                                value: maintenanceCount.toString()
                            ),
                          ),
                        ),

                      ],
                    )
                ),
              ],
            ),
          ),

          // List section
          Expanded(
            child: Container(
              color: const Color(0xFFF5F5F5),
              child: Padding(
                padding: const EdgeInsets.fromLTRB(16, 12, 16, 0),
                child: Column(
                  children: [
                    Row(
                      children: [
                        SizedBox(
                          width: 270,
                          child: Container(
                            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
                            decoration: BoxDecoration(
                              border: Border.all(color: const Color(0xFF939495), width: 0.5),
                              borderRadius: BorderRadius.circular(22),
                            ),
                            child: Row(
                              children: [
                                Container(
                                  width: 20,
                                  height: 20,
                                  decoration: const BoxDecoration(
                                    image: DecorationImage(
                                      image: AssetImage('images/search.png'),
                                      fit: BoxFit.contain,
                                    ),
                                  ),
                                ),
                                const SizedBox(width: 8),
                                Expanded(
                                  child: TextField(
                                    decoration: InputDecoration(
                                      hintText: 'Search',
                                      hintStyle: fontTextStyle(12, const Color(0xFF939495), FontWeight.w400),
                                      border: InputBorder.none,
                                      isDense: true,
                                    ),
                                    onChanged: (v) => setState(() => search = v),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                        const SizedBox(width: 16),
                        GestureDetector(

                          onTapDown:(TapDownDetails details){

                            _showFilterMenu(
                                context,
                                details.globalPosition);

                          },

                          child: Container(
                            width: 24,
                            height: 24,
                            decoration: const BoxDecoration(
                              image: DecorationImage(
                                image: AssetImage('images/icon_tune.png'),
                                fit: BoxFit.contain,
                              ),
                            ),
                          ),

                        ),
                        const SizedBox(width: 16),
                        GestureDetector(

                          onTapDown:(TapDownDetails details){

                            _showSortMenu(
                                context,
                                details.globalPosition);

                          },

                          child: Container(
                            width: 24,
                            height: 24,
                            decoration: const BoxDecoration(
                              image: DecorationImage(
                                image: AssetImage('images/up_down_arrow.png'),
                                fit: BoxFit.contain,
                              ),
                            ),
                          ),

                        ),
                      ],
                    ),
                    const SizedBox(height: 12),
                    Expanded(
                      child: isLoading
                          ? const Center(child: CircularProgressIndicator())
                          : (filtered.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: filtered.length,
                        separatorBuilder: (_, __) => const SizedBox(height: 10),
                        itemBuilder: (context, idx) {
                          final it = filtered[idx];
                          return GestureDetector(
                            onTap: () async{
                              final result = await Navigator.push(
                                context,
                                MaterialPageRoute(
                                  builder: (context) => TankerDetailsPage(tankerDetails: it),
                                ),
                              );
                              if (result == true) {
                                _fetchTankers();
                              }
                            },
                            child: TankCard(
                              title: it.tanker_name,
                              subtitle: it.type_of_water,
                              capacity: it.capacity,
                              code: it.license_plate,
                              owner: it.supplier_name,
                              status: List<String>.from(it.availability),
                            ),
                          );
                        },
                      )),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => openTankerSimpleSheet(context),
        backgroundColor: const Color(0xFF000000),
        shape: const CircleBorder(),
        child: const Icon(Icons.add, color: Colors.white),
      ),
    );
  }
}

// ====== SmallMetricBox ======
class SmallMetricBox extends StatelessWidget {
  final String title;
  final String value;

  const SmallMetricBox({super.key, required this.title, required this.value});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: const Color(0xFF939495)),
        color: Colors.white,
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            title,
            maxLines: 2,
            overflow: TextOverflow.ellipsis,
            style: fontTextStyle(12, const Color(0xFF2D2E30), FontWeight.w500),
          ),
          Text(
            value,
            style: fontTextStyle(24, const Color(0xFF0D3771), FontWeight.w500),
          ),
        ],
      ),
    );
  }
}

// ====== TankCard ======
class TankCard extends StatelessWidget {
  final String title;
  final String subtitle;
  final String capacity;
  final String code;
  final String owner;
  final List<String> status;

  const TankCard({
    super.key,
    required this.title,
    required this.subtitle,
    required this.capacity,
    required this.code,
    required this.owner,
    required this.status,
  });

  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;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: Colors.grey.shade200),
      ),
      child: Row(
        children: [
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: status.map((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: 8),
                Text(title, style: fontTextStyle(14, const Color(0xFF343637), FontWeight.w600)),
                const SizedBox(height: 6),
                Text("$subtitle - $capacity L", style: fontTextStyle(10, const Color(0xFF343637), FontWeight.w600)),
                const SizedBox(height: 10),
                Row(
                  children: [
                    Image.asset('images/avatar.png', width: 12, height: 12),
                    const SizedBox(width: 6),
                    Expanded(
                      child: Text(owner, style: fontTextStyle(8, const Color(0xFF646566), FontWeight.w400)),
                    ),
                  ],
                ),
              ],
            ),
          ),
          Column(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Text(code, style: fontTextStyle(10, const Color(0xFF515253), FontWeight.w400)),
              const SizedBox(height: 28),
            ],
          ),
        ],
      ),
    );
  }
}

// ====== Labeled Field Wrapper ======
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,
        ],
      ),
    );
  }
}
