import React, {useEffect, useState, useRef} from "react";
import { useSelector,useDispatch } from "react-redux";
import { useParams, useNavigate } from "react-router-dom";
import { selectAllRoutes, transRoutesSlice, selectTomorrowAllRoutes, selectAllActiveVehicles, selectHistoryRoutes } from "./../../store";
import { Breadcrumb, Tabs, Tab  } from "react-bootstrap";
import RouteCustomerEditor from "./RouteCustomerEditor";
import { AuthService, TransRoutesService, CustomerService, EventsService, EmployeeService } from "../../services";
import TimePicker from 'react-time-picker';
import 'react-time-picker/dist/TimePicker.css';
import moment from 'moment';
import { Archive, GripVertical } from "react-bootstrap-icons";
import { PERSONAL_ROUTE_STATUS } from "../../shared";
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import { useDrag } from 'react-dnd';

const RouteEdit = () => {
  const params = useParams();
  const allRoutes = useSelector(selectAllRoutes);
  const tomorrowRoutes = useSelector(selectTomorrowAllRoutes);
  const historyRoutes = useSelector(selectHistoryRoutes);
  const vehicles = useSelector(selectAllActiveVehicles);
  // const currentRoute = (allRoutes.find(item => item.id === params.id)) || (tomorrowRoutes.find(item => item.id === params.id)) || (historyRoutes.find(item => item.id === params.id)) || {};
  const currentVehicle = vehicles.find(item => item.id === currentRoute?.vehicle ) || [];
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const { updateRoute} = transRoutesSlice.actions;
  const [routeName, setRouteName] = useState('');
  const [newDriver, setNewDriver] = useState('');
  const [newVehicle, setNewVehicle] = useState('');
  const [newRouteType, setNewRouteType] = useState('');
  const [newCustomerList, setNewCustomerList] = useState([]);
  const [errorMessage, setErrorMessage] = useState(undefined);
  const [estimatedStartTime, setEstimatedStartTime] = useState(undefined);
  const [currentRoute, setCurrentRoute] = useState(undefined);
  const [allCustomers, setAllCustomers] = useState([]);
  const [driverOptions, setDriverOptions] = useState([]);
  const [unassignedCustomers, setUnassignedCustomers] = useState([]);
  const [addCustomerToRoute, setAddCustomerToRoute] = useState(null);
  const [attendanceAbsentCustomers, setAttendanceAbsentCustomers] = useState([]); // customers with attendance notes on route date
  const initialCustomerListRef = useRef(null);
  const paramsQuery = new URLSearchParams(window.location.search);
  const isDriverEligibleEmployee = (employee) => {
    if (!employee || employee.status !== 'active') return false;
    const roles = Array.isArray(employee.roles) ? employee.roles.map((item) => `${item || ''}`.toLowerCase()) : [];
    const permissions = Array.isArray(employee.permissions) ? employee.permissions : [];
    return roles.includes('driver') || permissions.includes('isDriver');
  };
  const buildExternalDriverOptions = (records = []) => {
    return (records || [])
      .filter((record) => Array.isArray(record?.permissions) && record.permissions.includes('isDriver'))
      .map((record) => ({
        id: record?.external_user_id,
        name: record?.name || record?.username || '',
        name_cn: '',
        title: record?.title || '',
        employment_status: 'external',
        license_type: '',
        phone: '',
        email: record?.email || '',
        status: 'active'
      }))
      .filter((record) => record.id && record.name);
  };

  const scheduleDate = paramsQuery.get('dateSchedule');
  const editSection = paramsQuery.get('editSection')
  const hasUnsavedCustomerChanges = () => {
    if (!initialCustomerListRef.current || editSection !== 'assignment') return false;
    const current = JSON.stringify(
      (newCustomerList || []).map(c => c.customer_id).sort()
    );
    return current !== initialCustomerListRef.current;
  };

  const confirmNavigate = (navigateFn) => {
    if (hasUnsavedCustomerChanges()) {
      if (window.confirm('You have unsaved changes to the customer assignment. Are you sure you want to leave without saving?')) {
        navigateFn();
      }
    } else {
      navigateFn();
    }
  };

  // Warn on browser refresh / tab close
  useEffect(() => {
    const handleBeforeUnload = (e) => {
      if (hasUnsavedCustomerChanges()) {
        e.preventDefault();
        e.returnValue = '';
      }
    };
    window.addEventListener('beforeunload', handleBeforeUnload);
    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
  }, [newCustomerList, editSection]);

  const redirectToView = () => {
    const go = () => {
      if (scheduleDate) {
        navigate(`/trans-routes/${params.id}?dateSchedule=${scheduleDate}`);
      } else {
        navigate(`/trans-routes/${params.id}`);
      }
    };
    confirmNavigate(go);
  }

  const redirectToDashboard = () => {
    confirmNavigate(() => navigate(`/trans-routes/dashboard`));
  }

  const softDeleteCurrentRoute = () => {
    if (!window.confirm('Are you sure you want to archive this route? This action cannot be undone.')) {
      return;
    }
    const data = Object.assign({}, currentRoute, {status: ['disabled']})
    dispatch(updateRoute({ id: currentRoute?.id, data, callback: redirectToDashboard }));
    // redirectToDashboard();
  }

  const validateRoute = () => {
    const errors = [];
    
    // Required fields validation
    if (!routeName || routeName.trim() === '') {
      errors.push('Route Name');
    }
    if (!newRouteType || newRouteType === '') {
      errors.push('Route Type');
    }
    if (!newDriver || newDriver === '') {
      errors.push('Driver');
    }
    if (!newVehicle || newVehicle === '') {
      errors.push('Vehicle');
    }
    
    if (errors.length > 0) {
      window.alert(`Please fill in the following required fields:\n${errors.join('\n')}`);
      return false;
    }
    return true;
  };

  const normalizeAddressText = (value) => {
    return (value || '')
      .toString()
      .toLowerCase()
      .replace(/\([^)]*\)/g, ' ')
      .replace(/[^a-z0-9]/g, ' ')
      .replace(/\s+/g, ' ')
      .trim();
  };

  const formatStructuredAddress = (line1, line2, city, state, zipCode, note) => {
    const cityState = [city, state].filter(Boolean).join(', ');
    const mainAddress = [line1, line2, cityState, zipCode]
      .filter((item) => item && String(item).trim() !== '')
      .join(' ')
      .trim();
    const addressNote = (note || '').trim();
    if (!mainAddress) return '';
    return addressNote ? `${mainAddress} (${addressNote})` : mainAddress;
  };

  const getStructuredAddresses = (customerProfile) => {
    if (!customerProfile) return [];
    return [
      formatStructuredAddress(customerProfile.address_line_1, customerProfile.address_line_2, customerProfile.city, customerProfile.state, customerProfile.zip_code, customerProfile.address_note),
      formatStructuredAddress(customerProfile.address2_line_1, customerProfile.address2_line_2, customerProfile.city2, customerProfile.state2, customerProfile.zip_code2, customerProfile.address2_note),
      formatStructuredAddress(customerProfile.address3_line_1, customerProfile.address3_line_2, customerProfile.city3, customerProfile.state3, customerProfile.zip_code3, customerProfile.address3_note),
      formatStructuredAddress(customerProfile.address4_line_1, customerProfile.address4_line_2, customerProfile.city4, customerProfile.state4, customerProfile.zip_code4, customerProfile.address4_note)
    ].filter((addr) => (addr || '').trim() !== '');
  };

  const updateCurrentRoute = () => {
    try {
      if (!validateRoute()) {
        return;
      }
      // Do not persist scheduled-absence entries into route_customer_list.
      const filteredCustomerList = (newCustomerList || []).filter(
        (customer) => customer?.customer_route_status !== PERSONAL_ROUTE_STATUS.SCHEDULED_ABSENT
      );
      const existingRouteCustomers = currentRoute?.route_customer_list || [];
      const existingByCustomerId = new Map(existingRouteCustomers.map((c) => [c?.customer_id, c]));
      const customerProfileById = new Map((allCustomers || []).map((c) => [c?.id, c]));
      const stabilizedCustomerList = filteredCustomerList.map((customerItem) => {
        const existingCustomer = existingByCustomerId.get(customerItem?.customer_id);
        if (!existingCustomer?.customer_address) return customerItem;

        const customerProfile = customerProfileById.get(customerItem?.customer_id);
        const structuredAddresses = getStructuredAddresses(customerProfile);
        if (structuredAddresses.length === 0) return customerItem;

        const structuredAddressSet = new Set(structuredAddresses.map(normalizeAddressText).filter(Boolean));
        const existingAddressNormalized = normalizeAddressText(existingCustomer.customer_address);
        if (!existingAddressNormalized) return customerItem;

        // Keep the route's current address if it no longer exists in DB structured addresses.
        if (!structuredAddressSet.has(existingAddressNormalized)) {
          return Object.assign({}, customerItem, { customer_address: existingCustomer.customer_address });
        }
        return customerItem;
      });

      let data = Object.assign({}, currentRoute, {name: routeName, driver: newDriver, vehicle: newVehicle, type: newRouteType, route_customer_list: stabilizedCustomerList});
      if (estimatedStartTime && estimatedStartTime !== '') {
        data = Object.assign({}, data, {estimated_start_time: combineDateAndTime(currentRoute.schedule_date, estimatedStartTime)})
      }
      let payload = { id: currentRoute?.id, data };
      if ((historyRoutes.find(item => item.id === params.id)) || (scheduleDate && new Date(data.schedule_date) > new Date())) {
        payload = Object.assign({}, payload, {dateText: data.schedule_date});
        if (scheduleDate && new Date(data.schedule_date) > new Date()) {
          payload = Object.assign({}, payload, {fromSchedule: true});
        }
      }
      initialCustomerListRef.current = JSON.stringify(
        (newCustomerList || []).map(c => c.customer_id).sort()
      );
      payload.callback = redirectToView;
      dispatch(updateRoute(payload));
      // TransRoutesService.updateInProgress(data);
      // setTimeout(() => {
      //   redirectToView();
      // }, 5000);
    } catch(ex) {

    }
  }

  const combineDateAndTime = (date, time) => {
    const dateObj = moment(date);
    const timeObj = moment(time, 'HH:mm');
    dateObj.set({
      hour: timeObj.get('hour'),
      minute: timeObj.get('minute'),
      second: timeObj.get('second')
    })
    return dateObj;
  }

  const calculateUnassignedCustomers = (customers, routes) => {
    if (!customers || !routes) return [];
    
    // Get all customer IDs that are assigned to any route today
    const assignedCustomerIds = new Set();
    routes.forEach(route => {
      route.route_customer_list?.forEach(customer => {
        assignedCustomerIds.add(customer.customer_id);
      });
    });
    
    // Filter out customers that are not assigned to any route
    // Also exclude discharged customers (type is 'discharged' or name contains 'discharged')
    return customers.filter(customer => {
      const isDischarged = customer.type === 'discharged' || 
                          (customer.name && customer.name.toLowerCase().includes('discharged')) ||
                          (customer.status !== 'active');
      return customer.status === 'active' && 
             !assignedCustomerIds.has(customer.id) &&
             !isDischarged;
    });
  }

  // Helper: check if a recurring rule has an occurrence on a specific date
  const recurRuleFallsOnDate = (rule, targetDate) => {
    const start = new Date(rule.start_repeat_date);
    const end = new Date(rule.end_repeat_date);
    const target = new Date(targetDate);
    // Normalize to date-only comparison
    start.setHours(0, 0, 0, 0);
    end.setHours(0, 0, 0, 0);
    target.setHours(0, 0, 0, 0);

    if (target < start || target > end) return false;

    const freq = rule.rrule;
    let current = new Date(start);
    let count = 0;
    while (current <= target && count < 5000) {
      if (current.getTime() === target.getTime()) return true;
      if (freq === 'FREQ=DAILY') {
        current = new Date(current.getTime() + 24 * 60 * 60 * 1000);
      } else if (freq === 'FREQ=WEEKLY') {
        current = new Date(current.getTime() + 7 * 24 * 60 * 60 * 1000);
      } else if (freq === 'FREQ=MONTHLY') {
        const next = new Date(current);
        next.setMonth(next.getMonth() + 1);
        current = next;
      } else if (freq === 'FREQ=YEARLY') {
        const next = new Date(current);
        next.setFullYear(next.getFullYear() + 1);
        current = next;
      } else {
        break;
      }
      count++;
    }
    return false;
  };

  useEffect(() => {
    if (!AuthService.canAddOrEditRoutes()) {
      window.alert('You haven\'t login yet OR this user does not have access to this page. Please change an admin account to login.')
      AuthService.logout();
      navigate(`/login`);
    }
    TransRoutesService.getRoute(params.id).then(data => {
      setCurrentRoute(data?.data);
      setRouteName(data?.data?.name);
      setNewDriver(data?.data?.driver);
      setNewVehicle(data?.data?.vehicle);
      setNewRouteType(data?.data?.type);
      setEstimatedStartTime(data?.data?.estimated_start_time && new Date(data?.data?.estimated_start_time));
      setNewCustomerList(data?.data?.route_customer_list);
      initialCustomerListRef.current = JSON.stringify(
        (data?.data?.route_customer_list || []).map(c => c.customer_id).sort()
      );
      setErrorMessage(undefined);
    })
    
    // Fetch all customers
    CustomerService.getAllCustomers().then(data => {
      setAllCustomers(data?.data || []);
    });
    Promise.all([
      EmployeeService.getAllEmployees(),
      EmployeeService.getExternalUserPermissionsList(EventsService.site)
    ]).then(([employeeResponse, externalPermissionResponse]) => {
      const employees = employeeResponse?.data || [];
      const internalDrivers = employees.filter(isDriverEligibleEmployee);
      const externalDrivers = buildExternalDriverOptions(externalPermissionResponse?.data || []);
      const mergedById = new Map();
      [...internalDrivers, ...externalDrivers].forEach((driverItem) => {
        if (!driverItem?.id) return;
        if (!mergedById.has(driverItem.id)) {
          mergedById.set(driverItem.id, driverItem);
        }
      });
      setDriverOptions(Array.from(mergedById.values()));
    });
  }, []);

  // Calculate unassigned customers when allCustomers or routes change
  useEffect(() => {
    if (!currentRoute?.schedule_date) return;
    
    const routeDate = currentRoute.schedule_date;
    
    // Get routes from the same date as the current route (excluding current route which we'll handle separately)
    const sameDateRoutes = [
      ...allRoutes.filter(route => route.schedule_date === routeDate && route.id !== currentRoute.id),
      ...tomorrowRoutes.filter(route => route.schedule_date === routeDate && route.id !== currentRoute.id),
      ...historyRoutes.filter(route => route.schedule_date === routeDate && route.id !== currentRoute.id)
    ];
    
    // Add a virtual route with the current newCustomerList (to include customers being added in the editor)
    const routesWithCurrentEdits = [
      ...sameDateRoutes,
      { route_customer_list: newCustomerList || [] }
    ];
    
    // Also exclude attendance-absent customers from unassigned list
    const attendanceAbsentIds = new Set(attendanceAbsentCustomers.map(c => c.customer_id));
    const unassigned = calculateUnassignedCustomers(allCustomers, routesWithCurrentEdits)
      .filter(customer => !attendanceAbsentIds.has(customer.id));
    setUnassignedCustomers(unassigned);
  }, [allCustomers, allRoutes, tomorrowRoutes, historyRoutes, currentRoute, newCustomerList, attendanceAbsentCustomers]);

  // Fetch attendance notes (single + recurring) for the route date
  useEffect(() => {
    if (!currentRoute?.schedule_date || !allCustomers?.length) return;
    
    const routeDate = currentRoute.schedule_date; // MM/DD/YYYY
    // Convert to YYYY-MM-DD for the API
    const dateParts = routeDate.split('/');
    if (dateParts.length !== 3) return;
    const apiDate = `${dateParts[2]}-${dateParts[0].padStart(2, '0')}-${dateParts[1].padStart(2, '0')}`;
    // Parse into a Date object for recurring rule checking
    const routeDateObj = new Date(parseInt(dateParts[2]), parseInt(dateParts[0]) - 1, parseInt(dateParts[1]));
    routeDateObj.setHours(0, 0, 0, 0);

    // Fetch single attendance notes and recurring rules in parallel
    Promise.all([
      EventsService.getAllEvents({ date: apiDate, type: 'incident' }),
      EventsService.getAllEventRecurrences()
    ]).then(([eventsRes, recurRes]) => {
      const absentCustomerIds = new Set();
      const attendanceReasonsByCustomer = new Map();
      const addAttendanceReason = (customerId, reasonText) => {
        if (!customerId || !reasonText) return;
        const cleaned = `${reasonText}`.trim();
        if (!cleaned) return;
        const existing = attendanceReasonsByCustomer.get(customerId) || [];
        if (!existing.includes(cleaned)) {
          attendanceReasonsByCustomer.set(customerId, [...existing, cleaned]);
        }
      };
      const extractAttendanceReason = (item) => {
        return item?.description || item?.data?.description || item?.data?.note || item?.title || '';
      };

      // Single attendance notes for this date
      const singleNotes = (eventsRes?.data || []).filter(
        e => e.type === 'incident' && e.status === 'active' && e.target_uuid
      );
      singleNotes.forEach(note => {
        absentCustomerIds.add(note.target_uuid);
        addAttendanceReason(note.target_uuid, extractAttendanceReason(note));
      });

      // Recurring attendance rules that fall on this date
      const recurRules = (recurRes?.data || []).filter(
        r => r.type === 'incident' && r.status === 'active' && r.target_uuid && r.rrule
      );
      recurRules.forEach(rule => {
        if (recurRuleFallsOnDate(rule, routeDateObj)) {
          absentCustomerIds.add(rule.target_uuid);
          addAttendanceReason(rule.target_uuid, extractAttendanceReason(rule));
        }
      });

      // Build the list of absent customer objects
      const absentList = [];
      absentCustomerIds.forEach(customerId => {
        const customer = allCustomers.find(c => c.id === customerId);
        if (customer) {
          const reasons = attendanceReasonsByCustomer.get(customer.id) || [];
          absentList.push({
            customer_id: customer.id,
            customer_name: customer.name,
            customer_address: customer.address1 || '',
            customer_route_status: PERSONAL_ROUTE_STATUS.SCHEDULED_ABSENT,
            customer_pickup_status: 'scheduleAbsent',
            attendance_note: reasons.join('; '),
            _attendance_based: true // flag to identify these are from attendance notes
          });
        }
      });
      setAttendanceAbsentCustomers(absentList);
    });
  }, [currentRoute?.schedule_date, allCustomers]);

  // useEffect(() => {
  //   if (currentRoute) {
  //     setRouteName(currentRoute.name);
  //     setNewDriver(currentRoute.driver);
  //     setNewVehicle(currentRoute.vehicle);
  //     setNewRouteType(currentRoute.type);
  //     setEstimatedStartTime(currentRoute.estimated_start_time && new Date(currentRoute.estimated_start_time));
  //     setNewCustomerList(currentRoute.route_customer_list);
  //   }
  //   setErrorMessage(undefined);
  // }, [currentRoute])

  // Draggable component for unassigned customers
  const DraggableUnassignedCustomer = ({ customer }) => {
    const [{ isDragging }, drag] = useDrag({
      type: 'UNASSIGNED_CUSTOMER',
      item: () => customer,
      collect: (monitor) => ({
        isDragging: monitor.isDragging(),
      }),
    });

    const opacity = isDragging ? 0.5 : 1;

    return (
      <div ref={drag} style={{ opacity }} className="customers-dnd-item-container-absent">
        <GripVertical className="me-4" size={20}></GripVertical>
        <div className="customer-dnd-item">
          <span>{customer.name} </span>
          <small className="me-2">{customer.address1}</small>
          <small className="me-2">{customer.type}</small>
        </div>
      </div>
    );
  };

  return (
    <>
      <div className="list row mb-4">
        <Breadcrumb>
          <Breadcrumb.Item href="/trans-routes/dashboard">Transportation</Breadcrumb.Item>
          <Breadcrumb.Item href="/trans-routes/dashboard">
            Transportation Routes
          </Breadcrumb.Item>
          <Breadcrumb.Item active>
            Edit Route
          </Breadcrumb.Item>
        </Breadcrumb>
        <div className="col-md-12 text-primary">
           <h4>
             Edit Route Information <button className="btn btn-link btn-sm" onClick={() => {redirectToView()}}>Back</button>
           </h4> 
        </div>
      </div>

      <div className="app-main-content-list-container form-page">
				<div className="app-main-content-list-func-container">
					<Tabs defaultActiveKey="routeOverview" id="route-view-tab">
						<Tab eventKey="routeOverview" title="Route Information">
              { editSection === 'info' && <div className="multi-columns-container">
                <div className="column-container">
                  <div className="column-card">
                    <h6 className="text-primary">Route Details</h6>
                    <div className="app-main-content-fields-section">
                      <div className="me-4">
                        <div className="field-label">Route Name
                          <span className="required">*</span>
                        </div>
                        <input type="text" value={routeName || ''} onChange={e => setRouteName(e.target.value)}/>
                      </div>
                      <div className="me-4">
                        <div className="field-label">Vehicle
                          <span className="required">*</span>
                        </div>
                        <select value={newVehicle} onChange={e => setNewVehicle(e.target.value)}>
                          {vehicles.map((vehicle) => (<option key={vehicle.id} value={vehicle.id}>{vehicle.vehicle_number}</option>))}
                        </select>
                      </div>
                    </div>
                    <div className="app-main-content-fields-section">
                      <div className="me-4">
                        <div className="field-label">Driver
                          <span className="required">*</span>
                        </div>
                        <select value={newDriver} onChange={e => setNewDriver(e.target.value)}>
                          {driverOptions.map((driver) => <option key={driver.id} value={driver.id}>{driver.name}</option>)}
                        </select>
                      </div>
                      <div className="me-4">
                        <div className="field-label">Route Type
                          <span className="required">*</span>
                        </div>
                        <select value={newRouteType} onChange={e => setNewRouteType(e.target.value)}>
                          <option value="inbound">Inbound</option>
                          <option value="outbound">Outbound</option>
                        </select>
                      </div>
                    </div>
                    { newRouteType === 'outbound' && <div className="app-main-content-fields-section">
                      <div className="me-4">
                        <div className="field-label">Estimated Start Time
                        </div>
                        <TimePicker disableClock={true} format={'HH:mm'} value={estimatedStartTime} onChange={setEstimatedStartTime} />
                      </div>
                    </div>}
                    <div className="app-main-content-fields-section">
                      <div className="me-4">
                        <div className="field-label">Vehicle Checklist
                        </div>
                        { vehicles.find(item => item.id === newVehicle)?.checklist?.length > 0 && (<table className="mb-4">
                          <tbody>
                            {vehicles.find(item => item.id === newVehicle)?.checklist?.map((item, index) => (<tr key={index}><td>{item}</td></tr>))}
                          </tbody>
                        </table>) }
                      </div>
                    </div>
                    <div className="list row mb-5">
                      <div className="col-md-12 col-sm-12 col-xs-12">
                        <button className="btn btn-default btn-sm float-right" onClick={() => redirectToView()}> Cancel </button>
                        <button className="btn btn-primary btn-sm float-right" onClick={() => updateCurrentRoute()}> Save </button>
                      </div>
                      {errorMessage && <div className="col-md-12 col-sm-12 col-xs-12 alert alert-danger mt-4">{errorMessage}</div>}
                    </div>
                  </div>
                </div>
                <div className="column-container">
                  { newVehicle && newVehicle !== '' && <div className="column-card mb-4">
                    <h6 className="text-primary">Vehicle Information</h6>
                    <div className="app-main-content-fields-section short">
                      <div className="field-body">
                        <div className="field-label">Vehicle Number</div>
                        <div className="field-value">{vehicles.find(item => item.id === newVehicle)?.vehicle_number}</div>
                      </div>
                      <div className="field-body">
                        <div className="field-label">Seating Capacity</div>
                        <div className="field-value">{vehicles.find(item => item.id === newVehicle)?.capacity}</div>
                      </div>
                      <div className="field-body">
                        <div className="field-label">Mileage</div>
                        <div className="field-value">{vehicles.find(item => item.id === newVehicle)?.mileage}</div>
                      </div>
                      <div className="field-body">
                        <div className="field-label">Make</div>
                        <div className="field-value">{vehicles.find(item => item.id === newVehicle)?.make}</div>
                      </div>
                      <div className="field-body">
                        <div className="field-label">Model</div>
                        <div className="field-value">{vehicles.find(item => item.id === newVehicle)?.model}</div>
                      </div>
                    </div>
                    <div className="app-main-content-fields-section short">
                      <div className="field-body">
                        <div className="field-label">License Plate</div>
                        <div className="field-value">{vehicles.find(item => item.id === newVehicle)?.tag}</div>
                      </div>
                      <div className="field-body">
                        <div className="field-label">Year</div>
                        <div className="field-value">{vehicles.find(item => item.id === newVehicle)?.year}</div>
                      </div>
                      <div className="field-body">
                        <div className="field-label">GPS ID</div>
                        <div className="field-value">{vehicles.find(item => item.id === newVehicle)?.gps_tag}</div>
                      </div>
                      <div className="field-body">
                        <div className="field-label">EZPass</div>
                        <div className="field-value">{vehicles.find(item => item.id === newVehicle)?.ezpass}</div>
                      </div>
                      <div className="field-body">
                        <div className="field-label">Vin</div>
                        <div className="field-value">{vehicles.find(item => item.id === newVehicle)?.vin || ''}</div>
                      </div>
                    </div>
                  </div>}
                  {
                    newDriver && newDriver !== '' && <div className="column-card">
                      <h6 className="text-primary">Driver Information</h6>
                      <small className="text-primary">Personal Details</small>
                      <div className="app-main-content-fields-section short">
                        <div className="field-body">
                          <div className="field-label">Driver Name</div>
                          <div className="field-value">{driverOptions.find(item => item.id === newDriver)?.name}</div>
                        </div>
                        <div className="field-body">
                          <div className="field-label">Preferred Name</div>
                          <div className="field-value">{driverOptions.find(item => item.id === newDriver)?.name_cn}</div>
                        </div>
                        <div className="field-body">
                          <div className="field-label">Job Title</div>
                          <div className="field-value">{driverOptions.find(item => item.id === newDriver)?.title}</div>
                        </div>
                        <div className="field-body">
                          <div className="field-label">Job Type</div>
                          <div className="field-value">{driverOptions.find(item => item.id === newDriver)?.employment_status}</div>
                        </div>
                        <div className="field-body">
                          <div className="field-label">License Type</div>
                          <div className="field-value">{driverOptions.find(item => item.id === newDriver)?.license_type}</div>
                        </div>
                      </div>
                      <div className="app-main-content-fields-section short">
                        <div className="field-body">
                          <div className="field-label">Phone Number</div>
                          <div className="field-value">{driverOptions.find(item => item.id === newDriver)?.phone}</div>
                        </div>
                        <div className="field-body">
                          <div className="field-label">Email</div>
                          <div className="field-value">{driverOptions.find(item => item.id === newDriver)?.email}</div>
                        </div>
                        <div className="field-body"></div>
                        <div className="field-body"></div>
                        <div className="field-body"></div>
                      </div>
                    </div>
                  }
                </div>
              </div> }

              {
                editSection === 'assignment' && <DndProvider backend={HTML5Backend}>
                  <div className="multi-columns-container">
                    <div className="column-container">
                      <div className="column-card adjust" style={{paddingRight: '30px'}}>
                        <div className="col-md-12 mb-4">
                          {(() => {
                            const existingScheduledAbsentIds = (currentRoute?.route_customer_list || [])
                              .filter((customer) => customer?.customer_route_status === PERSONAL_ROUTE_STATUS.SCHEDULED_ABSENT)
                              .map((customer) => customer?.customer_id)
                              .filter(Boolean);
                            const attendanceBasedAbsentIds = (attendanceAbsentCustomers || [])
                              .map((customer) => customer?.customer_id)
                              .filter(Boolean);
                            const mergedAbsentIds = Array.from(new Set([].concat(existingScheduledAbsentIds, attendanceBasedAbsentIds)));
                            return (
                          <RouteCustomerEditor 
                            currentRoute={currentRoute ? {
                              ...currentRoute,
                              route_customer_list: currentRoute.route_customer_list?.filter(
                                customer => customer?.customer_route_status !== PERSONAL_ROUTE_STATUS.SCHEDULED_ABSENT
                              ) || []
                            } : undefined} 
                            setNewCustomerList={setNewCustomerList}
                            onAddCustomer={(addFn) => setAddCustomerToRoute(() => addFn)}
                            scheduledAbsentCustomerIds={mergedAbsentIds}
                          />
                            );
                          })()}
                        </div>
                      </div>
                    </div>
                    <div className="column-container">
                      <div className="column-card adjust">
                        <h6 className="text-primary">Scheduled Absences ({(() => {
                          const existingAbsent = currentRoute?.route_customer_list?.filter(item => item?.customer_route_status === PERSONAL_ROUTE_STATUS.SCHEDULED_ABSENT) || [];
                          const existingIds = new Set(existingAbsent.map(a => a.customer_id));
                          const attendanceOnly = attendanceAbsentCustomers.filter(a => !existingIds.has(a.customer_id));
                          return existingAbsent.length + attendanceOnly.length;
                        })()})</h6>
                        <div className="customers-container mb-4">
                          {
                            // Existing scheduled absences from route data
                            currentRoute?.route_customer_list?.filter(customer => customer?.customer_route_status === PERSONAL_ROUTE_STATUS.SCHEDULED_ABSENT)?.map((abItem) => {
                              return <div key={abItem.customer_id} className="customers-dnd-item-container-absent">
                                <GripVertical className="me-4" size={20}></GripVertical>
                                <div className="customer-dnd-item">
                                  <span>{abItem.customer_name} </span>
                                    <small className="me-2">{abItem.customer_address}</small>
                                    <small className="me-2">{abItem.customer_pickup_status}</small>
                                </div>
                              </div>
                            })
                          }
                          {
                            // Attendance-based absences (not already in existing scheduled absences)
                            (() => {
                              const existingIds = new Set(
                                (currentRoute?.route_customer_list?.filter(c => c?.customer_route_status === PERSONAL_ROUTE_STATUS.SCHEDULED_ABSENT) || [])
                                  .map(a => a.customer_id)
                              );
                              return attendanceAbsentCustomers
                                .filter(a => !existingIds.has(a.customer_id))
                                .map((abItem) => (
                                  <div key={`att-${abItem.customer_id}`} className="customers-dnd-item-container-absent" style={{ opacity: 0.85 }}>
                                    <GripVertical className="me-4" size={20}></GripVertical>
                                    <div className="customer-dnd-item">
                                      <span>{abItem.customer_name} </span>
                                      <small className="me-2">{abItem.customer_address}</small>
                                      {!!abItem.attendance_note && <small className="me-2 text-muted">({abItem.attendance_note})</small>}
                                    </div>
                                  </div>
                                ));
                            })()
                          }
                        </div>
                      </div>
                    </div>
                    <div className="column-container">
                      <div className="column-card adjust">
                        <h6 className="text-primary">Unassigned Customers ({unassignedCustomers?.length || 0})</h6>
                        <div className="customers-container mb-4">
                          {
                            unassignedCustomers?.map((customer) => {
                              return <DraggableUnassignedCustomer key={customer.id} customer={customer} />
                            })
                          }
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="list row mb-5 mt-4">
                    <div className="col-md-12 col-sm-12 col-xs-12">
                      <button className="btn btn-default btn-sm float-right" onClick={() => redirectToView()}> Cancel </button>
                      <button className="btn btn-primary btn-sm float-right" onClick={() => updateCurrentRoute()}> Save </button>
                    </div>
                    {errorMessage && <div className="col-md-12 col-sm-12 col-xs-12 alert alert-danger mt-4">{errorMessage}</div>}
                  </div>
                </DndProvider>
              }
            </Tab>
          </Tabs>
          <div className="list-func-panel">
            <button className="btn btn-primary" onClick={() => softDeleteCurrentRoute()}><Archive size={16} className="me-2"></Archive>Delete</button>
          </div>
        </div>
      </div>

    
    </>
    
  );
};

export default RouteEdit;