<div class="positions-replay-component" ...attributes>
    <div class="fleetbase-leaflet-map-container map-wrapper relative" {{set-height (or @mapHeight 300)}}>
        {{#if this.loadPositions.isRunning}}
            <div class="absolute inset-0 h-full w-full">
                <div class="flex items-center justify-center h-full">
                    <Spinner />
                </div>
            </div>
        {{/if}}
        <div class="next-map-container">
            <LeafletMap @lat={{this.latitude}} @lng={{this.longitude}} @zoom={{this.zoom}} @onLoad={{this.didLoadMap}} class="next-leaflet-container-map positions-replay-map" as |layers|>
                <layers.tile @url={{this.tileUrl}} />
                {{#if this.resource}}
                    <layers.tracking-marker
                        @id={{this.resource.id}}
                        @publicId={{this.resource.public_id}}
                        @location={{point-to-coordinates this.resource.location}}
                        @rotationAngle={{or this.resource.heading 0}}
                        @icon={{icon iconUrl=(or this.resource.avatar_url this.resource.photo_url (config "defaultValues.vehicleAvatar")) iconSize=(array 28 28)}}
                        @onAdd={{fn this.onTrackingMarkerAdded this.resource}}
                        @draggable={{false}}
                        as |marker|
                    >
                        <marker.popup @permanent={{false}} @sticky={{true}}>
                            <div class="flex flex-row">
                                <div class="w-14 mr-2">
                                    <img src={{or this.resource.photo_url this.resource.avatar_url}} alt={{this.resourceName}} class="rounded-md w-14 h-12 shadow-sm" />
                                </div>
                                <div class="flex-1">
                                    <div class="text-xs font-semibold">{{this.resourceName}}</div>
                                    <div class="text-xs">ID: {{n-a this.resource.public_id}}</div>
                                    {{#if (eq this.resourceType "vehicle")}}
                                        <div class="text-xs">Serial No: {{n-a this.resource.serial_number this.resource.vin this.resource.internal_id this.resource.id}}</div>
                                        <div class="text-xs">Driver: {{n-a this.resource.driver_name}}</div>
                                    {{/if}}
                                    <div class="text-xs">Status:
                                        <span class="{{if this.resource.online 'text-green-500' 'text-red-400'}}">{{if this.resource.online "Online" "Offline"}}</span></div>
                                    <div class="text-xs truncate">Pos: {{point-coordinates this.resource.location}}</div>
                                </div>
                            </div>
                        </marker.popup>
                        <marker.tooltip @permanent={{false}} @sticky={{true}}>
                            <div class="flex items-center space-x-1">
                                <div class="text-xs font-semibold">{{this.resource.displayName}}</div>
                                <div>•</div>
                                <div class="text-xs {{if this.resource.online 'text-green-500' 'text-red-400'}}">{{if this.resource.online "Online" "Offline"}}</div>
                            </div>
                            <div class="text-xs">ID: {{n-a this.resource.public_id}}</div>
                            {{#if (eq this.resourceType "vehicle")}}
                                <div class="text-xs">Serial No: {{or this.resource.serial_number this.resource.vin this.resource.internal_id this.resource.id "-"}}</div>
                            {{/if}}
                            <div class="text-xs truncate"><FaIcon @icon="location-dot" @size="xs" class="mr-0.5" />{{point-coordinates this.resource.location}}</div>
                        </marker.tooltip>
                    </layers.tracking-marker>
                {{/if}}
                {{#each this.positions as |position index|}}
                    <layers.circle-marker
                        @location={{array position.latitude position.longitude}}
                        @radius={{3}}
                        @color="#3b82f6"
                        @fillColor="#3b82f6"
                        @fillOpacity={{0.6}}
                        @onClick={{fn this.onPositionClicked position}}
                        as |marker|
                    >
                        <marker.popup>
                            <div class="text-xs">
                                <div><strong>Position {{add index 1}}</strong></div>
                                <div>Time: {{position.timestamp}}</div>
                                <div>Speed: {{position.speedKmh}} km/h</div>
                                <div>Heading: {{or position.heading "N/A"}}°</div>
                                <div>Altitude: {{or position.altitude "N/A"}} m</div>
                            </div>
                        </marker.popup>
                    </layers.circle-marker>
                {{/each}}
            </LeafletMap>
        </div>
    </div>

    <div class="positions-replay-filters px-3 pt-2">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-2">
            <div class="filter-group relative">
                <label class="block uppercase tracking-wide text-xs font-medium text-gray-700 dark:text-gray-400 mb-0.5">
                    Date Range
                </label>
                <DatePicker
                    @value={{this.dateFilter}}
                    @range={{true}}
                    @onSelect={{this.onDateRangeChanged}}
                    @autoClose={{true}}
                    @placeholder="Select date range"
                    class="w-full form-input form-input-sm"
                />
            </div>

            <div class="filter-group">
                <label class="block uppercase tracking-wide text-xs font-medium text-gray-700 dark:text-gray-400 mb-0.5">
                    Order
                </label>
                <ModelSelect
                    @modelName="order"
                    @selectedModel={{this.selectedOrder}}
                    @query={{this.orderFilters}}
                    @placeholder="Filter by order"
                    @triggerClass="form-select form-input form-input-sm"
                    @infiniteScroll={{false}}
                    @renderInPlace={{true}}
                    @onChange={{this.onOrderSelected}}
                    as |order|
                >
                    <div class="flex items-center justify-between">
                        <span>{{order.tracking}}</span>
                        <span class="text-xs text-gray-500">{{order.createdAt}}</span>
                    </div>
                </ModelSelect>
            </div>

            <div class="filter-actions flex items-end space-x-2">
                <Button @type="danger" @icon="times" @text={{t "common.clear"}} @disabled={{this.loadPositions.isRunning}} @onClick={{this.clearFilters}} />
            </div>
        </div>
    </div>

    <div class="positions-replay-map-container border-b border-gray-200 dark:border-gray-700">
        <div class="replay-controls px-3 py-2">
            <div class="flex items-center justify-between space-x-2">
                <div class="flex items-center space-x-2">
                    <Button @type="danger" @text="Stop" @icon="stop" @size="xs" @disabled={{not (or this.isReplaying this.isPaused)}} @onClick={{this.stopReplay}} />

                    {{#if (or this.isReplaying this.isPaused)}}
                        {{#if this.isReplaying}}
                            <Button @type="warning" @text="Pause" @icon="pause" @size="xs" @onClick={{this.pauseReplay}} />
                        {{else}}
                            <Button @type="success" @text="Resume" @icon="play" @size="xs" @onClick={{this.startReplay}} />
                        {{/if}}
                    {{else}}
                        <Button @type="success" @text="Play" @icon="play" @size="xs" @disabled={{not this.hasPositions}} @onClick={{this.startReplay}} />
                    {{/if}}

                    <div class="step-controls flex items-center space-x-1 border-l border-gray-300 dark:border-gray-700 pl-2 ml-2">
                        <Button @type="default" @icon="backward-step" @size="xs" @disabled={{not this.hasPositions}} @onClick={{this.stepBackward}} title="Step backward" />
                        <Button @type="default" @icon="forward-step" @size="xs" @disabled={{not this.hasPositions}} @onClick={{this.stepForward}} title="Step forward" />
                    </div>

                    <div class="speed-control border-l border-gray-300 dark:border-gray-700 pl-2 ml-2">
                        <label class="text-xs uppercase tracking-wide font-medium text-gray-700 dark:text-gray-400 mr-1">
                            Speed:
                        </label>
                        <Select
                            @value={{this.replaySpeed}}
                            @options={{this.speedOptions}}
                            @optionValue="value"
                            @optionLabel="label"
                            @onSelect={{this.onSpeedChanged}}
                            class="form-select speed-select"
                        />
                    </div>
                </div>

                {{#if (or this.isReplaying this.isPaused)}}
                    <div class="replay-progress flex items-center space-x-1">
                        <span class="text-sm text-gray-600 dark:text-gray-400">
                            {{this.currentReplayIndex}}/{{this.totalPositions}}
                        </span>
                        <div class="progress-bar w-32 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
                            <div class="progress-fill h-full bg-blue-600 transition-all duration-300" style={{this.replayProgressWidth}}></div>
                        </div>
                        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">
                            {{this.replayProgress}}%
                        </span>
                    </div>
                {{/if}}
            </div>
        </div>
    </div>

    {{#if this.hasPositions}}
        <div class="flex flex-col border-b border-gray-200 dark:border-gray-700">
            <div class="px-3 mb-1">
                <h3 class="text-[11px] uppercase tracking-wide text-gray-500 font-semibold">Position Metrics</h3>
            </div>
            <div class="grid grid-cols-2 lg:grid-cols-4 gap-2 px-2 pb-2">
                <div class="metric-card">
                    <div class="metric-label truncate text-xs text-gray-500 dark:text-gray-400">Total Distance</div>
                    <div class="metric-value font-semibold text-blue-600 dark:text-blue-400">
                        {{this.totalDistance}}
                        km
                    </div>
                </div>
                <div class="metric-card">
                    <div class="metric-label truncate text-xs text-gray-500 dark:text-gray-400">Duration</div>
                    <div class="metric-value font-semibold text-green-600 dark:text-green-400">
                        {{this.formattedDuration}}
                    </div>
                </div>
                <div class="metric-card">
                    <div class="metric-label truncate text-xs text-gray-500 dark:text-gray-400">Max Speed</div>
                    <div class="metric-value font-semibold text-orange-600 dark:text-orange-400">
                        {{this.maxSpeed}}
                        km/h
                    </div>
                </div>
                <div class="metric-card">
                    <div class="metric-label truncate text-xs text-gray-500 dark:text-gray-400">Avg Speed</div>
                    <div class="metric-value font-semibold text-purple-600 dark:text-purple-400">
                        {{this.avgSpeed}}
                        km/h
                    </div>
                </div>
                <div class="metric-card">
                    <div class="metric-label truncate text-xs text-gray-500 dark:text-gray-400">Speeding Events</div>
                    <div class="metric-value font-semibold text-red-600 dark:text-red-400">
                        {{this.speedingCount}}
                    </div>
                </div>
                <div class="metric-card">
                    <div class="metric-label truncate text-xs text-gray-500 dark:text-gray-400">Dwell Times</div>
                    <div class="metric-value font-semibold text-yellow-600 dark:text-yellow-400">
                        {{this.dwellCount}}
                    </div>
                </div>
                <div class="metric-card">
                    <div class="metric-label truncate text-xs text-gray-500 dark:text-gray-400">Acceleration Events</div>
                    <div class="metric-value font-semibold text-indigo-600 dark:text-indigo-400">
                        {{this.accelerationCount}}
                    </div>
                </div>
            </div>
        </div>
    {{/if}}

    {{!-- {{#if this.hasPositions}}
        <div class="positions-replay-timeline">
            <div class="px-3">
                <h3 class="text-[11px] uppercase tracking-wide text-gray-500 font-semibold">Position Timeline</h3>
            </div>
            <div class="timeline-container overflow-x-auto">
                <div class="timeline-track flex space-x-2 pb-4">
                    {{#each this.positions as |position index|}}
                        <div
                            class="timeline-item flex-shrink-0 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 p-2 rounded transition-colors
                                {{if (eq index this.currentReplayIndex) 'bg-blue-100 dark:bg-blue-900'}}"
                            role="button"
                            {{on "click" (fn this.onPositionClicked position)}}
                        >
                            <div class="timeline-marker w-3 h-3 rounded-full bg-blue-600 mx-auto mb-1"></div>
                            <div class="timeline-content text-xs text-center whitespace-nowrap">
                                <div class="font-medium">{{add index 1}}</div>
                                <div class="text-gray-500 dark:text-gray-400">{{position.speedKmh}} km/h</div>
                                <div class="text-gray-400 dark:text-gray-500 text-xxs">
                                    {{format-date position.created_at "HH:mm:ss"}}
                                </div>
                            </div>
                        </div>
                    {{/each}}
                </div>
            </div>
        </div>
    {{/if}} --}}

    {{#if this.hasPositions}}
        <div class="positions-replay-table">
            <div class="px-3">
                <h3 class="text-[11px] uppercase tracking-wide text-gray-500 font-semibold">Position Data</h3>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                    <thead class="bg-gray-50 dark:bg-gray-900">
                        <tr>
                            <th class="px-2 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                #
                            </th>
                            <th class="px-2 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                Timestamp
                            </th>
                            <th class="px-2 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                Latitude
                            </th>
                            <th class="px-2 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                Longitude
                            </th>
                            <th class="px-2 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                Speed (km/h)
                            </th>
                            <th class="px-2 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                Heading
                            </th>
                            <th class="px-2 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                Altitude (m)
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                        {{#each this.positions as |position index|}}
                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 {{if (eq index this.currentReplayIndex) 'bg-blue-50 dark:bg-blue-900'}}">
                                <td class="px-2 py-1 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                                    {{add index 1}}
                                </td>
                                <td class="px-2 py-1 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                                    {{position.timestamp}}
                                </td>
                                <td class="px-2 py-1 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                                    {{format-number position.latitude minimumFractionDigits=6 maximumFractionDigits=6}}
                                </td>
                                <td class="px-2 py-1 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                                    {{format-number position.longitude minimumFractionDigits=6 maximumFractionDigits=6}}
                                </td>
                                <td class="px-2 py-1 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                                    {{position.speedKmh}}
                                </td>
                                <td class="px-2 py-1 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                                    {{or position.heading "N/A"}}
                                </td>
                                <td class="px-2 py-1 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                                    {{or position.altitude "N/A"}}
                                </td>
                            </tr>
                        {{/each}}
                    </tbody>
                </table>
            </div>
        </div>
    {{/if}}

    {{#unless this.hasPositions}}
        {{#if this.loadPositions.isIdle}}
            <div class="empty-state bg-white dark:bg-gray-800 rounded-lg shadow-sm p-12 text-center">
                <FaIcon @icon="map-marked-alt" @size="2x" class="text-gray-400 mb-2" />
                <h3 class="text-base font-semibold text-gray-700 dark:text-gray-300">
                    No Positions Found
                </h3>
                <p class="text-sm text-gray-500 dark:text-gray-400">
                    Try adjusting your filters or select a different date range.
                </p>
            </div>
        {{/if}}
    {{/unless}}
</div>