<div class="flex h-full flex-col bg-gray-50 dark:bg-gray-900">
    <section class="flex-shrink-0 border-b border-gray-200 bg-white px-4 py-4 shadow-sm dark:border-gray-700 dark:bg-gray-900 md:px-6">
        <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
            <div class="min-w-0">
                <div class="text-xs font-semibold uppercase text-gray-400 dark:text-gray-500">Fuel transaction review</div>
                <h1 class="truncate text-lg font-bold text-gray-900 dark:text-gray-100">{{@model.provider_transaction_id}}</h1>
                <div class="mt-2 flex flex-wrap gap-2 text-xs text-gray-500 dark:text-gray-300">
                    <Badge @status={{@model.sync_status}}>{{@model.sync_status}}</Badge>
                    <span>{{@model.provider}}</span>
                    <span>{{n-a (format-date-fns @model.transaction_at "dd MMM yyyy HH:mm")}}</span>
                    <span>{{n-a @model.station_name}}</span>
                </div>
            </div>
            <div class="flex flex-wrap items-center gap-2">
                <Button @icon="arrow-left" @text="Back" @size="sm" @onClick={{transition-to "management.fuel-transactions.index"}} />
                <Button @icon="rotate" @text="Reprocess" @type="primary" @size="sm" @isLoading={{this.reprocess.isRunning}} @onClick={{perform this.reprocess}} />
            </div>
        </div>
    </section>

    <div class="min-h-0 flex-1 overflow-y-auto p-4 md:p-6">
        <div class="mx-auto grid w-full max-w-7xl grid-cols-1 gap-4 lg:grid-cols-3">
            <section class="rounded-md border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800 lg:col-span-2">
                <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">Provider Bill Data</h2>
                <div class="mt-4 grid grid-cols-1 gap-3 md:grid-cols-3">
                    <div class="rounded-md border border-gray-200 p-3 dark:border-gray-700"><div class="text-xs text-gray-500">Vehicle/Card</div><div class="mt-1 font-semibold text-gray-900 dark:text-gray-100">{{n-a @model.vehicle_card_id}}</div></div>
                    <div class="rounded-md border border-gray-200 p-3 dark:border-gray-700"><div class="text-xs text-gray-500">Liters</div><div class="mt-1 font-semibold text-gray-900 dark:text-gray-100">{{n-a @model.volume}}</div></div>
                    <div class="rounded-md border border-gray-200 p-3 dark:border-gray-700"><div class="text-xs text-gray-500">Amount</div><div class="mt-1 font-semibold text-gray-900 dark:text-gray-100">{{n-a @model.amount}} {{@model.currency}}</div></div>
                    <div class="rounded-md border border-gray-200 p-3 dark:border-gray-700"><div class="text-xs text-gray-500">Vehicle</div><div class="mt-1 font-semibold text-gray-900 dark:text-gray-100">{{n-a @model.vehicle_name}}</div></div>
                    <div class="rounded-md border border-gray-200 p-3 dark:border-gray-700"><div class="text-xs text-gray-500">Trip</div><div class="mt-1 font-semibold text-gray-900 dark:text-gray-100">{{n-a @model.trip_number}}</div></div>
                    <div class="rounded-md border border-gray-200 p-3 dark:border-gray-700"><div class="text-xs text-gray-500">Fuel Report</div><div class="mt-1 font-semibold text-gray-900 dark:text-gray-100">{{n-a @model.fuel_report_id}}</div></div>
                </div>

                <div class="mt-4 grid grid-cols-1 gap-4 lg:grid-cols-2">
                    <div>
                        <h3 class="text-xs font-bold uppercase text-gray-400">Normalized Payload</h3>
                        <pre class="mt-2 max-h-80 overflow-auto rounded-md bg-gray-900 p-3 text-[11px] leading-5 text-gray-100">{{this.normalizedPayloadJson}}</pre>
                    </div>
                    <div>
                        <h3 class="text-xs font-bold uppercase text-gray-400">Raw Payload</h3>
                        <pre class="mt-2 max-h-80 overflow-auto rounded-md bg-gray-900 p-3 text-[11px] leading-5 text-gray-100">{{this.rawPayloadJson}}</pre>
                    </div>
                </div>
            </section>

            <aside class="space-y-4">
                <section class="rounded-md border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
                    <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">Manual Match</h2>
                    <p class="mt-1 text-xs leading-5 text-gray-500 dark:text-gray-300">Use a Fleet-Ops UUID or public ID when automatic matching cannot identify the vehicle or order.</p>
                    <div class="mt-3 space-y-3 no-input-group-padding">
                        <InputGroup @name="Vehicle ID">
                            <Input class="form-input w-full" @value={{this.vehicleId}} {{on "input" this.setVehicleId}} />
                        </InputGroup>
                        <Button @icon="truck" @text="Match Vehicle" @type="primary" @size="sm" @isLoading={{this.matchVehicle.isRunning}} @disabled={{not this.vehicleId}} @onClick={{perform this.matchVehicle}} />
                        <InputGroup @name="Order / Trip ID">
                            <Input class="form-input w-full" @value={{this.orderId}} {{on "input" this.setOrderId}} />
                        </InputGroup>
                        <Button @icon="route" @text="Match Order" @size="sm" @isLoading={{this.matchOrder.isRunning}} @disabled={{not this.orderId}} @onClick={{perform this.matchOrder}} />
                    </div>
                </section>

                <section class="rounded-md border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
                    <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">Review State</h2>
                    <p class="mt-1 text-xs leading-5 text-gray-500 dark:text-gray-300">Mark noisy provider records as reviewed or ignored without deleting the audit ledger.</p>
                    <div class="mt-3 flex flex-wrap gap-2">
                        <Button @icon="check" @text="Mark Reviewed" @size="sm" @isLoading={{this.review.isRunning}} @onClick={{perform this.review "reviewed"}} />
                        <Button @icon="ban" @text="Ignore" @type="danger" @size="sm" @isLoading={{this.review.isRunning}} @onClick={{perform this.review "ignored"}} />
                    </div>
                </section>
            </aside>
        </div>
    </div>
</div>
