package templates

// LibrarySwitcher renders the sticky subbar: title + library select on
// the left (title hidden below `sm` — phones need the row width for the
// select + actions + the dashboard's stats widget), optional action
// buttons on the right. `center` is an
// optional slot between them (nil = unused) — the dashboard passes its
// "This Week" stats widget here so it participates in the bar's
// justify-between layout as the middle group.
templ LibrarySwitcher(libData []LibraryData, currentLibraryID string, title string, center templ.Component, actions ...templ.Component) {
	<div
		class="app-subbar backdrop-blur border-b"
		style="background-color: color-mix(in srgb, var(--bg-primary) 88%, transparent); border-color: color-mix(in srgb, var(--text-primary) 6%, transparent);"
	>
		<div class="w-full px-4 sm:px-6 lg:px-8 py-3 flex items-center justify-between gap-4">
			<div class="flex items-center gap-3 min-w-0">
				if title != "" {
					<span class="text-base font-bold tracking-tight shrink-0 hidden sm:inline" style="color: var(--text-primary)">{ title }</span>
				} else {
					<label class="text-sm font-medium" style="color: var(--text-secondary)">Library</label>
				}
				<select
					id="library-select"
					name="library_id"
					class="input w-auto py-1.5 pr-8 cursor-pointer"
				>
				<option value="">All Libraries ({ TotalMediaCount(libData) })</option>
				for _, lib := range libData {
					if lib.Offline {
						if lib.ID == currentLibraryID {
							<option value={ lib.ID } selected>{ lib.Name } ({ lib.MediaCount }) — storage offline</option>
						} else {
							<option value={ lib.ID }>{ lib.Name } ({ lib.MediaCount }) — storage offline</option>
						}
					} else if lib.ID == currentLibraryID {
						<option value={ lib.ID } selected>{ lib.Name } ({ lib.MediaCount })</option>
					} else {
						<option value={ lib.ID }>{ lib.Name } ({ lib.MediaCount })</option>
					}
				}
				</select>
			</div>
			if center != nil {
				@center
			}
			if len(actions) > 0 {
				<div class="flex items-center gap-2">
					for _, action := range actions {
						@action
					}
				</div>
			}
		</div>
		<div
			id="loading-spinner"
			class="hidden fixed inset-0 flex items-center justify-center z-50"
			style="background-color: color-mix(in srgb, var(--bg-primary) 55%, transparent);"
		>
			<div class="animate-spin rounded-full h-12 w-12 border-b-2" style="border-color: var(--accent);"></div>
		</div>
	</div>
}

templ DashboardActions() {
	<button
		data-action="open-dashboard-settings"
		class="icon-btn"
		title="Customize Dashboard"
	>
		@Icon("grid", "h-5 w-5")
	</button>
	<button
		data-action="reload-page"
		class="icon-btn"
		title="Refresh"
	>
		@Icon("refresh", "h-5 w-5")
	</button>
}