<div class="space-y-6">
    <InfoBlock @type="info" @icon="circle-info" class="mb-4">
        Configure system-wide routing engine defaults here. Organizations can optionally override these values from their own routing settings.
    </InfoBlock>

    <ContentPanel @title="Tracking Defaults" @open={{true}} @wrapperClass="bordered-classic">
        <InputGroup @name="Default Tracking Provider" @helpText="Default provider for organization-level tracking intelligence unless an organization overrides it.">
            <Select
                class="w-full"
                @value={{this.trackingProvider}}
                @options={{this.trackingProviderOptions}}
                @optionLabel="label"
                @optionValue="value"
                @placeholder="Select default tracking provider"
                @onSelect={{fn (mut this.trackingProvider)}}
            />
        </InputGroup>
        <InputGroup @name="Default 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 default fallback providers"
                    @triggerClass="form-select form-input form-input-sm 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-4 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 traffic-aware provider calculations 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">
                        <Input @type="number" @value={{this.trackingCacheTtlSeconds}} min="15" max="300" class="form-input w-full" />
                    </InputGroup>
                    <InputGroup @name="Route Cache TTL">
                        <Input @type="number" @value={{this.trackingRouteCacheTtlSeconds}} min="60" max="1800" class="form-input w-full" />
                    </InputGroup>
                    <InputGroup @name="Stale Location Threshold">
                        <Input @type="number" @value={{this.trackingStaleLocationThresholdSeconds}} min="30" max="3600" class="form-input w-full" />
                    </InputGroup>
                    <InputGroup @name="Fallback Speed">
                        <Input @type="number" @value={{this.trackingDefaultVehicleSpeedKph}} min="1" max="160" class="form-input w-full" />
                    </InputGroup>
                </div>
            </div>
        {{/if}}
    </ContentPanel>

    <RegistryYield @registry="fleet-ops:component:admin:routing-settings" as |RegistryComponent|>
        <div>
            <RegistryComponent />
        </div>
    </RegistryYield>
</div>

<EmberWormhole @to="next-view-section-subheader-actions">
    <Button
        @type="primary"
        @size="sm"
        @icon="save"
        @text="Save Changes"
        @onClick={{perform this.saveSettings}}
        @isLoading={{or this.saveSettings.isRunning this.loadSettings.isRunning}}
        @disabled={{this.saveSettings.isRunning}}
    />
</EmberWormhole>
