<Layout::Section::Header @title="Fleet-Ops Routing & Tracking">
    <Button
        @type="primary"
        @size="sm"
        @icon="save"
        @text={{t "common.save-changes"}}
        @onClick={{perform this.saveSettings}}
        @disabled={{this.saveSettings.isRunning}}
        @isLoading={{or this.saveSettings.isRunning this.getSettings.isRunning}}
    />
</Layout::Section::Header>

<Layout::Section::Body class="overflow-y-scroll-i h-full">
    <div class="container mx-auto h-screen">
        <div class="max-w-3xl my-10 mx-auto space-y-6">
            <ContentPanel @title={{t "settings.routing.configure-routing"}} @open={{true}} @wrapperClass="bordered-classic">
                <InputGroup @name={{t "settings.routing.routing-service"}} @helpText={{t "settings.routing.routing-service-help-text"}}>
                    <Select
                        @value={{this.displayEngine}}
                        @options={{this.routeEngine.availableServices}}
                        @optionLabel="name"
                        @optionValue="key"
                        @onSelect={{fn (mut this.displayEngine)}}
                        @placeholder={{t "settings.routing.select-routing-service"}}
                        class="w-full"
                    />
                </InputGroup>
                <InputGroup @name="Routing Optimization Engine" @helpText="Choose which engine should optimize stop order before the route is rendered.">
                    <Select
                        @value={{this.optimizationEngine}}
                        @options={{this.routeOptimization.availableServices}}
                        @optionLabel="name"
                        @optionValue="key"
                        @onSelect={{fn (mut this.optimizationEngine)}}
                        @placeholder="Select route optimization engine"
                        class="w-full"
                    />
                </InputGroup>
                <InputGroup @name={{t "settings.routing.routing-distance-unit"}} @helpText={{t "settings.routing.routing-distance-unit-help-text"}}>
                    <Select
                        @value={{this.routingUnit}}
                        @options={{this.routingUnitOptions}}
                        @optionLabel="label"
                        @optionValue="value"
                        @onSelect={{fn (mut this.routingUnit)}}
                        @placeholder={{t "settings.routing.select-routing-distance-unit"}}
                        class="w-full"
                    />
                </InputGroup>
            </ContentPanel>
            <ContentPanel @title="Tracking Intelligence" @open={{true}} @wrapperClass="bordered-classic">
                <InputGroup @name="Tracking Provider" @helpText="Choose the provider used for live tracking intelligence and ETA calculations.">
                    <Select
                        @value={{this.trackingProvider}}
                        @options={{this.trackingProviderOptions}}
                        @optionLabel="label"
                        @optionValue="value"
                        @onSelect={{fn (mut this.trackingProvider)}}
                        @placeholder="Select tracking provider"
                        class="w-full"
                    />
                </InputGroup>
                <InputGroup @name="Fallback Providers" @helpText="Providers used when the selected tracking provider is unavailable.">
                    <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                        <PowerSelectMultiple
                            @searchEnabled={{true}}
                            @searchField="label"
                            @options={{this.trackingProviderOptions}}
                            @selected={{this.selectedTrackingFallbackOptions}}
                            @onChange={{this.setTrackingFallbacks}}
                            @placeholder="Select fallback providers"
                            @triggerClass="form-select form-input flex-1"
                            as |provider|
                        >
                            {{provider.label}}
                        </PowerSelectMultiple>
                    </div>
                </InputGroup>
                <div class="flex justify-end">
                    <Button
                        @type="default"
                        @size="xs"
                        @icon={{if this.showTrackingAdvancedSettings "chevron-up" "chevron-down"}}
                        @text="Advanced Settings"
                        @onClick={{this.toggleTrackingAdvancedSettings}}
                    />
                </div>
                {{#if this.showTrackingAdvancedSettings}}
                    <div class="mt-2 space-y-4 rounded-md border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-800">
                        <InputGroup @name="Traffic-Aware ETA" @helpText="Use provider traffic data when supported.">
                            <Toggle @isToggled={{this.trackingTrafficEnabled}} @onToggle={{fn (mut this.trackingTrafficEnabled)}} />
                        </InputGroup>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <InputGroup @name="Summary Cache TTL" @helpText="Seconds to cache the final tracking summary.">
                                <Input @type="number" @value={{this.trackingCacheTtlSeconds}} min="15" max="300" class="form-input w-full" />
                            </InputGroup>
                            <InputGroup @name="Route Cache TTL" @helpText="Seconds to cache provider route responses.">
                                <Input @type="number" @value={{this.trackingRouteCacheTtlSeconds}} min="60" max="1800" class="form-input w-full" />
                            </InputGroup>
                            <InputGroup @name="Stale Location Threshold" @helpText="Seconds before driver location is marked stale.">
                                <Input @type="number" @value={{this.trackingStaleLocationThresholdSeconds}} min="30" max="3600" class="form-input w-full" />
                            </InputGroup>
                            <InputGroup @name="Fallback Speed" @helpText="Kilometers per hour used by the calculated provider.">
                                <Input @type="number" @value={{this.trackingDefaultVehicleSpeedKph}} min="1" max="160" class="form-input w-full" />
                            </InputGroup>
                        </div>
                    </div>
                {{/if}}
            </ContentPanel>
            <ContentPanel @title="Operational Alerts" @open={{true}} @wrapperClass="bordered-classic">
                <InputGroup @name="Late Departures" @helpText="Notify when an order has not departed after the scheduled pickup window plus the configured grace period.">
                    <Toggle @isToggled={{this.lateDepartureAlertsEnabled}} @onToggle={{fn (mut this.lateDepartureAlertsEnabled)}} />
                </InputGroup>
                <InputGroup @name="Late Departure Grace Period" @helpText="Minutes after scheduled pickup before the order is considered late to depart.">
                    <Input @type="number" @value={{this.lateDepartureGracePeriodMinutes}} min="0" max="1440" class="form-input w-full" />
                </InputGroup>
                <InputGroup @name="Route Deviations" @helpText="Notify when tracked vehicle location drifts beyond the configured distance from the active route.">
                    <Toggle @isToggled={{this.routeDeviationAlertsEnabled}} @onToggle={{fn (mut this.routeDeviationAlertsEnabled)}} />
                </InputGroup>
                <InputGroup @name="Route Deviation Threshold" @helpText="Meters from the active route before a deviation alert is eligible.">
                    <Input @type="number" @value={{this.routeDeviationDistanceThresholdMeters}} min="0" max="100000" class="form-input w-full" />
                </InputGroup>
                <InputGroup @name="Prolonged Stoppages" @helpText="Notify when a vehicle remains stopped beyond the configured duration during an active trip.">
                    <Toggle @isToggled={{this.prolongedStoppageAlertsEnabled}} @onToggle={{fn (mut this.prolongedStoppageAlertsEnabled)}} />
                </InputGroup>
                <InputGroup @name="Prolonged Stoppage Duration" @helpText="Minutes stopped before a stoppage alert is eligible.">
                    <Input @type="number" @value={{this.prolongedStoppageDurationThresholdMinutes}} min="0" max="1440" class="form-input w-full" />
                </InputGroup>
            </ContentPanel>
            <RegistryYield @registry="fleet-ops:template:settings:routing" as |RegistryComponent|>
                <RegistryComponent @controller={{this}} />
            </RegistryYield>
        </div>
        <Spacer @height="600px" />
    </div>
</Layout::Section::Body>
