<div class="fleet-ops-control-hub" data-test-fleet-ops-maintenance-hub>
    <section class="fleet-ops-control-hub-header">
        <div class="fleet-ops-control-hub-header-copy">
            <div class="fleet-ops-control-hub-eyebrow">Maintenance</div>
            <h1 class="fleet-ops-control-hub-title">Maintenance Hub</h1>
            <p class="fleet-ops-control-hub-subtitle">Plan recurring service, coordinate work orders, and keep assets ready for daily operations.</p>
        </div>
        <div class="fleet-ops-control-hub-header-actions">
            <Button @icon="refresh" @size="sm" @helpText={{t "common.reload"}} @onClick={{perform this.loadHub}} />
        </div>
    </section>

    <div class="fleet-ops-control-hub-body">
        <section class="fleet-ops-control-hub-kpis">
            {{#each this.kpis as |kpi|}}
                <LinkTo @route={{kpi.route}} class="fleet-ops-control-hub-kpi fleet-ops-control-hub-tone-{{kpi.tone}}" data-test-fleet-ops-maintenance-kpi={{kpi.key}}>
                    <div class="fleet-ops-control-hub-kpi-copy">
                        <div class="fleet-ops-control-hub-kpi-label">{{kpi.label}}</div>
                        <div class="fleet-ops-control-hub-kpi-value">{{kpi.value}}</div>
                        <div class="fleet-ops-control-hub-kpi-caption">{{kpi.caption}}</div>
                        <div class="fleet-ops-control-hub-kpi-action">
                            <span>Open {{kpi.label}}</span>
                            <FaIcon @icon="arrow-right" />
                        </div>
                    </div>
                    <div class="fleet-ops-control-hub-kpi-icon"><FaIcon @icon={{kpi.icon}} /></div>
                </LinkTo>
            {{/each}}
        </section>

        <section class="fleet-ops-control-hub-grid">
            <div class="fleet-ops-control-hub-main">
                {{#each this.sections as |section|}}
                    <div class="fleet-ops-control-hub-panel" data-test-fleet-ops-maintenance-section={{section.key}}>
                        <div class="fleet-ops-control-hub-panel-header">
                            <div>
                                <h2>{{section.title}}</h2>
                                <p>{{section.description}}</p>
                            </div>
                        </div>

                        <div class="fleet-ops-control-hub-link-grid">
                            {{#each section.links as |link|}}
                                <LinkTo @route={{link.route}} class="fleet-ops-control-hub-link" data-test-fleet-ops-hub-card={{link.label}}>
                                    <span class="fleet-ops-control-hub-link-icon"><FaIcon @icon={{link.icon}} /></span>
                                    <span class="fleet-ops-control-hub-link-copy">
                                        <span class="fleet-ops-control-hub-link-title">{{link.label}}</span>
                                        <span class="fleet-ops-control-hub-link-description">{{link.description}}</span>
                                    </span>
                                    <span class="fleet-ops-control-hub-link-count">{{link.count}}</span>
                                </LinkTo>
                            {{/each}}
                        </div>
                    </div>
                {{/each}}
            </div>

            <aside class="fleet-ops-control-hub-side">
                <div class="fleet-ops-control-hub-panel">
                    <div class="fleet-ops-control-hub-panel-header">
                        <div>
                            <h2>Action Queue</h2>
                            <p>Signals from schedules, work orders, parts, and equipment.</p>
                        </div>
                    </div>

                    <div class="fleet-ops-control-hub-action-list">
                        {{#each this.actions as |action|}}
                            {{#if action.route}}
                                <LinkTo @route={{action.route}} @query={{action.query}} class="fleet-ops-control-hub-action fleet-ops-control-hub-tone-{{action.tone}}">
                                    <FaIcon @icon={{action.icon}} />
                                    <span>
                                        <strong>{{action.label}}</strong>
                                        <small>{{action.description}}</small>
                                    </span>
                                </LinkTo>
                            {{else}}
                                <div class="fleet-ops-control-hub-action fleet-ops-control-hub-tone-{{action.tone}}">
                                    <FaIcon @icon={{action.icon}} />
                                    <span>
                                        <strong>{{action.label}}</strong>
                                        <small>{{action.description}}</small>
                                    </span>
                                </div>
                            {{/if}}
                        {{/each}}
                    </div>
                </div>

                <div class="fleet-ops-control-hub-doc-note">
                    <div class="fleet-ops-control-hub-doc-note-heading">
                        <FaIcon @icon="lightbulb" />
                        <span>Guides</span>
                    </div>
                    <p class="fleet-ops-control-hub-doc-note-copy">Read the guide before changing maintenance workflows.</p>
                    <div class="fleet-ops-control-hub-doc-grid">
                        {{#each this.docs as |doc|}}
                            <button type="button" class="fleet-ops-control-hub-doc-link" {{on "click" (fn this.openDocs doc)}}>
                                <FaIcon @icon={{doc.icon}} />
                                <span class="fleet-ops-control-hub-doc-copy">
                                    <strong>Read the guide on {{doc.label}}</strong>
                                    <small>{{doc.description}}</small>
                                </span>
                            </button>
                        {{/each}}
                    </div>
                </div>
            </aside>
        </section>
    </div>
</div>

{{outlet}}
