{{define "title"}}Dashboard — Railyard{{end}}
{{define "content"}}
<h1>Dashboard</h1>

<div id="alerts" hx-get="/partials/alerts" hx-trigger="every 3s" hx-swap="innerHTML">
    {{template "alerts_fragment" .}}
</div>

<div id="stats-bar" hx-get="/partials/stats" hx-trigger="every 3s" hx-swap="innerHTML">
    {{template "stats_fragment" .}}
</div>

<div id="yardmaster" hx-get="/partials/yardmaster" hx-trigger="every 3s" hx-swap="innerHTML">
    {{template "yardmaster_fragment" .}}
</div>

<h2>Ready Cars</h2>
<div class="card" id="ready-cars-table" hx-get="/partials/ready-cars" hx-trigger="every 3s" hx-swap="innerHTML">
    {{template "ready_cars_fragment" .}}
</div>

<h2>Engines</h2>
<div class="card" id="engines-table" hx-get="/partials/engines" hx-trigger="every 3s" hx-swap="innerHTML">
    {{template "engines_fragment" .}}
</div>

<h2>Tracks</h2>
<div id="track-cards" hx-get="/partials/tracks" hx-trigger="every 3s" hx-swap="innerHTML">
    {{template "tracks_fragment" .}}
</div>

<div style="display: flex; align-items: center; gap: 1rem; margin-top: 2rem;">
    <p style="color: var(--text-muted); font-size: 0.8rem; margin: 0;">
        Messages in queue: {{.QueueDepth}} | Auto-refreshing every 3s
    </p>
    <button id="refresh-toggle">Pause</button>
</div>
{{end}}

{{define "alerts_fragment"}}
{{if .Escalations}}
<div id="alert-banner" class="active">
    {{len .Escalations}} escalation(s) need attention —
    <a href="/messages">View messages</a>
</div>
{{end}}
{{end}}

{{define "stats_fragment"}}
<div class="grid" style="grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));">
    <div class="card stat">
        <div class="value" style="color: var(--green);">{{.Stats.ActiveEngines}}</div>
        <div class="label">Active Engines</div>
    </div>
    <div class="card stat">
        <div class="value" style="color: var(--accent);">{{.Stats.OpenCars}}</div>
        <div class="label">Open Cars</div>
    </div>
    <div class="card stat">
        <div class="value" style="color: var(--yellow);">{{.Stats.InProgressCars}}</div>
        <div class="label">In Progress</div>
    </div>
    <div class="card stat">
        <div class="value" style="color: var(--red);">{{.Stats.BlockedCars}}</div>
        <div class="label">Blocked</div>
    </div>
    <div class="card stat">
        <div class="value" style="color: var(--green);">{{.Stats.CompletedToday}}</div>
        <div class="label">Completed Today</div>
    </div>
    <div class="card stat">
        <div class="value" style="color: var(--accent);">{{.Stats.TotalTokens}}</div>
        <div class="label">Total Tokens</div>
    </div>
</div>
{{end}}

{{define "engines_fragment"}}
<table>
    <thead>
        <tr>
            <th>Engine</th>
            <th>Track</th>
            <th>Status</th>
            <th>Current Car</th>
            <th>Provider</th>
            <th>Last Activity</th>
        </tr>
    </thead>
    <tbody>
    {{range .Engines}}
        <tr>
            <td><a href="/engines/{{.ID}}">{{.ID}}</a></td>
            <td>{{.Track}}</td>
            <td><span class="badge badge-{{.Status}}">{{.Status}}</span></td>
            <td>
                {{if .CurrentCar}}<a href="/cars/{{.CurrentCar}}">{{.CurrentCar}}</a>{{else}}—{{end}}
            </td>
            <td><span class="badge badge-provider badge-provider-{{.Provider}}">{{.Provider}}</span></td>
            <td>{{timeAgo .LastActivity}}</td>
        </tr>
    {{else}}
        <tr><td colspan="6" style="color: var(--text-muted);">No engines running</td></tr>
    {{end}}
    </tbody>
</table>
{{end}}

{{define "tracks_fragment"}}
<div class="grid">
{{range .Tracks}}
    <div class="card">
        <h3><a href="/cars?track={{.Track}}">{{.Track}}</a></h3>
        <div style="display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem;">
            {{if .Open}}<a href="/cars?track={{.Track}}&status=open,ready"><span class="badge badge-open">{{.Open}} open</span></a>{{end}}
            {{if .InProgress}}<a href="/cars?track={{.Track}}&status=in_progress"><span class="badge badge-in_progress">{{.InProgress}} active</span></a>{{end}}
            {{if .Blocked}}<a href="/cars?track={{.Track}}&status=blocked"><span class="badge badge-blocked">{{.Blocked}} blocked</span></a>{{end}}
            {{if .Done}}<a href="/cars?track={{.Track}}&status=done"><span class="badge badge-done">{{.Done}} done</span></a>{{end}}
            {{if .Merged}}<a href="/cars?track={{.Track}}&status=merged"><span class="badge badge-done">{{.Merged}} merged</span></a>{{end}}
            {{if .Draft}}<a href="/cars?track={{.Track}}&status=draft"><span class="badge badge-draft">{{.Draft}} draft</span></a>{{end}}
        </div>
        <p style="color: var(--text-muted); font-size: 0.8rem; margin-top: 0.5rem;">{{.Total}} total cars</p>
    </div>
{{else}}
    <p style="color: var(--text-muted);">No tracks configured</p>
{{end}}
</div>
{{end}}

{{define "ready_cars_fragment"}}
<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Title</th>
            <th>Track</th>
            <th>Priority</th>
            <th>Waiting</th>
        </tr>
    </thead>
    <tbody>
    {{range .ReadyCars}}
        <tr>
            <td><a href="/cars/{{.ID}}">{{.ID}}</a></td>
            <td>{{.Title}}</td>
            <td>{{.Track}}</td>
            <td>{{.Priority}}</td>
            <td>{{timeAgo .CreatedAt}}</td>
        </tr>
    {{else}}
        <tr><td colspan="5" style="color: var(--text-muted);">No ready cars</td></tr>
    {{end}}
    </tbody>
</table>
{{end}}

{{define "yardmaster_fragment"}}
<div class="card" style="display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
    <div>
        <strong>Yardmaster</strong>
    </div>
    {{if .Yardmaster}}
    <div>
        {{if or (eq .Yardmaster.Status "idle") (eq .Yardmaster.Status "working")}}
            <span class="badge badge-idle">{{.Yardmaster.Status}}</span>
        {{else}}
            <span class="badge badge-dead">{{.Yardmaster.Status}}</span>
        {{end}}
    </div>
    <div>
        <span style="color: var(--text-muted); font-size: 0.85rem;">Heartbeat:</span>
        {{timeAgo .Yardmaster.LastActivity}}
    </div>
    <div>
        <span style="color: var(--text-muted); font-size: 0.85rem;">Uptime:</span>
        {{.Yardmaster.Uptime}}
    </div>
    {{if .Yardmaster.CurrentCar}}
    <div>
        <span style="color: var(--text-muted); font-size: 0.85rem;">Car:</span>
        <a href="/cars/{{.Yardmaster.CurrentCar}}">{{.Yardmaster.CurrentCar}}</a>
    </div>
    {{end}}
    {{else}}
    <div>
        <span class="badge badge-draft">not running</span>
    </div>
    {{end}}
</div>
{{end}}