<div class="flex min-h-0 flex-1 flex-col" ...attributes>
    <div class="min-h-0 flex-1 overflow-y-auto px-4 py-4 md:px-6">
        <div class="mx-auto flex w-full max-w-6xl flex-col gap-4">
            <section class="rounded-md border border-gray-200 bg-white p-3 shadow-sm dark:border-gray-700 dark:bg-gray-800">
                <div class="grid grid-cols-1 gap-2 md:grid-cols-5">
                    {{#each this.setupSteps as |step index|}}
                        <button
                            type="button"
                            class="rounded-md border p-2 text-left transition
                                {{if step.active 'border-blue-500 bg-blue-50 dark:border-blue-400 dark:bg-blue-500/10' 'border-gray-200 bg-white hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:hover:border-gray-600'}}"
                            {{on "click" (fn this.goToStep index)}}
                        >
                            <div class="flex items-center gap-2">
                                <div
                                    class="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md text-xs
                                        {{if step.active 'bg-blue-600 text-white dark:bg-blue-500' (if step.complete 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300' 'bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-300')}}"
                                >
                                    <FaIcon @icon={{if step.complete "check" step.icon}} />
                                </div>
                                <div class="min-w-0">
                                    <div class="text-[10px] font-semibold uppercase text-gray-400 dark:text-gray-500">{{add index 1}}</div>
                                    <div class="truncate text-xs font-bold text-gray-900 dark:text-gray-100">{{step.label}}</div>
                                </div>
                            </div>
                        </button>
                    {{/each}}
                </div>
            </section>

    {{#if (eq this.activeStep 0)}}
        <section class="rounded-md border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
            <div class="mb-3">
                <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">Choose Provider</h2>
                <p class="text-xs text-gray-500 dark:text-gray-300">Select the provider that will supply device connectivity and telemetry.</p>
            </div>

            {{#if this.loadProviders.isRunning}}
                <div class="flex min-h-[140px] items-center justify-center"><Spinner /></div>
            {{else}}
                <div class="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-4">
                    {{#each this.providerCards as |provider|}}
                        <button
                            type="button"
                            class="flex min-h-[128px] flex-col rounded-md border p-3 text-left transition
                                {{if provider.selected 'border-blue-500 bg-blue-50 dark:border-blue-400 dark:bg-gray-800' 'border-gray-200 bg-white hover:border-blue-300 dark:border-gray-700 dark:bg-gray-800 dark:hover:border-blue-400'}}"
                            disabled={{cannot-write @resource}}
                            {{on "click" (fn this.selectProvider provider)}}
                        >
                            <div class="flex items-start justify-between gap-3">
                                <div class="flex min-w-0 items-center gap-2">
                                    <Image src={{provider.icon}} class="h-7 w-7 rounded" />
                                    <div class="min-w-0">
                                        <div class="truncate text-sm font-bold text-gray-900 dark:text-gray-100">{{provider.label}}</div>
                                        <div class="truncate text-[11px] uppercase text-gray-400 dark:text-gray-500">{{provider.type}}</div>
                                    </div>
                                </div>
                                {{#if provider.selected}}
                                    <Badge @status="success" @hideStatusDot={{true}}>Selected</Badge>
                                {{/if}}
                            </div>
                            <p class="mt-3 line-clamp-2 flex-1 text-xs leading-5 text-gray-500 dark:text-gray-300">{{provider.description}}</p>
                        </button>
                    {{/each}}
                </div>
            {{/if}}
        </section>
    {{else if (eq this.activeStep 1)}}
        <section class="grid grid-cols-1 gap-4 lg:grid-cols-3">
            <div 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">
                <div class="mb-3">
                    <div>
                        <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">Credentials</h2>
                        <p class="text-xs text-gray-500 dark:text-gray-300">Fleet-Ops uses these credentials to test the connection and sync devices.</p>
                    </div>
                </div>

                {{#if this.selectedProvider}}
                    <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 no-input-group-padding text-xs">
                        {{#each this.credentialFields as |field|}}
                            <InputGroup
                                @name={{field.label}}
                                @value={{get @resource.credentials field.name}}
                                @required={{field.required}}
                                @type={{field.type}}
                                @placeholder={{field.placeholder}}
                                @helpText={{field.help_text}}
                                {{on "input" (fn this.setCredential field)}}
                            />
                        {{/each}}
                    </div>
                    {{#if this.hasAdvancedCredentialFields}}
                        <details class="mt-4 rounded-md border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-900/40">
                            <summary class="flex cursor-pointer list-none items-center justify-between gap-3 px-3 py-2 text-xs font-semibold text-gray-700 dark:text-gray-200">
                                <span class="inline-flex items-center gap-2">
                                    <FaIcon @icon="sliders" />
                                    Advanced connection settings
                                </span>
                                <span class="text-[11px] font-normal text-gray-400 dark:text-gray-500">Endpoint overrides</span>
                            </summary>
                            <div class="border-t border-gray-200 p-3 dark:border-gray-700">
                                <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 no-input-group-padding text-xs">
                                    {{#each this.advancedCredentialFields as |field|}}
                                        <InputGroup
                                            @name={{field.label}}
                                            @value={{or (get @resource.credentials field.name) field.default_value}}
                                            @required={{field.required}}
                                            @type={{field.type}}
                                            @placeholder={{field.placeholder}}
                                            @helpText={{field.help_text}}
                                            {{on "input" (fn this.setCredential field)}}
                                        />
                                    {{/each}}
                                </div>
                            </div>
                        </details>
                    {{/if}}
                {{else}}
                    <div class="rounded-md border border-dashed border-gray-300 p-6 text-center text-xs text-gray-500 dark:border-gray-700 dark:text-gray-300">
                        Choose a provider before entering credentials.
                    </div>
                {{/if}}
            </div>

            {{#if this.selectedProvider}}
                <aside class="rounded-md border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
                    <div class="flex items-start gap-3">
                        <Image src={{this.selectedProvider.icon}} class="h-9 w-9 rounded" />
                        <div class="min-w-0">
                            <div class="truncate text-sm font-bold text-gray-900 dark:text-gray-100">{{this.selectedProvider.label}}</div>
                            <p class="mt-1 text-xs leading-5 text-gray-500 dark:text-gray-300">{{this.selectedProvider.description}}</p>
                        </div>
                    </div>
                    <div class="mt-3 flex flex-wrap gap-2">
                        <Badge @status={{if this.selectedProvider.supports_discovery "success" "default"}} @hideStatusDot={{true}}>Discovery</Badge>
                        <Badge @status={{if this.selectedProvider.supports_webhooks "success" "default"}} @hideStatusDot={{true}}>Webhooks</Badge>
                    </div>
                </aside>
            {{/if}}
        </section>
    {{else if (eq this.activeStep 2)}}
        <section class="rounded-md border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
            <div class="mb-3">
                <div>
                    <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">Test Connection</h2>
                    <p class="text-xs text-gray-500 dark:text-gray-300">Confirm the provider accepts the credentials before saving this connection.</p>
                </div>
            </div>

            <div
                class="rounded-md border p-4 text-xs transition
                    {{if (eq this.connectionState 'success') 'border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-900/10'}}
                    {{if (eq this.connectionState 'failed') 'border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-900/10'}}
                    {{if (eq this.connectionState 'testing') 'border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-900/10'}}
                    {{if (eq this.connectionState 'idle') 'border-dashed border-gray-300 bg-white dark:border-gray-700 dark:bg-gray-800'}}"
            >
                <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
                    <div class="flex min-w-0 items-start gap-3">
                        <div
                            class="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-md
                                {{if (eq this.connectionState 'success') 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300'}}
                                {{if (eq this.connectionState 'failed') 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300'}}
                                {{if (eq this.connectionState 'testing') 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300 animate-pulse'}}
                                {{if (eq this.connectionState 'idle') 'bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-300'}}"
                        >
                            {{#if (eq this.connectionState "testing")}}
                                <Spinner />
                            {{else if (eq this.connectionState "success")}}
                                <FaIcon @icon="check" />
                            {{else if (eq this.connectionState "failed")}}
                                <FaIcon @icon="triangle-exclamation" />
                            {{else}}
                                <FaIcon @icon="plug" />
                            {{/if}}
                        </div>
                        <div class="min-w-0">
                            <div class="text-sm font-bold text-gray-900 dark:text-gray-100">{{this.connectionStateTitle}}</div>
                            {{#if this.connectionStateMessage}}
                                <p class="mt-1 max-w-3xl text-xs leading-5 text-gray-600 dark:text-gray-300">{{this.connectionStateMessage}}</p>
                            {{/if}}

                            {{#if this.hasConnectionMetadata}}
                                <div class="mt-3 flex flex-wrap gap-2">
                                    {{#each this.connectionMetadataEntries as |item|}}
                                        <span class="inline-flex items-center rounded-md border border-gray-200 bg-white px-2 py-1 text-[11px] text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
                                            <span class="mr-1 font-semibold text-gray-900 dark:text-gray-100">{{item.label}}</span>
                                            {{item.value}}
                                        </span>
                                    {{/each}}
                                </div>
                            {{/if}}
                        </div>
                    </div>

                    <div class="flex flex-shrink-0 items-center justify-end">
                        {{#if (eq this.connectionState "failed")}}
                            <Button @icon="rotate" @text="Retry Test" @size="xs" @isLoading={{this.testConnection.isRunning}} @disabled={{this.testConnection.isRunning}} @onClick={{perform this.testConnection}} />
                        {{else if (eq this.connectionState "success")}}
                            <Button @icon="rotate" @text="Test Again" @size="xs" @isLoading={{this.testConnection.isRunning}} @disabled={{this.testConnection.isRunning}} @onClick={{perform this.testConnection}} />
                        {{else if (eq this.connectionState "idle")}}
                            <Button @icon="plug" @text="Test Connection" @size="xs" @isLoading={{this.testConnection.isRunning}} @disabled={{this.testConnection.isRunning}} @onClick={{perform this.testConnection}} />
                        {{/if}}
                    </div>
                </div>

                <div
                    class="-mx-4 mt-4 border-t px-4
                        {{if (eq this.connectionState 'success') 'border-green-200 dark:border-green-800'}}
                        {{if (eq this.connectionState 'failed') 'border-red-200 dark:border-red-800'}}
                        {{if (eq this.connectionState 'testing') 'border-blue-200 dark:border-blue-800'}}
                        {{if (eq this.connectionState 'idle') 'border-gray-300 dark:border-gray-700'}}"
                >
                    <div class="flex flex-col gap-2 py-2 md:flex-row md:items-center md:justify-between">
                        <button type="button" class="inline-flex items-center gap-2 text-xs font-semibold text-blue-600 hover:text-blue-700 dark:text-blue-300 dark:hover:text-blue-200" {{on "click" this.toggleConnectionDiagnostics}}>
                            <FaIcon @icon={{if this.showConnectionDiagnostics "chevron-up" "chevron-down"}} class="text-[10px]" />
                            <span>{{if this.showConnectionDiagnostics "Hide diagnostics" "Show diagnostics"}}</span>
                        </button>

                        {{#if this.showConnectionDiagnostics}}
                            <Button @icon="copy" @text="Copy diagnostics" @size="xs" @disabled={{not this.hasConnectionDiagnostics}} @onClick={{this.copyConnectionDiagnostics}} />
                        {{/if}}
                    </div>

                    {{#if this.showConnectionDiagnostics}}
                        <div class="mt-3 max-h-56 overflow-y-auto rounded-md border border-gray-800 bg-gray-900 p-3 font-mono text-[11px] leading-5 shadow-inner dark:border-gray-700 dark:bg-gray-900">
                            {{#each this.connectionDiagnosticEntries as |entry|}}
                                <div
                                    class="flex gap-3
                                        {{if (eq entry.tone 'success') 'text-green-300'}}
                                        {{if (eq entry.tone 'danger') 'text-red-300'}}
                                        {{if (eq entry.tone 'info') 'text-blue-300'}}
                                        {{if (eq entry.tone 'warning') 'text-yellow-300'}}
                                        {{if (eq entry.tone 'muted') 'text-gray-300'}}"
                                >
                                    <span class="flex-shrink-0 text-gray-500">[{{entry.time}}]</span>
                                    <span class="min-w-0 break-words">{{entry.text}}</span>
                                </div>
                            {{/each}}
                        </div>
                    {{/if}}
                </div>
            </div>

        </section>
    {{else if (eq this.activeStep 3)}}
        <section class="rounded-md border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
            <div class="mb-3">
                <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">Configure Integration</h2>
                <p class="text-xs text-gray-500 dark:text-gray-300">Name the connection and confirm any provider-facing URLs.</p>
            </div>

            <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 no-input-group-padding text-xs">
                <InputGroup @value={{@resource.name}} @name="Integration Name" />

                {{#if this.selectedProvider.supports_webhooks}}
                    <InputGroup @name="Webhook URL" @wrapperClass="lg:col-span-2">
                        {{#if this.webhookUrl}}
                            <ClickToCopy @value={{this.webhookUrl}} class="w-full">
                                <Input @value={{this.webhookUrl}} class="form-input w-full" readonly />
                            </ClickToCopy>
                            <small class="form-text text-muted mt-1">Use this public URL in the provider dashboard.</small>
                        {{else}}
                            <div class="rounded-md border border-yellow-200 bg-yellow-50 p-3 text-xs text-yellow-800 dark:border-yellow-700 dark:bg-gray-800 dark:text-yellow-300">
                                The webhook URL will be available after this connection has a public ID.
                            </div>
                        {{/if}}
                    </InputGroup>
                {{else}}
                    <div class="rounded-md border border-dashed border-gray-300 p-3 text-xs text-gray-500 dark:border-gray-700 dark:text-gray-300 lg:col-span-2">
                        This provider does not require Fleet-Ops webhook configuration.
                    </div>
                {{/if}}
            </div>

        </section>
    {{else}}
        <section class="rounded-md border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
            <div class="mb-3">
                <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">Hardware Identity</h2>
                <p class="text-xs text-gray-500 dark:text-gray-300">Optional blackbox metadata for provider hardware installed in the fleet.</p>
            </div>
            <div class="grid grid-cols-1 gap-2 lg:grid-cols-3 no-input-group-padding text-xs">
                <InputGroup @value={{@resource.model}} @name="Model" />
                <InputGroup @value={{@resource.serial_number}} @name="Serial Number" />
                <InputGroup @value={{@resource.firmware_version}} @name="Firmware Version" />
                <InputGroup @value={{@resource.imei}} @name="IMEI" />
                <InputGroup @value={{@resource.imsi}} @name="IMSI" />
                <InputGroup @value={{@resource.iccid}} @name="ICCID" />
            </div>
        </section>

        <CustomField::Yield @subject={{@resource}} @wrapperClass="bordered-top" />

        <RegistryYield @registry="fleet-ops:component:telematic:form" as |RegistryComponent|>
            <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
        </RegistryYield>
    {{/if}}
        </div>
    </div>

    <footer class="flex-shrink-0 border-t border-gray-200 bg-white px-4 py-3 shadow-sm dark:border-gray-700 dark:bg-gray-900 dark:shadow-sm dark:shadow-black/30 md:px-6">
        <div class="mx-auto flex w-full max-w-6xl flex-col gap-2 md:flex-row md:items-center md:justify-between">
            <div class="text-xs text-gray-500 dark:text-gray-300">{{@footerHelp}}</div>
            <div class="flex items-center justify-end gap-2">
                <Button @icon="times" @text="Cancel" @size="sm" @onClick={{@onCancel}} />
                <Button @icon="arrow-left" @text="Back" @size="sm" @disabled={{not this.canGoBack}} @onClick={{this.previousStep}} />
                <Button
                    @icon={{this.primaryFooterIcon}}
                    @text={{this.primaryFooterLabel}}
                    @type="primary"
                    @size="sm"
                    @isLoading={{@isSaving}}
                    @disabled={{not this.canUsePrimaryAction}}
                    @onClick={{this.primaryFooterAction}}
                />
            </div>
        </div>
    </footer>
</div>
